We Keep Coding

Chrome extensions access to varible

Hey I'm writing chrome extension and I need to get access to blurSpy in this code:
var updateCt = (function() {
var onBlurHandler = function () {
window.honestRespondentWarning_popup.open();
};
var blurSpy = new BlurSpy(onBlurHandler, null, -1);
$(function() {
if ( document.hasFocus() ) {
blurSpy.start();
} else {
$(window).one("focus", function() {
if ( document.hasFocus() ) {
blurSpy.start();
}
});
}
});
return function() {
document.forms["questionForm"]["wb"].value = blurSpy.getBlursCount();
eraseCookie('blurs');
setEndTimeCookie();
}
})();
This code is in script tag in site main html file. Is it doable?
ofc I used that trick to gain access to console-like js commands execution so my extension can do that if it is possible from console on site.

Character does not bind with Ckeditor bind

i am using a plugin to add new language characters for Ckeditor, i have debug this plugin it is changing English to my desired language character but does not showing me this new character in Editor.
One thing more
CKEDITOR.plugins.add( 'plugin_Name',
{
init : function( editor )
{
editor.on( 'contentDom', function( e ) {
var doc = editor.document.$;
if ( CKEDITOR.env.ie ) { // If Internet Explorer.
doc.attachEvent("onkeydown", DenIE_OnKeyDown ) ;
doc.attachEvent("onkeypress", DenIE_OnKeyPress ) ;
} else { // If Gecko.
doc.addEventListener( 'keydown', DenGecko_OnKeyDown, true ) ;
doc.addEventListener( 'keypress', DenGecko_OnKeyPress, true ) ;
}
});
} //Init
} );
I have console doc variable this returns
Object { $: HTMLDocument → blank }

CKEditor Character Count (charcount) is not working

