We Keep Coding

Plugin opens only after two clicks

I have a custom made tooltip plugin which should be opened by another plugin. But the plugin opens only after the second click and I can't figure out what the problem is.
The whole thing can be tested under. You have to click on the second input Field.
https://codepen.io/magic77/pen/XWMeqrM
$.fn.packstationFinder = function (options) {
var settings = $.extend({
event: 'click.packstationFinder'
}, options);
this.bind(settings.event, function (e) {
if ($postalCode.val() === '') {
$('#packstation-number').tooltip();
return;
}
});
return this;
};
$('[rel~=packstationFinder]').packstationFinder();

I've checked the code in Codepen. The problem here is because in packstationFinder() you call the tooltip() function for the element. But as you can see inside the tooltip() you just bind the click event on the element and not trigger it. So by current code with a first click on the element (#packstation-number) you just bind the click event and really trigger the tooltip only by the second click. You can see that it work as it should by moving out the calling of tooltip() function from packstationFinder() and call it directly as in the code below:
$.fn.packstationFinder = function (options) {
var settings = $.extend({
event: 'click.packstationFinder'
}, options);
return this;
};
$('[rel~=packstationFinder]').packstationFinder();
$('#packstation-number').tooltip();

CKEDITOR : How do set `contentdom` after every SetData

I am creating a CKEditor plugin and I face some issues on this.
Model of My Plugin:
CKEDITOR.plugins.add("myplugin", {
//for lang,require,icon
init:function(a){
editor.on('contentDom', function () {
editor.document.on('key', function (evt) {
console.log("Key Pressed");
});
});
}
});
This is Working Fine.But,my problem is setData.
I am setting data when the user is clicking a file.
After setData the key event is not Working.
Is there any way to attach the listener to document after every setData() within plugin file?
And what are the other type of methods which are used in CKEditor like init ?
(OR)
Is there any way to setData() without affecting contentdom,key events?

Please add the listener to the editor and not to the document. That way it wil not get removed when document is removed:
editor.on( 'instanceReady', function( e ) {
editor.on( 'key', function( e ) {
console.log('test');
});
});
Please see: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-key

Finally, I found the Answer.
Refer the below Question
CKEDITOR.setData prevents attaching of events with .on function
And goes to the Document in CKEditor Docs Page.
#contentDomUnload
Finally My Code Like this,
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'keyup', function (evt) {
console.log('for key events');
});
editable.attachListener(editable, 'mousedown', function (evt) {
console.log('for click events');
});
});
And It worked very well.

Does OL3 have a Click handler pixelTolerance setting?

In OpenLayers 2 one can specify a pixelTolerance setting in the Click handler. If the map is moved by less than or equal to this number of pixels a click event is also fired.
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'pixelTolerance': 20,
...
},
...
}
Question: Is there anything similar in OpenLayers 3?

You can achieve this listening if map is dragging:
map.on('pointermove', function(evt) {
if (evt.dragging) {
console.info('dragging');
}
});
// another option
map.on('pointerdrag', function(evt) {
console.info('pointerdrag');
console.info(evt);
});

Ho do I use CKEditor's focusManager class?

I'm currently writing a js script that changes some styles around in order to hide a fixed footer and position a header absolutely when using a touch device.
I've been able to successfully implement it with normal text input fields and textareas, but since CKEditor doesn't parse in the DOM as a textarea, I'm forced to use it's focusManager class in order to trigger the change when the user focuses on an instance of it in my site.
The problem is that I've never used CKEditor's API before and I'm having some problems using it's focusManager class after doing some research.
Below is my current script.
It works fine for textareas and text inputs, but not on CKEditor.
From what I understand, where you see "cke_1", that is the instance name of the editor, but it's not working.
Also, I have multiple instances of CKEditor throughout my site and it needs to work on all of them.
Any help would be greatly appreciated.
Thanks!
var focusManager = new CKEDITOR.focusManager(cke_1);
var editor = CKEDITOR.instances.cke_1;
$(document)
.on("focus", "input", function(e) {
$body.addClass('fix');
$('footer').hide();
})
.on("blur", "input", function(e) {
$body.removeClass('fix');
$('footer').show();
});
$(document).on("focus", "textarea", function(e){
$body.addClass('fix');
$('footer').hide();
})
.on("blur", "textarea", function(e){
$body.removeClass('fix');
$('footer').show();
});
$(document).on("focus", editor.focusManager, function(e){
$body.addClass('fix');
$('footer').hide();
})
.on("blur", editor.focusManager, function(e){
$body.removeClass('fix');
$('footer').show();
});

I got this working. Since I have multiple instances of ckeditor, I wrote a function that is called when an instance is created and the user is on a mobile device. This is how I did it:
function renderMobile(){
console.log("Mobile device detected");
// Set focus and blur listeners for all editors to be created.
CKEDITOR.on( 'instanceReady', function() {
var editor;
for(var i in CKEDITOR.instances) {
editor = CKEDITOR.instances[i];
}
var $body = CKEDITOR.document.getBody();
editor.on('focus', function() {
$body.addClass( 'fix' );
});
editor.on('blur', function() {
$body.removeClass( 'fix' );
});
});
}

You don't need to use focusManager class at all. Simply listen on editor#focus and editor#blur (JSFiddle):
// Set focus and blur listeners for all editors to be created.
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor,
body = CKEDITOR.document.getBody();
editor.on( 'focus', function() {
// Use jQuery if you want.
body.addClass( 'fix' );
} );
editor.on( 'blur', function() {
// Use jQuery if you want.
body.removeClass( 'fix' );
} );
} );
CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar',
on: {
// Focus and blur listeners can be set per-instance,
// if needed.
// focus: function() {},
// blur: function() {}
}
} );

How to remove event listeners while destroying CKEditor

I have a ckeditor plugin like this:
CKEDITOR.plugins.add('testplugin', {
init: function (editor) {
editor.on('contentDom', function (e) {
var body = editor.document.getBody();
body.on('mouseup', function (e) {
alert('run!!!!');
});
});
});
});
It work perfect in CKEDITOR version 3 (iframe base)
But when i upgrade to CKEDITOR version 4 (lastest - contenteditable base),
all event fire multiple times when i destroy then re-init ckeditor.
(using CKEDITOR.instants.testEditor.destroy() and CKEDITOR.replace('testEditor',options);)
i use: removeAllListeners( ) to remove all event listeners to body but no change.
How can i complete destroy CKEDITOR 4 + All event listeners on it?

It seems that you use an inline instance, so editor.document is CKEDITOR.document. It means that every single instance shares the same var body = editor.document.getBody();.
To avoid duplicated events as a leftover of attached by "dead editors", you should either listen on editor#destroy and call event#removeListener on every single one, or use editable#attachListener which automates that job for you (jsFiddle):
editor.on( 'contentDom', function() {
var body = editor.document.getBody();
// This listener will be deactivated once editor dies.
editor.editable().attachListener( body, 'mouseup', function() {
console.log( 'run!!!!' );
} );
} );