%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* Taking care of events
* - Simulating 'change' event on contentEditable element
* - Handling drag & drop logic
* - Catch paste events
* - Dispatch proprietary newword:composer event
* - Keyboard shortcuts
*/
(function(wysihtml5) {
var dom = wysihtml5.dom,
browser = wysihtml5.browser,
/**
* Map keyCodes to query commands
*/
shortcuts = {
"66": "bold", // B
"73": "italic", // I
"85": "underline" // U
};
wysihtml5.views.Composer.prototype.observe = function() {
var that = this,
state = this.getValue(),
iframe = this.sandbox.getIframe(),
element = this.element,
focusBlurElement = browser.supportsEventsInIframeCorrectly() ? element : this.sandbox.getWindow(),
// Firefox < 3.5 doesn't support the drop event, instead it supports a so called "dragdrop" event which behaves almost the same
pasteEvents = browser.supportsEvent("drop") ? ["drop", "paste"] : ["dragdrop", "paste"];
// --------- destroy:composer event ---------
dom.observe(iframe, "DOMNodeRemoved", function() {
clearInterval(domNodeRemovedInterval);
that.parent.fire("destroy:composer");
});
// DOMNodeRemoved event is not supported in IE 8
var domNodeRemovedInterval = setInterval(function() {
if (!dom.contains(document.documentElement, iframe)) {
clearInterval(domNodeRemovedInterval);
that.parent.fire("destroy:composer");
}
}, 250);
// --------- Focus & blur logic ---------
dom.observe(focusBlurElement, "focus", function() {
that.parent.fire("focus").fire("focus:composer");
// Delay storing of state until all focus handler are fired
// especially the one which resets the placeholder
setTimeout(function() { state = that.getValue(); }, 0);
});
dom.observe(focusBlurElement, "blur", function() {
if (state !== that.getValue()) {
that.parent.fire("change").fire("change:composer");
}
that.parent.fire("blur").fire("blur:composer");
});
if (wysihtml5.browser.isIos()) {
// When on iPad/iPhone/IPod after clicking outside of editor, the editor loses focus
// but the UI still acts as if the editor has focus (blinking caret and onscreen keyboard visible)
// We prevent that by focusing a temporary input element which immediately loses focus
dom.observe(element, "blur", function() {
var input = element.ownerDocument.createElement("input"),
originalScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
originalScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
try {
that.selection.insertNode(input);
} catch(e) {
element.appendChild(input);
}
input.focus();
input.parentNode.removeChild(input);
window.scrollTo(originalScrollLeft, originalScrollTop);
});
}
// --------- Drag & Drop logic ---------
dom.observe(element, "dragenter", function() {
that.parent.fire("unset_placeholder");
});
if (browser.firesOnDropOnlyWhenOnDragOverIsCancelled()) {
dom.observe(element, ["dragover", "dragenter"], function(event) {
event.preventDefault();
});
}
dom.observe(element, pasteEvents, function(event) {
var dataTransfer = event.dataTransfer,
data;
if (dataTransfer && browser.supportsDataTransfer()) {
data = dataTransfer.getData("text/html") || dataTransfer.getData("text/plain");
}
if (data) {
element.focus();
that.commands.exec("insertHTML", data);
that.parent.fire("paste").fire("paste:composer");
event.stopPropagation();
event.preventDefault();
} else {
setTimeout(function() {
that.parent.fire("paste").fire("paste:composer");
}, 0);
}
});
// --------- neword event ---------
dom.observe(element, "keyup", function(event) {
var keyCode = event.keyCode;
if (keyCode === wysihtml5.SPACE_KEY || keyCode === wysihtml5.ENTER_KEY) {
that.parent.fire("newword:composer");
}
});
this.parent.observe("paste:composer", function() {
setTimeout(function() { that.parent.fire("newword:composer"); }, 0);
});
// --------- Make sure that images are selected when clicking on them ---------
if (!browser.canSelectImagesInContentEditable()) {
dom.observe(element, "mousedown", function(event) {
var target = event.target;
if (target.nodeName === "IMG") {
that.selection.selectNode(target);
event.preventDefault();
}
});
}
// --------- Shortcut logic ---------
dom.observe(element, "keydown", function(event) {
var keyCode = event.keyCode,
command = shortcuts[keyCode];
if ((event.ctrlKey || event.metaKey) && !event.altKey && command) {
that.commands.exec(command);
event.preventDefault();
}
});
// --------- Make sure that when pressing backspace/delete on selected images deletes the image and it's anchor ---------
dom.observe(element, "keydown", function(event) {
var target = that.selection.getSelectedNode(true),
keyCode = event.keyCode,
parent;
if (target && target.nodeName === "IMG" && (keyCode === wysihtml5.BACKSPACE_KEY || keyCode === wysihtml5.DELETE_KEY)) { // 8 => backspace, 46 => delete
parent = target.parentNode;
// delete the <img>
parent.removeChild(target);
// and it's parent <a> too if it hasn't got any other child nodes
if (parent.nodeName === "A" && !parent.firstChild) {
parent.parentNode.removeChild(parent);
}
setTimeout(function() { wysihtml5.quirks.redraw(element); }, 0);
event.preventDefault();
}
});
// --------- Show url in tooltip when hovering links or images ---------
var titlePrefixes = {
IMG: "Image: ",
A: "Link: "
};
dom.observe(element, "mouseover", function(event) {
var target = event.target,
nodeName = target.nodeName,
title;
if (nodeName !== "A" && nodeName !== "IMG") {
return;
}
var hasTitle = target.hasAttribute("title");
if(!hasTitle){
title = titlePrefixes[nodeName] + (target.getAttribute("href") || target.getAttribute("src"));
target.setAttribute("title", title);
}
});
};
})(wysihtml5);
Zerion Mini Shell 1.0