If anyone has any experience with adding a charcount (Characters count) plugin for CKEditor, I sure could use a hand. This is my understanding of what needs to be done to add a plugin to CKEditor to count characters.
Create a plugin.js file which has the JavaScript to count the characters, and place this file at /web/server/root/ckeditor/plugins/charcount/plugin.js
Add the line config.extraPlugin = 'charcount'; to the config file at /web/server/root/ckeditor/config.js
Style the Character Count by adding CSS to the file at /web/server/root/ckeditor/skin/skin_name/editor.css.
Here is the plugin.js file I am using. Note: This JavaScript comes from the first post from this thread on the CKEditor forum.
CKEDITOR.plugins.add( 'charcount',
{
init : function( editor )
{
var defaultLimit = 'unlimited';
var defaultFormat = '<span class="cke_charcount_count">%count%</span> of <span class="cke_charcount_limit">%limit%</span> characters';
var limit = defaultLimit;
var format = defaultFormat;
var intervalId;
var lastCount = 0;
var limitReachedNotified = false;
var limitRestoredNotified = false;
if ( true )
{
function counterId( editor )
{
return 'cke_charcount_' + editor.name;
}
function counterElement( editor )
{
return document.getElementById( counterId(editor) );
}
function updateCounter( editor )
{
var count = editor.getData().length;
if( count == lastCount ){
return true;
} else {
lastCount = count;
}
if( !limitReachedNotified && count > limit ){
limitReached( editor );
} else if( !limitRestoredNotified && count < limit ){
limitRestored( editor );
}
var html = format.replace('%count%', count).replace('%limit%', limit);
counterElement(editor).innerHTML = html;
}
function limitReached( editor )
{
limitReachedNotified = true;
limitRestoredNotified = false;
editor.setUiColor( '#FFC4C4' );
}
function limitRestored( editor )
{
limitRestoredNotified = true;
limitReachedNotified = false;
editor.setUiColor( '#C4C4C4' );
}
editor.on( 'themeSpace', function( event )
{
if ( event.data.space == 'bottom' )
{
event.data.html += '<div id="'+counterId(event.editor)+'" class="cke_charcount"' +
' title="' + CKEDITOR.tools.htmlEncode( 'Character Counter' ) + '"' +
'> </div>';
}
}, editor, null, 100 );
editor.on( 'instanceReady', function( event )
{
if( editor.config.charcount_limit != undefined )
{
limit = editor.config.charcount_limit;
}
if( editor.config.charcount_format != undefined )
{
format = editor.config.charcount_format;
}
}, editor, null, 100 );
editor.on( 'dataReady', function( event )
{
var count = event.editor.getData().length;
if( count > limit ){
limitReached( editor );
}
updateCounter(event.editor);
}, editor, null, 100 );
editor.on( 'key', function( event )
{
//updateCounter(event.editor);
}, editor, null, 100 );
editor.on( 'focus', function( event )
{
editorHasFocus = true;
intervalId = window.setInterval(function (editor) {
updateCounter(editor)
}, 1000, event.editor);
}, editor, null, 100 );
editor.on( 'blur', function( event )
{
editorHasFocus = false;
if( intervalId )
clearInterval(intervalId);
}, editor, null, 100 );
}
}
});
Here is my config.js file. Notice I do have config.extraPlugin = 'charcount'; near the beginning of this file.
CKEDITOR.editorConfig = function( config ) {
config.extraPlugin = 'charcount';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Source','Save' ] },
{ name: 'editing', items : [ 'Find','Replace','Scayt', 'TextColor' ] },
{ name: 'insert', items : [ 'Image','CodeSnippet','Table','HorizontalRule' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','ShowBlocks','-' ] }
];
};
I added the following to the bottom of my editor.css file.
.cke_skin_kama .cke_charcount {
display:block;
float:right;
margin-top:5px;
margin-right:3px;
color:#60676A;
}
.cke_charcount span.cke_charcount_count,
.cke_charcount span.cke_charcount_limit {
font-style: italic;
}
Here is my stage.html file.
<script src="ckeditor/ckeditor.js"></script>
<textarea id="editor1"></textarea>
<script> CKEDITOR.replace('editor1'); </script>
Here is a screen shot of the expected outcome, where the bottom right hand corner of my CKEditor should have text which counts the characters.
Here is a screen shot showing that my CKEditor does not have a character count.
There are some other similar threads on this. However, the similar threads add a button to the CKEditor toolbar. The JavaScript I am using does not add a button to the toolbar, and instead displays text at the bottom right-hand corner of CKEditor, which is what I am attempting to achieve. Hopefully this difference makes this post unique enough to not be considered a duplicate.
If it helps, my Web Server OS is Linux Mint version 17.2.

I was not able to figure out what the issue is with the JavaScript I posted in my original question. However, I did come across a solution to this issue, which I want to share here in case others happen upon this post with a similar issue. I found a plugin for CKEditor called the Word Count & Char Count plugin. This plugin can be downloaded from http://ckeditor.com/addon/wordcount or https://github.com/w8tcha/CKEditor-WordCount-Plugin. This plugin totally works, and display the number of words, paragraphs and/or characters in CKEditor.

How do you call an AngularJS function from javascript?

I am trying to call the AngularJS method advanceSlide() from my Javascript after the if statement, however,this line:
angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();
doesn't seem to be working. Here is the full code.
Javascript
window.onload = function() {
cast.receiver.logger.setLevelValue(0);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
console.log('Starting Receiver Manager');
// handler for the CastMessageBus message event
window.messageBus.onMessage = function(event) {
console.log('Message [' + event.senderId + ']: ' + event.data);
// display the message from the sender
displayText(event.data);
if (event.data == "quit") {
angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();
};
// inform all senders on the CastMessageBus of the incoming message event
// sender message listener will be invoked
window.messageBus.send(event.senderId, event.data);
}
ANGULARJS
var FotoSpill = angular.module('FotoSpill', []);
FotoSpill.config(['$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider ) {$routeProvider.when('/tag/:tag');}]);
FotoSpill.controller('slideshow', function ( $scope, $http, $timeout, $route, $location ) {
// Set the API endpoint
var api = 'https://api.instagram.com/v1/locations/436022/media/recent?access_token=257058201.9af4692.3d68e63b114944a0be332da732923a23&callback=JSON_CALLBACK',
newReq, refreshApi;
var seconds = 1000;
$scope.fetchImages = function() {
$scope.loadingClass = 'loading';
$scope.imgCurrent = 0;
// if ( ! $route.current )
// $location.path( '/tag/' + $scope.tag );
// else if ( angular.isDefined( $route.current.params.tag ) )
// $scope.tag = $route.current.params.tag;
$http.jsonp(
api.replace( '%tag%', $scope.tag )
).success( function( data ) {
delete $scope.loadingClass;
$scope.images = data.data;
// Set the first image active
if ( data.data.length )
$scope.makeActiveSlide( $scope.imgCurrent );
// Cancel the previous update request
if ( refreshApi )
$timeout.cancel( refreshApi );
// Check for new images on every loop
if ( data.data.length )
refreshApi = $timeout( $scope.fetchImages, 60*seconds );
}).error( function() {
delete $scope.loadingClass;
refreshApi = $timeout( $scope.fetchImages, 2*seconds );
});
}
// Fetch images
$timeout( $scope.fetchImages );
$scope.advanceSlide = function() {
// Method 1
// Use a classname to highlight the current active slide
if ( angular.isDefined( $scope.images ) && $scope.images.length )
$scope.makeActiveSlide( $scope.imgCurrent + 1 );
$timeout( $scope.advanceSlide, 6*seconds ); //time between slide transition
}
}
).filter(
'escape', function () {
return function( input ) {
return escape( input );
}
}
);

you need to apply your changes
angular.element(document.getElementById('FotoSpill')).scope().$apply('$scope.advanceSlide()');
try that

Don't know how is your HTML, but it seems the problem is about the DOM selected, or say, jqLite selecter.
If you are using something like <div ng-controller="slideshow"></div>, you can use:
angular.element('[ng-controller=slideshow]').scope().$apply('advanceSlide()');
This code first try to find the correct DOM node regarding the scope you want to access with angular.element, then retrieve its scope through scope(), finally $apply a expression in the context of the scope.

How to retrieve the ajax data whose loading requires a mouse click with PhantomJS or other tools

I'm using PhantomJS to retrieve this page: Target Page Link. The contents I need are under the "行政公告" and "就業徵才公告" tabs. Because this page is written in Chinese, in case you cannot find the tabs, you can use "find" function of the browsers to find the "行政公告" and "就業徵才公告" tabs. Because the contents under the "行政公告" tab are the loaded as the default option, I can easily use the script below to retrieve the page:
var page = require('webpage').create();
var url = 'http://sa.ttu.edu.tw/bin/home.php';
page.open(url, function (status) {
var js = page.evaluate(function () {
return document;
});
console.log(js.all[0].outerHTML);
phantom.exit();
});
But the contents under the "就業徵才公告" tab are not loaded after I use the PhamtomJS to emulate the mouse click with the code below:
var page = require('webpage').create();
var url = 'http://sa.ttu.edu.tw/bin/home.php';
page.open(url, function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
// jQuery is loaded, now manipulate the DOM
$('#sm_adf63b93c89375a0bade42e5360b73274_1_Dyn_2_1').trigger('mouseover');
});
var js = page.evaluate(function () {
return document;
});
console.log(js.all[0].outerHTML);
phantom.exit();
});
This doesn't work as the contents under the "就業徵才公告" tab are not loaded. How should I do to retrieve the contents under the "就業徵才公告" tab?
Update:
After read a PhantomJS example, I refactored the code to below. It didn't work because the contents under the "就業徵才公告" tab are not loaded.
var page = require('webpage').create();
var address = 'http://sa.ttu.edu.tw/bin/home.php';
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
window.setTimeout(function () {
var results = page.evaluate(function() {
$('#sm_adf63b93c89375a0bade42e5360b73274_1_Dyn_2_1').trigger('mouseover');
return document.documentElement.innerHTML;
});
console.log(results);
phantom.exit();
}, 5000);
}
});
If any way could solve this problem is welcomed. Not limited to PhamtoJS.

