'),o=n,t.attr("editor-mode",o.mode),t.attr("editor-placeholder",o.placeholder),t.attr("contenteditable",!0),t.css("position","relative"),t.addClass("jquery-notebook editor"),f.setPlaceholder.call(t,{}),f.preserveElementFocus.call(t),o.autoFocus===!0){var i=t.find("p:not(.placeholder)");u.cursor.set(t,0,i)}}},h={keydown:function(e){var t=this;r.command&&65===e.which&&setTimeout(function(){d.show.call(t)},50),u.keyboard.isCommand(e,function(){r.command=!0},function(){r.command=!1}),u.keyboard.isShift(e,function(){r.shift=!0},function(){r.shift=!1}),u.keyboard.isModifier.call(this,e,function(t){r.command&&m.commands[t].call(this,e)}),r.shift?u.keyboard.isArrow.call(this,e,function(){setTimeout(function(){var e=u.selection.getText();""!==e?d.show.call(t):d.clear.call(t)},100)}):u.keyboard.isArrow.call(this,e,function(){d.clear.call(t)}),13===e.which&&m.enterKey.call(this,e),27===e.which&&d.clear.call(this),86===e.which&&m.paste.call(this,e)},keyup:function(t){u.keyboard.isCommand(t,function(){r.command=!1},function(){r.command=!0}),f.preserveElementFocus.call(this),f.removePlaceholder.call(this),/^\s*$/.test(e(this).text())&&(e(this).empty(),u.html.addTag(e(this),"p",!0,!0))},focus:function(){r.command=!1,r.shift=!1},mouseClick:function(t){var n=this;if(r.isSelecting=!0,2===t.button)return setTimeout(function(){d.show.call(n)},50),void t.preventDefault();if(e(this).find(".bubble:visible").length){var o=e(this).find(".bubble:visible"),i=o.offset().left,a=o.offset().top,c=o.width(),u=o.height();if(l>i&&i+c>l&&s>a&&a+u>s)return}},mouseUp:function(e){e.preventDefault();var t=this;r.isSelecting=!1,setTimeout(function(){var e=u.selection.save();e.collapsed?d.clear.call(t):d.show.call(t)},50)},mouseMove:function(e){l=e.pageX,s=e.pageY},blur:function(){f.setPlaceholder.call(this,{focus:!1})}},m={commands:{bold:function(e){e.preventDefault(),t.execCommand("bold",!1),d.update.call(this)},italic:function(e){e.preventDefault(),t.execCommand("italic",!1),d.update.call(this)},underline:function(e){e.preventDefault(),t.execCommand("underline",!1),d.update.call(this)},anchor:function(e){e.preventDefault();var t=u.selection.save();d.showLinkInput.call(this,t)},createLink:function(e,n){u.selection.restore(n),t.execCommand("createLink",!1,e.url),d.update.call(this)},removeLink:function(t,n){var o=e(u.selection.getContainer(n)).closest("a");o.contents().first().unwrap()},h1:function(n){n.preventDefault(),e(window.getSelection().anchorNode.parentNode).is("h1")?t.execCommand("formatBlock",!1,""):t.execCommand("formatBlock",!1,"
"),d.update.call(this)},h2:function(n){n.preventDefault(),e(window.getSelection().anchorNode.parentNode).is("h2")?t.execCommand("formatBlock",!1,"
"):t.execCommand("formatBlock",!1,"
"),d.update.call(this)},ul:function(e){e.preventDefault(),t.execCommand("insertUnorderedList",!1),d.update.call(this)},ol:function(e){e.preventDefault(),t.execCommand("insertOrderedList",!1),d.update.call(this)},undo:function(e){e.preventDefault(),t.execCommand("undo",!1)}},enterKey:function(t){return"inline"===e(this).attr("editor-mode")?void t.preventDefault():void 0},paste:function(){var t=e(this);setTimeout(function(){t.find("*").each(function(){var t=e(this);e.each(this.attributes,function(){"class"===this.name&&t.hasClass("placeholder")||t.removeAttr(this.name)})})},100)}};e.fn.notebook=function(t){return t=e.extend({},e.fn.notebook.defaults,t),f.prepare(this,t),f.bindEvents(this),this},e.fn.notebook.defaults={autoFocus:!1,placeholder:"Your text here...",mode:"multiline",modifiers:["bold","italic","underline","h1","h2","ol","ul","anchor"]}}(jQuery,document,window);
\ No newline at end of file
diff --git a/src/js/jquery.notebook.css b/src/js/jquery.notebook.css
index 30753fe..129830e 100644
--- a/src/js/jquery.notebook.css
+++ b/src/js/jquery.notebook.css
@@ -1,3 +1,7 @@
+.jquery-notebook-container {
+ position: relative;
+}
+
.jquery-notebook.editor {
position: relative;
outline: none;
diff --git a/src/js/jquery.notebook.js b/src/js/jquery.notebook.js
index 3865821..11cb1d0 100644
--- a/src/js/jquery.notebook.js
+++ b/src/js/jquery.notebook.js
@@ -17,679 +17,681 @@
(function($, d, w) {
- /*
- * This module deals with the CSS transforms. As it is not possible to easily
- * combine the transform functions with JavaScript this module abstract those
- * functions and generates a raw transform matrix, combining the new transform
- * with the others that were previously applied to the element.
- */
-
- var transform = (function() {
- var matrixToArray = function(str) {
- if (!str || str == 'none') {
- return [1, 0, 0, 1, 0, 0];
- }
- return str.match(/(-?[0-9\.]+)/g);
- };
+ /*
+ * This module deals with the CSS transforms. As it is not possible to easily
+ * combine the transform functions with JavaScript this module abstract those
+ * functions and generates a raw transform matrix, combining the new transform
+ * with the others that were previously applied to the element.
+ */
- var getPreviousTransforms = function(elem) {
- return elem.css('-webkit-transform') || elem.css('transform') || elem.css('-moz-transform') ||
- elem.css('-o-transform') || elem.css('-ms-transform');
- };
+ var transform = (function() {
+ var matrixToArray = function(str) {
+ if (!str || str == 'none') {
+ return [1, 0, 0, 1, 0, 0];
+ }
+ return str.match(/(-?[0-9\.]+)/g);
+ };
- var getMatrix = function(elem) {
- var previousTransform = getPreviousTransforms(elem);
- return matrixToArray(previousTransform);
- };
-
- var applyTransform = function(elem, transform) {
- elem.css('-webkit-transform', transform);
- elem.css('-moz-transform', transform);
- elem.css('-o-transform', transform);
- elem.css('-ms-transform', transform);
- elem.css('transform', transform);
- };
-
- var buildTransformString = function(matrix) {
- return 'matrix(' + matrix[0] +
- ', ' + matrix[1] +
- ', ' + matrix[2] +
- ', ' + matrix[3] +
- ', ' + matrix[4] +
- ', ' + matrix[5] + ')';
- };
+ var getPreviousTransforms = function(elem) {
+ return elem.css('-webkit-transform') || elem.css('transform') || elem.css('-moz-transform') ||
+ elem.css('-o-transform') || elem.css('-ms-transform');
+ };
- var getTranslate = function(elem) {
- var matrix = getMatrix(elem);
- return {
- x: parseInt(matrix[4]),
- y: parseInt(matrix[5])
- };
- };
+ var getMatrix = function(elem) {
+ var previousTransform = getPreviousTransforms(elem);
+ return matrixToArray(previousTransform);
+ };
- var scale = function(elem, _scale) {
- var matrix = getMatrix(elem);
- matrix[0] = matrix[3] = _scale;
- var transform = buildTransformString(matrix);
- applyTransform(elem, transform);
- };
+ var applyTransform = function(elem, transform) {
+ elem.css('-webkit-transform', transform);
+ elem.css('-moz-transform', transform);
+ elem.css('-o-transform', transform);
+ elem.css('-ms-transform', transform);
+ elem.css('transform', transform);
+ };
- var translate = function(elem, x, y) {
- var matrix = getMatrix(elem);
- matrix[4] = x;
- matrix[5] = y;
- var transform = buildTransformString(matrix);
- applyTransform(elem, transform);
- };
+ var buildTransformString = function(matrix) {
+ return 'matrix(' + matrix[0] +
+ ', ' + matrix[1] +
+ ', ' + matrix[2] +
+ ', ' + matrix[3] +
+ ', ' + matrix[4] +
+ ', ' + matrix[5] + ')';
+ };
- var rotate = function(elem, deg) {
- var matrix = getMatrix(elem);
- var rad1 = deg * (Math.PI / 180);
- var rad2 = rad1 * -1;
- matrix[1] = rad1;
- matrix[2] = rad2;
- var transform = buildTransformString(matrix);
- applyTransform(elem, transform);
- };
+ var getTranslate = function(elem) {
+ var matrix = getMatrix(elem);
+ return {
+ x: parseInt(matrix[4]),
+ y: parseInt(matrix[5])
+ };
+ };
- return {
- scale: scale,
- translate: translate,
- rotate: rotate,
- getTranslate: getTranslate
- };
- })();
+ var scale = function(elem, _scale) {
+ var matrix = getMatrix(elem);
+ matrix[0] = matrix[3] = _scale;
+ var transform = buildTransformString(matrix);
+ applyTransform(elem, transform);
+ };
+
+ var translate = function(elem, x, y) {
+ var matrix = getMatrix(elem);
+ matrix[4] = x;
+ matrix[5] = y;
+ var transform = buildTransformString(matrix);
+ applyTransform(elem, transform);
+ };
+
+ var rotate = function(elem, deg) {
+ var matrix = getMatrix(elem);
+ var rad1 = deg * (Math.PI / 180);
+ var rad2 = rad1 * -1;
+ matrix[1] = rad1;
+ matrix[2] = rad2;
+ var transform = buildTransformString(matrix);
+ applyTransform(elem, transform);
+ };
+
+ return {
+ scale: scale,
+ translate: translate,
+ rotate: rotate,
+ getTranslate: getTranslate
+ };
+ })();
- var isMac = w.navigator.platform == 'MacIntel',
- mouseX = 0,
- mouseY = 0,
- cache = {
- command: false,
- shift: false,
- isSelecting: false
+ var isMac = w.navigator.platform == 'MacIntel',
+ mouseX = 0,
+ mouseY = 0,
+ cache = {
+ command: false,
+ shift: false,
+ isSelecting: false
+ },
+ modifiers = {
+ 66: 'bold',
+ 73: 'italic',
+ 85: 'underline',
+ 112: 'h1',
+ 113: 'h2',
+ 122: 'undo'
+ },
+ options,
+ utils = {
+ keyboard: {
+ isCommand: function(e, callbackTrue, callbackFalse) {
+ if (isMac && e.metaKey || !isMac && e.ctrlKey) {
+ callbackTrue();
+ } else {
+ callbackFalse();
+ }
+ },
+ isShift: function(e, callbackTrue, callbackFalse) {
+ if (e.shiftKey) {
+ callbackTrue();
+ } else {
+ callbackFalse();
+ }
+ },
+ isModifier: function(e, callback) {
+ var key = e.which,
+ cmd = modifiers[key];
+ if (cmd) {
+ callback.call(this, cmd);
+ }
},
- modifiers = {
- 66: 'bold',
- 73: 'italic',
- 85: 'underline',
- 112: 'h1',
- 113: 'h2',
- 122: 'undo'
+ isEnter: function(e, callback) {
+ if (e.which === 13) {
+ callback();
+ }
},
- options,
- utils = {
- keyboard: {
- isCommand: function(e, callbackTrue, callbackFalse) {
- if (isMac && e.metaKey || !isMac && e.ctrlKey) {
- callbackTrue();
- } else {
- callbackFalse();
- }
- },
- isShift: function(e, callbackTrue, callbackFalse) {
- if (e.shiftKey) {
- callbackTrue();
- } else {
- callbackFalse();
- }
- },
- isModifier: function(e, callback) {
- var key = e.which,
- cmd = modifiers[key];
- if (cmd) {
- callback.call(this, cmd);
- }
- },
- isEnter: function(e, callback) {
- if (e.which === 13) {
- callback();
- }
- },
- isArrow: function(e, callback) {
- if (e.which >= 37 || e.which <= 40) {
- callback();
- }
- }
- },
- html: {
- addTag: function(elem, tag, focus, editable) {
- var newElement = $(d.createElement(tag));
- newElement.attr('contenteditable', Boolean(editable));
- newElement.append(' ');
- elem.append(newElement);
- if (focus) {
- cache.focusedElement = elem.children().last();
- utils.cursor.set(elem, 0, cache.focusedElement);
- }
- return newElement;
- }
- },
- cursor: {
- set: function(editor, pos, elem) {
- var range;
- if (d.createRange) {
- range = d.createRange();
- var selection = w.getSelection(),
- lastChild = editor.children().last(),
- length = lastChild.html().length - 1,
- toModify = elem ? elem[0] : lastChild[0],
- theLength = typeof pos !== 'undefined' ? pos : length;
- range.setStart(toModify, theLength);
- range.collapse(true);
- selection.removeAllRanges();
- selection.addRange(range);
- } else {
- range = d.body.createTextRange();
- range.moveToElementText(elem);
- range.collapse(false);
- range.select();
- }
- }
- },
- selection: {
- save: function() {
- if (w.getSelection) {
- var sel = w.getSelection();
- if (sel.rangeCount > 0) {
- return sel.getRangeAt(0);
- }
- } else if (d.selection && d.selection.createRange) { // IE
- return d.selection.createRange();
- }
- return null;
- },
- restore: function(range) {
- if (range) {
- if (w.getSelection) {
- var sel = w.getSelection();
- sel.removeAllRanges();
- sel.addRange(range);
- } else if (d.selection && range.select) { // IE
- range.select();
- }
- }
- },
- getText: function() {
- var txt = '';
- if (w.getSelection) {
- txt = w.getSelection().toString();
- } else if (d.getSelection) {
- txt = d.getSelection().toString();
- } else if (d.selection) {
- txt = d.selection.createRange().text;
- }
- return txt;
- },
- clear: function() {
- if (window.getSelection) {
- if (window.getSelection().empty) { // Chrome
- window.getSelection().empty();
- } else if (window.getSelection().removeAllRanges) { // Firefox
- window.getSelection().removeAllRanges();
- }
- } else if (document.selection) { // IE?
- document.selection.empty();
- }
- },
- getContainer: function(sel) {
- if (w.getSelection && sel && sel.commonAncestorContainer) {
- return sel.commonAncestorContainer;
- } else if (d.selection && sel && sel.parentElement) {
- return sel.parentElement();
- }
- return null;
- }
- },
- validation: {
- isUrl: function(url) {
- return (/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/).test(url);
- }
+ isArrow: function(e, callback) {
+ if (e.which >= 37 || e.which <= 40) {
+ callback();
+ }
+ }
+ },
+ html: {
+ addTag: function(elem, tag, focus, editable) {
+ var newElement = $(d.createElement(tag));
+ newElement.attr('contenteditable', Boolean(editable));
+ newElement.append(' ');
+ elem.append(newElement);
+ if (focus) {
+ cache.focusedElement = elem.children().last();
+ utils.cursor.set(elem, 0, cache.focusedElement);
+ }
+ return newElement;
+ }
+ },
+ cursor: {
+ set: function(editor, pos, elem) {
+ var range;
+ if (d.createRange) {
+ range = d.createRange();
+ var selection = w.getSelection(),
+ lastChild = editor.children().last(),
+ length = lastChild.html().length - 1,
+ toModify = elem ? elem[0] : lastChild[0],
+ theLength = typeof pos !== 'undefined' ? pos : length;
+ range.setStart(toModify, theLength);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ } else {
+ range = d.body.createTextRange();
+ range.moveToElementText(elem);
+ range.collapse(false);
+ range.select();
+ }
+ }
+ },
+ selection: {
+ save: function() {
+ if (w.getSelection) {
+ var sel = w.getSelection();
+ if (sel.rangeCount > 0) {
+ return sel.getRangeAt(0);
}
+ } else if (d.selection && d.selection.createRange) { // IE
+ return d.selection.createRange();
+ }
+ return null;
},
- bubble = {
- /*
- * This is called to position the bubble above the selection.
- */
- updatePos: function(editor, elem) {
- var sel = w.getSelection(),
- range = sel.getRangeAt(0),
- boundary = range.getBoundingClientRect(),
- bubbleWidth = elem.width(),
- bubbleHeight = elem.height(),
- offset = editor.offset().left,
- pos = {
- x: (boundary.left + boundary.width / 2) - bubbleWidth / 2,
- y: boundary.top - bubbleHeight - 8 + $(document).scrollTop()
- };
- transform.translate(elem, pos.x, pos.y);
- },
- /*
- * Updates the bubble to set the active formats for the current selection.
- */
- updateState: function(editor, elem) {
- elem.find('button').removeClass('active');
- var sel = w.getSelection(),
- formats = [];
- bubble.checkForFormatting(sel.focusNode, formats);
- var formatDict = {
- 'b': 'bold',
- 'i': 'italic',
- 'u': 'underline',
- 'h1': 'h1',
- 'h2': 'h2',
- 'a': 'anchor',
- 'ul': 'ul',
- 'ol': 'ol'
- };
- for (var i = 0; i < formats.length; i++) {
- var format = formats[i];
- elem.find('button.' + formatDict[format]).addClass('active');
- }
- },
- /*
- * Recursively navigates upwards in the DOM to find all the format
- * tags enclosing the selection.
- */
- checkForFormatting: function(currentNode, formats) {
- var validFormats = ['b', 'i', 'u', 'h1', 'h2', 'ol', 'ul', 'li', 'a'];
- if (currentNode.nodeName === '#text' ||
- validFormats.indexOf(currentNode.nodeName.toLowerCase()) != -1) {
- if (currentNode.nodeName != '#text') {
- formats.push(currentNode.nodeName.toLowerCase());
- }
- bubble.checkForFormatting(currentNode.parentNode, formats);
- }
- },
- buildMenu: function(editor, elem) {
- var ul = utils.html.addTag(elem, 'ul', false, false);
- for (var cmd in options.modifiers) {
- var li = utils.html.addTag(ul, 'li', false, false);
- var btn = utils.html.addTag(li, 'button', false, false);
- btn.attr('editor-command', options.modifiers[cmd]);
- btn.addClass(options.modifiers[cmd]);
- }
- elem.find('button').click(function(e) {
- e.preventDefault();
- var cmd = $(this).attr('editor-command');
- events.commands[cmd].call(editor, e);
- });
- var linkArea = utils.html.addTag(elem, 'div', false, false);
- linkArea.addClass('link-area');
- var linkInput = utils.html.addTag(linkArea, 'input', false, false);
- linkInput.attr({
- type: 'text'
- });
- var closeBtn = utils.html.addTag(linkArea, 'button', false, false);
- closeBtn.click(function(e) {
- e.preventDefault();
- var editor = $(this).closest('.editor');
- $(this).closest('.link-area').hide();
- $(this).closest('.bubble').find('ul').show();
- });
- },
- show: function() {
- var tag = $(this).parent().find('.bubble');
- if (!tag.length) {
- tag = utils.html.addTag($(this).parent(), 'div', false, false);
- tag.addClass('jquery-notebook bubble');
- bubble.buildMenu(this, tag);
- }
- tag.show();
- bubble.updateState(this, tag);
- if (!tag.hasClass('active')) {
- tag.addClass('jump');
- } else {
- tag.removeClass('jump');
- }
- bubble.updatePos($(this), tag);
- tag.addClass('active');
- },
- update: function() {
- var tag = $(this).parent().find('.bubble');
- bubble.updateState(this, tag);
- },
- clear: function() {
- var elem = $(this).parent().find('.bubble');
- if (!elem.hasClass('active')) return;
- elem.removeClass('active');
- bubble.hideLinkInput.call(this);
- bubble.showButtons.call(this);
- setTimeout(function() {
- if (elem.hasClass('active')) return;
- elem.hide();
- }, 500);
- },
- hideButtons: function() {
- $(this).parent().find('.bubble').find('ul').hide();
- },
- showButtons: function() {
- $(this).parent().find('.bubble').find('ul').show();
- },
- showLinkInput: function(selection) {
- bubble.hideButtons.call(this);
- var editor = this;
- var elem = $(this).parent().find('.bubble').find('input[type=text]');
- var hasLink = elem.closest('.jquery-notebook').find('button.anchor').hasClass('active');
- elem.unbind('keydown');
- elem.keydown(function(e) {
- var elem = $(this);
- utils.keyboard.isEnter(e, function() {
- e.preventDefault();
- var url = elem.val();
- if (utils.validation.isUrl(url)) {
- e.url = url;
- events.commands.createLink(e, selection);
- bubble.clear.call(editor);
- } else if (url === '' && hasLink) {
- events.commands.removeLink(e, selection);
- bubble.clear.call(editor);
- }
- });
- });
- elem.bind('paste', function(e) {
- var elem = $(this);
- setTimeout(function() {
- var text = elem.val();
- if (/http:\/\/https?:\/\//.test(text)) {
- text = text.substring(7);
- elem.val(text);
- }
- }, 1);
- });
- var linkText = 'http://';
- if (hasLink) {
- var anchor = $(utils.selection.getContainer(selection)).closest('a');
- linkText = anchor.prop('href') || linkText;
- }
- $(this).parent().find('.link-area').show();
- elem.val(linkText).focus();
- },
- hideLinkInput: function() {
- $(this).parent().find('.bubble').find('.link-area').hide();
+ restore: function(range) {
+ if (range) {
+ if (w.getSelection) {
+ var sel = w.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+ } else if (d.selection && range.select) { // IE
+ range.select();
}
+ }
},
- actions = {
- bindEvents: function(elem) {
- elem.keydown(rawEvents.keydown);
- elem.keyup(rawEvents.keyup);
- elem.focus(rawEvents.focus);
- elem.bind('paste', events.paste);
- elem.mousedown(rawEvents.mouseClick);
- elem.mouseup(rawEvents.mouseUp);
- elem.mousemove(rawEvents.mouseMove);
- elem.blur(rawEvents.blur);
- $('body').mouseup(function(e) {
- if (e.target == e.currentTarget && cache.isSelecting) {
- rawEvents.mouseUp.call(elem, e);
- }
- });
- },
- setPlaceholder: function(e) {
- if (/^\s*$/.test($(this).text())) {
- $(this).empty();
- var placeholder = utils.html.addTag($(this), 'p').addClass('placeholder');
- placeholder.append($(this).attr('editor-placeholder'));
- utils.html.addTag($(this), 'p', typeof e.focus != 'undefined' ? e.focus : false, true);
- } else {
- $(this).find('.placeholder').remove();
- }
- },
- removePlaceholder: function(e) {
- $(this).find('.placeholder').remove();
- },
- preserveElementFocus: function() {
- var anchorNode = w.getSelection() ? w.getSelection().anchorNode : d.activeElement;
- if (anchorNode) {
- var current = anchorNode.parentNode,
- diff = current !== cache.focusedElement,
- children = this.children,
- elementIndex = 0;
- if (current === this) {
- current = anchorNode;
- }
- for (var i = 0; i < children.length; i++) {
- if (current === children[i]) {
- elementIndex = i;
- break;
- }
- }
- if (diff) {
- cache.focusedElement = current;
- cache.focusedElementIndex = elementIndex;
- }
- }
- },
- prepare: function(elem, customOptions) {
- options = customOptions;
- elem.attr('editor-mode', options.mode);
- elem.attr('editor-placeholder', options.placeholder);
- elem.attr('contenteditable', true);
- elem.css('position', 'relative');
- elem.addClass('jquery-notebook editor');
- actions.setPlaceholder.call(elem, {});
- actions.preserveElementFocus.call(elem);
- if (options.autoFocus === true) {
- var firstP = elem.find('p:not(.placeholder)');
- utils.cursor.set(elem, 0, firstP);
- }
+ getText: function() {
+ var txt = '';
+ if (w.getSelection) {
+ txt = w.getSelection().toString();
+ } else if (d.getSelection) {
+ txt = d.getSelection().toString();
+ } else if (d.selection) {
+ txt = d.selection.createRange().text;
+ }
+ return txt;
+ },
+ clear: function() {
+ if (window.getSelection) {
+ if (window.getSelection().empty) { // Chrome
+ window.getSelection().empty();
+ } else if (window.getSelection().removeAllRanges) { // Firefox
+ window.getSelection().removeAllRanges();
}
+ } else if (document.selection) { // IE?
+ document.selection.empty();
+ }
},
- rawEvents = {
- keydown: function(e) {
- var elem = this;
- if (cache.command && e.which === 65) {
- setTimeout(function() {
- bubble.show.call(elem);
- }, 50);
- }
- utils.keyboard.isCommand(e, function() {
- cache.command = true;
- }, function() {
- cache.command = false;
- });
- utils.keyboard.isShift(e, function() {
- cache.shift = true;
- }, function() {
- cache.shift = false;
- });
- utils.keyboard.isModifier.call(this, e, function(modifier) {
- if (cache.command) {
- events.commands[modifier].call(this, e);
- }
- });
+ getContainer: function(sel) {
+ if (w.getSelection && sel && sel.commonAncestorContainer) {
+ return sel.commonAncestorContainer;
+ } else if (d.selection && sel && sel.parentElement) {
+ return sel.parentElement();
+ }
+ return null;
+ }
+ },
+ validation: {
+ isUrl: function(url) {
+ return (/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/).test(url);
+ }
+ }
+ },
+ bubble = {
+ /*
+ * This is called to position the bubble above the selection.
+ */
+ updatePos: function(editor, elem) {
+ var sel = w.getSelection(),
+ range = sel.getRangeAt(0),
+ boundary = range.getBoundingClientRect(),
+ bubbleWidth = elem.width(),
+ bubbleHeight = elem.height(),
+ offset = editor.offset().left,
+ container = editor.parent().offset(),
+ pos = {
+ x: (boundary.left + boundary.width / 2) - (bubbleWidth / 2) - container.left,
+ y: boundary.top - bubbleHeight - 8 + $(document).scrollTop() - container.top
+ };
+ transform.translate(elem, pos.x, pos.y);
+ },
+ /*
+ * Updates the bubble to set the active formats for the current selection.
+ */
+ updateState: function(editor, elem) {
+ elem.find('button').removeClass('active');
+ var sel = w.getSelection(),
+ formats = [];
+ bubble.checkForFormatting(sel.focusNode, formats);
+ var formatDict = {
+ 'b': 'bold',
+ 'i': 'italic',
+ 'u': 'underline',
+ 'h1': 'h1',
+ 'h2': 'h2',
+ 'a': 'anchor',
+ 'ul': 'ul',
+ 'ol': 'ol'
+ };
+ for (var i = 0; i < formats.length; i++) {
+ var format = formats[i];
+ elem.find('button.' + formatDict[format]).addClass('active');
+ }
+ },
+ /*
+ * Recursively navigates upwards in the DOM to find all the format
+ * tags enclosing the selection.
+ */
+ checkForFormatting: function(currentNode, formats) {
+ var validFormats = ['b', 'i', 'u', 'h1', 'h2', 'ol', 'ul', 'li', 'a'];
+ if (currentNode.nodeName === '#text' ||
+ validFormats.indexOf(currentNode.nodeName.toLowerCase()) != -1) {
+ if (currentNode.nodeName != '#text') {
+ formats.push(currentNode.nodeName.toLowerCase());
+ }
+ bubble.checkForFormatting(currentNode.parentNode, formats);
+ }
+ },
+ buildMenu: function(editor, elem) {
+ var ul = utils.html.addTag(elem, 'ul', false, false);
+ for (var cmd in options.modifiers) {
+ var li = utils.html.addTag(ul, 'li', false, false);
+ var btn = utils.html.addTag(li, 'button', false, false);
+ btn.attr('editor-command', options.modifiers[cmd]);
+ btn.addClass(options.modifiers[cmd]);
+ }
+ elem.find('button').click(function(e) {
+ e.preventDefault();
+ var cmd = $(this).attr('editor-command');
+ events.commands[cmd].call(editor, e);
+ });
+ var linkArea = utils.html.addTag(elem, 'div', false, false);
+ linkArea.addClass('link-area');
+ var linkInput = utils.html.addTag(linkArea, 'input', false, false);
+ linkInput.attr({
+ type: 'text'
+ });
+ var closeBtn = utils.html.addTag(linkArea, 'button', false, false);
+ closeBtn.click(function(e) {
+ e.preventDefault();
+ var editor = $(this).closest('.editor');
+ $(this).closest('.link-area').hide();
+ $(this).closest('.bubble').find('ul').show();
+ });
+ },
+ show: function() {
+ var tag = $(this).parent().find('.bubble');
+ if (!tag.length) {
+ tag = utils.html.addTag($(this).parent(), 'div', false, false);
+ tag.addClass('jquery-notebook bubble');
+ bubble.buildMenu(this, tag);
+ }
+ tag.show();
+ bubble.updateState(this, tag);
+ if (!tag.hasClass('active')) {
+ tag.addClass('jump');
+ } else {
+ tag.removeClass('jump');
+ }
+ bubble.updatePos($(this), tag);
+ tag.addClass('active');
+ },
+ update: function() {
+ var tag = $(this).parent().find('.bubble');
+ bubble.updateState(this, tag);
+ },
+ clear: function() {
+ var elem = $(this).parent().find('.bubble');
+ if (!elem.hasClass('active')) return;
+ elem.removeClass('active');
+ bubble.hideLinkInput.call(this);
+ bubble.showButtons.call(this);
+ setTimeout(function() {
+ if (elem.hasClass('active')) return;
+ elem.hide();
+ }, 500);
+ },
+ hideButtons: function() {
+ $(this).parent().find('.bubble').find('ul').hide();
+ },
+ showButtons: function() {
+ $(this).parent().find('.bubble').find('ul').show();
+ },
+ showLinkInput: function(selection) {
+ bubble.hideButtons.call(this);
+ var editor = this;
+ var elem = $(this).parent().find('.bubble').find('input[type=text]');
+ var hasLink = elem.closest('.jquery-notebook').find('button.anchor').hasClass('active');
+ elem.unbind('keydown');
+ elem.keydown(function(e) {
+ var elem = $(this);
+ utils.keyboard.isEnter(e, function() {
+ e.preventDefault();
+ var url = elem.val();
+ if (utils.validation.isUrl(url)) {
+ e.url = url;
+ events.commands.createLink(e, selection);
+ bubble.clear.call(editor);
+ } else if (url === '' && hasLink) {
+ events.commands.removeLink(e, selection);
+ bubble.clear.call(editor);
+ }
+ });
+ });
+ elem.bind('paste', function(e) {
+ var elem = $(this);
+ setTimeout(function() {
+ var text = elem.val();
+ if (/http:\/\/https?:\/\//.test(text)) {
+ text = text.substring(7);
+ elem.val(text);
+ }
+ }, 1);
+ });
+ var linkText = 'http://';
+ if (hasLink) {
+ var anchor = $(utils.selection.getContainer(selection)).closest('a');
+ linkText = anchor.prop('href') || linkText;
+ }
+ $(this).parent().find('.link-area').show();
+ elem.val(linkText).focus();
+ },
+ hideLinkInput: function() {
+ $(this).parent().find('.bubble').find('.link-area').hide();
+ }
+ },
+ actions = {
+ bindEvents: function(elem) {
+ elem.keydown(rawEvents.keydown);
+ elem.keyup(rawEvents.keyup);
+ elem.focus(rawEvents.focus);
+ elem.bind('paste', events.paste);
+ elem.mousedown(rawEvents.mouseClick);
+ elem.mouseup(rawEvents.mouseUp);
+ elem.mousemove(rawEvents.mouseMove);
+ elem.blur(rawEvents.blur);
+ $('body').mouseup(function(e) {
+ if (e.target == e.currentTarget && cache.isSelecting) {
+ rawEvents.mouseUp.call(elem, e);
+ }
+ });
+ },
+ setPlaceholder: function(e) {
+ if (/^\s*$/.test($(this).text())) {
+ $(this).empty();
+ var placeholder = utils.html.addTag($(this), 'p').addClass('placeholder');
+ placeholder.append($(this).attr('editor-placeholder'));
+ utils.html.addTag($(this), 'p', typeof e.focus != 'undefined' ? e.focus : false, true);
+ } else {
+ $(this).find('.placeholder').remove();
+ }
+ },
+ removePlaceholder: function(e) {
+ $(this).find('.placeholder').remove();
+ },
+ preserveElementFocus: function() {
+ var anchorNode = w.getSelection() ? w.getSelection().anchorNode : d.activeElement;
+ if (anchorNode) {
+ var current = anchorNode.parentNode,
+ diff = current !== cache.focusedElement,
+ children = this.children,
+ elementIndex = 0;
+ if (current === this) {
+ current = anchorNode;
+ }
+ for (var i = 0; i < children.length; i++) {
+ if (current === children[i]) {
+ elementIndex = i;
+ break;
+ }
+ }
+ if (diff) {
+ cache.focusedElement = current;
+ cache.focusedElementIndex = elementIndex;
+ }
+ }
+ },
+ prepare: function(elem, customOptions) {
+ elem.wrap('
');
+ options = customOptions;
+ elem.attr('editor-mode', options.mode);
+ elem.attr('editor-placeholder', options.placeholder);
+ elem.attr('contenteditable', true);
+ elem.css('position', 'relative');
+ elem.addClass('jquery-notebook editor');
+ actions.setPlaceholder.call(elem, {});
+ actions.preserveElementFocus.call(elem);
+ if (options.autoFocus === true) {
+ var firstP = elem.find('p:not(.placeholder)');
+ utils.cursor.set(elem, 0, firstP);
+ }
+ }
+ },
+ rawEvents = {
+ keydown: function(e) {
+ var elem = this;
+ if (cache.command && e.which === 65) {
+ setTimeout(function() {
+ bubble.show.call(elem);
+ }, 50);
+ }
+ utils.keyboard.isCommand(e, function() {
+ cache.command = true;
+ }, function() {
+ cache.command = false;
+ });
+ utils.keyboard.isShift(e, function() {
+ cache.shift = true;
+ }, function() {
+ cache.shift = false;
+ });
+ utils.keyboard.isModifier.call(this, e, function(modifier) {
+ if (cache.command) {
+ events.commands[modifier].call(this, e);
+ }
+ });
- if (cache.shift) {
- utils.keyboard.isArrow.call(this, e, function() {
- setTimeout(function() {
- var txt = utils.selection.getText();
- if (txt !== '') {
- bubble.show.call(elem);
- } else {
- bubble.clear.call(elem);
- }
- }, 100);
- });
- } else {
- utils.keyboard.isArrow.call(this, e, function() {
- bubble.clear.call(elem);
- });
- }
+ if (cache.shift) {
+ utils.keyboard.isArrow.call(this, e, function() {
+ setTimeout(function() {
+ var txt = utils.selection.getText();
+ if (txt !== '') {
+ bubble.show.call(elem);
+ } else {
+ bubble.clear.call(elem);
+ }
+ }, 100);
+ });
+ } else {
+ utils.keyboard.isArrow.call(this, e, function() {
+ bubble.clear.call(elem);
+ });
+ }
- if (e.which === 13) {
- events.enterKey.call(this, e);
- }
- if (e.which === 27) {
- bubble.clear.call(this);
- }
- if (e.which === 86) {
- events.paste.call(this, e);
- }
- },
- keyup: function(e) {
- utils.keyboard.isCommand(e, function() {
- cache.command = false;
- }, function() {
- cache.command = true;
- });
- actions.preserveElementFocus.call(this);
- actions.removePlaceholder.call(this);
+ if (e.which === 13) {
+ events.enterKey.call(this, e);
+ }
+ if (e.which === 27) {
+ bubble.clear.call(this);
+ }
+ if (e.which === 86) {
+ events.paste.call(this, e);
+ }
+ },
+ keyup: function(e) {
+ utils.keyboard.isCommand(e, function() {
+ cache.command = false;
+ }, function() {
+ cache.command = true;
+ });
+ actions.preserveElementFocus.call(this);
+ actions.removePlaceholder.call(this);
- /*
- * This breaks the undo when the whole text is deleted but so far
- * it is the only way that I fould to solve the more serious bug
- * that the editor was losing the p elements after deleting the whole text
- */
- if (/^\s*$/.test($(this).text())) {
- $(this).empty();
- utils.html.addTag($(this), 'p', true, true);
- }
- },
- focus: function(e) {
- cache.command = false;
- cache.shift = false;
- },
- mouseClick: function(e) {
- var elem = this;
- cache.isSelecting = true;
- if (e.button === 2) {
- setTimeout(function() {
- bubble.show.call(elem);
- }, 50);
- e.preventDefault();
- return;
- }
- if ($(this).find('.bubble:visible').length) {
- var bubbleTag = $(this).find('.bubble:visible'),
- bubbleX = bubbleTag.offset().left,
- bubbleY = bubbleTag.offset().top,
- bubbleWidth = bubbleTag.width(),
- bubbleHeight = bubbleTag.height();
- if (mouseX > bubbleX && mouseX < bubbleX + bubbleWidth &&
- mouseY > bubbleY && mouseY < bubbleY + bubbleHeight) {
- return;
- }
- }
- },
- mouseUp: function(e) {
- e.preventDefault();
- var elem = this;
- cache.isSelecting = false;
- setTimeout(function() {
- var s = utils.selection.save();
- if (s.collapsed) {
- bubble.clear.call(elem);
- } else {
- bubble.show.call(elem);
- }
- }, 50);
- },
- mouseMove: function(e) {
- mouseX = e.pageX;
- mouseY = e.pageY;
- },
- blur: function(e) {
- actions.setPlaceholder.call(this, {
- focus: false
- });
- }
+ /*
+ * This breaks the undo when the whole text is deleted but so far
+ * it is the only way that I fould to solve the more serious bug
+ * that the editor was losing the p elements after deleting the whole text
+ */
+ if (/^\s*$/.test($(this).text())) {
+ $(this).empty();
+ utils.html.addTag($(this), 'p', true, true);
+ }
+ },
+ focus: function(e) {
+ cache.command = false;
+ cache.shift = false;
+ },
+ mouseClick: function(e) {
+ var elem = this;
+ cache.isSelecting = true;
+ if (e.button === 2) {
+ setTimeout(function() {
+ bubble.show.call(elem);
+ }, 50);
+ e.preventDefault();
+ return;
+ }
+ if ($(this).find('.bubble:visible').length) {
+ var bubbleTag = $(this).find('.bubble:visible'),
+ bubbleX = bubbleTag.offset().left,
+ bubbleY = bubbleTag.offset().top,
+ bubbleWidth = bubbleTag.width(),
+ bubbleHeight = bubbleTag.height();
+ if (mouseX > bubbleX && mouseX < bubbleX + bubbleWidth &&
+ mouseY > bubbleY && mouseY < bubbleY + bubbleHeight) {
+ return;
+ }
+ }
+ },
+ mouseUp: function(e) {
+ e.preventDefault();
+ var elem = this;
+ cache.isSelecting = false;
+ setTimeout(function() {
+ var s = utils.selection.save();
+ if (s.collapsed) {
+ bubble.clear.call(elem);
+ } else {
+ bubble.show.call(elem);
+ }
+ }, 50);
+ },
+ mouseMove: function(e) {
+ mouseX = e.pageX;
+ mouseY = e.pageY;
+ },
+ blur: function(e) {
+ actions.setPlaceholder.call(this, {
+ focus: false
+ });
+ }
+ },
+ events = {
+ commands: {
+ bold: function(e) {
+ e.preventDefault();
+ d.execCommand('bold', false);
+ bubble.update.call(this);
},
- events = {
- commands: {
- bold: function(e) {
- e.preventDefault();
- d.execCommand('bold', false);
- bubble.update.call(this);
- },
- italic: function(e) {
- e.preventDefault();
- d.execCommand('italic', false);
- bubble.update.call(this);
- },
- underline: function(e) {
- e.preventDefault();
- d.execCommand('underline', false);
- bubble.update.call(this);
- },
- anchor: function(e) {
- e.preventDefault();
- var s = utils.selection.save();
- bubble.showLinkInput.call(this, s);
- },
- createLink: function(e, s) {
- utils.selection.restore(s);
- d.execCommand('createLink', false, e.url);
- bubble.update.call(this);
- },
- removeLink: function(e, s) {
- var el = $(utils.selection.getContainer(s)).closest('a');
- el.contents().first().unwrap();
- },
- h1: function(e) {
- e.preventDefault();
- if ($(window.getSelection().anchorNode.parentNode).is('h1')) {
- d.execCommand('formatBlock', false, '');
- } else {
- d.execCommand('formatBlock', false, '
');
- }
- bubble.update.call(this);
- },
- h2: function(e) {
- e.preventDefault();
- if ($(window.getSelection().anchorNode.parentNode).is('h2')) {
- d.execCommand('formatBlock', false, '
');
- } else {
- d.execCommand('formatBlock', false, '
');
- }
- bubble.update.call(this);
- },
- ul: function(e) {
- e.preventDefault();
- d.execCommand('insertUnorderedList', false);
- bubble.update.call(this);
- },
- ol: function(e) {
- e.preventDefault();
- d.execCommand('insertOrderedList', false);
- bubble.update.call(this);
- },
- undo: function(e) {
- e.preventDefault();
- d.execCommand('undo', false);
- }
- },
- enterKey: function(e) {
- if ($(this).attr('editor-mode') === 'inline') {
- e.preventDefault();
- return;
- }
- },
- paste: function(e) {
- var elem = $(this);
- setTimeout(function() {
- elem.find('*').each(function() {
- var current = $(this);
- $.each(this.attributes, function() {
- if (this.name !== 'class' || !current.hasClass('placeholder')) {
- current.removeAttr(this.name);
- }
- });
- });
- }, 100);
- }
- };
-
- $.fn.notebook = function(options) {
- options = $.extend({}, $.fn.notebook.defaults, options);
- actions.prepare(this, options);
- actions.bindEvents(this);
- return this;
+ italic: function(e) {
+ e.preventDefault();
+ d.execCommand('italic', false);
+ bubble.update.call(this);
+ },
+ underline: function(e) {
+ e.preventDefault();
+ d.execCommand('underline', false);
+ bubble.update.call(this);
+ },
+ anchor: function(e) {
+ e.preventDefault();
+ var s = utils.selection.save();
+ bubble.showLinkInput.call(this, s);
+ },
+ createLink: function(e, s) {
+ utils.selection.restore(s);
+ d.execCommand('createLink', false, e.url);
+ bubble.update.call(this);
+ },
+ removeLink: function(e, s) {
+ var el = $(utils.selection.getContainer(s)).closest('a');
+ el.contents().first().unwrap();
+ },
+ h1: function(e) {
+ e.preventDefault();
+ if ($(window.getSelection().anchorNode.parentNode).is('h1')) {
+ d.execCommand('formatBlock', false, '
');
+ } else {
+ d.execCommand('formatBlock', false, '
');
+ }
+ bubble.update.call(this);
+ },
+ h2: function(e) {
+ e.preventDefault();
+ if ($(window.getSelection().anchorNode.parentNode).is('h2')) {
+ d.execCommand('formatBlock', false, '
');
+ } else {
+ d.execCommand('formatBlock', false, '
');
+ }
+ bubble.update.call(this);
+ },
+ ul: function(e) {
+ e.preventDefault();
+ d.execCommand('insertUnorderedList', false);
+ bubble.update.call(this);
+ },
+ ol: function(e) {
+ e.preventDefault();
+ d.execCommand('insertOrderedList', false);
+ bubble.update.call(this);
+ },
+ undo: function(e) {
+ e.preventDefault();
+ d.execCommand('undo', false);
+ }
+ },
+ enterKey: function(e) {
+ if ($(this).attr('editor-mode') === 'inline') {
+ e.preventDefault();
+ return;
+ }
+ },
+ paste: function(e) {
+ var elem = $(this);
+ setTimeout(function() {
+ elem.find('*').each(function() {
+ var current = $(this);
+ $.each(this.attributes, function() {
+ if (this.name !== 'class' || !current.hasClass('placeholder')) {
+ current.removeAttr(this.name);
+ }
+ });
+ });
+ }, 100);
+ }
};
- $.fn.notebook.defaults = {
- autoFocus: false,
- placeholder: 'Your text here...',
- mode: 'multiline',
- modifiers: ['bold', 'italic', 'underline', 'h1', 'h2', 'ol', 'ul', 'anchor']
- };
+ $.fn.notebook = function(options) {
+ options = $.extend({}, $.fn.notebook.defaults, options);
+ actions.prepare(this, options);
+ actions.bindEvents(this);
+ return this;
+ };
+
+ $.fn.notebook.defaults = {
+ autoFocus: false,
+ placeholder: 'Your text here...',
+ mode: 'multiline',
+ modifiers: ['bold', 'italic', 'underline', 'h1', 'h2', 'ol', 'ul', 'anchor']
+ };
-})(jQuery, document, window);
+})(jQuery, document, window);
\ No newline at end of file