Tested this code, and it outputs the correct image with the desired tab selected. It wasn't so straightforward because of the underlying structure of the page. Hopefully you can use this as a bit of a learning exercise in processing the DOM.
// utility function to send mouseclick event to an element
function mouseclick( element ) {
// create a mouse click event
var event = document.createEvent( 'MouseEvents' );
event.initMouseEvent( 'click', true, true, window, 1, 0, 0 );
// send click to element
element.dispatchEvent( event );
}
// final function called, output screenshot, exit
function after_clicked( page ) {
console.log( "+after_clicked()" );
page.render( "after_click.png" );
console.log( "Done" );
phantom.exit( 0 );
}
// middle function, click on desired tab
function click_div( page ) {
console.log( "+click_div()" );
var clicked = page.evaluate(
function ( mouseclick_fn ) {
// want the div with class "submenu"
var div = document.querySelector( "div.submenu" );
if ( ! div ) {
return false;
}
// want all the list elements in the div
var li_array = div.querySelectorAll( "li" );
if ( ! li_array ) {
return false;
}
// we want the 2nd list element
var li2 = li_array[1];
if ( ! li2 ) {
return false;
}
// want the anchor inside the 2nd list element
var anchor = li2.querySelector( "a" );
if ( ! anchor ) {
return false;
}
// must focus on anchor to trigger underlying javascript on page
anchor.focus();
// want the div within this anchor, so we can click on the div
var element = anchor.querySelector( "div" );
if ( ! element ) {
return false;
}
// click on this inner div
mouseclick_fn( element );
return true;
}, mouseclick
);
if ( ! clicked ) {
console.log( "Failed to find desired element" );
phantom.exit( 1 );
return;
}
console.log( "- clicked, waiting 5 seconds" );
window.setTimeout(
function () {
after_clicked( page );
},
5000
);
}
// first function, create page, load page
function main() {
console.log( "+main()" );
var page = require('webpage').create();
page.open(
"http://sa.ttu.edu.tw/bin/home.php",
function (status) {
if ( status !== 'success' ) {
console.log( "Failed" );
phantom.exit( 1 );
return;
}
console.log( "- page loaded, waiting 2 seconds..." );
window.setTimeout(
function () {
click_div( page );
},
2000
);
}
);
}
main();