-
- .
You can redistribute and/or modify it under the terms of the LGPL.
(http://www.gnu.org/licenses/lgpl.html)
-Following is a list of dependencies:
- * prototype javascript framework
- * Homepage: http://prototypejs.org
- * License: http://dev.rubyonrails.org/browser/spinoffs/prototype/trunk/LICENSE?format=raw
+While Xquared itself has no dependencies with external libraries, you need following libraries in order to build Xquared from source code:
* jsspec
* Homepage: http://jania.pe.kr/aw/moin.cgi/JSSpec
* License: http://www.gnu.org/licenses/lgpl.html
* yui-compressor
* Homepage: http://developer.yahoo.com/yui/compressor/
* License: http://developer.yahoo.com/yui/license.html
+ * selenium-core
+ * Homepage: http://selenium-core.openqa.org/
+ * License: http://selenium-core.openqa.org/license.jsp
+ * jsdoc_toolkit
+ * Homepage: http://code.google.com/p/jsdoc-toolkit/
+ * License: http://www.opensource.org/licenses/mit-license.php
\ No newline at end of file
diff --git a/modules/editor/skins/xquared/README b/modules/editor/skins/xquared/README
index dcdd58778..ff702cde2 100644
--- a/modules/editor/skins/xquared/README
+++ b/modules/editor/skins/xquared/README
@@ -4,6 +4,6 @@ editor module aim to support major modern web browsers.
This software is licensed under the terms you may find in the file
named "LICENSE" in this directory.
-For more information, see http://labs.openmaru.com/projects/xquared/
+For more information, see http://xquared.springbook.playmaru.net/
Thanks for using Xquared.
\ No newline at end of file
diff --git a/modules/editor/skins/xquared/editor.html b/modules/editor/skins/xquared/editor.html
index 674d9936d..5aa6e3ef2 100644
--- a/modules/editor/skins/xquared/editor.html
+++ b/modules/editor/skins/xquared/editor.html
@@ -1,14 +1,14 @@
-
-
+
+
-
-
+
+
@@ -40,7 +40,7 @@
-
+
diff --git a/modules/editor/skins/xquared/images/content/placeholder.gif b/modules/editor/skins/xquared/images/content/placeholder.gif
new file mode 100644
index 000000000..af4601238
Binary files /dev/null and b/modules/editor/skins/xquared/images/content/placeholder.gif differ
diff --git a/modules/editor/skins/xquared/images/toolbar/iframe.gif b/modules/editor/skins/xquared/images/toolbar/iframe.gif
new file mode 100644
index 000000000..6f351c37a
Binary files /dev/null and b/modules/editor/skins/xquared/images/toolbar/iframe.gif differ
diff --git a/modules/editor/skins/xquared/images/toolbar/movie.gif b/modules/editor/skins/xquared/images/toolbar/movie.gif
new file mode 100644
index 000000000..43cbafb50
Binary files /dev/null and b/modules/editor/skins/xquared/images/toolbar/movie.gif differ
diff --git a/modules/editor/skins/xquared/images/toolbar/removeLink.gif b/modules/editor/skins/xquared/images/toolbar/removeLink.gif
new file mode 100644
index 000000000..0049162b7
Binary files /dev/null and b/modules/editor/skins/xquared/images/toolbar/removeLink.gif differ
diff --git a/modules/editor/skins/xquared/javascripts/Browser.js b/modules/editor/skins/xquared/javascripts/Browser.js
new file mode 100644
index 000000000..c9035b82e
--- /dev/null
+++ b/modules/editor/skins/xquared/javascripts/Browser.js
@@ -0,0 +1,110 @@
+/**
+ * @namespace Contains browser detection codes
+ *
+ * @requires Xquared.js
+ */
+xq.Browser = new function() {
+ // By Rendering Engines
+
+ /**
+ * True if rendering engine is Trident
+ * @type boolean
+ */
+ this.isTrident = navigator.appName === "Microsoft Internet Explorer",
+
+ /**
+ * True if rendering engine is Webkit
+ * @type boolean
+ */
+ this.isWebkit = navigator.userAgent.indexOf('AppleWebKit/') > -1,
+
+ /**
+ * True if rendering engine is Gecko
+ * @type boolean
+ */
+ this.isGecko = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') === -1,
+
+ /**
+ * True if rendering engine is KHTML
+ * @type boolean
+ */
+ this.isKHTML = navigator.userAgent.indexOf('KHTML') !== -1,
+
+ /**
+ * True if rendering engine is Presto
+ * @type boolean
+ */
+ this.isPresto = navigator.appName === "Opera",
+
+
+
+ // By Platforms
+ /**
+ * True if platform is Mac
+ * @type boolean
+ */
+ this.isMac = navigator.userAgent.indexOf("Macintosh") !== -1,
+
+ /**
+ * True if platform is Ubuntu Linux
+ * @type boolean
+ */
+ this.isUbuntu = navigator.userAgent.indexOf('Ubuntu') !== -1,
+
+ /**
+ * True if platform is Windows
+ * @type boolean
+ */
+ this.isWin = navigator.userAgent.indexOf('Windows') !== -1,
+
+
+
+ // By Browsers
+ /**
+ * True if browser is Internet Explorer
+ * @type boolean
+ */
+ this.isIE = navigator.appName === "Microsoft Internet Explorer",
+
+ /**
+ * True if browser is Internet Explorer 6
+ * @type boolean
+ */
+ this.isIE6 = navigator.userAgent.indexOf('MSIE 6') !== -1,
+
+ /**
+ * True if browser is Internet Explorer 7
+ * @type boolean
+ */
+ this.isIE7 = navigator.userAgent.indexOf('MSIE 7') !== -1,
+
+ /**
+ * True if browser is Internet Explorer 8
+ * @type boolean
+ */
+ this.isIE8 = navigator.userAgent.indexOf('MSIE 8') !== -1,
+
+ /**
+ * True if browser is Firefox
+ * @type boolean
+ */
+ this.isFF = navigator.userAgent.indexOf('Firefox') !== -1,
+
+ /**
+ * True if browser is Firefox 2
+ * @type boolean
+ */
+ this.isFF2 = navigator.userAgent.indexOf('Firefox/2') !== -1,
+
+ /**
+ * True if browser is Firefox 3
+ * @type boolean
+ */
+ this.isFF3 = navigator.userAgent.indexOf('Firefox/3') !== -1,
+
+ /**
+ * True if browser is Safari
+ * @type boolean
+ */
+ this.isSafari = navigator.userAgent.indexOf('Safari') !== -1
+};
\ No newline at end of file
diff --git a/modules/editor/skins/xquared/javascripts/DomTree.js b/modules/editor/skins/xquared/javascripts/DomTree.js
new file mode 100644
index 000000000..488902f74
--- /dev/null
+++ b/modules/editor/skins/xquared/javascripts/DomTree.js
@@ -0,0 +1,329 @@
+/**
+ * @requires Xquared.js
+ */
+xq.DomTree = xq.Class(/** @lends xq.DomTree.prototype */{
+ /**
+ * Provides various tree operations.
+ *
+ * TODO: Add specs
+ *
+ * @constructs
+ */
+ initialize: function() {
+ xq.addToFinalizeQueue(this);
+
+ this._blockTags = ["DIV", "DD", "LI", "ADDRESS", "CAPTION", "DT", "H1", "H2", "H3", "H4", "H5", "H6", "HR", "P", "BODY", "BLOCKQUOTE", "PRE", "PARAM", "DL", "OL", "UL", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"];
+ this._blockContainerTags = ["DIV", "DD", "LI", "BODY", "BLOCKQUOTE", "UL", "OL", "DL", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"];
+ this._listContainerTags = ["OL", "UL", "DL"];
+ this._tableCellTags = ["TH", "TD"];
+ this._blockOnlyContainerTags = ["BODY", "BLOCKQUOTE", "UL", "OL", "DL", "TABLE", "THEAD", "TBODY", "TR"];
+ this._atomicTags = ["IMG", "OBJECT", "PARAM", "BR", "HR"];
+ },
+
+ getBlockTags: function() {
+ return this._blockTags;
+ },
+
+ /**
+ * Find common ancestor(parent) and his immediate children(left and right).
+
+
diff --git a/modules/editor/skins/xquared/LICENSE b/modules/editor/skins/xquared/LICENSE
index b47e925fd..7a9ef2b6d 100644
--- a/modules/editor/skins/xquared/LICENSE
+++ b/modules/editor/skins/xquared/LICENSE
@@ -2,13 +2,16 @@ Xquared is copyrighted free software by Alan Kang
-
-
-
+
+
+
{$upload_status}
+ *
+ * A --- B -+- C -+- D -+- E
+ * |
+ * +- F -+- G
+ *
+ * For example:
+ * > findCommonAncestorAndImmediateChildrenOf("E", "G")
+ *
+ * will return
+ *
+ * > {parent:"B", left:"C", right:"F"} + */ + findCommonAncestorAndImmediateChildrenOf: function(left, right) { + if(left.parentNode === right.parentNode) { + return { + left:left, + right:right, + parent:left.parentNode + }; + } else { + var parentsOfLeft = this.collectParentsOf(left, true); + var parentsOfRight = this.collectParentsOf(right, true); + var ca = this.getCommonAncestor(parentsOfLeft, parentsOfRight); + + var leftAncestor = parentsOfLeft.find(function(node) {return node.parentNode === ca}); + var rightAncestor = parentsOfRight.find(function(node) {return node.parentNode === ca}); + + return { + left:leftAncestor, + right:rightAncestor, + parent:ca + }; + } + }, + + /** + * Find leaves at edge.
+ *
+ * A --- B -+- C -+- D -+- E
+ * |
+ * +- F -+- G
+ *
+ * For example:
+ * > getLeavesAtEdge("A")
+ *
+ * will return
+ *
+ * > ["E", "G"] + */ + getLeavesAtEdge: function(element) { + if(!element.hasChildNodes()) return [null, null]; + + var findLeft = function(el) { + for (var i = 0; i < el.childNodes.length; i++) { + if (el.childNodes[i].nodeType === 1 && this.isBlock(el.childNodes[i])) return findLeft(el.childNodes[i]); + } + return el; + }.bind(this); + + var findRight=function(el) { + for (var i = el.childNodes.length; i--;) { + if (el.childNodes[i].nodeType === 1 && this.isBlock(el.childNodes[i])) return findRight(el.childNodes[i]); + } + return el; + }.bind(this); + + var left = findLeft(element); + var right = findRight(element); + + return [left === element ? null : left, right === element ? null : right]; + }, + + getCommonAncestor: function(parents1, parents2) { + for(var i = 0; i < parents1.length; i++) { + for(var j = 0; j < parents2.length; j++) { + if(parents1[i] === parents2[j]) return parents1[i]; + } + } + }, + + collectParentsOf: function(node, includeSelf, exitCondition) { + var parents = []; + if(includeSelf) parents.push(node); + + while((node = node.parentNode) && (node.nodeName !== "HTML") && !(typeof exitCondition === "function" && exitCondition(node))) parents.push(node); + return parents; + }, + + isDescendantOf: function(parent, child) { + if(parent.length > 0) { + for(var i = 0; i < parent.length; i++) { + if(this.isDescendantOf(parent[i], child)) return true; + } + return false; + } + + if(parent === child) return false; + + while (child = child.parentNode) + if (child === parent) return true; + return false; + }, + + /** + * Perform tree walking (foreward) + */ + walkForward: function(node) { + var target = node.firstChild; + if(target) return target; + + // intentional assignment for micro performance turing + if(target = node.nextSibling) return target; + + while(node = node.parentNode) { + // intentional assignment for micro performance turing + if(target = node.nextSibling) return target; + } + + return null; + }, + + /** + * Perform tree walking (backward) + */ + walkBackward: function(node) { + if(node.previousSibling) { + node = node.previousSibling; + while(node.hasChildNodes()) {node = node.lastChild;} + return node; + } + + return node.parentNode; + }, + + /** + * Perform tree walking (to next siblings) + */ + walkNext: function(node) {return node.nextSibling}, + + /** + * Perform tree walking (to next siblings) + */ + walkPrev: function(node) {return node.previousSibling}, + + /** + * Returns true if target is followed by start + */ + checkTargetForward: function(start, target) { + return this._check(start, this.walkForward, target); + }, + + /** + * Returns true if start is followed by target + */ + checkTargetBackward: function(start, target) { + return this._check(start, this.walkBackward, target); + }, + + findForward: function(start, condition, exitCondition) { + return this._find(start, this.walkForward, condition, exitCondition); + }, + + findBackward: function(start, condition, exitCondition) { + return this._find(start, this.walkBackward, condition, exitCondition); + }, + + _check: function(start, direction, target) { + if(start === target) return false; + + while(start = direction(start)) { + if(start === target) return true; + } + return false; + }, + + _find: function(start, direction, condition, exitCondition) { + while(start = direction(start)) { + if(exitCondition && exitCondition(start)) return null; + if(condition(start)) return start; + } + return null; + }, + + /** + * Walks Forward through DOM tree from start to end, and collects all nodes that matches with a filter. + * If no filter provided, it just collects all nodes. + * + * @param {Element} start Starting element. + * @param {Element} end Ending element. + * @param {Function} filter A filter function. + */ + collectNodesBetween: function(start, end, filter) { + if(start === end) return [start, end].findAll(filter || function() {return true}); + + var nodes = this.collectForward(start, function(node) {return node === end}, filter); + if( + start !== end && + typeof filter === "function" && + filter(end) + ) nodes.push(end); + + return nodes; + }, + + collectForward: function(start, exitCondition, filter) { + return this.collect(start, this.walkForward, exitCondition, filter); + }, + + collectBackward: function(start, exitCondition, filter) { + return this.collect(start, this.walkBackward, exitCondition, filter); + }, + + collectNext: function(start, exitCondition, filter) { + return this.collect(start, this.walkNext, exitCondition, filter); + }, + + collectPrev: function(start, exitCondition, filter) { + return this.collect(start, this.walkPrev, exitCondition, filter); + }, + + collect: function(start, next, exitCondition, filter) { + var nodes = [start]; + + while(true) { + start = next(start); + if( + (start === null) || + (typeof exitCondition === "function" && exitCondition(start)) + ) break; + + nodes.push(start); + } + + return (typeof filter === "function") ? nodes.findAll(filter) : nodes; + }, + + hasBlocks: function(element) { + var nodes = element.childNodes; + for(var i = 0; i < nodes.length; i++) { + if(this.isBlock(nodes[i])) return true; + } + return false; + }, + + hasMixedContents: function(element) { + if(!this.isBlock(element)) return false; + if(!this.isBlockContainer(element)) return false; + + var hasTextOrInline = false; + var hasBlock = false; + for(var i = 0; i < element.childNodes.length; i++) { + var node = element.childNodes[i]; + if(!hasTextOrInline && this.isTextOrInlineNode(node)) hasTextOrInline = true; + if(!hasBlock && this.isBlock(node)) hasBlock = true; + + if(hasTextOrInline && hasBlock) break; + } + if(!hasTextOrInline || !hasBlock) return false; + + return true; + }, + + isBlockOnlyContainer: function(element) { + if(!element) return false; + return this._blockOnlyContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isTableCell: function(element) { + if(!element) return false; + return this._tableCellTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isBlockContainer: function(element) { + if(!element) return false; + return this._blockContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isHeading: function(element) { + if(!element) return false; + return (typeof element === 'string' ? element : element.nodeName).match(/H\d/); + }, + + isBlock: function(element) { + if(!element) return false; + return this._blockTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isAtomic: function(element) { + if(!element) return false; + return this._atomicTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isListContainer: function(element) { + if(!element) return false; + return this._listContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isTextOrInlineNode: function(node) { + return node && (node.nodeType === 3 || !this.isBlock(node)); + } +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/EditHistory.js b/modules/editor/skins/xquared/javascripts/EditHistory.js new file mode 100644 index 000000000..c0e79fea0 --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/EditHistory.js @@ -0,0 +1,151 @@ +/** + * @requires Xquared.js + * @requires rdom/Factory.js + */ +xq.EditHistory = xq.Class(/** @lends xq.EditHistory.prototype */{ + /** + * Manages editing history and performs UNDO/REDO. + * + * @constructs + * @param {xq.rdom.Base} rdom Base instance + * @param {Number} [max=100] maximum UNDO buffer size. + */ + initialize: function(rdom, max) { + xq.addToFinalizeQueue(this); + if (!rdom) throw "IllegalArgumentException"; + + this.disabled = false; + this.max = max || 100; + this.rdom = rdom; + this.index = -1; + this.queue = []; + + this.lastModified = Date.get(); + }, + getLastModifiedDate: function() { + return this.lastModified; + }, + isUndoable: function() { + return this.queue.length > 0 && this.index > 0; + }, + isRedoable: function() { + return this.queue.length > 0 && this.index < this.queue.length - 1; + }, + disable: function() { + this.disabled = true; + }, + enable: function() { + this.disabled = false; + }, + undo: function() { + this.pushContent(); + + if (this.isUndoable()) { + this.index--; + this.popContent(); + return true; + } else { + return false; + } + }, + redo: function() { + if (this.isRedoable()) { + this.index++; + this.popContent(); + return true; + } else { + return false; + } + }, + onCommand: function() { + this.lastModified = Date.get(); + if(this.disabled) return false; + + return this.pushContent(); + }, + onEvent: function(event) { + this.lastModified = Date.get(); + if(this.disabled) return false; + + var arrowKeys = [33,34,35,36,37,39]; + // @WORKAROUND: Mac에서 화살표 up/down 누를 때 pushContent 하면 캐럿이 튄다 + if(!xq.Browser.isMac) arrowKeys.push(38,40); + + // ignore some event types + if(['blur', 'mouseup'].indexOf(event.type) !== -1) return false; + + // ignore normal keys + if('keydown' === event.type && !(event.ctrlKey || event.metaKey)) return false; + if(['keydown', 'keyup', 'keypress'].indexOf(event.type) !== -1 && !event.ctrlKey && !event.altKey && !event.metaKey && arrowKeys.indexOf(event.keyCode) === -1) return false; + if(['keydown', 'keyup', 'keypress'].indexOf(event.type) !== -1 && (event.ctrlKey || event.metaKey) && [89,90].indexOf(event.keyCode) !== -1) return false; + + // ignore ctrl/shift/alt/meta keys + if([16,17,18,224].indexOf(event.keyCode) !== -1) return false; + + return this.pushContent(); + }, + popContent: function() { + this.lastModified = Date.get(); + var entry = this.queue[this.index]; + if (entry.caret > 0) { + var html=entry.html.substring(0, entry.caret) + '' + entry.html.substring(entry.caret); + this.rdom.getRoot().innerHTML = html; + } else { + this.rdom.getRoot().innerHTML = entry.html; + } + this.restoreCaret(); + }, + pushContent: function(ignoreCaret) { + if(xq.Browser.isTrident && !ignoreCaret && !this.rdom.hasFocus()) return false; + if(!this.rdom.getCurrentElement()) return false; + + var html = this.rdom.getRoot().innerHTML; + if(html === (this.queue[this.index] ? this.queue[this.index].html : null)) return false; + + var caret = ignoreCaret ? -1 : this.saveCaret(); + + if(this.queue.length >= this.max) { + this.queue.shift(); + } else { + this.index++; + } + + this.queue.splice(this.index, this.queue.length - this.index, {html:html, caret:caret}); + return true; + }, + clear: function() { + this.index = -1; + this.queue = []; + this.pushContent(true); + }, + saveCaret: function() { + if(this.rdom.hasSelection()) return null; + + var bookmark = this.rdom.saveSelection(); + var marker = this.rdom.pushMarker(); + + var str = xq.Browser.isTrident ? ' + * Note that the validation will be performed regardless of this value when you switching edit mode. + * @type boolean + */ + this.config.noValidationInSourceEditMode = false; + + /** + * Automatically hooks onsubmit event. + * @type boolean + */ + this.config.automaticallyHookSubmitEvent = true; + + /** + * Set of whitelist(tag name and attributes) for use in validator + * @type Object + */ + this.config.whitelist = xq.predefinedWhitelist; + + /** + * Specifies a value of ID attribute for WYSIWYG document's body + * @type String + */ + this.config.bodyId = ""; + + /** + * Specifies a value of CLASS attribute for WYSIWYG document's body + * @type String + */ + this.config.bodyClass = "xed"; + + /** + * Plugins + * @type Object + */ + this.config.plugins = {}; + + /** + * Shortcuts + * @type Object + */ + this.config.shortcuts = {}; + + /** + * Autocorrections + * @type Object + */ + this.config.autocorrections = {}; + + /** + * Autocompletions + * @type Object + */ + this.config.autocompletions = {}; + + /** + * Template processors + * @type Object + */ + this.config.templateProcessors = {}; + + /** + * Context menu handlers + * @type Object + */ + this.config.contextMenuHandlers = {}; + + /** + * Original content element + * @type Element + */ + this.contentElement = contentElement; + + /** + * Owner document of content element + * @type Document + */ + this.doc = this.contentElement.ownerDocument; + + /** + * Body of content element + * @type Element + */ + this.body = this.doc.body; + + /** + * False or 'source' means source editing mode, true or 'wysiwyg' means WYSIWYG editing mode. + * @type Object + */ + this.currentEditMode = ''; + + /** + * Timer + * @type xq.Timer + */ + this.timer = new xq.Timer(100); + + /** + * Base instance + * @type xq.rdom.Base + */ + this.rdom = xq.rdom.Base.createInstance(); + + /** + * Base instance + * @type xq.validator.Base + */ + this.validator = null; + + /** + * Outmost wrapper div + * @type Element + */ + this.outmostWrapper = null; + + /** + * Source editor container + * @type Element + */ + this.sourceEditorDiv = null; + + /** + * Source editor textarea + * @type Element + */ + this.sourceEditorTextarea = null; + + /** + * WYSIWYG editor container + * @type Element + */ + this.wysiwygEditorDiv = null; + + /** + * Outer frame + * @type IFrame + */ + this.outerFrame = null; + + /** + * Design mode iframe + * @type IFrame + */ + this.editorFrame = null; + + this.toolbarContainer = toolbarContainer; + + /** + * Toolbar container + * @type Element + */ + this.toolbar = null; + + /** + * Undo/redo manager + * @type xq.EditHistory + */ + this.editHistory = null; + + /** + * Context menu container + * @type Element + */ + this.contextMenuContainer = null; + + /** + * Context menu items + * @type Array + */ + this.contextMenuItems = null; + + /** + * Platform dependent key event type + * @type String + */ + this.platformDepedentKeyEventType = (xq.Browser.isMac && xq.Browser.isGecko ? "keypress" : "keydown"); + + this.addShortcuts(this.getDefaultShortcuts()); + + this.addListener({ + onEditorCurrentContentChanged: function(xed) { + var curFocusElement = xed.rdom.getCurrentElement(); + if(!curFocusElement || curFocusElement.ownerDocument !== xed.rdom.getDoc()) { + return; + } + + if(xed.lastFocusElement !== curFocusElement) { + if(!xed.rdom.tree.isBlockOnlyContainer(xed.lastFocusElement) && xed.rdom.tree.isBlock(xed.lastFocusElement)) { + xed.rdom.removeTrailingWhitespace(xed.lastFocusElement); + } + xed._fireOnElementChanged(xed, xed.lastFocusElement, curFocusElement); + xed.lastFocusElement = curFocusElement; + } + + xed.toolbar.triggerUpdate(); + } + }); + }, + + finalize: function() { + for(var key in this.config.plugins) this.config.plugins[key].unload(); + }, + + + + ///////////////////////////////////////////// + // Configuration Management + + getDefaultShortcuts: function() { + if(xq.Browser.isMac) { + // Mac FF & Safari + return [ + {event:"Ctrl+Shift+SPACE", handler:"this.handleAutocompletion(); stop = true;"}, + {event:"SPACE", handler:"this.handleSpace()"}, + {event:"ENTER", handler:"this.handleEnter(false, false)"}, + {event:"Ctrl+ENTER", handler:"this.handleEnter(true, false)"}, + {event:"Ctrl+Shift+ENTER", handler:"this.handleEnter(true, true)"}, + {event:"TAB", handler:"this.handleTab()"}, + {event:"Shift+TAB", handler:"this.handleShiftTab()"}, + {event:"DELETE", handler:"this.handleDelete()"}, + {event:"BACKSPACE", handler:"this.handleBackspace()"}, + + {event:"Ctrl+B", handler:"this.handleStrongEmphasis()"}, + {event:"Meta+B", handler:"this.handleStrongEmphasis()"}, + {event:"Ctrl+I", handler:"this.handleEmphasis()"}, + {event:"Meta+I", handler:"this.handleEmphasis()"}, + {event:"Ctrl+U", handler:"this.handleUnderline()"}, + {event:"Meta+U", handler:"this.handleUnderline()"}, + {event:"Ctrl+K", handler:"this.handleStrike()"}, + {event:"Meta+K", handler:"this.handleStrike()"}, + {event:"Meta+Z", handler:"this.handleUndo()"}, + {event:"Meta+Shift+Z", handler:"this.handleRedo()"}, + {event:"Meta+Y", handler:"this.handleRedo()"} + ]; + } else if(xq.Browser.isUbuntu) { + // Ubunto FF + return [ + {event:"Ctrl+SPACE", handler:"this.handleAutocompletion(); stop = true;"}, + {event:"SPACE", handler:"this.handleSpace()"}, + {event:"ENTER", handler:"this.handleEnter(false, false)"}, + {event:"Ctrl+ENTER", handler:"this.handleEnter(true, false)"}, + {event:"Ctrl+Shift+ENTER", handler:"this.handleEnter(true, true)"}, + {event:"TAB", handler:"this.handleTab()"}, + {event:"Shift+TAB", handler:"this.handleShiftTab()"}, + {event:"DELETE", handler:"this.handleDelete()"}, + {event:"BACKSPACE", handler:"this.handleBackspace()"}, + + {event:"Ctrl+B", handler:"this.handleStrongEmphasis()"}, + {event:"Ctrl+I", handler:"this.handleEmphasis()"}, + {event:"Ctrl+U", handler:"this.handleUnderline()"}, + {event:"Ctrl+K", handler:"this.handleStrike()"}, + {event:"Ctrl+Z", handler:"this.handleUndo()"}, + {event:"Ctrl+Shift+Z", handler:"this.handleRedo()"}, + {event:"Ctrl+Y", handler:"this.handleRedo()"} + ]; + } else { + // Win IE & FF + return [ + {event:"Ctrl+SPACE", handler:"this.handleAutocompletion(); stop = true;"}, + {event:"SPACE", handler:"this.handleSpace()"}, + {event:"ENTER", handler:"this.handleEnter(false, false)"}, + {event:"Ctrl+ENTER", handler:"this.handleEnter(true, false)"}, + {event:"Ctrl+Shift+ENTER", handler:"this.handleEnter(true, true)"}, + {event:"TAB", handler:"this.handleTab()"}, + {event:"Shift+TAB", handler:"this.handleShiftTab()"}, + {event:"DELETE", handler:"this.handleDelete()"}, + {event:"BACKSPACE", handler:"this.handleBackspace()"}, + + {event:"Ctrl+B", handler:"this.handleStrongEmphasis()"}, + {event:"Ctrl+I", handler:"this.handleEmphasis()"}, + {event:"Ctrl+U", handler:"this.handleUnderline()"}, + {event:"Ctrl+K", handler:"this.handleStrike()"}, + {event:"Ctrl+Z", handler:"this.handleUndo()"}, + {event:"Ctrl+Shift+Z", handler:"this.handleRedo()"}, + {event:"Ctrl+Y", handler:"this.handleRedo()"} + ]; + } + }, + + /** + * Adds or replaces plugin. + * + * @param {String} id unique identifier + */ + addPlugin: function(id) { + // already added? + if(this.config.plugins[id]) return; + + // else + var clazz = xq.plugin[id + "Plugin"]; + if(!clazz) throw "Unknown plugin id: [" + id + "]"; + + var plugin = new clazz(); + this.config.plugins[id] = plugin; + plugin.load(this); + }, + + /** + * Adds several plugins at once. + * + * @param {Array} list of plugin ids. + */ + addPlugins: function(list) { + for(var i = 0; i < list.length; i++) { + this.addPlugin(list[i]); + } + }, + + /** + * Returns plugin matches with given identifier. + * + * @param {String} id unique identifier + */ + getPlugin: function(id) {return this.config.plugins[id];}, + + /** + * Returns entire plugins + */ + getPlugins: function() {return this.config.plugins;}, + + /** + * Remove plugin matches with given identifier. + * + * @param {String} id unique identifier + */ + removePlugin: function(id) { + var plugin = this.config.shortcuts[id]; + if(plugin) { + plugin.unload(); + } + + delete this.config.shortcuts[id]; + }, + + + + /** + * Adds or replaces keyboard shortcut. + * + * @param {String} shortcut keymap expression like "CTRL+Space" + * @param {Object} handler string or function to be evaluated or called + */ + addShortcut: function(shortcut, handler) { + this.config.shortcuts[shortcut] = {"event":new xq.Shortcut(shortcut), "handler":handler}; + }, + + /** + * Adds several keyboard shortcuts at once. + * + * @param {Array} list of shortcuts. each element should have following structure: {event:"keymap expression", handler:handler} + */ + addShortcuts: function(list) { + for(var i = 0; i < list.length; i++) { + this.addShortcut(list[i].event, list[i].handler); + } + }, + + /** + * Returns keyboard shortcut matches with given keymap expression. + * + * @param {String} shortcut keymap expression like "CTRL+Space" + */ + getShortcut: function(shortcut) {return this.config.shortcuts[shortcut];}, + + /** + * Returns entire keyboard shortcuts' map + */ + getShortcuts: function() {return this.config.shortcuts;}, + + /** + * Remove keyboard shortcut matches with given keymap expression. + * + * @param {String} shortcut keymap expression like "CTRL+Space" + */ + removeShortcut: function(shortcut) {delete this.config.shortcuts[shortcut];}, + + /** + * Adds or replaces autocorrection handler. + * + * @param {String} id unique identifier + * @param {Object} criteria regex pattern or function to be used as a criterion for match + * @param {Object} handler string or function to be evaluated or called when criteria met + */ + addAutocorrection: function(id, criteria, handler) { + if(criteria.exec) { + var pattern = criteria; + criteria = function(text) {return text.match(pattern)}; + } + this.config.autocorrections[id] = {"criteria":criteria, "handler":handler}; + }, + + /** + * Adds several autocorrection handlers at once. + * + * @param {Array} list of autocorrection. each element should have following structure: {id:"identifier", criteria:criteria, handler:handler} + */ + addAutocorrections: function(list) { + for(var i = 0; i < list.length; i++) { + this.addAutocorrection(list[i].id, list[i].criteria, list[i].handler); + } + }, + + /** + * Returns autocorrection handler matches with given id + * + * @param {String} id unique identifier + */ + getAutocorrection: function(id) {return this.config.autocorrection[id];}, + + /** + * Returns entire autocorrections' map + */ + getAutocorrections: function() {return this.config.autocorrections;}, + + /** + * Removes autocorrection handler matches with given id + * + * @param {String} id unique identifier + */ + removeAutocorrection: function(id) {delete this.config.autocorrections[id];}, + + /** + * Adds or replaces autocompletion handler. + * + * @param {String} id unique identifier + * @param {Object} criteria regex pattern or function to be used as a criterion for match + * @param {Object} handler string or function to be evaluated or called when criteria met + */ + addAutocompletion: function(id, criteria, handler) { + if(criteria.exec) { + var pattern = criteria; + criteria = function(text) { + var m = pattern.exec(text); + return m ? m.index : -1; + }; + } + this.config.autocompletions[id] = {"criteria":criteria, "handler":handler}; + }, + + /** + * Adds several autocompletion handlers at once. + * + * @param {Array} list of autocompletion. each element should have following structure: {id:"identifier", criteria:criteria, handler:handler} + */ + addAutocompletions: function(list) { + for(var i = 0; i < list.length; i++) { + this.addAutocompletion(list[i].id, list[i].criteria, list[i].handler); + } + }, + + /** + * Returns autocompletion handler matches with given id + * + * @param {String} id unique identifier + */ + getAutocompletion: function(id) {return this.config.autocompletions[id];}, + + /** + * Returns entire autocompletions' map + */ + getAutocompletions: function() {return this.config.autocompletions;}, + + /** + * Removes autocompletion handler matches with given id + * + * @param {String} id unique identifier + */ + removeAutocompletion: function(id) {delete this.config.autocompletions[id];}, + + /** + * Adds or replaces template processor. + * + * @param {String} id unique identifier + * @param {Object} handler string or function to be evaluated or called when template inserted + */ + addTemplateProcessor: function(id, handler) { + this.config.templateProcessors[id] = {"handler":handler}; + }, + + /** + * Adds several template processors at once. + * + * @param {Array} list of template processors. Each element should have following structure: {id:"identifier", handler:handler} + */ + addTemplateProcessors: function(list) { + for(var i = 0; i < list.length; i++) { + this.addTemplateProcessor(list[i].id, list[i].handler); + } + }, + + /** + * Returns template processor matches with given id + * + * @param {String} id unique identifier + */ + getTemplateProcessor: function(id) {return this.config.templateProcessors[id];}, + + /** + * Returns entire template processors' map + */ + getTemplateProcessors: function() {return this.config.templateProcessors;}, + + /** + * Removes template processor matches with given id + * + * @param {String} id unique identifier + */ + removeTemplateProcessor: function(id) {delete this.config.templateProcessors[id];}, + + + + /** + * Adds or replaces context menu handler. + * + * @param {String} id unique identifier + * @param {Object} handler string or function to be evaluated or called when onContextMenu occured + */ + addContextMenuHandler: function(id, handler) { + this.config.contextMenuHandlers[id] = {"handler":handler}; + }, + + /** + * Adds several context menu handlers at once. + * + * @param {Array} list of handlers. Each element should have following structure: {id:"identifier", handler:handler} + */ + addContextMenuHandlers: function(list) { + for(var i = 0; i < list.length; i++) { + this.addContextMenuHandler(list[i].id, list[i].handler); + } + }, + + /** + * Returns context menu handler matches with given id + * + * @param {String} id unique identifier + */ + getContextMenuHandler: function(id) {return this.config.contextMenuHandlers[id];}, + + /** + * Returns entire context menu handlers' map + */ + getContextMenuHandlers: function() {return this.config.contextMenuHandlers;}, + + /** + * Removes context menu handler matches with given id + * + * @param {String} id unique identifier + */ + removeContextMenuHandler: function(id) {delete this.config.contextMenuHandlers[id];}, + + + + /** + * Sets width of editor. + * + * @param {String} w Valid CSS value for style.width. For example, "100%", "200px". + */ + setWidth: function(w) { + this.outmostWrapper.style.width = w; + }, + + + + /** + * Sets height of editor. + * + * @param {String} h Valid CSS value for style.height. For example, "100%", "200px". + */ + setHeight: function(h) { + this.wysiwygEditorDiv.style.height = h; + this.sourceEditorDiv.style.height = h; + }, + + + + ///////////////////////////////////////////// + // Edit mode management + + /** + * Returns current edit mode - wysiwyg, source + */ + getCurrentEditMode: function() { + return this.currentEditMode; + }, + + /** + * Toggle edit mode between source and wysiwyg + */ + toggleSourceAndWysiwygMode: function() { + var mode = this.getCurrentEditMode(); + this.setEditMode(mode === 'wysiwyg' ? 'source' : 'wysiwyg'); + }, + + /** + * Switches between WYSIWYG/Source mode. + * + * @param {String} mode 'wysiwyg' means WYSIWYG editing mode, and 'source' means source editing mode. + */ + setEditMode: function(mode) { + if(typeof mode !== 'string') throw "[mode] is not a string." + if(['wysiwyg', 'source'].indexOf(mode) === -1) throw "Illegal [mode] value: '" + mode + "'. Use 'wysiwyg' or 'source'"; + if(this.currentEditMode === mode) return; + + // create editor frame if there's no editor frame. + var editorCreated = !!this.outmostWrapper; + if(!editorCreated) { + // create validator + this.validator = xq.validator.Base.createInstance( + this.doc.location.href, + this.config.urlValidationMode, + this.config.whitelist + ); + + this._fireOnStartInitialization(this); + + this._createEditorFrame(mode); + var temp = window.setInterval(function() { + // wait for loading + if(this.getBody()) { + window.clearInterval(temp); + + // @WORKAROUND: it is needed to fix IE6 horizontal scrollbar problem + if(xq.Browser.isIE6) { + this.rdom.getDoc().documentElement.style.overflowY='auto'; + this.rdom.getDoc().documentElement.style.overflowX='hidden'; + } + + this.setEditMode(mode); + if(this.config.autoFocusOnInit) this.focus(); + + this.timer.start(); + this._fireOnInitialized(this); + } + }.bind(this), 10); + + return; + } + + // switch mode + if(mode === 'wysiwyg') { + this._setEditModeToWysiwyg(); + } else { // mode === 'source' + this._setEditModeToSource(); + } + + // fire event + var oldEditMode = this.currentEditMode; + this.currentEditMode = mode; + + this._fireOnCurrentEditModeChanged(this, oldEditMode, this.currentEditMode); + }, + + _setEditModeToWysiwyg: function() { + // Turn off static content and source editor + this.contentElement.style.display = "none"; + this.sourceEditorDiv.style.display = "none"; + + // Update contents + if(this.currentEditMode === 'source') { + // get html from source editor + var html = this.getSourceContent(true); + + // invalidate it and load it into wysiwyg editor + var invalidHtml = this.validator.invalidate(html); + invalidHtml = this.removeUnnecessarySpaces(invalidHtml); + if(invalidHtml.isBlank()) { + this.rdom.clearRoot(); + } else { + this.rdom.getRoot().innerHTML = invalidHtml; + this.rdom.wrapAllInlineOrTextNodesAs("P", this.rdom.getRoot(), true); + } + } else { + // invalidate static html and load it into wysiwyg editor + var invalidHtml = this.validator.invalidate(this.getStaticContent()); + invalidHtml = this.removeUnnecessarySpaces(invalidHtml); + if(invalidHtml.isBlank()) { + this.rdom.clearRoot(); + } else { + this.rdom.getRoot().innerHTML = invalidHtml; + this.rdom.wrapAllInlineOrTextNodesAs("P", this.rdom.getRoot(), true); + } + } + + // Turn on wysiwyg editor + this.wysiwygEditorDiv.style.display = "block"; + this.outmostWrapper.style.display = "block"; + + // Without this, xq.rdom.Base.focus() doesn't work correctly. + if(xq.Browser.isGecko) this.rdom.placeCaretAtStartOf(this.rdom.getRoot()); + + if(this.toolbar) this.toolbar.enableButtons(); + }, + + _setEditModeToSource: function() { + // Update contents + var validHtml = null; + if(this.currentEditMode === 'wysiwyg') { + validHtml = this.getWysiwygContent(); + } else { + validHtml = this.getStaticContent(); + } + this.sourceEditorTextarea.value = validHtml + + // Turn off static content and wysiwyg editor + this.contentElement.style.display = "none"; + this.wysiwygEditorDiv.style.display = "none"; + + // Turn on source editor + this.sourceEditorDiv.style.display = "block"; + this.outmostWrapper.style.display = "block"; + if(this.toolbar) this.toolbar.disableButtons(['html']); + }, + + /** + * Load CSS into WYSIWYG mode document + * + * @param {string} path URL + */ + loadStylesheet: function(path) { + var head = this.getDoc().getElementsByTagName("HEAD")[0]; + var link = this.getDoc().createElement("LINK"); + link.rel = "Stylesheet"; + link.type = "text/css"; + link.href = path; + head.appendChild(link); + }, + + /** + * Sets editor's dynamic content from static content + */ + loadCurrentContentFromStaticContent: function() { + if(this.getCurrentEditMode() == 'wysiwyg') { + // update WYSIWYG editor + var html = this.validator.invalidate(this.getStaticContent()); + html = this.removeUnnecessarySpaces(html); + + if(html.isBlank()) { + this.rdom.clearRoot(); + } else { + this.rdom.getRoot().innerHTML = html; + this.rdom.wrapAllInlineOrTextNodesAs("P", this.rdom.getRoot(), true); + } + } else { // 'source' + this.sourceEditorTextarea.value = this.getStaticContent(); + } + + this._fireOnCurrentContentChanged(this); + }, + + /** + * Removes unnecessary spaces, tabs and new lines. + * + * @param {String} html HTML string. + * @returns {String} Modified HTML string. + */ + removeUnnecessarySpaces: function(html) { + var blocks = this.rdom.tree.getBlockTags().join("|"); + var regex = new RegExp("\\s*<(/?)(" + blocks + ")>\\s*", "img"); + return html.replace(regex, '<$1$2>'); + }, + + /** + * Gets editor's dynamic content from current editor(source or WYSIWYG) + * + * @return {Object} HTML String + */ + getCurrentContent: function() { + if(this.getCurrentEditMode() === 'source') { + return this.getSourceContent(this.config.noValidationInSourceEditMode); + } else { + return this.getWysiwygContent(); + } + }, + + /** + * Gets editor's dynamic content from WYSIWYG editor + * + * @return {Object} HTML String + */ + getWysiwygContent: function() { + return this.validator.validate(this.rdom.getRoot()); + }, + + /** + * Gets editor's dynamic content from source editor + * + * @return {Object} HTML String + */ + getSourceContent: function(noValidation) { + var raw = this.sourceEditorTextarea.value; + if(noValidation) return raw; + + var tempDiv = document.createElement('div'); + tempDiv.innerHTML = this.removeUnnecessarySpaces(raw); + + var rdom = xq.rdom.Base.createInstance(); + rdom.wrapAllInlineOrTextNodesAs("P", tempDiv, true); + + return this.validator.validate(tempDiv, true); + }, + + /** + * Sets editor's original content + * + * @param {Object} content HTML String + */ + setStaticContent: function(content) { + this.contentElement.value = content; + this._fireOnStaticContentChanged(this, content); + }, + + /** + * Gets editor's original content + * + * @return {Object} HTML String + */ + getStaticContent: function() { + return this.contentElement.value; + }, + + /** + * Gets editor's original content as (newely created) DOM node + * + * @return {Element} DIV element + */ + getStaticContentAsDOM: function() { + var div = this.doc.createElement('DIV'); + div.innerHTML = this.contentElement.value; + return div; + }, + + /** + * Gives focus to editor + */ + focus: function() { + if(this.getCurrentEditMode() === 'wysiwyg') { + this.rdom.focus(); + if(this.toolbar) this.toolbar.triggerUpdate(); + } else if(this.getCurrentEditMode() === 'source') { + this.sourceEditorTextarea.focus(); + } + }, + + getWysiwygEditorDiv: function() { + return this.wysiwygEditorDiv; + }, + + getSourceEditorDiv: function() { + return this.sourceEditorDiv; + }, + + /** + * Returns outer iframe object + */ + getOuterFrame: function() { + return this.outerFrame; + }, + + /** + * Returns outer iframe document + */ + getOuterDoc: function() { + return this.outerFrame.contentWindow.document; + }, + + /** + * Returns designmode iframe object + */ + getFrame: function() { + return this.editorFrame; + }, + + /** + * Returns designmode window object + */ + getWin: function() { + return this.rdom.getWin(); + }, + + /** + * Returns designmode document object + */ + getDoc: function() { + return this.rdom.getDoc(); + }, + + /** + * Returns designmode body object + */ + getBody: function() { + return this.rdom.getRoot(); + }, + + /** + * Returns outmost wrapper element + */ + getOutmostWrapper: function() { + return this.outmostWrapper; + }, + + _createIFrame: function(doc, width, height) { + var frame = doc.createElement("iframe"); + + // IE displays warning when a protocol is HTTPS, because IE6 treats IFRAME + // without SRC attribute as insecure. + if(xq.Browser.isIE) frame.src = 'javascript:""'; + + frame.style.width = width || "100%"; + frame.style.height = height || "100%"; + frame.setAttribute("frameBorder", "0"); + frame.setAttribute("marginWidth", "0"); + frame.setAttribute("marginHeight", "0"); + frame.setAttribute("allowTransparency", "auto"); + return frame; + }, + + _createDoc: function(frame, head, cssList, bodyId, bodyClass, body) { + var sb = []; + if(!xq.Browser.isTrident) { + // @WORKAROUND: IE6/7 has caret movement and scrolling problem if I include following DTD. + sb.push(''); + } + sb.push(''); + sb.push(''); + sb.push(''); + if(head) sb.push(head); + + if(cssList) for(var i = 0; i < cssList.length; i++) { + sb.push(''); + } + sb.push(''); + sb.push(''); + if(body) sb.push(body); + sb.push(''); + sb.push(''); + + var doc = frame.contentWindow.document; + doc.open(); + doc.write(sb.join("")); + doc.close(); + return doc; + }, + + _createEditorFrame: function(mode) { + // turn off static content + this.contentElement.style.display = "none"; + + // create outer DIV + this.outmostWrapper = this.doc.createElement('div'); + this.outmostWrapper.className = "xquared"; + this.contentElement.parentNode.insertBefore(this.outmostWrapper, this.contentElement); + + // create toolbar + if(this.toolbarContainer || this.config.generateDefaultToolbar) { + this.toolbar = new xq.ui.Toolbar( + this, + this.toolbarContainer, + this.outmostWrapper, + this.config.defaultToolbarButtonMap, + this.config.imagePathForDefaultToolbar, + function() { + var element = this.getCurrentEditMode() === 'wysiwyg' ? this.lastFocusElement : null; + return element && element.nodeName != "BODY" ? this.rdom.collectStructureAndStyle(element) : null; + }.bind(this) + ); + } + + // create source editor div + this.sourceEditorDiv = this.doc.createElement('div'); + this.sourceEditorDiv.className = "editor source_editor"; //TODO: remove editor + this.sourceEditorDiv.style.display = "none"; + this.outmostWrapper.appendChild(this.sourceEditorDiv); + + // create TEXTAREA for source editor + this.sourceEditorTextarea = this.doc.createElement('textarea'); + this.sourceEditorDiv.appendChild(this.sourceEditorTextarea); + + // create WYSIWYG editor div + this.wysiwygEditorDiv = this.doc.createElement('div'); + this.wysiwygEditorDiv.className = "editor wysiwyg_editor"; //TODO: remove editor + this.outmostWrapper.appendChild(this.wysiwygEditorDiv); + + // create outer iframe for WYSIWYG editor + this.outerFrame = this._createIFrame(document); + this.wysiwygEditorDiv.appendChild(this.outerFrame); + var outerDoc = this._createDoc( + this.outerFrame, + '' + ); + + // create designmode iframe for WYSIWYG editor + this.editorFrame = this._createIFrame(outerDoc); + + outerDoc.body.appendChild(this.editorFrame); + var editorDoc = this._createDoc( + this.editorFrame, + '' + + (!xq.Browser.isTrident ? '
| ') + sb.push(' | |
|---|---|
| ') + } else { + sb.push(' | ') + } + } + + sb.push(' |
- ');
+ for(var i = 0; i < o.length; i++) {
+ sb.push('
- '); + xq._json2html(o[i], sb); + sb.push(' '); + } + sb.push('
- ');
+ for (var key in o) if (o.hasOwnProperty(key)) {
+ sb.push('
- ' + key + ' '); + sb.push('
- '); + xq._json2html(o[key], sb); + sb.push(' '); + } + sb.push('
- ');
+ for(var i = 0; i < o.length; i++) {
+ sb.push('
- '); + xq._json2html(o[i], sb); + sb.push(' '); + } + sb.push('
- ');
+ for (var key in o) if (o.hasOwnProperty(key)) {
+ sb.push('
- ' + key + ' '); + sb.push('
- '); + xq._json2html(o[key], sb); + sb.push(' '); + } + sb.push('
+ *
+ * A --- B -+- C -+- D -+- E
+ * |
+ * +- F -+- G
+ *
+ * For example:
+ * > findCommonAncestorAndImmediateChildrenOf("E", "G")
+ *
+ * will return
+ *
+ * > {parent:"B", left:"C", right:"F"} + */ + findCommonAncestorAndImmediateChildrenOf: function(left, right) { + if(left.parentNode === right.parentNode) { + return { + left:left, + right:right, + parent:left.parentNode + }; + } else { + var parentsOfLeft = this.collectParentsOf(left, true); + var parentsOfRight = this.collectParentsOf(right, true); + var ca = this.getCommonAncestor(parentsOfLeft, parentsOfRight); + + var leftAncestor = parentsOfLeft.find(function(node) {return node.parentNode === ca}); + var rightAncestor = parentsOfRight.find(function(node) {return node.parentNode === ca}); + + return { + left:leftAncestor, + right:rightAncestor, + parent:ca + }; + } + }, + + /** + * Find leaves at edge.
+ *
+ * A --- B -+- C -+- D -+- E
+ * |
+ * +- F -+- G
+ *
+ * For example:
+ * > getLeavesAtEdge("A")
+ *
+ * will return
+ *
+ * > ["E", "G"] + */ + getLeavesAtEdge: function(element) { + if(!element.hasChildNodes()) return [null, null]; + + var findLeft = function(el) { + for (var i = 0; i < el.childNodes.length; i++) { + if (el.childNodes[i].nodeType === 1 && this.isBlock(el.childNodes[i])) return findLeft(el.childNodes[i]); + } + return el; + }.bind(this); + + var findRight=function(el) { + for (var i = el.childNodes.length; i--;) { + if (el.childNodes[i].nodeType === 1 && this.isBlock(el.childNodes[i])) return findRight(el.childNodes[i]); + } + return el; + }.bind(this); + + var left = findLeft(element); + var right = findRight(element); + + return [left === element ? null : left, right === element ? null : right]; + }, + + getCommonAncestor: function(parents1, parents2) { + for(var i = 0; i < parents1.length; i++) { + for(var j = 0; j < parents2.length; j++) { + if(parents1[i] === parents2[j]) return parents1[i]; + } + } + }, + + collectParentsOf: function(node, includeSelf, exitCondition) { + var parents = []; + if(includeSelf) parents.push(node); + + while((node = node.parentNode) && (node.nodeName !== "HTML") && !(typeof exitCondition === "function" && exitCondition(node))) parents.push(node); + return parents; + }, + + isDescendantOf: function(parent, child) { + if(parent.length > 0) { + for(var i = 0; i < parent.length; i++) { + if(this.isDescendantOf(parent[i], child)) return true; + } + return false; + } + + if(parent === child) return false; + + while (child = child.parentNode) + if (child === parent) return true; + return false; + }, + + /** + * Perform tree walking (foreward) + */ + walkForward: function(node) { + var target = node.firstChild; + if(target) return target; + + // intentional assignment for micro performance turing + if(target = node.nextSibling) return target; + + while(node = node.parentNode) { + // intentional assignment for micro performance turing + if(target = node.nextSibling) return target; + } + + return null; + }, + + /** + * Perform tree walking (backward) + */ + walkBackward: function(node) { + if(node.previousSibling) { + node = node.previousSibling; + while(node.hasChildNodes()) {node = node.lastChild;} + return node; + } + + return node.parentNode; + }, + + /** + * Perform tree walking (to next siblings) + */ + walkNext: function(node) {return node.nextSibling}, + + /** + * Perform tree walking (to next siblings) + */ + walkPrev: function(node) {return node.previousSibling}, + + /** + * Returns true if target is followed by start + */ + checkTargetForward: function(start, target) { + return this._check(start, this.walkForward, target); + }, + + /** + * Returns true if start is followed by target + */ + checkTargetBackward: function(start, target) { + return this._check(start, this.walkBackward, target); + }, + + findForward: function(start, condition, exitCondition) { + return this._find(start, this.walkForward, condition, exitCondition); + }, + + findBackward: function(start, condition, exitCondition) { + return this._find(start, this.walkBackward, condition, exitCondition); + }, + + _check: function(start, direction, target) { + if(start === target) return false; + + while(start = direction(start)) { + if(start === target) return true; + } + return false; + }, + + _find: function(start, direction, condition, exitCondition) { + while(start = direction(start)) { + if(exitCondition && exitCondition(start)) return null; + if(condition(start)) return start; + } + return null; + }, + + /** + * Walks Forward through DOM tree from start to end, and collects all nodes that matches with a filter. + * If no filter provided, it just collects all nodes. + * + * @param {Element} start Starting element. + * @param {Element} end Ending element. + * @param {Function} filter A filter function. + */ + collectNodesBetween: function(start, end, filter) { + if(start === end) return [start, end].findAll(filter || function() {return true}); + + var nodes = this.collectForward(start, function(node) {return node === end}, filter); + if( + start !== end && + typeof filter === "function" && + filter(end) + ) nodes.push(end); + + return nodes; + }, + + collectForward: function(start, exitCondition, filter) { + return this.collect(start, this.walkForward, exitCondition, filter); + }, + + collectBackward: function(start, exitCondition, filter) { + return this.collect(start, this.walkBackward, exitCondition, filter); + }, + + collectNext: function(start, exitCondition, filter) { + return this.collect(start, this.walkNext, exitCondition, filter); + }, + + collectPrev: function(start, exitCondition, filter) { + return this.collect(start, this.walkPrev, exitCondition, filter); + }, + + collect: function(start, next, exitCondition, filter) { + var nodes = [start]; + + while(true) { + start = next(start); + if( + (start === null) || + (typeof exitCondition === "function" && exitCondition(start)) + ) break; + + nodes.push(start); + } + + return (typeof filter === "function") ? nodes.findAll(filter) : nodes; + }, + + hasBlocks: function(element) { + var nodes = element.childNodes; + for(var i = 0; i < nodes.length; i++) { + if(this.isBlock(nodes[i])) return true; + } + return false; + }, + + hasMixedContents: function(element) { + if(!this.isBlock(element)) return false; + if(!this.isBlockContainer(element)) return false; + + var hasTextOrInline = false; + var hasBlock = false; + for(var i = 0; i < element.childNodes.length; i++) { + var node = element.childNodes[i]; + if(!hasTextOrInline && this.isTextOrInlineNode(node)) hasTextOrInline = true; + if(!hasBlock && this.isBlock(node)) hasBlock = true; + + if(hasTextOrInline && hasBlock) break; + } + if(!hasTextOrInline || !hasBlock) return false; + + return true; + }, + + isBlockOnlyContainer: function(element) { + if(!element) return false; + return this._blockOnlyContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isTableCell: function(element) { + if(!element) return false; + return this._tableCellTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isBlockContainer: function(element) { + if(!element) return false; + return this._blockContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isHeading: function(element) { + if(!element) return false; + return (typeof element === 'string' ? element : element.nodeName).match(/H\d/); + }, + + isBlock: function(element) { + if(!element) return false; + return this._blockTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isAtomic: function(element) { + if(!element) return false; + return this._atomicTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isListContainer: function(element) { + if(!element) return false; + return this._listContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isTextOrInlineNode: function(node) { + return node && (node.nodeType === 3 || !this.isBlock(node)); + } +}); +/** + * @namespace + */ +xq.rdom = {} + +/** + * @requires Xquared.js + * @requires DomTree.js + */ +xq.rdom.Base = xq.Class(/** @lends xq.rdom.Base.prototype */{ + /** + * Encapsulates browser incompatibility problem and provides rich set of DOM manipulation API.
+ *
+ * Base provides basic CRUD + Advanced DOM manipulation API, various query methods and caret/selection management API. + * + * @constructs + */ + initialize: function() { + xq.addToFinalizeQueue(this); + + /** + * Instance of DomTree + * @type xq.DomTree + */ + this.tree = new xq.DomTree(); + this.focused = false; + this._lastMarkerId = 0; + }, + + + + /** + * Initialize Base instance using window object. + * Reads document and body from window object and sets them as a property + * + * @param {Window} win Browser's window object + */ + setWin: function(win) { + if(!win) throw "[win] is null"; + this.win = win; + }, + + /** + * Initialize Base instance using root element. + * Reads window and document from root element and sets them as a property. + * + * @param {Element} root Root element + */ + setRoot: function(root) { + if(!root) throw "[root] is null"; + this.root = root; + }, + + /** + * @returns Browser's window object. + */ + getWin: function() { + return this.win || + (this.root ? (this.root.ownerDocument.defaultView || this.root.ownerDocument.parentWindow) : window); + }, + + /** + * @returns Root element. + */ + getRoot: function() { + return this.root || this.win.document.body; + }, + + /** + * @returns Document object of root element. + */ + getDoc: function() { + return this.getWin().document || this.getRoot().ownerDocument; + }, + + + + ///////////////////////////////////////////// + // CRUDs + + clearRoot: function() { + this.getRoot().innerHTML = ""; + this.getRoot().appendChild(this.makeEmptyParagraph()); + }, + + /** + * Removes place holders and empty text nodes of given element. + * + * @param {Element} element target element + */ + removePlaceHoldersAndEmptyNodes: function(element) { + if(!element.hasChildNodes()) return; + + var stopAt = this.getBottommostLastChild(element); + if(!stopAt) return; + stopAt = this.tree.walkForward(stopAt); + + while(element && element !== stopAt) { + if( + this.isPlaceHolder(element) || + (element.nodeType === 3 && (element.nodeValue === "" || (!element.nextSibling && element.nodeValue.isBlank()))) + ) { + var deleteTarget = element; + element = this.tree.walkForward(element); + this.deleteNode(deleteTarget); + } else { + element = this.tree.walkForward(element); + } + } + }, + + /** + * Sets multiple attributes into element at once + * + * @param {Element} element target element + * @param {Object} map key-value pairs + */ + setAttributes: function(element, map) { + for(var key in map) element.setAttribute(key, map[key]); + }, + + /** + * Creates textnode by given node value. + * + * @param {String} value value of textnode + * @returns {Node} Created text node + */ + createTextNode: function(value) {return this.getDoc().createTextNode(value);}, + + /** + * Creates empty element by given tag name. + * + * @param {String} tagName name of tag + * @returns {Element} Created element + */ + createElement: function(tagName) {return this.getDoc().createElement(tagName);}, + + /** + * Creates element from HTML string + * + * @param {String} html HTML string + * @returns {Element} Created element + */ + createElementFromHtml: function(html) { + var node = this.createElement("div"); + node.innerHTML = html; + if(node.childNodes.length !== 1) { + throw "Illegal HTML fragment"; + } + return this.getFirstChild(node); + }, + + /** + * Deletes node from DOM tree. + * + * @param {Node} node Target node which should be deleted + * @param {boolean} deleteEmptyParentsRecursively Recursively delete empty parent elements + * @param {boolean} correctEmptyParent Call #correctEmptyElement on empty parent element after deletion + */ + deleteNode: function(node, deleteEmptyParentsRecursively, correctEmptyParent) { + if(!node || !node.parentNode) return; + if(node.nodeName === "BODY") throw "Cannot delete BODY"; + + var parent = node.parentNode; + parent.removeChild(node); + + if(deleteEmptyParentsRecursively) { + while(!parent.hasChildNodes()) { + node = parent; + parent = node.parentNode; + if(!parent || this.getRoot() === node) break; + parent.removeChild(node); + } + } + + if(correctEmptyParent && this.isEmptyBlock(parent)) { + parent.innerHTML = ""; + this.correctEmptyElement(parent); + } + }, + + /** + * Inserts given node into current caret position + * + * @param {Node} node Target node + * @returns {Node} Inserted node. It could be different with given node. + */ + insertNode: function(node) {throw "Not implemented"}, + + /** + * Inserts given html into current caret position + * + * @param {String} html HTML string + * @returns {Node} Inserted node. It could be different with given node. + */ + insertHtml: function(html) { + return this.insertNode(this.createElementFromHtml(html)); + }, + + /** + * Creates textnode from given text and inserts it into current caret position + * + * @param {String} text Value of textnode + * @returns {Node} Inserted node + */ + insertText: function(text) { + this.insertNode(this.createTextNode(text)); + }, + + /** + * Places given node nearby target. + * + * @param {Node} node Node to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * @param {boolean} performValidation Validate node if needed. For example when P placed into UL, its tag name automatically replaced with LI + * + * @returns {Node} Inserted node. It could be different with given node. + */ + insertNodeAt: function(node, target, where, performValidation) { + if( + ["HTML", "HEAD"].indexOf(target.nodeName) !== -1 || + "BODY" === target.nodeName && ["before", "after"].indexOf(where) !== -1 + ) throw "Illegal argument. Cannot move node[" + node.nodeName + "] to '" + where + "' of target[" + target.nodeName + "]" + + var object; + var message; + var secondParam; + + switch(where.toLowerCase()) { + case "before": + object = target.parentNode; + message = 'insertBefore'; + secondParam = target; + break + case "start": + if(target.firstChild) { + object = target; + message = 'insertBefore'; + secondParam = target.firstChild; + } else { + object = target; + message = 'appendChild'; + } + break + case "end": + object = target; + message = 'appendChild'; + break + case "after": + if(target.nextSibling) { + object = target.parentNode; + message = 'insertBefore'; + secondParam = target.nextSibling; + } else { + object = target.parentNode; + message = 'appendChild'; + } + break + } + + if(performValidation && this.tree.isListContainer(object) && node.nodeName !== "LI") { + var li = this.createElement("LI"); + li.appendChild(node); + node = li; + object[message](node, secondParam); + } else if(performValidation && !this.tree.isListContainer(object) && node.nodeName === "LI") { + this.wrapAllInlineOrTextNodesAs("P", node, true); + var div = this.createElement("DIV"); + this.moveChildNodes(node, div); + this.deleteNode(node); + object[message](div, secondParam); + node = this.unwrapElement(div, true); + } else { + object[message](node, secondParam); + } + + return node; + }, + + /** + * Creates textnode from given text and places given node nearby target. + * + * @param {String} text Text to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * + * @returns {Node} Inserted node. + */ + insertTextAt: function(text, target, where) { + return this.insertNodeAt(this.createTextNode(text), target, where); + }, + + /** + * Creates element from given HTML string and places given it nearby target. + * + * @param {String} html HTML to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * + * @returns {Node} Inserted node. + */ + insertHtmlAt: function(html, target, where) { + return this.insertNodeAt(this.createElementFromHtml(html), target, where); + }, + + /** + * Replaces element's tag by removing current element and creating new element by given tag name. + * + * @param {String} tag New tag name + * @param {Element} element Target element + * + * @returns {Element} Replaced element + */ + replaceTag: function(tag, element) { + if(element.nodeName === tag) return null; + if(this.tree.isTableCell(element)) return null; + + var newElement = this.createElement(tag); + this.moveChildNodes(element, newElement); + this.copyAttributes(element, newElement, true); + element.parentNode.replaceChild(newElement, element); + + if(!newElement.hasChildNodes()) this.correctEmptyElement(newElement); + + return newElement; + }, + + /** + * Unwraps unnecessary paragraph. + * + * Unnecessary paragraph is P which is the only child of given container element. + * For example, P which is contained by LI and is the only child is the unnecessary paragraph. + * But if given container element is a block-only-container(BLOCKQUOTE, BODY), this method does nothing. + * + * @param {Element} element Container element + * @returns {boolean} True if unwrap performed. + */ + unwrapUnnecessaryParagraph: function(element) { + if(!element) return false; + + if(!this.tree.isBlockOnlyContainer(element) && element.childNodes.length === 1 && element.firstChild.nodeName === "P" && !this.hasImportantAttributes(element.firstChild)) { + var p = element.firstChild; + this.moveChildNodes(p, element); + this.deleteNode(p); + return true; + } + return false; + }, + + /** + * Unwraps element by extracting all children out and removing the element. + * + * @param {Element} element Target element + * @param {boolean} wrapInlineAndTextNodes Wrap all inline and text nodes with P before unwrap + * @returns {Node} First child of unwrapped element + */ + unwrapElement: function(element, wrapInlineAndTextNodes) { + if(wrapInlineAndTextNodes) this.wrapAllInlineOrTextNodesAs("P", element); + + var nodeToReturn = element.firstChild; + + while(element.firstChild) this.insertNodeAt(element.firstChild, element, "before"); + this.deleteNode(element); + + return nodeToReturn; + }, + + /** + * Wraps element by given tag + * + * @param {String} tag tag name + * @param {Element} element target element to wrap + * @returns {Element} wrapper + */ + wrapElement: function(tag, element) { + var wrapper = this.insertNodeAt(this.createElement(tag), element, "before"); + wrapper.appendChild(element); + return wrapper; + }, + + /** + * Tests #smartWrap with given criteria but doesn't change anything + */ + testSmartWrap: function(endElement, criteria) { + return this.smartWrap(endElement, null, criteria, true); + }, + + /** + * Create inline element with given tag name and wraps nodes nearby endElement by given criteria + * + * @param {Element} endElement Boundary(end point, exclusive) of wrapper. + * @param {String} tag Tag name of wrapper. + * @param {Object} function which returns text index of start boundary. + * @param {boolean} testOnly just test boundary and do not perform actual wrapping. + * + * @returns {Element} wrapper + */ + smartWrap: function(endElement, tag, criteria, testOnly) { + var block = this.getParentBlockElementOf(endElement); + + tag = tag || "SPAN"; + criteria = criteria || function(text) {return -1}; + + // check for empty wrapper + if(!testOnly && (!endElement.previousSibling || this.isEmptyBlock(block))) { + var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); + return wrapper; + } + + // collect all textnodes + var textNodes = this.tree.collectForward(block, function(node) {return node === endElement}, function(node) {return node.nodeType === 3}); + + // find textnode and break-point + var nodeIndex = 0; + var nodeValues = []; + for(var i = 0; i < textNodes.length; i++) { + nodeValues.push(textNodes[i].nodeValue); + } + var textToWrap = nodeValues.join(""); + var textIndex = criteria(textToWrap) + var breakPoint = textIndex; + + if(breakPoint === -1) { + breakPoint = 0; + } else { + textToWrap = textToWrap.substring(breakPoint); + } + + for(var i = 0; i < textNodes.length; i++) { + if(breakPoint > nodeValues[i].length) { + breakPoint -= nodeValues[i].length; + } else { + nodeIndex = i; + break; + } + } + + if(testOnly) return {text:textToWrap, textIndex:textIndex, nodeIndex:nodeIndex, breakPoint:breakPoint}; + + // break textnode if necessary + if(breakPoint !== 0) { + var splitted = textNodes[nodeIndex].splitText(breakPoint); + nodeIndex++; + textNodes.splice(nodeIndex, 0, splitted); + } + var startElement = textNodes[nodeIndex] || block.firstChild; + + // split inline elements up to parent block if necessary + var family = this.tree.findCommonAncestorAndImmediateChildrenOf(startElement, endElement); + var ca = family.parent; + if(ca) { + if(startElement.parentNode !== ca) startElement = this.splitElementUpto(startElement, ca, true); + if(endElement.parentNode !== ca) endElement = this.splitElementUpto(endElement, ca, true); + + var prevStart = startElement.previousSibling; + var nextEnd = endElement.nextSibling; + + // remove empty inline elements + if(prevStart && prevStart.nodeType === 1 && this.isEmptyBlock(prevStart)) this.deleteNode(prevStart); + if(nextEnd && nextEnd.nodeType === 1 && this.isEmptyBlock(nextEnd)) this.deleteNode(nextEnd); + + // wrap + var wrapper = this.insertNodeAt(this.createElement(tag), startElement, "before"); + while(wrapper.nextSibling !== endElement) wrapper.appendChild(wrapper.nextSibling); + return wrapper; + } else { + // wrap + var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); + return wrapper; + } + }, + + /** + * Wraps all adjust inline elements and text nodes into block element. + * + * TODO: empty element should return empty array when it is not forced and (at least) single item array when forced + * + * @param {String} tag Tag name of wrapper + * @param {Element} element Target element + * @param {boolean} force Force wrapping. If it is set to false, this method do not makes unnecessary wrapper. + * + * @returns {Array} Array of wrappers. If nothing performed it returns empty array + */ + wrapAllInlineOrTextNodesAs: function(tag, element, force) { + var wrappers = []; + + if(!force && !this.tree.hasMixedContents(element)) return wrappers; + + var node = element.firstChild; + while(node) { + if(this.tree.isTextOrInlineNode(node)) { + var wrapper = this.wrapInlineOrTextNodesAs(tag, node); + wrappers.push(wrapper); + node = wrapper.nextSibling; + } else { + node = node.nextSibling; + } + } + + return wrappers; + }, + + /** + * Wraps node and its adjust next siblings into an element + */ + wrapInlineOrTextNodesAs: function(tag, node) { + var wrapper = this.createElement(tag); + var from = node; + + from.parentNode.replaceChild(wrapper, from); + wrapper.appendChild(from); + + // move nodes into wrapper + while(wrapper.nextSibling && this.tree.isTextOrInlineNode(wrapper.nextSibling)) wrapper.appendChild(wrapper.nextSibling); + + return wrapper; + }, + + /** + * Turns block element into list item + * + * @param {Element} element Target element + * @param {String} type One of "UL", "OL". + * @param {String} className CSS class name. + * + * @return {Element} LI element + */ + turnElementIntoListItem: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var container = this.createElement(type); + if(className) container.className = className; + + if(this.tree.isTableCell(element)) { + var p = this.wrapAllInlineOrTextNodesAs("P", element, true)[0]; + container = this.insertNodeAt(container, element, "start"); + var li = this.insertNodeAt(this.createElement("LI"), container, "start"); + li.appendChild(p); + } else { + container = this.insertNodeAt(container, element, "after"); + var li = this.insertNodeAt(this.createElement("LI"), container, "start"); + li.appendChild(element); + } + + this.unwrapUnnecessaryParagraph(li); + this.mergeAdjustLists(container); + + return li; + }, + + /** + * Extracts given element out from its parent element. + * + * @param {Element} element Target element + */ + extractOutElementFromParent: function(element) { + if(element === this.getRoot() || element.parentNode === this.getRoot() || !element.offsetParent) return null; + + if(element.nodeName === "LI") { + this.wrapAllInlineOrTextNodesAs("P", element, true); + element = element.firstChild; + } + + var container = element.parentNode; + var nodeToReturn = null; + + if(container.nodeName === "LI" && container.parentNode.parentNode.nodeName === "LI") { + // nested list item + if(element.previousSibling) { + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + } + + this.outdentListItem(element); + nodeToReturn = element; + } else if(container.nodeName === "LI") { + // not-nested list item + + if(this.tree.isListContainer(element.nextSibling)) { + // 1. split listContainer + var listContainer = container.parentNode; + this.splitContainerOf(container, true); + this.correctEmptyElement(element); + + // 2. extract out LI's children + nodeToReturn = container.firstChild; + while(container.firstChild) { + this.insertNodeAt(container.firstChild, listContainer, "before"); + } + + // 3. remove listContainer and merge adjust lists + var prevContainer = listContainer.previousSibling; + this.deleteNode(listContainer); + if(prevContainer && this.tree.isListContainer(prevContainer)) this.mergeAdjustLists(prevContainer); + } else { + // 1. split LI + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + + // 2. split list container + var listContainer = this.splitContainerOf(container); + + // 3. extract out + this.insertNodeAt(element, listContainer.parentNode, "before"); + this.deleteNode(listContainer.parentNode); + + nodeToReturn = element; + } + } else if(this.tree.isTableCell(container) || this.tree.isTableCell(element)) { + // do nothing + } else { + // normal block + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + nodeToReturn = this.insertNodeAt(element, container, "before"); + + this.deleteNode(container); + } + + return nodeToReturn; + }, + + /** + * Insert new block above or below given element. + * + * @param {Element} block Target block + * @param {boolean} before Insert new block above(before) target block + * @param {String} forceTag New block's tag name. If omitted, target block's tag name will be used. + * + * @returns {Element} Inserted block + */ + insertNewBlockAround: function(block, before, forceTag) { + var isListItem = block.nodeName === "LI" || block.parentNode.nodeName === "LI"; + + this.removeTrailingWhitespace(block); + if(this.isFirstLiWithNestedList(block) && !forceTag && before) { + var li = this.getParentElementOf(block, ["LI"]); + var newBlock = this._insertNewBlockAround(li, before); + return newBlock; + } else if(isListItem && !forceTag) { + var li = this.getParentElementOf(block, ["LI"]); + var newBlock = this._insertNewBlockAround(block, before); + if(li !== block) newBlock = this.splitContainerOf(newBlock, false, "prev"); + return newBlock; + } else if(this.tree.isBlockContainer(block)) { + this.wrapAllInlineOrTextNodesAs("P", block, true); + return this._insertNewBlockAround(block.firstChild, before, forceTag); + } else { + return this._insertNewBlockAround(block, before, this.tree.isHeading(block) ? "P" : forceTag); + } + }, + + /** + * @private + * + * TODO: Rename + */ + _insertNewBlockAround: function(element, before, tagName) { + var newElement = this.createElement(tagName || element.nodeName); + this.copyAttributes(element, newElement, false); + this.correctEmptyElement(newElement); + newElement = this.insertNodeAt(newElement, element, before ? "before" : "after"); + return newElement; + }, + + /** + * Wrap or replace element with given tag name. + * + * @param {String} [tag] Tag name. If not provided, it does not modify tag name. + * @param {Element} element Target element + * @param {String} [className] Class name of tag. If not provided, it does not modify current class name, and if empty string is provided, class attribute will be removed. + * + * @return {Element} wrapper element or replaced element. + */ + applyTagIntoElement: function(tag, element, className) { + if(!tag && !className) return null; + + var result = element; + + if(tag) { + if(this.tree.isBlockOnlyContainer(tag)) { + result = this.wrapBlock(tag, element); + } else if(this.tree.isBlockContainer(element)) { + var wrapper = this.createElement(tag); + this.moveChildNodes(element, wrapper); + result = this.insertNodeAt(wrapper, element, "start"); + } else if(this.tree.isBlockContainer(tag) && this.hasImportantAttributes(element)) { + result = this.wrapBlock(tag, element); + } else { + result = this.replaceTag(tag, element); + } + } + + if(className) { + result.className = className; + } + + return result; + }, + + /** + * Wrap or replace elements with given tag name. + * + * @param {String} [tag] Tag name. If not provided, it does not modify tag name. + * @param {Element} from Start boundary (inclusive) + * @param {Element} to End boundary (inclusive) + * @param {String} [className] Class name of tag. If not provided, it does not modify current class name, and if empty string is provided, class attribute will be removed. + * + * @returns {Array} Array of wrappers or replaced elements + */ + applyTagIntoElements: function(tagName, from, to, className) { + if(!tagName && !className) return [from, to]; + + var applied = []; + + if(tagName) { + if(this.tree.isBlockContainer(tagName)) { + var family = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + var node = family.left; + var wrapper = this.insertNodeAt(this.createElement(tagName), node, "before"); + + var coveringWholeList = + family.parent.nodeName === "LI" && + family.parent.parentNode.childNodes.length === 1 && + !family.left.previousSilbing && + !family.right.nextSibling; + + if(coveringWholeList) { + var ul = node.parentNode.parentNode; + this.insertNodeAt(wrapper, ul, "before"); + wrapper.appendChild(ul); + } else { + while(node !== family.right) { + next = node.nextSibling; + wrapper.appendChild(node); + node = next; + } + wrapper.appendChild(family.right); + } + applied.push(wrapper); + } else { + // is normal tagName + var elements = this.getBlockElementsBetween(from, to); + for(var i = 0; i < elements.length; i++) { + if(this.tree.isBlockContainer(elements[i])) { + var wrappers = this.wrapAllInlineOrTextNodesAs(tagName, elements[i], true); + for(var j = 0; j < wrappers.length; j++) { + applied.push(wrappers[j]); + } + } else { + applied.push(this.replaceTag(tagName, elements[i]) || elements[i]); + } + } + } + } + + if(className) { + var elements = this.tree.collectNodesBetween(from, to, function(n) {return n.nodeType == 1;}); + for(var i = 0; i < elements.length; i++) { + elements[i].className = className; + } + } + + return applied; + }, + + /** + * Moves block up or down + * + * @param {Element} block Target block + * @param {boolean} up Move up if true + * + * @returns {Element} Moved block. It could be different with given block. + */ + moveBlock: function(block, up) { + // if block is table cell or contained by table cell, select its row as mover + block = this.getParentElementOf(block, ["TR"]) || block; + + // if block is only child, select its parent as mover + while(block.nodeName !== "TR" && block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + // find target and where + var target, where; + if (up) { + target = block.previousSibling; + + if(target) { + var singleNodeLi = target.nodeName === 'LI' && ((target.childNodes.length === 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); + var table = ['TABLE', 'TR'].indexOf(target.nodeName) !== -1; + + where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "end" : "before"; + } else if(block.parentNode !== this.getRoot()) { + target = block.parentNode; + where = "before"; + } + } else { + target = block.nextSibling; + + if(target) { + var singleNodeLi = target.nodeName === 'LI' && ((target.childNodes.length === 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); + var table = ['TABLE', 'TR'].indexOf(target.nodeName) !== -1; + + where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "start" : "after"; + } else if(block.parentNode !== this.getRoot()) { + target = block.parentNode; + where = "after"; + } + } + + + // no way to go? + if(!target) return null; + if(["TBODY", "THEAD"].indexOf(target.nodeName) !== -1) return null; + + // normalize + this.wrapAllInlineOrTextNodesAs("P", target, true); + + // make placeholder if needed + if(this.isFirstLiWithNestedList(block)) { + this.insertNewBlockAround(block, false, "P"); + } + + // perform move + var parent = block.parentNode; + var moved = this.insertNodeAt(block, target, where, true); + + // cleanup + if(!parent.hasChildNodes()) this.deleteNode(parent, true); + this.unwrapUnnecessaryParagraph(moved); + this.unwrapUnnecessaryParagraph(target); + + // remove placeholder + if(up) { + if(moved.previousSibling && this.isEmptyBlock(moved.previousSibling) && !moved.previousSibling.previousSibling && moved.parentNode.nodeName === "LI" && this.tree.isListContainer(moved.nextSibling)) { + this.deleteNode(moved.previousSibling); + } + } else { + if(moved.nextSibling && this.isEmptyBlock(moved.nextSibling) && !moved.previousSibling && moved.parentNode.nodeName === "LI" && this.tree.isListContainer(moved.nextSibling.nextSibling)) { + this.deleteNode(moved.nextSibling); + } + } + + this.correctEmptyElement(moved); + + return moved; + }, + + /** + * Remove given block + * + * @param {Element} block Target block + * @returns {Element} Nearest block of remove element + */ + removeBlock: function(block) { + var blockToMove; + + // if block is only child, select its parent as mover + while(block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var finder = function(node) {return this.tree.isBlock(node) && !this.tree.isAtomic(node) && !this.tree.isDescendantOf(block, node) && !this.tree.hasBlocks(node);}.bind(this); + var exitCondition = function(node) {return this.tree.isBlock(node) && !this.tree.isDescendantOf(this.getRoot(), node)}.bind(this); + + if(this.isFirstLiWithNestedList(block)) { + blockToMove = this.outdentListItem(block.nextSibling.firstChild); + this.deleteNode(blockToMove.previousSibling, true); + } else if(this.tree.isTableCell(block)) { + var rtable = new xq.RichTable(this, this.getParentElementOf(block, ["TABLE"])); + blockToMove = rtable.getBelowCellOf(block); + + // should not delete row when there's thead and the row is the only child of tbody + if( + block.parentNode.parentNode.nodeName === "TBODY" && + rtable.hasHeadingAtTop() && + rtable.getDom().tBodies[0].rows.length === 1) return blockToMove; + + blockToMove = blockToMove || + this.tree.findForward(block, finder, exitCondition) || + this.tree.findBackward(block, finder, exitCondition); + + this.deleteNode(block.parentNode, true); + } else { + blockToMove = blockToMove || + this.tree.findForward(block, finder, exitCondition) || + this.tree.findBackward(block, finder, exitCondition); + + if(!blockToMove) blockToMove = this.insertNodeAt(this.makeEmptyParagraph(), block, "after"); + + this.deleteNode(block, true); + } + if(!this.getRoot().hasChildNodes()) { + blockToMove = this.createElement("P"); + this.getRoot().appendChild(blockToMove); + this.correctEmptyElement(blockToMove); + } + + return blockToMove; + }, + + /** + * Removes trailing whitespaces of given block + * + * @param {Element} block Target block + */ + removeTrailingWhitespace: function(block) {throw "Not implemented"}, + + /** + * Extract given list item out and change its container's tag + * + * @param {Element} element LI or P which is a child of LI + * @param {String} type "OL", "UL" + * @param {String} className CSS class name + * + * @returns {Element} changed element + */ + changeListTypeTo: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var li = this.getParentElementOf(element, ["LI"]); + if(!li) throw "IllegalArgumentException"; + + var container = li.parentNode; + + this.splitContainerOf(li); + + var newContainer = this.insertNodeAt(this.createElement(type), container, "before"); + if(className) newContainer.className = className; + + this.insertNodeAt(li, newContainer, "start"); + this.deleteNode(container); + + this.mergeAdjustLists(newContainer); + + return element; + }, + + /** + * Split container of element into (maxium) three pieces. + */ + splitContainerOf: function(element, preserveElementItself, dir) { + if([element, element.parentNode].indexOf(this.getRoot()) !== -1) return element; + + var container = element.parentNode; + if(element.previousSibling && (!dir || dir.toLowerCase() === "prev")) { + var prev = this.createElement(container.nodeName); + this.copyAttributes(container, prev); + while(container.firstChild !== element) { + prev.appendChild(container.firstChild); + } + this.insertNodeAt(prev, container, "before"); + this.unwrapUnnecessaryParagraph(prev); + } + + if(element.nextSibling && (!dir || dir.toLowerCase() === "next")) { + var next = this.createElement(container.nodeName); + this.copyAttributes(container, next); + while(container.lastChild !== element) { + this.insertNodeAt(container.lastChild, next, "start"); + } + this.insertNodeAt(next, container, "after"); + this.unwrapUnnecessaryParagraph(next); + } + + if(!preserveElementItself) element = this.unwrapUnnecessaryParagraph(container) ? container : element; + return element; + }, + + /** + * TODO: Add specs + */ + splitParentElement: function(seperator) { + var parent = seperator.parentNode; + if(["HTML", "HEAD", "BODY"].indexOf(parent.nodeName) !== -1) throw "Illegal argument. Cannot seperate element[" + parent.nodeName + "]"; + + var previousSibling = seperator.previousSibling; + var nextSibling = seperator.nextSibling; + + var newElement = this.insertNodeAt(this.createElement(parent.nodeName), parent, "after"); + + var next; + while(next = seperator.nextSibling) newElement.appendChild(next); + + this.insertNodeAt(seperator, newElement, "start"); + this.copyAttributes(parent, newElement); + + return newElement; + }, + + /** + * TODO: Add specs + */ + splitElementUpto: function(seperator, element, excludeElement) { + while(seperator.previousSibling !== element) { + if(excludeElement && seperator.parentNode === element) break; + seperator = this.splitParentElement(seperator); + } + return seperator; + }, + + /** + * Merges two adjust elements + * + * @param {Element} element base element + * @param {boolean} withNext merge base element with next sibling + * @param {boolean} skip skip merge steps + */ + mergeElement: function(element, withNext, skip) { + this.wrapAllInlineOrTextNodesAs("P", element.parentNode, true); + + // find two block + if(withNext) { + var prev = element; + var next = this.tree.findForward( + element, + function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node !== element.parentNode}.bind(this) + ); + } else { + var next = element; + var prev = this.tree.findBackward( + element, + function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node !== element.parentNode}.bind(this) + ); + } + + // normalize next block + if(next && this.tree.isDescendantOf(this.getRoot(), next)) { + var nextContainer = next.parentNode; + if(this.tree.isBlockContainer(next)) { + nextContainer = next; + this.wrapAllInlineOrTextNodesAs("P", nextContainer, true); + next = nextContainer.firstChild; + } + } else { + next = null; + } + + // normalize prev block + if(prev && this.tree.isDescendantOf(this.getRoot(), prev)) { + var prevContainer = prev.parentNode; + if(this.tree.isBlockContainer(prev)) { + prevContainer = prev; + this.wrapAllInlineOrTextNodesAs("P", prevContainer, true); + prev = prevContainer.lastChild; + } + } else { + prev = null; + } + + try { + var containersAreTableCell = + prevContainer && (this.tree.isTableCell(prevContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(prevContainer.nodeName) !== -1) && + nextContainer && (this.tree.isTableCell(nextContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(nextContainer.nodeName) !== -1); + + if(containersAreTableCell && prevContainer !== nextContainer) return null; + + // if next has margin, perform outdent + if((!skip || !prev) && next && nextContainer.nodeName !== "LI" && this.outdentElement(next)) return element; + + // nextContainer is first li and next of it is list container ([I] represents caret position): + // + // * A[I] + // * B + // * C + if(nextContainer && nextContainer.nodeName === 'LI' && this.tree.isListContainer(next.nextSibling)) { + // move child nodes and... + this.moveChildNodes(nextContainer, prevContainer); + + // merge two paragraphs + this.removePlaceHoldersAndEmptyNodes(prev); + this.moveChildNodes(next, prev); + this.deleteNode(next); + + return prev; + } + + // merge two list containers + if(nextContainer && nextContainer.nodeName === 'LI' && this.tree.isListContainer(nextContainer.parentNode.previousSibling)) { + this.mergeAdjustLists(nextContainer.parentNode.previousSibling, true, "next"); + return prev; + } + + if(next && !containersAreTableCell && prevContainer && prevContainer.nodeName === 'LI' && nextContainer && nextContainer.nodeName === 'LI' && prevContainer.parentNode.nextSibling === nextContainer.parentNode) { + var nextContainerContainer = nextContainer.parentNode; + this.moveChildNodes(nextContainer.parentNode, prevContainer.parentNode); + this.deleteNode(nextContainerContainer); + return prev; + } + + // merge two containers + if(next && !containersAreTableCell && prevContainer && prevContainer.nextSibling === nextContainer && ((skip && prevContainer.nodeName !== "LI") || (!skip && prevContainer.nodeName === "LI"))) { + this.moveChildNodes(nextContainer, prevContainer); + return prev; + } + + // unwrap container + if(nextContainer && nextContainer.nodeName !== "LI" && !this.getParentElementOf(nextContainer, ["TABLE"]) && !this.tree.isListContainer(nextContainer) && nextContainer !== this.getRoot() && !next.previousSibling) { + return this.unwrapElement(nextContainer, true); + } + + // delete table + if(withNext && nextContainer && nextContainer.nodeName === "TABLE") { + this.deleteNode(nextContainer, true); + return prev; + } else if(!withNext && prevContainer && this.tree.isTableCell(prevContainer) && !this.tree.isTableCell(nextContainer)) { + this.deleteNode(this.getParentElementOf(prevContainer, ["TABLE"]), true); + return next; + } + + // if prev is same with next, do nothing + if(prev === next) return null; + + // if there is a null block, do nothing + if(!prev || !next || !prevContainer || !nextContainer) return null; + + // if two blocks are not in the same table cell, do nothing + if(this.getParentElementOf(prev, ["TD", "TH"]) !== this.getParentElementOf(next, ["TD", "TH"])) return null; + + var prevIsEmpty = false; + + // cleanup empty block before merge + + // 1. cleanup prev node which ends with marker + + if( + xq.Browser.isTrident && + prev.childNodes.length >= 2 && + this.isMarker(prev.lastChild.previousSibling) && + prev.lastChild.nodeType === 3 && + prev.lastChild.nodeValue.length === 1 && + prev.lastChild.nodeValue.charCodeAt(0) === 160 + ) { + this.deleteNode(prev.lastChild); + } + + // 2. cleanup prev node (if prev is empty, then replace prev's tag with next's) + this.removePlaceHoldersAndEmptyNodes(prev); + if(this.isEmptyBlock(prev)) { + // replace atomic block with normal block so that following code don't need to care about atomic block + if(this.tree.isAtomic(prev)) prev = this.replaceTag("P", prev); + + prev = this.replaceTag(next.nodeName, prev) || prev; + prev.innerHTML = ""; + } else if(prev.firstChild === prev.lastChild && this.isMarker(prev.firstChild)) { + prev = this.replaceTag(next.nodeName, prev) || prev; + } + + // 3. cleanup next node + if(this.isEmptyBlock(next)) { + // replace atomic block with normal block so that following code don't need to care about atomic block + if(this.tree.isAtomic(next)) next = this.replaceTag("P", next); + + next.innerHTML = ""; + } + + // perform merge + this.moveChildNodes(next, prev); + this.deleteNode(next); + return prev; + } finally { + // cleanup + if(prevContainer && this.isEmptyBlock(prevContainer)) this.deleteNode(prevContainer, true); + if(nextContainer && this.isEmptyBlock(nextContainer)) this.deleteNode(nextContainer, true); + + if(prevContainer) this.unwrapUnnecessaryParagraph(prevContainer); + if(nextContainer) this.unwrapUnnecessaryParagraph(nextContainer); + } + }, + + /** + * Merges adjust list containers which has same tag name + * + * @param {Element} container target list container + * @param {boolean} force force adjust list container even if they have different list type + * @param {String} dir Specify merge direction: PREV or NEXT. If not supplied it will be merged with both direction. + */ + mergeAdjustLists: function(container, force, dir) { + var prev = container.previousSibling; + var isPrevSame = prev && (prev.nodeName === container.nodeName && prev.className === container.className); + if((!dir || dir.toLowerCase() === 'prev') && (isPrevSame || (force && this.tree.isListContainer(prev)))) { + while(prev.lastChild) { + this.insertNodeAt(prev.lastChild, container, "start"); + } + this.deleteNode(prev); + } + + var next = container.nextSibling; + var isNextSame = next && (next.nodeName === container.nodeName && next.className === container.className); + if((!dir || dir.toLowerCase() === 'next') && (isNextSame || (force && this.tree.isListContainer(next)))) { + while(next.firstChild) { + this.insertNodeAt(next.firstChild, container, "end"); + } + this.deleteNode(next); + } + }, + + /** + * Moves child nodes from one element into another. + * + * @param {Elemet} from source element + * @param {Elemet} to target element + */ + moveChildNodes: function(from, to) { + if(this.tree.isDescendantOf(from, to) || ["HTML", "HEAD"].indexOf(to.nodeName) !== -1) + throw "Illegal argument. Cannot move children of element[" + from.nodeName + "] to element[" + to.nodeName + "]"; + + if(from === to) return; + + while(from.firstChild) to.appendChild(from.firstChild); + }, + + /** + * Copies attributes from one element into another. + * + * @param {Element} from source element + * @param {Element} to target element + * @param {boolean} copyId copy ID attribute of source element + */ + copyAttributes: function(from, to, copyId) { + // IE overrides this + + var attrs = from.attributes; + if(!attrs) return; + + for(var i = 0; i < attrs.length; i++) { + if(attrs[i].nodeName === "class" && attrs[i].nodeValue) { + to.className = attrs[i].nodeValue; + } else if((copyId || "id" !== attrs[i].nodeName) && attrs[i].nodeValue) { + to.setAttribute(attrs[i].nodeName, attrs[i].nodeValue); + } + } + }, + + _indentElements: function(node, blocks, affect) { + for (var i=0; i < affect.length; i++) { + if (affect[i] === node || this.tree.isDescendantOf(affect[i], node)) + return; + } + leaves = this.tree.getLeavesAtEdge(node); + + if (blocks.includeElement(leaves[0])) { + var affected = this.indentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + if (blocks.includeElement(node)) { + var affected = this.indentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + var children=xq.$A(node.childNodes); + for (var i=0; i < children.length; i++) + this._indentElements(children[i], blocks, affect); + return; + }, + + indentElements: function(from, to) { + var blocks = this.getBlockElementsBetween(from, to); + var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + + var affect = []; + + leaves = this.tree.getLeavesAtEdge(top.parent); + if (blocks.includeElement(leaves[0])) { + var affected = this.indentElement(top.parent); + if (affected) + return [affected]; + } + + var children = xq.$A(top.parent.childNodes); + for (var i=0; i < children.length; i++) { + this._indentElements(children[i], blocks, affect); + } + + affect = affect.flatten() + return affect.length > 0 ? affect : blocks; + }, + + outdentElementsCode: function(node) { + if (node.tagName === 'LI') + node = node.parentNode; + if (node.tagName === 'OL' && node.className === 'code') + return true; + return false; + }, + + _outdentElements: function(node, blocks, affect) { + for (var i=0; i < affect.length; i++) { + if (affect[i] === node || this.tree.isDescendantOf(affect[i], node)) + return; + } + leaves = this.tree.getLeavesAtEdge(node); + + if (blocks.includeElement(leaves[0]) && !this.outdentElementsCode(leaves[0])) { + var affected = this.outdentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + if (blocks.includeElement(node)) { + var children = xq.$A(node.parentNode.childNodes); + var isCode = this.outdentElementsCode(node); + var affected = this.outdentElement(node, true, isCode); + if (affected) { + if (children.includeElement(affected) && this.tree.isListContainer(node.parentNode) && !isCode) { + for (var i=0; i < children.length; i++) { + if (blocks.includeElement(children[i]) && !affect.includeElement(children[i])) + affect.push(children[i]); + } + }else + affect.push(affected); + return; + } + } + + var children=xq.$A(node.childNodes); + for (var i=0; i < children.length; i++) + this._outdentElements(children[i], blocks, affect); + return; + }, + + outdentElements: function(from, to) { + var start, end; + + if (from.parentNode.tagName === 'LI') start=from.parentNode; + if (to.parentNode.tagName === 'LI') end=to.parentNode; + + var blocks = this.getBlockElementsBetween(from, to); + var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + + var affect = []; + + leaves = this.tree.getLeavesAtEdge(top.parent); + if (blocks.includeElement(leaves[0]) && !this.outdentElementsCode(top.parent)) { + var affected = this.outdentElement(top.parent); + if (affected) + return [affected]; + } + + var children = xq.$A(top.parent.childNodes); + for (var i=0; i < children.length; i++) { + this._outdentElements(children[i], blocks, affect); + } + + if (from.offsetParent && to.offsetParent) { + start = from; + end = to; + }else if (blocks.first().offsetParent && blocks.last().offsetParent) { + start = blocks.first(); + end = blocks.last(); + } + + affect = affect.flatten() + if (!start || !start.offsetParent) + start = affect.first(); + if (!end || !end.offsetParent) + end = affect.last(); + + return this.getBlockElementsBetween(start, end); + }, + + /** + * Performs indent by increasing element's margin-left + */ + indentElement: function(element, noParent, forceMargin) { + if( + !forceMargin && + (element.nodeName === "LI" || (!this.tree.isListContainer(element) && !element.previousSibling && element.parentNode.nodeName === "LI")) + ) return this.indentListItem(element, noParent); + + var root = this.getRoot(); + if(!element || element === root) return null; + + if (element.parentNode !== root && !element.previousSibling && !noParent) element=element.parentNode; + + var margin = element.style.marginLeft; + var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; + + cssValue.value += 2; + element.style.marginLeft = cssValue.value + cssValue.unit; + + return element; + }, + + /** + * Performs outdent by decreasing element's margin-left + */ + outdentElement: function(element, noParent, forceMargin) { + if(!forceMargin && element.nodeName === "LI") return this.outdentListItem(element, noParent); + + var root = this.getRoot(); + if(!element || element === root) return null; + + var margin = element.style.marginLeft; + + var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; + if(cssValue.value === 0) { + return element.previousSibling || forceMargin ? + null : + this.outdentElement(element.parentNode, noParent); + } + + cssValue.value -= 2; + element.style.marginLeft = cssValue.value <= 0 ? "" : cssValue.value + cssValue.unit; + if(element.style.cssText === "") element.removeAttribute("style"); + + return element; + }, + + /** + * Performs indent for list item + */ + indentListItem: function(element, treatListAsNormalBlock) { + var li = this.getParentElementOf(element, ["LI"]); + var container = li.parentNode; + var prev = li.previousSibling; + if(!li.previousSibling) return this.indentElement(container); + + if(li.parentNode.nodeName === "OL" && li.parentNode.className === "code") return this.indentElement(li, treatListAsNormalBlock, true); + + if(!prev.lastChild) prev.appendChild(this.makePlaceHolder()); + + var targetContainer = + this.tree.isListContainer(prev.lastChild) ? + // if there's existing list container, select it as target container + prev.lastChild : + // if there's nothing, create new one + this.insertNodeAt(this.createElement(container.nodeName), prev, "end"); + + this.wrapAllInlineOrTextNodesAs("P", prev, true); + + // perform move + targetContainer.appendChild(li); + + // flatten nested list + if(!treatListAsNormalBlock && li.lastChild && this.tree.isListContainer(li.lastChild)) { + var childrenContainer = li.lastChild; + var child; + while(child = childrenContainer.lastChild) { + this.insertNodeAt(child, li, "after"); + } + this.deleteNode(childrenContainer); + } + + this.unwrapUnnecessaryParagraph(li); + + return li; + }, + + /** + * Performs outdent for list item + * + * @return {Element} outdented list item or null if no outdent performed + */ + outdentListItem: function(element, treatListAsNormalBlock) { + var li = this.getParentElementOf(element, ["LI"]); + var container = li.parentNode; + + if(!li.previousSibling) { + var performed = this.outdentElement(container); + if(performed) return performed; + } + + if(li.parentNode.nodeName === "OL" && li.parentNode.className === "code") return this.outdentElement(li, treatListAsNormalBlock, true); + + var parentLi = container.parentNode; + if(parentLi.nodeName !== "LI") return null; + + if(treatListAsNormalBlock) { + while(container.lastChild !== li) { + this.insertNodeAt(container.lastChild, parentLi, "after"); + } + } else { + // make next siblings as children + if(li.nextSibling) { + var targetContainer = + li.lastChild && this.tree.isListContainer(li.lastChild) ? + // if there's existing list container, select it as target container + li.lastChild : + // if there's nothing, create new one + this.insertNodeAt(this.createElement(container.nodeName), li, "end"); + + this.copyAttributes(container, targetContainer); + + var sibling; + while(sibling = li.nextSibling) { + targetContainer.appendChild(sibling); + } + } + } + + // move current LI into parent LI's next sibling + li = this.insertNodeAt(li, parentLi, "after"); + + // remove empty container + if(container.childNodes.length === 0) this.deleteNode(container); + + if(li.firstChild && this.tree.isListContainer(li.firstChild)) { + this.insertNodeAt(this.makePlaceHolder(), li, "start"); + } + + this.wrapAllInlineOrTextNodesAs("P", li); + this.unwrapUnnecessaryParagraph(parentLi); + + return li; + }, + + /** + * Performs justification + * + * @param {Element} block target element + * @param {String} dir one of "LEFT", "CENTER", "RIGHT", "BOTH" + */ + justifyBlock: function(block, dir) { + // if block is only child, select its parent as mover + while(block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var styleValue = dir.toLowerCase() === "both" ? "justify" : dir; + if(styleValue === "left") { + block.style.textAlign = ""; + if(block.style.cssText === "") block.removeAttribute("style"); + } else { + block.style.textAlign = styleValue; + } + return block; + }, + + justifyBlocks: function(blocks, dir) { + for(var i = 0; i < blocks.length; i++) { + this.justifyBlock(blocks[i], dir); + } + return blocks; + }, + + /** + * Turn given element into list. If the element is a list already, it will be reversed into normal element. + * + * @param {Element} element target element + * @param {String} type one of "UL", "OL" + * @param {String} className CSS className + * @returns {Element} affected element + */ + applyList: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var containerTag = type; + + if(element.nodeName === "LI" || (element.parentNode.nodeName === "LI" && !element.previousSibling)) { + var element = this.getParentElementOf(element, ["LI"]); + var container = element.parentNode; + if(container.nodeName === containerTag && container.className === className) { + return this.extractOutElementFromParent(element); + } else { + return this.changeListTypeTo(element, type, className); + } + } else { + return this.turnElementIntoListItem(element, type, className); + } + }, + + applyLists: function(from, to, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var containerTag = type; + var blocks = this.getBlockElementsBetween(from, to); + + // LIs or Non-containing blocks + var whole = blocks.findAll(function(e) { + return e.nodeName === "LI" || !this.tree.isBlockContainer(e); + }.bind(this)); + + // LIs + var listItems = whole.findAll(function(e) {return e.nodeName === "LI"}.bind(this)); + + // Non-containing blocks which is not a descendant of any LIs selected above(listItems). + var normalBlocks = whole.findAll(function(e) { + return e.nodeName !== "LI" && + !(e.parentNode.nodeName === "LI" && !e.previousSibling && !e.nextSibling) && + !this.tree.isDescendantOf(listItems, e) + }.bind(this)); + + var diffListItems = listItems.findAll(function(e) { + return e.parentNode.nodeName !== containerTag; + }.bind(this)); + + // Conditions needed to determine mode + var hasNormalBlocks = normalBlocks.length > 0; + var hasDifferentListStyle = diffListItems.length > 0; + + var blockToHandle = null; + + if(hasNormalBlocks) { + blockToHandle = normalBlocks; + } else if(hasDifferentListStyle) { + blockToHandle = diffListItems; + } else { + blockToHandle = listItems; + } + + // perform operation + for(var i = 0; i < blockToHandle.length; i++) { + var block = blockToHandle[i]; + + // preserve original index to restore selection + var originalIndex = blocks.indexOf(block); + blocks[originalIndex] = this.applyList(block, type, className); + } + + return blocks; + }, + + /** + * Insert place-holder for given empty element. Empty element does not displayed and causes many editing problems. + * + * @param {Element} element empty element + */ + correctEmptyElement: function(element) {throw "Not implemented"}, + + /** + * Corrects current block-only-container to do not take any non-block element or node. + */ + correctParagraph: function() {throw "Not implemented"}, + + /** + * Makes place-holder for empty element. + * + * @returns {Node} Platform specific place holder + */ + makePlaceHolder: function() {throw "Not implemented"}, + + /** + * Makes place-holder string. + * + * @returns {String} Platform specific place holder string + */ + makePlaceHolderString: function() {throw "Not implemented"}, + + /** + * Makes empty paragraph which contains only one place-holder + */ + makeEmptyParagraph: function() {throw "Not implemented"}, + + /** + * Applies background color to selected area + * + * @param {Object} color valid CSS color value + */ + applyBackgroundColor: function(color) {throw "Not implemented";}, + + /** + * Applies foreground color to selected area + * + * @param {Object} color valid CSS color value + */ + applyForegroundColor: function(color) { + this.execCommand("forecolor", color); + }, + + /** + * Applies font face to selected area + * + * @param {String} face font face + */ + applyFontFace: function(face) { + this.execCommand("fontname", face); + }, + + /** + * Applies font size to selected area + * + * @param {Number} size font size (px) + */ + applyFontSize: function(size) { + this.execCommand("fontsize", size); + }, + + execCommand: function(commandId, param) {throw "Not implemented";}, + + applyRemoveFormat: function() {throw "Not implemented";}, + applyEmphasis: function() {throw "Not implemented";}, + applyStrongEmphasis: function() {throw "Not implemented";}, + applyStrike: function() {throw "Not implemented";}, + applyUnderline: function() {throw "Not implemented";}, + applySuperscription: function() { + this.execCommand("superscript"); + }, + applySubscription: function() { + this.execCommand("subscript"); + }, + indentBlock: function(element, treatListAsNormalBlock) { + return (!element.previousSibling && element.parentNode.nodeName === "LI") ? + this.indentListItem(element, treatListAsNormalBlock) : + this.indentElement(element); + }, + outdentBlock: function(element, treatListAsNormalBlock) { + while(true) { + if(!element.previousSibling && element.parentNode.nodeName === "LI") { + element = this.outdentListItem(element, treatListAsNormalBlock); + return element; + } else { + var performed = this.outdentElement(element); + if(performed) return performed; + + // first-child can outdent container + if(!element.previousSibling) { + element = element.parentNode; + } else { + break; + } + } + } + + return null; + }, + wrapBlock: function(tag, start, end) { + if(this.tree._blockTags.indexOf(tag) === -1) throw "Unsuppored block container: [" + tag + "]"; + if(!start) start = this.getCurrentBlockElement(); + if(!end) end = start; + + // Check if the selection captures valid fragement + var validFragment = false; + + if(start === end) { + // are they same block? + validFragment = true; + } else if(start.parentNode === end.parentNode && !start.previousSibling && !end.nextSibling) { + // are they covering whole parent? + validFragment = true; + start = end = start.parentNode; + } else { + // are they siblings of non-LI blocks? + validFragment = + (start.parentNode === end.parentNode) && + (start.nodeName !== "LI"); + } + + if(!validFragment) return null; + + var wrapper = this.createElement(tag); + + if(start === end) { + // They are same. + if(this.tree.isBlockContainer(start) && !this.tree.isListContainer(start)) { + // It's a block container. Wrap its contents. + if(this.tree.isBlockOnlyContainer(wrapper)) { + this.correctEmptyElement(start); + this.wrapAllInlineOrTextNodesAs("P", start, true); + } + this.moveChildNodes(start, wrapper); + start.appendChild(wrapper); + } else { + // It's not a block container. Wrap itself. + wrapper = this.insertNodeAt(wrapper, start, "after"); + wrapper.appendChild(start); + } + + this.correctEmptyElement(wrapper); + } else { + // They are siblings. Wrap'em all. + wrapper = this.insertNodeAt(wrapper, start, "before"); + var node = start; + + while(node !== end) { + next = node.nextSibling; + wrapper.appendChild(node); + node = next; + } + wrapper.appendChild(node); + } + + return wrapper; + }, + + + + ///////////////////////////////////////////// + // Focus/Caret/Selection + + /** + * Gives focus to root element's window + */ + focus: function() {throw "Not implemented";}, + + /** + * Returns selection object + */ + sel: function() {throw "Not implemented";}, + + /** + * Returns range object + */ + rng: function() {throw "Not implemented";}, + + /** + * Returns true if DOM has selection + */ + hasSelection: function() {throw "Not implemented";}, + + /** + * Returns true if root element's window has selection + */ + hasFocus: function() { + return this.focused; + }, + + /** + * Adjust scrollbar to make the element visible in current viewport. + * + * @param {Element} element Target element + * @param {boolean} toTop Align element to top of the viewport + * @param {boolean} moveCaret Move caret to the element + */ + scrollIntoView: function(element, toTop, moveCaret) { + element.scrollIntoView(toTop); + if(moveCaret) this.placeCaretAtStartOf(element); + }, + + /** + * Select all document + */ + selectAll: function() { + return this.execCommand('selectall'); + }, + + /** + * Select specified element. + * + * @param {Element} element element to select + * @param {boolean} entireElement true to select entire element, false to select inner content of element + */ + selectElement: function(node, entireElement) {throw "Not implemented"}, + + /** + * Select all elements between two blocks(inclusive). + * + * @param {Element} start start of selection + * @param {Element} end end of selection + */ + selectBlocksBetween: function(start, end) {throw "Not implemented"}, + + /** + * Delete selected area + */ + deleteSelection: function() {throw "Not implemented"}, + + /** + * Collapses current selection. + * + * @param {boolean} toStart true to move caret to start of selected area. + */ + collapseSelection: function(toStart) {throw "Not implemented"}, + + /** + * Returns selected area as HTML string + */ + getSelectionAsHtml: function() {throw "Not implemented"}, + + /** + * Returns selected area as text string + */ + getSelectionAsText: function() {throw "Not implemented"}, + + /** + * Places caret at start of the element + * + * @param {Element} element Target element + */ + placeCaretAtStartOf: function(element) {throw "Not implemented"}, + + + /** + * Checks if the caret is place at start of the block + */ + isCaretAtBlockStart: function() { + if(this.isCaretAtEmptyBlock()) return true; + if(this.hasSelection()) return false; + var node = this.getCurrentBlockElement(); + var marker = this.pushMarker(); + + var isTrue = false; + while (node = this.getFirstChild(node)) { + if (node === marker) { + isTrue = true; + break; + } + } + + this.popMarker(); + + return isTrue; + }, + + /** + * Checks if the caret is place at end of the block + */ + isCaretAtBlockEnd: function() {throw "Not implemented"}, + + /** + * Checks if the node is empty-text-node or not + */ + isEmptyTextNode: function(node) { + return node.nodeType === 3 && (node.nodeValue.length === 0 || (node.nodeValue.length === 1 && (node.nodeValue.charAt(0) === 32 || node.nodeValue.charAt(0) === 160))); + }, + + /** + * Checks if the caret is place in empty block element + */ + isCaretAtEmptyBlock: function() { + return this.isEmptyBlock(this.getCurrentBlockElement()); + }, + + /** + * Saves current selection info + * + * @returns {Object} Bookmark for selection + */ + saveSelection: function() {throw "Not implemented"}, + + /** + * Restores current selection info + * + * @param {Object} bookmark Bookmark + */ + restoreSelection: function(bookmark) {throw "Not implemented"}, + + /** + * Create marker + */ + createMarker: function() { + var marker = this.createElement("SPAN"); + marker.id = "xquared_marker_" + (this._lastMarkerId++); + marker.className = "xquared_marker"; + return marker; + }, + + /** + * Create and insert marker into current caret position. + * Marker is an inline element which has no child nodes. It can be used with many purposes. + * For example, You can push marker to mark current caret position. + * + * @returns {Element} marker + */ + pushMarker: function() { + var marker = this.createMarker(); + return this.insertNode(marker); + }, + + /** + * Removes last marker + * + * @params {boolean} moveCaret move caret into marker before delete. + */ + popMarker: function(moveCaret) { + var id = "xquared_marker_" + (--this._lastMarkerId); + var marker = this.$(id); + if(!marker) return; + + if(moveCaret) { + this.selectElement(marker, true); + this.collapseSelection(false); + } + + this.deleteNode(marker); + }, + + + + ///////////////////////////////////////////// + // Query methods + + isMarker: function(node) { + return (node.nodeType === 1 && node.nodeName === "SPAN" && node.className === "xquared_marker"); + }, + + isFirstBlockOfBody: function(block) { + var root = this.getRoot(); + if(this.isFirstLiWithNestedList(block)) block = block.parentNode; + + var found = this.tree.findBackward( + block, + function(node) { + return node === root || (this.tree.isBlock(node) && !this.tree.isBlockOnlyContainer(node)); + }.bind(this) + ); + + return found === root; + }, + + /** + * Returns outer HTML of given element + */ + getOuterHTML: function(element) {throw "Not implemented"}, + + /** + * Returns inner text of given element + * + * @param {Element} element Target element + * @returns {String} Text string + */ + getInnerText: function(element) { + return element.innerHTML.stripTags(); + }, + + /** + * Checks if given node is place holder or not. + * + * @param {Node} node DOM node + */ + isPlaceHolder: function(node) {throw "Not implemented"}, + + /** + * Checks if given block is the first LI whose next sibling is a nested list. + * + * @param {Element} block Target block + */ + isFirstLiWithNestedList: function(block) { + return !block.previousSibling && + block.parentNode.nodeName === "LI" && + this.tree.isListContainer(block.nextSibling); + }, + + /** + * Search all links within given element + * + * @param {Element} [element] Container element. If not given, the root element will be used. + * @param {Array} [found] if passed, links will be appended into this array. + * @returns {Array} Array of anchors. It returns empty array if there's no links. + */ + searchAnchors: function(element, found) { + if(!element) element = this.getRoot(); + if(!found) found = []; + + var anchors = element.getElementsByTagName("A"); + for(var i = 0; i < anchors.length; i++) { + found.push(anchors[i]); + } + + return found; + }, + + /** + * Search all headings within given element + * + * @param {Element} [element] Container element. If not given, the root element will be used. + * @param {Array} [found] if passed, headings will be appended into this array. + * @returns {Array} Array of headings. It returns empty array if there's no headings. + */ + searchHeadings: function(element, found) { + if(!element) element = this.getRoot(); + if(!found) found = []; + + var regexp = /^h[1-6]/ig; + var nodes = element.childNodes; + if (!nodes) return []; + + for(var i = 0; i < nodes.length; i++) { + var isContainer = nodes[i] && this.tree._blockContainerTags.indexOf(nodes[i].nodeName) !== -1; + var isHeading = nodes[i] && nodes[i].nodeName.match(regexp); + + if (isContainer) { + this.searchHeadings(nodes[i], found); + } else if (isHeading) { + found.push(nodes[i]); + } + } + + return found; + }, + + /** + * Collect structure and style informations of given element. + * + * @param {Element} element target element + * @returns {Object} object that contains information: {em: true, strong: false, block: "p", list: "ol", ...} + */ + collectStructureAndStyle: function(element) { + if(!element || element.nodeName === "#document") return {}; + + var block = this.getParentBlockElementOf(element); + + if(block === null || (xq.Browser.isTrident && ["ready", "complete"].indexOf(block.readyState) === -1)) return {}; + + var parents = this.tree.collectParentsOf(element, true, function(node) {return block.parentNode === node}); + var blockName = block.nodeName; + + var info = {}; + var doc = this.getDoc(); + var em = doc.queryCommandState("Italic"); + var strong = doc.queryCommandState("Bold"); + var strike = doc.queryCommandState("Strikethrough"); + var underline = doc.queryCommandState("Underline") && !this.getParentElementOf(element, ["A"]); + var superscription = doc.queryCommandState("superscript"); + var subscription = doc.queryCommandState("subscript"); + var foregroundColor = doc.queryCommandValue("forecolor"); + var fontName = doc.queryCommandValue("fontname"); + var fontSize = doc.queryCommandValue("fontsize"); + // @WORKAROUND: Trident's fontSize value is affected by CSS + if(xq.Browser.isTrident && fontSize === "5" && this.getParentElementOf(element, ["H1", "H2", "H3", "H4", "H5", "H6"])) fontSize = ""; + + // @TODO: remove conditional + var backgroundColor; + if(xq.Browser.isGecko) { + this.execCommand("styleWithCSS", "true"); + try { + backgroundColor = doc.queryCommandValue("hilitecolor"); + } catch(e) { + // if there's selection and the first element of the selection is + // an empty block... + backgroundColor = ""; + } + this.execCommand("styleWithCSS", "false"); + } else { + backgroundColor = doc.queryCommandValue("backcolor"); + } + + // if block is only child, select its parent + while(block.parentNode && block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var list = false; + if(block.nodeName === "LI") { + var parent = block.parentNode; + var isCode = parent.nodeName === "OL" && parent.className === "code"; + var hasClass = parent.className.length > 0; + if(isCode) { + list = "CODE"; + } else if(hasClass) { + list = false; + } else { + list = parent.nodeName; + } + } + + var justification = block.style.textAlign || "left"; + + return { + block:blockName, + em: em, + strong: strong, + strike: strike, + underline: underline, + superscription: superscription, + subscription: subscription, + list: list, + justification: justification, + foregroundColor: foregroundColor, + backgroundColor: backgroundColor, + fontSize: fontSize, + fontName: fontName + }; + }, + + /** + * Checks if the element has one or more important attributes: id, class, style + * + * @param {Element} element Target element + */ + hasImportantAttributes: function(element) {throw "Not implemented"}, + + /** + * Checks if the element is empty or not. Place-holder is not counted as a child. + * + * @param {Element} element Target element + */ + isEmptyBlock: function(element) {throw "Not implemented"}, + + /** + * Returns element that contains caret. + */ + getCurrentElement: function() {throw "Not implemented"}, + + /** + * Returns block element that contains caret. Trident overrides this method. + */ + getCurrentBlockElement: function() { + var cur = this.getCurrentElement(); + if(!cur) return null; + + var block = this.getParentBlockElementOf(cur); + if(!block) return null; + + return (block.nodeName === "BODY") ? null : block; + }, + + /** + * Returns parent block element of parameter. + * If the parameter itself is a block, it will be returned. + * + * @param {Element} element Target element + * + * @returns {Element} Element or null + */ + getParentBlockElementOf: function(element) { + while(element) { + if(this.tree._blockTags.indexOf(element.nodeName) !== -1) return element; + element = element.parentNode; + } + return null; + }, + + /** + * Returns parent element of parameter which has one of given tag name. + * If the parameter itself has the same tag name, it will be returned. + * + * @param {Element} element Target element + * @param {Array} tagNames Array of string which contains tag names + * + * @returns {Element} Element or null + */ + getParentElementOf: function(element, tagNames) { + while(element) { + if(tagNames.indexOf(element.nodeName) !== -1) return element; + element = element.parentNode; + } + return null; + }, + + /** + * Collects all block elements between two elements + * + * @param {Element} from Start element(inclusive) + * @param {Element} to End element(inclusive) + */ + getBlockElementsBetween: function(from, to) { + return this.tree.collectNodesBetween(from, to, function(node) { + return node.nodeType === 1 && this.tree.isBlock(node); + }.bind(this)); + }, + + /** + * Returns block element that contains selection start. + * + * This method will return exactly same result with getCurrentBlockElement method + * when there's no selection. + */ + getBlockElementAtSelectionStart: function() {throw "Not implemented"}, + + /** + * Returns block element that contains selection end. + * + * This method will return exactly same result with getCurrentBlockElement method + * when there's no selection. + */ + getBlockElementAtSelectionEnd: function() {throw "Not implemented"}, + + /** + * Returns blocks at each edge of selection(start and end). + * + * TODO: implement ignoreEmptyEdges for FF + * + * @param {boolean} naturalOrder Mak the start element always comes before the end element + * @param {boolean} ignoreEmptyEdges Prevent some browser(Gecko) from selecting one more block than expected + */ + getBlockElementsAtSelectionEdge: function(naturalOrder, ignoreEmptyEdges) {throw "Not implemented"}, + + /** + * Returns array of selected block elements + */ + getSelectedBlockElements: function() { + var selectionEdges = this.getBlockElementsAtSelectionEdge(true, true); + var start = selectionEdges[0]; + var end = selectionEdges[1]; + + return this.tree.collectNodesBetween(start, end, function(node) { + return node.nodeType === 1 && this.tree.isBlock(node); + }.bind(this)); + }, + + /** + * Get element by ID + * + * @param {String} id Element's ID + * @returns {Element} element or null + */ + getElementById: function(id) {return this.getDoc().getElementById(id)}, + + /** + * Shortcut for #getElementById + */ + $: function(id) {return this.getElementById(id)}, + + /** + * Returns first "valid" child of given element. It ignores empty textnodes. + * + * @param {Element} element Target element + * @returns {Node} first child node or null + */ + getFirstChild: function(element) { + if(!element) return null; + + var nodes = xq.$A(element.childNodes); + return nodes.find(function(node) {return !this.isEmptyTextNode(node)}.bind(this)); + }, + + /** + * Returns last "valid" child of given element. It ignores empty textnodes and place-holders. + * + * @param {Element} element Target element + * @returns {Node} last child node or null + */ + getLastChild: function(element) {throw "Not implemented"}, + + getNextSibling: function(node) { + while(node = node.nextSibling) { + if(node.nodeType !== 3 || !node.nodeValue.isBlank()) break; + } + return node; + }, + + getBottommostFirstChild: function(node) { + while(node.firstChild && node.nodeType === 1) node = node.firstChild; + return node; + }, + + getBottommostLastChild: function(node) { + while(node.lastChild && node.nodeType === 1) node = node.lastChild; + return node; + }, + + /** @private */ + _getCssValue: function(str, defaultUnit) { + if(!str || str.length === 0) return {value:0, unit:defaultUnit}; + + var tokens = str.match(/(\d+)(.*)/); + return { + value:parseInt(tokens[1]), + unit:tokens[2] || defaultUnit + }; + } +}); +/** + * @requires Xquared.js + * @requires rdom/Base.js + */ +xq.rdom.Trident = xq.Class(xq.rdom.Base, + /** + * @name xq.rdom.Trident + * @lends xq.rdom.Trident.prototype + * @extends xq.rdom.Base + * @constructor + */ + { + makePlaceHolder: function() { + return this.createTextNode(" "); + }, + + makePlaceHolderString: function() { + return ' '; + }, + + makeEmptyParagraph: function() { + return this.createElementFromHtml("
"); + }, + + isPlaceHolder: function(node) { + return false; + }, + + getOuterHTML: function(element) { + return element.outerHTML; + }, + + getCurrentBlockElement: function() { + var cur = this.getCurrentElement(); + if(!cur) return null; + + var block = this.getParentBlockElementOf(cur); + if(!block) return null; + + if(block.nodeName === "BODY") { + // Atomic block such as HR + var newParagraph = this.insertNode(this.makeEmptyParagraph()); + var next = newParagraph.nextSibling; + if(this.tree.isAtomic(next)) { + this.deleteNode(newParagraph); + return next; + } + } else { + return block; + } + }, + + insertNode: function(node) { + if(this.hasSelection()) this.collapseSelection(true); + + this.rng().pasteHTML(''); + var marker = this.$('xquared_temp'); + if(node.id === 'xquared_temp') return marker; + + if(marker) marker.replaceNode(node); + return node; + }, + + removeTrailingWhitespace: function(block) { + if(!block) return; + + // @TODO: reimplement to handle atomic tags and so on. (use DomTree) + if(this.tree.isBlockOnlyContainer(block)) return; + if(this.isEmptyBlock(block)) return; + + var text = block.innerText; + var html = block.innerHTML; + var lastCharCode = text.charCodeAt(text.length - 1); + if(text.length <= 1 || [32,160].indexOf(lastCharCode) === -1) return; + + // shortcut for most common case + if(text == html.replace(/ /g, " ")) { + block.innerHTML = html.replace(/ $/, ""); + return; + } + + var node = block; + while(node && node.nodeType !== 3) node = node.lastChild; + if(!node) return; + + // DO NOT REMOVE OR MODIFY FOLLOWING CODE. Modifying following code will crash IE7 + var nodeValue = node.nodeValue; + if(nodeValue.length <= 1) { + this.deleteNode(node, true); + } else { + node.nodeValue = nodeValue.substring(0, nodeValue.length - 1); + } + }, + + correctEmptyElement: function(element) { + if(!element || element.nodeType !== 1 || this.tree.isAtomic(element)) return; + + if(element.firstChild) { + this.correctEmptyElement(element.firstChild); + } else { + element.innerHTML = " "; + } + }, + + copyAttributes: function(from, to, copyId) { + to.mergeAttributes(from, !copyId); + }, + + correctParagraph: function() { + if(!this.hasFocus()) return false; + if(this.hasSelection()) return false; + + var block = this.getCurrentElement(); + + // if caret is at + // * atomic block level elements(HR) or + // * ... + // then following is true + if(this.tree.isBlockOnlyContainer(block)) { + // check for atomic block element such as HR + block = this.insertNode(this.makeEmptyParagraph()); + if(this.tree.isAtomic(block.nextSibling)) { + // @WORKAROUND: + // At this point, HR has a caret but getCurrentElement() doesn't return the HR and + // I couldn't find a way to get this HR. So I have to keep this reference. + // I will be used in Editor._handleEnter. + this.recentHR = block.nextSibling; + this.deleteNode(block); + return false; + } else { + // I can't remember exactly when following is executed and what it does :-( + // * Case 1: Performing Ctrl+A and Ctrl+X repeatedly + // * ... + var nextBlock = this.tree.findForward( + block, + function(node) {return this.tree.isBlock(node) && !this.tree.isBlockOnlyContainer(node)}.bind(this) + ); + + if(nextBlock) { + this.deleteNode(block); + this.placeCaretAtStartOf(nextBlock); + } else { + this.placeCaretAtStartOf(block); + } + + return true; + } + } else { + block = this.getCurrentBlockElement(); + if(block.nodeType === 3) block = block.parentNode; + + if(this.tree.hasMixedContents(block)) { + var marker = this.pushMarker(); + this.wrapAllInlineOrTextNodesAs("P", block, true); + this.popMarker(true); + return true; + } else if((this.tree.isTextOrInlineNode(block.previousSibling) || this.tree.isTextOrInlineNode(block.nextSibling)) && this.tree.hasMixedContents(block.parentNode)) { + // @WORKAROUND: + // IE?서??Block?Inline/Text??접??경우 getCurrentElement ?이 ?작?한?? + // ?라???재 Block 주?까? ?번???아주어???다. + this.wrapAllInlineOrTextNodesAs("P", block.parentNode, true); + return true; + } else { + return false; + } + } + }, + + + + ////// + // Commands + execCommand: function(commandId, param) { + return this.getDoc().execCommand(commandId, false, param); + }, + + applyBackgroundColor: function(color) { + this.execCommand("BackColor", color); + }, + + applyEmphasis: function() { + // Generate tag. It will be replaced with
- ");
+for(var B=0;
+B
- ");
+for(var A in C){if(C.hasOwnProperty(A)){D.push("
- "+A+" "); +D.push("
- "); +xq._json2html(C[A],D); +D.push(" ") +}}D.push("
") +},isPlaceHolder:function(A){return false +},getOuterHTML:function(A){return A.outerHTML +},getCurrentBlockElement:function(){var D=this.getCurrentElement(); +if(!D){return null +}var C=this.getParentBlockElementOf(D); +if(!C){return null +}if(C.nodeName==="BODY"){var B=this.insertNode(this.makeEmptyParagraph()); +var A=B.nextSibling; +if(this.tree.isAtomic(A)){this.deleteNode(B); +return A +}}else{return C +}},insertNode:function(B){if(this.hasSelection()){this.collapseSelection(true) +}this.rng().pasteHTML(''); +var A=this.$("xquared_temp"); +if(B.id==="xquared_temp"){return A +}if(A){A.replaceNode(B) +}return B +},removeTrailingWhitespace:function(F){if(!F){return +}if(this.tree.isBlockOnlyContainer(F)){return +}if(this.isEmptyBlock(F)){return +}var E=F.innerText; +var C=F.innerHTML; +var B=E.charCodeAt(E.length-1); +if(E.length<=1||[32,160].indexOf(B)===-1){return +}if(E==C.replace(/ /g," ")){F.innerHTML=C.replace(/ $/,""); +return +}var D=F; +while(D&&D.nodeType!==3){D=D.lastChild +}if(!D){return +}var A=D.nodeValue; +if(A.length<=1){this.deleteNode(D,true) +}else{D.nodeValue=A.substring(0,A.length-1) +}},correctEmptyElement:function(A){if(!A||A.nodeType!==1||this.tree.isAtomic(A)){return +}if(A.firstChild){this.correctEmptyElement(A.firstChild) +}else{A.innerHTML=" " +}},copyAttributes:function(C,B,A){B.mergeAttributes(C,!A) +},correctParagraph:function(){if(!this.hasFocus()){return false +}if(this.hasSelection()){return false +}var C=this.getCurrentElement(); +if(this.tree.isBlockOnlyContainer(C)){C=this.insertNode(this.makeEmptyParagraph()); +if(this.tree.isAtomic(C.nextSibling)){this.recentHR=C.nextSibling; +this.deleteNode(C); +return false +}else{var B=this.tree.findForward(C,function(D){return this.tree.isBlock(D)&&!this.tree.isBlockOnlyContainer(D) +}.bind(this)); +if(B){this.deleteNode(C); +this.placeCaretAtStartOf(B) +}else{this.placeCaretAtStartOf(C) +}return true +}}else{C=this.getCurrentBlockElement(); +if(C.nodeType===3){C=C.parentNode +}if(this.tree.hasMixedContents(C)){var A=this.pushMarker(); +this.wrapAllInlineOrTextNodesAs("P",C,true); +this.popMarker(true); +return true +}else{if((this.tree.isTextOrInlineNode(C.previousSibling)||this.tree.isTextOrInlineNode(C.nextSibling))&&this.tree.hasMixedContents(C.parentNode)){this.wrapAllInlineOrTextNodesAs("P",C.parentNode,true); +return true +}else{return false +}}}},execCommand:function(A,B){return this.getDoc().execCommand(A,false,B) +},applyBackgroundColor:function(A){this.execCommand("BackColor",A) +},applyEmphasis:function(){this.execCommand("Italic") +},applyStrongEmphasis:function(){this.execCommand("Bold") +},applyStrike:function(){this.execCommand("strikethrough") +},applyUnderline:function(){this.execCommand("underline") +},applyRemoveFormat:function(){this.execCommand("RemoveFormat") +},applyRemoveLink:function(){this.execCommand("Unlink") +},focus:function(){this.getWin().focus() +},sel:function(){return this.getDoc().selection +},crng:function(){return this.getDoc().body.createControlRange() +},rng:function(){try{var B=this.sel(); +return(B===null)?null:B.createRange() +}catch(A){return null +}},hasSelection:function(){var A=this.sel().type.toLowerCase(); +if("none"===A){return false +}if("text"===A&&this.getSelectionAsHtml().length===0){return false +}return true +},deleteSelection:function(){if(this.getSelectionAsText()!==""){this.sel().clear() +}},placeCaretAtStartOf:function(A){var B=this.insertNodeAt(this.createElement("SPAN"),A,"start"); +this.selectElement(B); +this.collapseSelection(false); +this.deleteNode(B) +},selectElement:function(B,C,D){if(!B){throw"[element] is null" +}if(B.nodeType!==1){throw"[element] is not an element" +}var A=null; +if(!D&&this.tree.isAtomic(B)){A=this.crng(); +A.addElement(B) +}else{var A=this.rng(); +A.moveToElementText(B) +}A.select() +},selectBlocksBetween:function(D,B){var A=this.rng(); +var C=this.rng(); +C.moveToElementText(D); +A.setEndPoint("StartToStart",C); +C.moveToElementText(B); +A.setEndPoint("EndToEnd",C); +A.select() +},collapseSelection:function(C){if(this.sel().type.toLowerCase()==="control"){var B=this.getCurrentElement(); +this.sel().empty(); +this.selectElement(B,false,true) +}var A=this.rng(); +A.collapse(C); +A.select() +},getSelectionAsHtml:function(){var A=this.rng(); +return A&&A.htmlText?A.htmlText:"" +},getSelectionAsText:function(){var A=this.rng(); +return A&&A.text?A.text:"" +},hasImportantAttributes:function(A){return !!(A.id||A.className||A.style.cssText) +},isEmptyBlock:function(A){if(!A.hasChildNodes()){return true +}if(A.nodeType===3&&!A.nodeValue){return true +}if([" "," ",""].indexOf(A.innerHTML)!==-1){return true +}return false +},getLastChild:function(C){if(!C||!C.hasChildNodes()){return null +}var A=xq.$A(C.childNodes).reverse(); +for(var B=0; +B
' +},makeEmptyParagraph:function(){return this.createElementFromHtml('
+ *
+ * A --- B -+- C -+- D -+- E
+ * |
+ * +- F -+- G
+ *
+ * For example:
+ * > findCommonAncestorAndImmediateChildrenOf("E", "G")
+ *
+ * will return
+ *
+ * > {parent:"B", left:"C", right:"F"} + */ + findCommonAncestorAndImmediateChildrenOf: function(left, right) { + if(left.parentNode === right.parentNode) { + return { + left:left, + right:right, + parent:left.parentNode + }; + } else { + var parentsOfLeft = this.collectParentsOf(left, true); + var parentsOfRight = this.collectParentsOf(right, true); + var ca = this.getCommonAncestor(parentsOfLeft, parentsOfRight); + + var leftAncestor = parentsOfLeft.find(function(node) {return node.parentNode === ca}); + var rightAncestor = parentsOfRight.find(function(node) {return node.parentNode === ca}); + + return { + left:leftAncestor, + right:rightAncestor, + parent:ca + }; + } + }, + + /** + * Find leaves at edge.
+ *
+ * A --- B -+- C -+- D -+- E
+ * |
+ * +- F -+- G
+ *
+ * For example:
+ * > getLeavesAtEdge("A")
+ *
+ * will return
+ *
+ * > ["E", "G"] + */ + getLeavesAtEdge: function(element) { + if(!element.hasChildNodes()) return [null, null]; + + var findLeft = function(el) { + for (var i = 0; i < el.childNodes.length; i++) { + if (el.childNodes[i].nodeType === 1 && this.isBlock(el.childNodes[i])) return findLeft(el.childNodes[i]); + } + return el; + }.bind(this); + + var findRight=function(el) { + for (var i = el.childNodes.length; i--;) { + if (el.childNodes[i].nodeType === 1 && this.isBlock(el.childNodes[i])) return findRight(el.childNodes[i]); + } + return el; + }.bind(this); + + var left = findLeft(element); + var right = findRight(element); + + return [left === element ? null : left, right === element ? null : right]; + }, + + getCommonAncestor: function(parents1, parents2) { + for(var i = 0; i < parents1.length; i++) { + for(var j = 0; j < parents2.length; j++) { + if(parents1[i] === parents2[j]) return parents1[i]; + } + } + }, + + collectParentsOf: function(node, includeSelf, exitCondition) { + var parents = []; + if(includeSelf) parents.push(node); + + while((node = node.parentNode) && (node.nodeName !== "HTML") && !(typeof exitCondition === "function" && exitCondition(node))) parents.push(node); + return parents; + }, + + isDescendantOf: function(parent, child) { + if(parent.length > 0) { + for(var i = 0; i < parent.length; i++) { + if(this.isDescendantOf(parent[i], child)) return true; + } + return false; + } + + if(parent === child) return false; + + while (child = child.parentNode) + if (child === parent) return true; + return false; + }, + + /** + * Perform tree walking (foreward) + */ + walkForward: function(node) { + var target = node.firstChild; + if(target) return target; + + // intentional assignment for micro performance turing + if(target = node.nextSibling) return target; + + while(node = node.parentNode) { + // intentional assignment for micro performance turing + if(target = node.nextSibling) return target; + } + + return null; + }, + + /** + * Perform tree walking (backward) + */ + walkBackward: function(node) { + if(node.previousSibling) { + node = node.previousSibling; + while(node.hasChildNodes()) {node = node.lastChild;} + return node; + } + + return node.parentNode; + }, + + /** + * Perform tree walking (to next siblings) + */ + walkNext: function(node) {return node.nextSibling}, + + /** + * Perform tree walking (to next siblings) + */ + walkPrev: function(node) {return node.previousSibling}, + + /** + * Returns true if target is followed by start + */ + checkTargetForward: function(start, target) { + return this._check(start, this.walkForward, target); + }, + + /** + * Returns true if start is followed by target + */ + checkTargetBackward: function(start, target) { + return this._check(start, this.walkBackward, target); + }, + + findForward: function(start, condition, exitCondition) { + return this._find(start, this.walkForward, condition, exitCondition); + }, + + findBackward: function(start, condition, exitCondition) { + return this._find(start, this.walkBackward, condition, exitCondition); + }, + + _check: function(start, direction, target) { + if(start === target) return false; + + while(start = direction(start)) { + if(start === target) return true; + } + return false; + }, + + _find: function(start, direction, condition, exitCondition) { + while(start = direction(start)) { + if(exitCondition && exitCondition(start)) return null; + if(condition(start)) return start; + } + return null; + }, + + /** + * Walks Forward through DOM tree from start to end, and collects all nodes that matches with a filter. + * If no filter provided, it just collects all nodes. + * + * @param {Element} start Starting element. + * @param {Element} end Ending element. + * @param {Function} filter A filter function. + */ + collectNodesBetween: function(start, end, filter) { + if(start === end) return [start, end].findAll(filter || function() {return true}); + + var nodes = this.collectForward(start, function(node) {return node === end}, filter); + if( + start !== end && + typeof filter === "function" && + filter(end) + ) nodes.push(end); + + return nodes; + }, + + collectForward: function(start, exitCondition, filter) { + return this.collect(start, this.walkForward, exitCondition, filter); + }, + + collectBackward: function(start, exitCondition, filter) { + return this.collect(start, this.walkBackward, exitCondition, filter); + }, + + collectNext: function(start, exitCondition, filter) { + return this.collect(start, this.walkNext, exitCondition, filter); + }, + + collectPrev: function(start, exitCondition, filter) { + return this.collect(start, this.walkPrev, exitCondition, filter); + }, + + collect: function(start, next, exitCondition, filter) { + var nodes = [start]; + + while(true) { + start = next(start); + if( + (start === null) || + (typeof exitCondition === "function" && exitCondition(start)) + ) break; + + nodes.push(start); + } + + return (typeof filter === "function") ? nodes.findAll(filter) : nodes; + }, + + hasBlocks: function(element) { + var nodes = element.childNodes; + for(var i = 0; i < nodes.length; i++) { + if(this.isBlock(nodes[i])) return true; + } + return false; + }, + + hasMixedContents: function(element) { + if(!this.isBlock(element)) return false; + if(!this.isBlockContainer(element)) return false; + + var hasTextOrInline = false; + var hasBlock = false; + for(var i = 0; i < element.childNodes.length; i++) { + var node = element.childNodes[i]; + if(!hasTextOrInline && this.isTextOrInlineNode(node)) hasTextOrInline = true; + if(!hasBlock && this.isBlock(node)) hasBlock = true; + + if(hasTextOrInline && hasBlock) break; + } + if(!hasTextOrInline || !hasBlock) return false; + + return true; + }, + + isBlockOnlyContainer: function(element) { + if(!element) return false; + return this._blockOnlyContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isTableCell: function(element) { + if(!element) return false; + return this._tableCellTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isBlockContainer: function(element) { + if(!element) return false; + return this._blockContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isHeading: function(element) { + if(!element) return false; + return (typeof element === 'string' ? element : element.nodeName).match(/H\d/); + }, + + isBlock: function(element) { + if(!element) return false; + return this._blockTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isAtomic: function(element) { + if(!element) return false; + return this._atomicTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isListContainer: function(element) { + if(!element) return false; + return this._listContainerTags.indexOf(typeof element === 'string' ? element : element.nodeName) !== -1; + }, + + isTextOrInlineNode: function(node) { + return node && (node.nodeType === 3 || !this.isBlock(node)); + } +}); +/** + * @namespace + */ +xq.rdom = {} + +/** + * @requires Xquared.js + * @requires DomTree.js + */ +xq.rdom.Base = xq.Class(/** @lends xq.rdom.Base.prototype */{ + /** + * Encapsulates browser incompatibility problem and provides rich set of DOM manipulation API.
+ *
+ * Base provides basic CRUD + Advanced DOM manipulation API, various query methods and caret/selection management API. + * + * @constructs + */ + initialize: function() { + xq.addToFinalizeQueue(this); + + /** + * Instance of DomTree + * @type xq.DomTree + */ + this.tree = new xq.DomTree(); + this.focused = false; + this._lastMarkerId = 0; + }, + + + + /** + * Initialize Base instance using window object. + * Reads document and body from window object and sets them as a property + * + * @param {Window} win Browser's window object + */ + setWin: function(win) { + if(!win) throw "[win] is null"; + this.win = win; + }, + + /** + * Initialize Base instance using root element. + * Reads window and document from root element and sets them as a property. + * + * @param {Element} root Root element + */ + setRoot: function(root) { + if(!root) throw "[root] is null"; + this.root = root; + }, + + /** + * @returns Browser's window object. + */ + getWin: function() { + return this.win || + (this.root ? (this.root.ownerDocument.defaultView || this.root.ownerDocument.parentWindow) : window); + }, + + /** + * @returns Root element. + */ + getRoot: function() { + return this.root || this.win.document.body; + }, + + /** + * @returns Document object of root element. + */ + getDoc: function() { + return this.getWin().document || this.getRoot().ownerDocument; + }, + + + + ///////////////////////////////////////////// + // CRUDs + + clearRoot: function() { + this.getRoot().innerHTML = ""; + this.getRoot().appendChild(this.makeEmptyParagraph()); + }, + + /** + * Removes place holders and empty text nodes of given element. + * + * @param {Element} element target element + */ + removePlaceHoldersAndEmptyNodes: function(element) { + if(!element.hasChildNodes()) return; + + var stopAt = this.getBottommostLastChild(element); + if(!stopAt) return; + stopAt = this.tree.walkForward(stopAt); + + while(element && element !== stopAt) { + if( + this.isPlaceHolder(element) || + (element.nodeType === 3 && (element.nodeValue === "" || (!element.nextSibling && element.nodeValue.isBlank()))) + ) { + var deleteTarget = element; + element = this.tree.walkForward(element); + this.deleteNode(deleteTarget); + } else { + element = this.tree.walkForward(element); + } + } + }, + + /** + * Sets multiple attributes into element at once + * + * @param {Element} element target element + * @param {Object} map key-value pairs + */ + setAttributes: function(element, map) { + for(var key in map) element.setAttribute(key, map[key]); + }, + + /** + * Creates textnode by given node value. + * + * @param {String} value value of textnode + * @returns {Node} Created text node + */ + createTextNode: function(value) {return this.getDoc().createTextNode(value);}, + + /** + * Creates empty element by given tag name. + * + * @param {String} tagName name of tag + * @returns {Element} Created element + */ + createElement: function(tagName) {return this.getDoc().createElement(tagName);}, + + /** + * Creates element from HTML string + * + * @param {String} html HTML string + * @returns {Element} Created element + */ + createElementFromHtml: function(html) { + var node = this.createElement("div"); + node.innerHTML = html; + if(node.childNodes.length !== 1) { + throw "Illegal HTML fragment"; + } + return this.getFirstChild(node); + }, + + /** + * Deletes node from DOM tree. + * + * @param {Node} node Target node which should be deleted + * @param {boolean} deleteEmptyParentsRecursively Recursively delete empty parent elements + * @param {boolean} correctEmptyParent Call #correctEmptyElement on empty parent element after deletion + */ + deleteNode: function(node, deleteEmptyParentsRecursively, correctEmptyParent) { + if(!node || !node.parentNode) return; + if(node.nodeName === "BODY") throw "Cannot delete BODY"; + + var parent = node.parentNode; + parent.removeChild(node); + + if(deleteEmptyParentsRecursively) { + while(!parent.hasChildNodes()) { + node = parent; + parent = node.parentNode; + if(!parent || this.getRoot() === node) break; + parent.removeChild(node); + } + } + + if(correctEmptyParent && this.isEmptyBlock(parent)) { + parent.innerHTML = ""; + this.correctEmptyElement(parent); + } + }, + + /** + * Inserts given node into current caret position + * + * @param {Node} node Target node + * @returns {Node} Inserted node. It could be different with given node. + */ + insertNode: function(node) {throw "Not implemented"}, + + /** + * Inserts given html into current caret position + * + * @param {String} html HTML string + * @returns {Node} Inserted node. It could be different with given node. + */ + insertHtml: function(html) { + return this.insertNode(this.createElementFromHtml(html)); + }, + + /** + * Creates textnode from given text and inserts it into current caret position + * + * @param {String} text Value of textnode + * @returns {Node} Inserted node + */ + insertText: function(text) { + this.insertNode(this.createTextNode(text)); + }, + + /** + * Places given node nearby target. + * + * @param {Node} node Node to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * @param {boolean} performValidation Validate node if needed. For example when P placed into UL, its tag name automatically replaced with LI + * + * @returns {Node} Inserted node. It could be different with given node. + */ + insertNodeAt: function(node, target, where, performValidation) { + if( + ["HTML", "HEAD"].indexOf(target.nodeName) !== -1 || + "BODY" === target.nodeName && ["before", "after"].indexOf(where) !== -1 + ) throw "Illegal argument. Cannot move node[" + node.nodeName + "] to '" + where + "' of target[" + target.nodeName + "]" + + var object; + var message; + var secondParam; + + switch(where.toLowerCase()) { + case "before": + object = target.parentNode; + message = 'insertBefore'; + secondParam = target; + break + case "start": + if(target.firstChild) { + object = target; + message = 'insertBefore'; + secondParam = target.firstChild; + } else { + object = target; + message = 'appendChild'; + } + break + case "end": + object = target; + message = 'appendChild'; + break + case "after": + if(target.nextSibling) { + object = target.parentNode; + message = 'insertBefore'; + secondParam = target.nextSibling; + } else { + object = target.parentNode; + message = 'appendChild'; + } + break + } + + if(performValidation && this.tree.isListContainer(object) && node.nodeName !== "LI") { + var li = this.createElement("LI"); + li.appendChild(node); + node = li; + object[message](node, secondParam); + } else if(performValidation && !this.tree.isListContainer(object) && node.nodeName === "LI") { + this.wrapAllInlineOrTextNodesAs("P", node, true); + var div = this.createElement("DIV"); + this.moveChildNodes(node, div); + this.deleteNode(node); + object[message](div, secondParam); + node = this.unwrapElement(div, true); + } else { + object[message](node, secondParam); + } + + return node; + }, + + /** + * Creates textnode from given text and places given node nearby target. + * + * @param {String} text Text to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * + * @returns {Node} Inserted node. + */ + insertTextAt: function(text, target, where) { + return this.insertNodeAt(this.createTextNode(text), target, where); + }, + + /** + * Creates element from given HTML string and places given it nearby target. + * + * @param {String} html HTML to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * + * @returns {Node} Inserted node. + */ + insertHtmlAt: function(html, target, where) { + return this.insertNodeAt(this.createElementFromHtml(html), target, where); + }, + + /** + * Replaces element's tag by removing current element and creating new element by given tag name. + * + * @param {String} tag New tag name + * @param {Element} element Target element + * + * @returns {Element} Replaced element + */ + replaceTag: function(tag, element) { + if(element.nodeName === tag) return null; + if(this.tree.isTableCell(element)) return null; + + var newElement = this.createElement(tag); + this.moveChildNodes(element, newElement); + this.copyAttributes(element, newElement, true); + element.parentNode.replaceChild(newElement, element); + + if(!newElement.hasChildNodes()) this.correctEmptyElement(newElement); + + return newElement; + }, + + /** + * Unwraps unnecessary paragraph. + * + * Unnecessary paragraph is P which is the only child of given container element. + * For example, P which is contained by LI and is the only child is the unnecessary paragraph. + * But if given container element is a block-only-container(BLOCKQUOTE, BODY), this method does nothing. + * + * @param {Element} element Container element + * @returns {boolean} True if unwrap performed. + */ + unwrapUnnecessaryParagraph: function(element) { + if(!element) return false; + + if(!this.tree.isBlockOnlyContainer(element) && element.childNodes.length === 1 && element.firstChild.nodeName === "P" && !this.hasImportantAttributes(element.firstChild)) { + var p = element.firstChild; + this.moveChildNodes(p, element); + this.deleteNode(p); + return true; + } + return false; + }, + + /** + * Unwraps element by extracting all children out and removing the element. + * + * @param {Element} element Target element + * @param {boolean} wrapInlineAndTextNodes Wrap all inline and text nodes with P before unwrap + * @returns {Node} First child of unwrapped element + */ + unwrapElement: function(element, wrapInlineAndTextNodes) { + if(wrapInlineAndTextNodes) this.wrapAllInlineOrTextNodesAs("P", element); + + var nodeToReturn = element.firstChild; + + while(element.firstChild) this.insertNodeAt(element.firstChild, element, "before"); + this.deleteNode(element); + + return nodeToReturn; + }, + + /** + * Wraps element by given tag + * + * @param {String} tag tag name + * @param {Element} element target element to wrap + * @returns {Element} wrapper + */ + wrapElement: function(tag, element) { + var wrapper = this.insertNodeAt(this.createElement(tag), element, "before"); + wrapper.appendChild(element); + return wrapper; + }, + + /** + * Tests #smartWrap with given criteria but doesn't change anything + */ + testSmartWrap: function(endElement, criteria) { + return this.smartWrap(endElement, null, criteria, true); + }, + + /** + * Create inline element with given tag name and wraps nodes nearby endElement by given criteria + * + * @param {Element} endElement Boundary(end point, exclusive) of wrapper. + * @param {String} tag Tag name of wrapper. + * @param {Object} function which returns text index of start boundary. + * @param {boolean} testOnly just test boundary and do not perform actual wrapping. + * + * @returns {Element} wrapper + */ + smartWrap: function(endElement, tag, criteria, testOnly) { + var block = this.getParentBlockElementOf(endElement); + + tag = tag || "SPAN"; + criteria = criteria || function(text) {return -1}; + + // check for empty wrapper + if(!testOnly && (!endElement.previousSibling || this.isEmptyBlock(block))) { + var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); + return wrapper; + } + + // collect all textnodes + var textNodes = this.tree.collectForward(block, function(node) {return node === endElement}, function(node) {return node.nodeType === 3}); + + // find textnode and break-point + var nodeIndex = 0; + var nodeValues = []; + for(var i = 0; i < textNodes.length; i++) { + nodeValues.push(textNodes[i].nodeValue); + } + var textToWrap = nodeValues.join(""); + var textIndex = criteria(textToWrap) + var breakPoint = textIndex; + + if(breakPoint === -1) { + breakPoint = 0; + } else { + textToWrap = textToWrap.substring(breakPoint); + } + + for(var i = 0; i < textNodes.length; i++) { + if(breakPoint > nodeValues[i].length) { + breakPoint -= nodeValues[i].length; + } else { + nodeIndex = i; + break; + } + } + + if(testOnly) return {text:textToWrap, textIndex:textIndex, nodeIndex:nodeIndex, breakPoint:breakPoint}; + + // break textnode if necessary + if(breakPoint !== 0) { + var splitted = textNodes[nodeIndex].splitText(breakPoint); + nodeIndex++; + textNodes.splice(nodeIndex, 0, splitted); + } + var startElement = textNodes[nodeIndex] || block.firstChild; + + // split inline elements up to parent block if necessary + var family = this.tree.findCommonAncestorAndImmediateChildrenOf(startElement, endElement); + var ca = family.parent; + if(ca) { + if(startElement.parentNode !== ca) startElement = this.splitElementUpto(startElement, ca, true); + if(endElement.parentNode !== ca) endElement = this.splitElementUpto(endElement, ca, true); + + var prevStart = startElement.previousSibling; + var nextEnd = endElement.nextSibling; + + // remove empty inline elements + if(prevStart && prevStart.nodeType === 1 && this.isEmptyBlock(prevStart)) this.deleteNode(prevStart); + if(nextEnd && nextEnd.nodeType === 1 && this.isEmptyBlock(nextEnd)) this.deleteNode(nextEnd); + + // wrap + var wrapper = this.insertNodeAt(this.createElement(tag), startElement, "before"); + while(wrapper.nextSibling !== endElement) wrapper.appendChild(wrapper.nextSibling); + return wrapper; + } else { + // wrap + var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); + return wrapper; + } + }, + + /** + * Wraps all adjust inline elements and text nodes into block element. + * + * TODO: empty element should return empty array when it is not forced and (at least) single item array when forced + * + * @param {String} tag Tag name of wrapper + * @param {Element} element Target element + * @param {boolean} force Force wrapping. If it is set to false, this method do not makes unnecessary wrapper. + * + * @returns {Array} Array of wrappers. If nothing performed it returns empty array + */ + wrapAllInlineOrTextNodesAs: function(tag, element, force) { + var wrappers = []; + + if(!force && !this.tree.hasMixedContents(element)) return wrappers; + + var node = element.firstChild; + while(node) { + if(this.tree.isTextOrInlineNode(node)) { + var wrapper = this.wrapInlineOrTextNodesAs(tag, node); + wrappers.push(wrapper); + node = wrapper.nextSibling; + } else { + node = node.nextSibling; + } + } + + return wrappers; + }, + + /** + * Wraps node and its adjust next siblings into an element + */ + wrapInlineOrTextNodesAs: function(tag, node) { + var wrapper = this.createElement(tag); + var from = node; + + from.parentNode.replaceChild(wrapper, from); + wrapper.appendChild(from); + + // move nodes into wrapper + while(wrapper.nextSibling && this.tree.isTextOrInlineNode(wrapper.nextSibling)) wrapper.appendChild(wrapper.nextSibling); + + return wrapper; + }, + + /** + * Turns block element into list item + * + * @param {Element} element Target element + * @param {String} type One of "UL", "OL". + * @param {String} className CSS class name. + * + * @return {Element} LI element + */ + turnElementIntoListItem: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var container = this.createElement(type); + if(className) container.className = className; + + if(this.tree.isTableCell(element)) { + var p = this.wrapAllInlineOrTextNodesAs("P", element, true)[0]; + container = this.insertNodeAt(container, element, "start"); + var li = this.insertNodeAt(this.createElement("LI"), container, "start"); + li.appendChild(p); + } else { + container = this.insertNodeAt(container, element, "after"); + var li = this.insertNodeAt(this.createElement("LI"), container, "start"); + li.appendChild(element); + } + + this.unwrapUnnecessaryParagraph(li); + this.mergeAdjustLists(container); + + return li; + }, + + /** + * Extracts given element out from its parent element. + * + * @param {Element} element Target element + */ + extractOutElementFromParent: function(element) { + if(element === this.getRoot() || element.parentNode === this.getRoot() || !element.offsetParent) return null; + + if(element.nodeName === "LI") { + this.wrapAllInlineOrTextNodesAs("P", element, true); + element = element.firstChild; + } + + var container = element.parentNode; + var nodeToReturn = null; + + if(container.nodeName === "LI" && container.parentNode.parentNode.nodeName === "LI") { + // nested list item + if(element.previousSibling) { + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + } + + this.outdentListItem(element); + nodeToReturn = element; + } else if(container.nodeName === "LI") { + // not-nested list item + + if(this.tree.isListContainer(element.nextSibling)) { + // 1. split listContainer + var listContainer = container.parentNode; + this.splitContainerOf(container, true); + this.correctEmptyElement(element); + + // 2. extract out LI's children + nodeToReturn = container.firstChild; + while(container.firstChild) { + this.insertNodeAt(container.firstChild, listContainer, "before"); + } + + // 3. remove listContainer and merge adjust lists + var prevContainer = listContainer.previousSibling; + this.deleteNode(listContainer); + if(prevContainer && this.tree.isListContainer(prevContainer)) this.mergeAdjustLists(prevContainer); + } else { + // 1. split LI + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + + // 2. split list container + var listContainer = this.splitContainerOf(container); + + // 3. extract out + this.insertNodeAt(element, listContainer.parentNode, "before"); + this.deleteNode(listContainer.parentNode); + + nodeToReturn = element; + } + } else if(this.tree.isTableCell(container) || this.tree.isTableCell(element)) { + // do nothing + } else { + // normal block + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + nodeToReturn = this.insertNodeAt(element, container, "before"); + + this.deleteNode(container); + } + + return nodeToReturn; + }, + + /** + * Insert new block above or below given element. + * + * @param {Element} block Target block + * @param {boolean} before Insert new block above(before) target block + * @param {String} forceTag New block's tag name. If omitted, target block's tag name will be used. + * + * @returns {Element} Inserted block + */ + insertNewBlockAround: function(block, before, forceTag) { + var isListItem = block.nodeName === "LI" || block.parentNode.nodeName === "LI"; + + this.removeTrailingWhitespace(block); + if(this.isFirstLiWithNestedList(block) && !forceTag && before) { + var li = this.getParentElementOf(block, ["LI"]); + var newBlock = this._insertNewBlockAround(li, before); + return newBlock; + } else if(isListItem && !forceTag) { + var li = this.getParentElementOf(block, ["LI"]); + var newBlock = this._insertNewBlockAround(block, before); + if(li !== block) newBlock = this.splitContainerOf(newBlock, false, "prev"); + return newBlock; + } else if(this.tree.isBlockContainer(block)) { + this.wrapAllInlineOrTextNodesAs("P", block, true); + return this._insertNewBlockAround(block.firstChild, before, forceTag); + } else { + return this._insertNewBlockAround(block, before, this.tree.isHeading(block) ? "P" : forceTag); + } + }, + + /** + * @private + * + * TODO: Rename + */ + _insertNewBlockAround: function(element, before, tagName) { + var newElement = this.createElement(tagName || element.nodeName); + this.copyAttributes(element, newElement, false); + this.correctEmptyElement(newElement); + newElement = this.insertNodeAt(newElement, element, before ? "before" : "after"); + return newElement; + }, + + /** + * Wrap or replace element with given tag name. + * + * @param {String} [tag] Tag name. If not provided, it does not modify tag name. + * @param {Element} element Target element + * @param {String} [className] Class name of tag. If not provided, it does not modify current class name, and if empty string is provided, class attribute will be removed. + * + * @return {Element} wrapper element or replaced element. + */ + applyTagIntoElement: function(tag, element, className) { + if(!tag && !className) return null; + + var result = element; + + if(tag) { + if(this.tree.isBlockOnlyContainer(tag)) { + result = this.wrapBlock(tag, element); + } else if(this.tree.isBlockContainer(element)) { + var wrapper = this.createElement(tag); + this.moveChildNodes(element, wrapper); + result = this.insertNodeAt(wrapper, element, "start"); + } else if(this.tree.isBlockContainer(tag) && this.hasImportantAttributes(element)) { + result = this.wrapBlock(tag, element); + } else { + result = this.replaceTag(tag, element); + } + } + + if(className) { + result.className = className; + } + + return result; + }, + + /** + * Wrap or replace elements with given tag name. + * + * @param {String} [tag] Tag name. If not provided, it does not modify tag name. + * @param {Element} from Start boundary (inclusive) + * @param {Element} to End boundary (inclusive) + * @param {String} [className] Class name of tag. If not provided, it does not modify current class name, and if empty string is provided, class attribute will be removed. + * + * @returns {Array} Array of wrappers or replaced elements + */ + applyTagIntoElements: function(tagName, from, to, className) { + if(!tagName && !className) return [from, to]; + + var applied = []; + + if(tagName) { + if(this.tree.isBlockContainer(tagName)) { + var family = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + var node = family.left; + var wrapper = this.insertNodeAt(this.createElement(tagName), node, "before"); + + var coveringWholeList = + family.parent.nodeName === "LI" && + family.parent.parentNode.childNodes.length === 1 && + !family.left.previousSilbing && + !family.right.nextSibling; + + if(coveringWholeList) { + var ul = node.parentNode.parentNode; + this.insertNodeAt(wrapper, ul, "before"); + wrapper.appendChild(ul); + } else { + while(node !== family.right) { + next = node.nextSibling; + wrapper.appendChild(node); + node = next; + } + wrapper.appendChild(family.right); + } + applied.push(wrapper); + } else { + // is normal tagName + var elements = this.getBlockElementsBetween(from, to); + for(var i = 0; i < elements.length; i++) { + if(this.tree.isBlockContainer(elements[i])) { + var wrappers = this.wrapAllInlineOrTextNodesAs(tagName, elements[i], true); + for(var j = 0; j < wrappers.length; j++) { + applied.push(wrappers[j]); + } + } else { + applied.push(this.replaceTag(tagName, elements[i]) || elements[i]); + } + } + } + } + + if(className) { + var elements = this.tree.collectNodesBetween(from, to, function(n) {return n.nodeType == 1;}); + for(var i = 0; i < elements.length; i++) { + elements[i].className = className; + } + } + + return applied; + }, + + /** + * Moves block up or down + * + * @param {Element} block Target block + * @param {boolean} up Move up if true + * + * @returns {Element} Moved block. It could be different with given block. + */ + moveBlock: function(block, up) { + // if block is table cell or contained by table cell, select its row as mover + block = this.getParentElementOf(block, ["TR"]) || block; + + // if block is only child, select its parent as mover + while(block.nodeName !== "TR" && block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + // find target and where + var target, where; + if (up) { + target = block.previousSibling; + + if(target) { + var singleNodeLi = target.nodeName === 'LI' && ((target.childNodes.length === 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); + var table = ['TABLE', 'TR'].indexOf(target.nodeName) !== -1; + + where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "end" : "before"; + } else if(block.parentNode !== this.getRoot()) { + target = block.parentNode; + where = "before"; + } + } else { + target = block.nextSibling; + + if(target) { + var singleNodeLi = target.nodeName === 'LI' && ((target.childNodes.length === 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); + var table = ['TABLE', 'TR'].indexOf(target.nodeName) !== -1; + + where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "start" : "after"; + } else if(block.parentNode !== this.getRoot()) { + target = block.parentNode; + where = "after"; + } + } + + + // no way to go? + if(!target) return null; + if(["TBODY", "THEAD"].indexOf(target.nodeName) !== -1) return null; + + // normalize + this.wrapAllInlineOrTextNodesAs("P", target, true); + + // make placeholder if needed + if(this.isFirstLiWithNestedList(block)) { + this.insertNewBlockAround(block, false, "P"); + } + + // perform move + var parent = block.parentNode; + var moved = this.insertNodeAt(block, target, where, true); + + // cleanup + if(!parent.hasChildNodes()) this.deleteNode(parent, true); + this.unwrapUnnecessaryParagraph(moved); + this.unwrapUnnecessaryParagraph(target); + + // remove placeholder + if(up) { + if(moved.previousSibling && this.isEmptyBlock(moved.previousSibling) && !moved.previousSibling.previousSibling && moved.parentNode.nodeName === "LI" && this.tree.isListContainer(moved.nextSibling)) { + this.deleteNode(moved.previousSibling); + } + } else { + if(moved.nextSibling && this.isEmptyBlock(moved.nextSibling) && !moved.previousSibling && moved.parentNode.nodeName === "LI" && this.tree.isListContainer(moved.nextSibling.nextSibling)) { + this.deleteNode(moved.nextSibling); + } + } + + this.correctEmptyElement(moved); + + return moved; + }, + + /** + * Remove given block + * + * @param {Element} block Target block + * @returns {Element} Nearest block of remove element + */ + removeBlock: function(block) { + var blockToMove; + + // if block is only child, select its parent as mover + while(block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var finder = function(node) {return this.tree.isBlock(node) && !this.tree.isAtomic(node) && !this.tree.isDescendantOf(block, node) && !this.tree.hasBlocks(node);}.bind(this); + var exitCondition = function(node) {return this.tree.isBlock(node) && !this.tree.isDescendantOf(this.getRoot(), node)}.bind(this); + + if(this.isFirstLiWithNestedList(block)) { + blockToMove = this.outdentListItem(block.nextSibling.firstChild); + this.deleteNode(blockToMove.previousSibling, true); + } else if(this.tree.isTableCell(block)) { + var rtable = new xq.RichTable(this, this.getParentElementOf(block, ["TABLE"])); + blockToMove = rtable.getBelowCellOf(block); + + // should not delete row when there's thead and the row is the only child of tbody + if( + block.parentNode.parentNode.nodeName === "TBODY" && + rtable.hasHeadingAtTop() && + rtable.getDom().tBodies[0].rows.length === 1) return blockToMove; + + blockToMove = blockToMove || + this.tree.findForward(block, finder, exitCondition) || + this.tree.findBackward(block, finder, exitCondition); + + this.deleteNode(block.parentNode, true); + } else { + blockToMove = blockToMove || + this.tree.findForward(block, finder, exitCondition) || + this.tree.findBackward(block, finder, exitCondition); + + if(!blockToMove) blockToMove = this.insertNodeAt(this.makeEmptyParagraph(), block, "after"); + + this.deleteNode(block, true); + } + if(!this.getRoot().hasChildNodes()) { + blockToMove = this.createElement("P"); + this.getRoot().appendChild(blockToMove); + this.correctEmptyElement(blockToMove); + } + + return blockToMove; + }, + + /** + * Removes trailing whitespaces of given block + * + * @param {Element} block Target block + */ + removeTrailingWhitespace: function(block) {throw "Not implemented"}, + + /** + * Extract given list item out and change its container's tag + * + * @param {Element} element LI or P which is a child of LI + * @param {String} type "OL", "UL" + * @param {String} className CSS class name + * + * @returns {Element} changed element + */ + changeListTypeTo: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var li = this.getParentElementOf(element, ["LI"]); + if(!li) throw "IllegalArgumentException"; + + var container = li.parentNode; + + this.splitContainerOf(li); + + var newContainer = this.insertNodeAt(this.createElement(type), container, "before"); + if(className) newContainer.className = className; + + this.insertNodeAt(li, newContainer, "start"); + this.deleteNode(container); + + this.mergeAdjustLists(newContainer); + + return element; + }, + + /** + * Split container of element into (maxium) three pieces. + */ + splitContainerOf: function(element, preserveElementItself, dir) { + if([element, element.parentNode].indexOf(this.getRoot()) !== -1) return element; + + var container = element.parentNode; + if(element.previousSibling && (!dir || dir.toLowerCase() === "prev")) { + var prev = this.createElement(container.nodeName); + this.copyAttributes(container, prev); + while(container.firstChild !== element) { + prev.appendChild(container.firstChild); + } + this.insertNodeAt(prev, container, "before"); + this.unwrapUnnecessaryParagraph(prev); + } + + if(element.nextSibling && (!dir || dir.toLowerCase() === "next")) { + var next = this.createElement(container.nodeName); + this.copyAttributes(container, next); + while(container.lastChild !== element) { + this.insertNodeAt(container.lastChild, next, "start"); + } + this.insertNodeAt(next, container, "after"); + this.unwrapUnnecessaryParagraph(next); + } + + if(!preserveElementItself) element = this.unwrapUnnecessaryParagraph(container) ? container : element; + return element; + }, + + /** + * TODO: Add specs + */ + splitParentElement: function(seperator) { + var parent = seperator.parentNode; + if(["HTML", "HEAD", "BODY"].indexOf(parent.nodeName) !== -1) throw "Illegal argument. Cannot seperate element[" + parent.nodeName + "]"; + + var previousSibling = seperator.previousSibling; + var nextSibling = seperator.nextSibling; + + var newElement = this.insertNodeAt(this.createElement(parent.nodeName), parent, "after"); + + var next; + while(next = seperator.nextSibling) newElement.appendChild(next); + + this.insertNodeAt(seperator, newElement, "start"); + this.copyAttributes(parent, newElement); + + return newElement; + }, + + /** + * TODO: Add specs + */ + splitElementUpto: function(seperator, element, excludeElement) { + while(seperator.previousSibling !== element) { + if(excludeElement && seperator.parentNode === element) break; + seperator = this.splitParentElement(seperator); + } + return seperator; + }, + + /** + * Merges two adjust elements + * + * @param {Element} element base element + * @param {boolean} withNext merge base element with next sibling + * @param {boolean} skip skip merge steps + */ + mergeElement: function(element, withNext, skip) { + this.wrapAllInlineOrTextNodesAs("P", element.parentNode, true); + + // find two block + if(withNext) { + var prev = element; + var next = this.tree.findForward( + element, + function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node !== element.parentNode}.bind(this) + ); + } else { + var next = element; + var prev = this.tree.findBackward( + element, + function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node !== element.parentNode}.bind(this) + ); + } + + // normalize next block + if(next && this.tree.isDescendantOf(this.getRoot(), next)) { + var nextContainer = next.parentNode; + if(this.tree.isBlockContainer(next)) { + nextContainer = next; + this.wrapAllInlineOrTextNodesAs("P", nextContainer, true); + next = nextContainer.firstChild; + } + } else { + next = null; + } + + // normalize prev block + if(prev && this.tree.isDescendantOf(this.getRoot(), prev)) { + var prevContainer = prev.parentNode; + if(this.tree.isBlockContainer(prev)) { + prevContainer = prev; + this.wrapAllInlineOrTextNodesAs("P", prevContainer, true); + prev = prevContainer.lastChild; + } + } else { + prev = null; + } + + try { + var containersAreTableCell = + prevContainer && (this.tree.isTableCell(prevContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(prevContainer.nodeName) !== -1) && + nextContainer && (this.tree.isTableCell(nextContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(nextContainer.nodeName) !== -1); + + if(containersAreTableCell && prevContainer !== nextContainer) return null; + + // if next has margin, perform outdent + if((!skip || !prev) && next && nextContainer.nodeName !== "LI" && this.outdentElement(next)) return element; + + // nextContainer is first li and next of it is list container ([I] represents caret position): + // + // * A[I] + // * B + // * C + if(nextContainer && nextContainer.nodeName === 'LI' && this.tree.isListContainer(next.nextSibling)) { + // move child nodes and... + this.moveChildNodes(nextContainer, prevContainer); + + // merge two paragraphs + this.removePlaceHoldersAndEmptyNodes(prev); + this.moveChildNodes(next, prev); + this.deleteNode(next); + + return prev; + } + + // merge two list containers + if(nextContainer && nextContainer.nodeName === 'LI' && this.tree.isListContainer(nextContainer.parentNode.previousSibling)) { + this.mergeAdjustLists(nextContainer.parentNode.previousSibling, true, "next"); + return prev; + } + + if(next && !containersAreTableCell && prevContainer && prevContainer.nodeName === 'LI' && nextContainer && nextContainer.nodeName === 'LI' && prevContainer.parentNode.nextSibling === nextContainer.parentNode) { + var nextContainerContainer = nextContainer.parentNode; + this.moveChildNodes(nextContainer.parentNode, prevContainer.parentNode); + this.deleteNode(nextContainerContainer); + return prev; + } + + // merge two containers + if(next && !containersAreTableCell && prevContainer && prevContainer.nextSibling === nextContainer && ((skip && prevContainer.nodeName !== "LI") || (!skip && prevContainer.nodeName === "LI"))) { + this.moveChildNodes(nextContainer, prevContainer); + return prev; + } + + // unwrap container + if(nextContainer && nextContainer.nodeName !== "LI" && !this.getParentElementOf(nextContainer, ["TABLE"]) && !this.tree.isListContainer(nextContainer) && nextContainer !== this.getRoot() && !next.previousSibling) { + return this.unwrapElement(nextContainer, true); + } + + // delete table + if(withNext && nextContainer && nextContainer.nodeName === "TABLE") { + this.deleteNode(nextContainer, true); + return prev; + } else if(!withNext && prevContainer && this.tree.isTableCell(prevContainer) && !this.tree.isTableCell(nextContainer)) { + this.deleteNode(this.getParentElementOf(prevContainer, ["TABLE"]), true); + return next; + } + + // if prev is same with next, do nothing + if(prev === next) return null; + + // if there is a null block, do nothing + if(!prev || !next || !prevContainer || !nextContainer) return null; + + // if two blocks are not in the same table cell, do nothing + if(this.getParentElementOf(prev, ["TD", "TH"]) !== this.getParentElementOf(next, ["TD", "TH"])) return null; + + var prevIsEmpty = false; + + // cleanup empty block before merge + + // 1. cleanup prev node which ends with marker + + if( + xq.Browser.isTrident && + prev.childNodes.length >= 2 && + this.isMarker(prev.lastChild.previousSibling) && + prev.lastChild.nodeType === 3 && + prev.lastChild.nodeValue.length === 1 && + prev.lastChild.nodeValue.charCodeAt(0) === 160 + ) { + this.deleteNode(prev.lastChild); + } + + // 2. cleanup prev node (if prev is empty, then replace prev's tag with next's) + this.removePlaceHoldersAndEmptyNodes(prev); + if(this.isEmptyBlock(prev)) { + // replace atomic block with normal block so that following code don't need to care about atomic block + if(this.tree.isAtomic(prev)) prev = this.replaceTag("P", prev); + + prev = this.replaceTag(next.nodeName, prev) || prev; + prev.innerHTML = ""; + } else if(prev.firstChild === prev.lastChild && this.isMarker(prev.firstChild)) { + prev = this.replaceTag(next.nodeName, prev) || prev; + } + + // 3. cleanup next node + if(this.isEmptyBlock(next)) { + // replace atomic block with normal block so that following code don't need to care about atomic block + if(this.tree.isAtomic(next)) next = this.replaceTag("P", next); + + next.innerHTML = ""; + } + + // perform merge + this.moveChildNodes(next, prev); + this.deleteNode(next); + return prev; + } finally { + // cleanup + if(prevContainer && this.isEmptyBlock(prevContainer)) this.deleteNode(prevContainer, true); + if(nextContainer && this.isEmptyBlock(nextContainer)) this.deleteNode(nextContainer, true); + + if(prevContainer) this.unwrapUnnecessaryParagraph(prevContainer); + if(nextContainer) this.unwrapUnnecessaryParagraph(nextContainer); + } + }, + + /** + * Merges adjust list containers which has same tag name + * + * @param {Element} container target list container + * @param {boolean} force force adjust list container even if they have different list type + * @param {String} dir Specify merge direction: PREV or NEXT. If not supplied it will be merged with both direction. + */ + mergeAdjustLists: function(container, force, dir) { + var prev = container.previousSibling; + var isPrevSame = prev && (prev.nodeName === container.nodeName && prev.className === container.className); + if((!dir || dir.toLowerCase() === 'prev') && (isPrevSame || (force && this.tree.isListContainer(prev)))) { + while(prev.lastChild) { + this.insertNodeAt(prev.lastChild, container, "start"); + } + this.deleteNode(prev); + } + + var next = container.nextSibling; + var isNextSame = next && (next.nodeName === container.nodeName && next.className === container.className); + if((!dir || dir.toLowerCase() === 'next') && (isNextSame || (force && this.tree.isListContainer(next)))) { + while(next.firstChild) { + this.insertNodeAt(next.firstChild, container, "end"); + } + this.deleteNode(next); + } + }, + + /** + * Moves child nodes from one element into another. + * + * @param {Elemet} from source element + * @param {Elemet} to target element + */ + moveChildNodes: function(from, to) { + if(this.tree.isDescendantOf(from, to) || ["HTML", "HEAD"].indexOf(to.nodeName) !== -1) + throw "Illegal argument. Cannot move children of element[" + from.nodeName + "] to element[" + to.nodeName + "]"; + + if(from === to) return; + + while(from.firstChild) to.appendChild(from.firstChild); + }, + + /** + * Copies attributes from one element into another. + * + * @param {Element} from source element + * @param {Element} to target element + * @param {boolean} copyId copy ID attribute of source element + */ + copyAttributes: function(from, to, copyId) { + // IE overrides this + + var attrs = from.attributes; + if(!attrs) return; + + for(var i = 0; i < attrs.length; i++) { + if(attrs[i].nodeName === "class" && attrs[i].nodeValue) { + to.className = attrs[i].nodeValue; + } else if((copyId || "id" !== attrs[i].nodeName) && attrs[i].nodeValue) { + to.setAttribute(attrs[i].nodeName, attrs[i].nodeValue); + } + } + }, + + _indentElements: function(node, blocks, affect) { + for (var i=0; i < affect.length; i++) { + if (affect[i] === node || this.tree.isDescendantOf(affect[i], node)) + return; + } + leaves = this.tree.getLeavesAtEdge(node); + + if (blocks.includeElement(leaves[0])) { + var affected = this.indentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + if (blocks.includeElement(node)) { + var affected = this.indentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + var children=xq.$A(node.childNodes); + for (var i=0; i < children.length; i++) + this._indentElements(children[i], blocks, affect); + return; + }, + + indentElements: function(from, to) { + var blocks = this.getBlockElementsBetween(from, to); + var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + + var affect = []; + + leaves = this.tree.getLeavesAtEdge(top.parent); + if (blocks.includeElement(leaves[0])) { + var affected = this.indentElement(top.parent); + if (affected) + return [affected]; + } + + var children = xq.$A(top.parent.childNodes); + for (var i=0; i < children.length; i++) { + this._indentElements(children[i], blocks, affect); + } + + affect = affect.flatten() + return affect.length > 0 ? affect : blocks; + }, + + outdentElementsCode: function(node) { + if (node.tagName === 'LI') + node = node.parentNode; + if (node.tagName === 'OL' && node.className === 'code') + return true; + return false; + }, + + _outdentElements: function(node, blocks, affect) { + for (var i=0; i < affect.length; i++) { + if (affect[i] === node || this.tree.isDescendantOf(affect[i], node)) + return; + } + leaves = this.tree.getLeavesAtEdge(node); + + if (blocks.includeElement(leaves[0]) && !this.outdentElementsCode(leaves[0])) { + var affected = this.outdentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + if (blocks.includeElement(node)) { + var children = xq.$A(node.parentNode.childNodes); + var isCode = this.outdentElementsCode(node); + var affected = this.outdentElement(node, true, isCode); + if (affected) { + if (children.includeElement(affected) && this.tree.isListContainer(node.parentNode) && !isCode) { + for (var i=0; i < children.length; i++) { + if (blocks.includeElement(children[i]) && !affect.includeElement(children[i])) + affect.push(children[i]); + } + }else + affect.push(affected); + return; + } + } + + var children=xq.$A(node.childNodes); + for (var i=0; i < children.length; i++) + this._outdentElements(children[i], blocks, affect); + return; + }, + + outdentElements: function(from, to) { + var start, end; + + if (from.parentNode.tagName === 'LI') start=from.parentNode; + if (to.parentNode.tagName === 'LI') end=to.parentNode; + + var blocks = this.getBlockElementsBetween(from, to); + var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + + var affect = []; + + leaves = this.tree.getLeavesAtEdge(top.parent); + if (blocks.includeElement(leaves[0]) && !this.outdentElementsCode(top.parent)) { + var affected = this.outdentElement(top.parent); + if (affected) + return [affected]; + } + + var children = xq.$A(top.parent.childNodes); + for (var i=0; i < children.length; i++) { + this._outdentElements(children[i], blocks, affect); + } + + if (from.offsetParent && to.offsetParent) { + start = from; + end = to; + }else if (blocks.first().offsetParent && blocks.last().offsetParent) { + start = blocks.first(); + end = blocks.last(); + } + + affect = affect.flatten() + if (!start || !start.offsetParent) + start = affect.first(); + if (!end || !end.offsetParent) + end = affect.last(); + + return this.getBlockElementsBetween(start, end); + }, + + /** + * Performs indent by increasing element's margin-left + */ + indentElement: function(element, noParent, forceMargin) { + if( + !forceMargin && + (element.nodeName === "LI" || (!this.tree.isListContainer(element) && !element.previousSibling && element.parentNode.nodeName === "LI")) + ) return this.indentListItem(element, noParent); + + var root = this.getRoot(); + if(!element || element === root) return null; + + if (element.parentNode !== root && !element.previousSibling && !noParent) element=element.parentNode; + + var margin = element.style.marginLeft; + var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; + + cssValue.value += 2; + element.style.marginLeft = cssValue.value + cssValue.unit; + + return element; + }, + + /** + * Performs outdent by decreasing element's margin-left + */ + outdentElement: function(element, noParent, forceMargin) { + if(!forceMargin && element.nodeName === "LI") return this.outdentListItem(element, noParent); + + var root = this.getRoot(); + if(!element || element === root) return null; + + var margin = element.style.marginLeft; + + var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; + if(cssValue.value === 0) { + return element.previousSibling || forceMargin ? + null : + this.outdentElement(element.parentNode, noParent); + } + + cssValue.value -= 2; + element.style.marginLeft = cssValue.value <= 0 ? "" : cssValue.value + cssValue.unit; + if(element.style.cssText === "") element.removeAttribute("style"); + + return element; + }, + + /** + * Performs indent for list item + */ + indentListItem: function(element, treatListAsNormalBlock) { + var li = this.getParentElementOf(element, ["LI"]); + var container = li.parentNode; + var prev = li.previousSibling; + if(!li.previousSibling) return this.indentElement(container); + + if(li.parentNode.nodeName === "OL" && li.parentNode.className === "code") return this.indentElement(li, treatListAsNormalBlock, true); + + if(!prev.lastChild) prev.appendChild(this.makePlaceHolder()); + + var targetContainer = + this.tree.isListContainer(prev.lastChild) ? + // if there's existing list container, select it as target container + prev.lastChild : + // if there's nothing, create new one + this.insertNodeAt(this.createElement(container.nodeName), prev, "end"); + + this.wrapAllInlineOrTextNodesAs("P", prev, true); + + // perform move + targetContainer.appendChild(li); + + // flatten nested list + if(!treatListAsNormalBlock && li.lastChild && this.tree.isListContainer(li.lastChild)) { + var childrenContainer = li.lastChild; + var child; + while(child = childrenContainer.lastChild) { + this.insertNodeAt(child, li, "after"); + } + this.deleteNode(childrenContainer); + } + + this.unwrapUnnecessaryParagraph(li); + + return li; + }, + + /** + * Performs outdent for list item + * + * @return {Element} outdented list item or null if no outdent performed + */ + outdentListItem: function(element, treatListAsNormalBlock) { + var li = this.getParentElementOf(element, ["LI"]); + var container = li.parentNode; + + if(!li.previousSibling) { + var performed = this.outdentElement(container); + if(performed) return performed; + } + + if(li.parentNode.nodeName === "OL" && li.parentNode.className === "code") return this.outdentElement(li, treatListAsNormalBlock, true); + + var parentLi = container.parentNode; + if(parentLi.nodeName !== "LI") return null; + + if(treatListAsNormalBlock) { + while(container.lastChild !== li) { + this.insertNodeAt(container.lastChild, parentLi, "after"); + } + } else { + // make next siblings as children + if(li.nextSibling) { + var targetContainer = + li.lastChild && this.tree.isListContainer(li.lastChild) ? + // if there's existing list container, select it as target container + li.lastChild : + // if there's nothing, create new one + this.insertNodeAt(this.createElement(container.nodeName), li, "end"); + + this.copyAttributes(container, targetContainer); + + var sibling; + while(sibling = li.nextSibling) { + targetContainer.appendChild(sibling); + } + } + } + + // move current LI into parent LI's next sibling + li = this.insertNodeAt(li, parentLi, "after"); + + // remove empty container + if(container.childNodes.length === 0) this.deleteNode(container); + + if(li.firstChild && this.tree.isListContainer(li.firstChild)) { + this.insertNodeAt(this.makePlaceHolder(), li, "start"); + } + + this.wrapAllInlineOrTextNodesAs("P", li); + this.unwrapUnnecessaryParagraph(parentLi); + + return li; + }, + + /** + * Performs justification + * + * @param {Element} block target element + * @param {String} dir one of "LEFT", "CENTER", "RIGHT", "BOTH" + */ + justifyBlock: function(block, dir) { + // if block is only child, select its parent as mover + while(block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var styleValue = dir.toLowerCase() === "both" ? "justify" : dir; + if(styleValue === "left") { + block.style.textAlign = ""; + if(block.style.cssText === "") block.removeAttribute("style"); + } else { + block.style.textAlign = styleValue; + } + return block; + }, + + justifyBlocks: function(blocks, dir) { + for(var i = 0; i < blocks.length; i++) { + this.justifyBlock(blocks[i], dir); + } + return blocks; + }, + + /** + * Turn given element into list. If the element is a list already, it will be reversed into normal element. + * + * @param {Element} element target element + * @param {String} type one of "UL", "OL" + * @param {String} className CSS className + * @returns {Element} affected element + */ + applyList: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var containerTag = type; + + if(element.nodeName === "LI" || (element.parentNode.nodeName === "LI" && !element.previousSibling)) { + var element = this.getParentElementOf(element, ["LI"]); + var container = element.parentNode; + if(container.nodeName === containerTag && container.className === className) { + return this.extractOutElementFromParent(element); + } else { + return this.changeListTypeTo(element, type, className); + } + } else { + return this.turnElementIntoListItem(element, type, className); + } + }, + + applyLists: function(from, to, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var containerTag = type; + var blocks = this.getBlockElementsBetween(from, to); + + // LIs or Non-containing blocks + var whole = blocks.findAll(function(e) { + return e.nodeName === "LI" || !this.tree.isBlockContainer(e); + }.bind(this)); + + // LIs + var listItems = whole.findAll(function(e) {return e.nodeName === "LI"}.bind(this)); + + // Non-containing blocks which is not a descendant of any LIs selected above(listItems). + var normalBlocks = whole.findAll(function(e) { + return e.nodeName !== "LI" && + !(e.parentNode.nodeName === "LI" && !e.previousSibling && !e.nextSibling) && + !this.tree.isDescendantOf(listItems, e) + }.bind(this)); + + var diffListItems = listItems.findAll(function(e) { + return e.parentNode.nodeName !== containerTag; + }.bind(this)); + + // Conditions needed to determine mode + var hasNormalBlocks = normalBlocks.length > 0; + var hasDifferentListStyle = diffListItems.length > 0; + + var blockToHandle = null; + + if(hasNormalBlocks) { + blockToHandle = normalBlocks; + } else if(hasDifferentListStyle) { + blockToHandle = diffListItems; + } else { + blockToHandle = listItems; + } + + // perform operation + for(var i = 0; i < blockToHandle.length; i++) { + var block = blockToHandle[i]; + + // preserve original index to restore selection + var originalIndex = blocks.indexOf(block); + blocks[originalIndex] = this.applyList(block, type, className); + } + + return blocks; + }, + + /** + * Insert place-holder for given empty element. Empty element does not displayed and causes many editing problems. + * + * @param {Element} element empty element + */ + correctEmptyElement: function(element) {throw "Not implemented"}, + + /** + * Corrects current block-only-container to do not take any non-block element or node. + */ + correctParagraph: function() {throw "Not implemented"}, + + /** + * Makes place-holder for empty element. + * + * @returns {Node} Platform specific place holder + */ + makePlaceHolder: function() {throw "Not implemented"}, + + /** + * Makes place-holder string. + * + * @returns {String} Platform specific place holder string + */ + makePlaceHolderString: function() {throw "Not implemented"}, + + /** + * Makes empty paragraph which contains only one place-holder + */ + makeEmptyParagraph: function() {throw "Not implemented"}, + + /** + * Applies background color to selected area + * + * @param {Object} color valid CSS color value + */ + applyBackgroundColor: function(color) {throw "Not implemented";}, + + /** + * Applies foreground color to selected area + * + * @param {Object} color valid CSS color value + */ + applyForegroundColor: function(color) { + this.execCommand("forecolor", color); + }, + + /** + * Applies font face to selected area + * + * @param {String} face font face + */ + applyFontFace: function(face) { + this.execCommand("fontname", face); + }, + + /** + * Applies font size to selected area + * + * @param {Number} size font size (px) + */ + applyFontSize: function(size) { + this.execCommand("fontsize", size); + }, + + execCommand: function(commandId, param) {throw "Not implemented";}, + + applyRemoveFormat: function() {throw "Not implemented";}, + applyEmphasis: function() {throw "Not implemented";}, + applyStrongEmphasis: function() {throw "Not implemented";}, + applyStrike: function() {throw "Not implemented";}, + applyUnderline: function() {throw "Not implemented";}, + applySuperscription: function() { + this.execCommand("superscript"); + }, + applySubscription: function() { + this.execCommand("subscript"); + }, + indentBlock: function(element, treatListAsNormalBlock) { + return (!element.previousSibling && element.parentNode.nodeName === "LI") ? + this.indentListItem(element, treatListAsNormalBlock) : + this.indentElement(element); + }, + outdentBlock: function(element, treatListAsNormalBlock) { + while(true) { + if(!element.previousSibling && element.parentNode.nodeName === "LI") { + element = this.outdentListItem(element, treatListAsNormalBlock); + return element; + } else { + var performed = this.outdentElement(element); + if(performed) return performed; + + // first-child can outdent container + if(!element.previousSibling) { + element = element.parentNode; + } else { + break; + } + } + } + + return null; + }, + wrapBlock: function(tag, start, end) { + if(this.tree._blockTags.indexOf(tag) === -1) throw "Unsuppored block container: [" + tag + "]"; + if(!start) start = this.getCurrentBlockElement(); + if(!end) end = start; + + // Check if the selection captures valid fragement + var validFragment = false; + + if(start === end) { + // are they same block? + validFragment = true; + } else if(start.parentNode === end.parentNode && !start.previousSibling && !end.nextSibling) { + // are they covering whole parent? + validFragment = true; + start = end = start.parentNode; + } else { + // are they siblings of non-LI blocks? + validFragment = + (start.parentNode === end.parentNode) && + (start.nodeName !== "LI"); + } + + if(!validFragment) return null; + + var wrapper = this.createElement(tag); + + if(start === end) { + // They are same. + if(this.tree.isBlockContainer(start) && !this.tree.isListContainer(start)) { + // It's a block container. Wrap its contents. + if(this.tree.isBlockOnlyContainer(wrapper)) { + this.correctEmptyElement(start); + this.wrapAllInlineOrTextNodesAs("P", start, true); + } + this.moveChildNodes(start, wrapper); + start.appendChild(wrapper); + } else { + // It's not a block container. Wrap itself. + wrapper = this.insertNodeAt(wrapper, start, "after"); + wrapper.appendChild(start); + } + + this.correctEmptyElement(wrapper); + } else { + // They are siblings. Wrap'em all. + wrapper = this.insertNodeAt(wrapper, start, "before"); + var node = start; + + while(node !== end) { + next = node.nextSibling; + wrapper.appendChild(node); + node = next; + } + wrapper.appendChild(node); + } + + return wrapper; + }, + + + + ///////////////////////////////////////////// + // Focus/Caret/Selection + + /** + * Gives focus to root element's window + */ + focus: function() {throw "Not implemented";}, + + /** + * Returns selection object + */ + sel: function() {throw "Not implemented";}, + + /** + * Returns range object + */ + rng: function() {throw "Not implemented";}, + + /** + * Returns true if DOM has selection + */ + hasSelection: function() {throw "Not implemented";}, + + /** + * Returns true if root element's window has selection + */ + hasFocus: function() { + return this.focused; + }, + + /** + * Adjust scrollbar to make the element visible in current viewport. + * + * @param {Element} element Target element + * @param {boolean} toTop Align element to top of the viewport + * @param {boolean} moveCaret Move caret to the element + */ + scrollIntoView: function(element, toTop, moveCaret) { + element.scrollIntoView(toTop); + if(moveCaret) this.placeCaretAtStartOf(element); + }, + + /** + * Select all document + */ + selectAll: function() { + return this.execCommand('selectall'); + }, + + /** + * Select specified element. + * + * @param {Element} element element to select + * @param {boolean} entireElement true to select entire element, false to select inner content of element + */ + selectElement: function(node, entireElement) {throw "Not implemented"}, + + /** + * Select all elements between two blocks(inclusive). + * + * @param {Element} start start of selection + * @param {Element} end end of selection + */ + selectBlocksBetween: function(start, end) {throw "Not implemented"}, + + /** + * Delete selected area + */ + deleteSelection: function() {throw "Not implemented"}, + + /** + * Collapses current selection. + * + * @param {boolean} toStart true to move caret to start of selected area. + */ + collapseSelection: function(toStart) {throw "Not implemented"}, + + /** + * Returns selected area as HTML string + */ + getSelectionAsHtml: function() {throw "Not implemented"}, + + /** + * Returns selected area as text string + */ + getSelectionAsText: function() {throw "Not implemented"}, + + /** + * Places caret at start of the element + * + * @param {Element} element Target element + */ + placeCaretAtStartOf: function(element) {throw "Not implemented"}, + + + /** + * Checks if the caret is place at start of the block + */ + isCaretAtBlockStart: function() { + if(this.isCaretAtEmptyBlock()) return true; + if(this.hasSelection()) return false; + var node = this.getCurrentBlockElement(); + var marker = this.pushMarker(); + + var isTrue = false; + while (node = this.getFirstChild(node)) { + if (node === marker) { + isTrue = true; + break; + } + } + + this.popMarker(); + + return isTrue; + }, + + /** + * Checks if the caret is place at end of the block + */ + isCaretAtBlockEnd: function() {throw "Not implemented"}, + + /** + * Checks if the node is empty-text-node or not + */ + isEmptyTextNode: function(node) { + return node.nodeType === 3 && (node.nodeValue.length === 0 || (node.nodeValue.length === 1 && (node.nodeValue.charAt(0) === 32 || node.nodeValue.charAt(0) === 160))); + }, + + /** + * Checks if the caret is place in empty block element + */ + isCaretAtEmptyBlock: function() { + return this.isEmptyBlock(this.getCurrentBlockElement()); + }, + + /** + * Saves current selection info + * + * @returns {Object} Bookmark for selection + */ + saveSelection: function() {throw "Not implemented"}, + + /** + * Restores current selection info + * + * @param {Object} bookmark Bookmark + */ + restoreSelection: function(bookmark) {throw "Not implemented"}, + + /** + * Create marker + */ + createMarker: function() { + var marker = this.createElement("SPAN"); + marker.id = "xquared_marker_" + (this._lastMarkerId++); + marker.className = "xquared_marker"; + return marker; + }, + + /** + * Create and insert marker into current caret position. + * Marker is an inline element which has no child nodes. It can be used with many purposes. + * For example, You can push marker to mark current caret position. + * + * @returns {Element} marker + */ + pushMarker: function() { + var marker = this.createMarker(); + return this.insertNode(marker); + }, + + /** + * Removes last marker + * + * @params {boolean} moveCaret move caret into marker before delete. + */ + popMarker: function(moveCaret) { + var id = "xquared_marker_" + (--this._lastMarkerId); + var marker = this.$(id); + if(!marker) return; + + if(moveCaret) { + this.selectElement(marker, true); + this.collapseSelection(false); + } + + this.deleteNode(marker); + }, + + + + ///////////////////////////////////////////// + // Query methods + + isMarker: function(node) { + return (node.nodeType === 1 && node.nodeName === "SPAN" && node.className === "xquared_marker"); + }, + + isFirstBlockOfBody: function(block) { + var root = this.getRoot(); + if(this.isFirstLiWithNestedList(block)) block = block.parentNode; + + var found = this.tree.findBackward( + block, + function(node) { + return node === root || (this.tree.isBlock(node) && !this.tree.isBlockOnlyContainer(node)); + }.bind(this) + ); + + return found === root; + }, + + /** + * Returns outer HTML of given element + */ + getOuterHTML: function(element) {throw "Not implemented"}, + + /** + * Returns inner text of given element + * + * @param {Element} element Target element + * @returns {String} Text string + */ + getInnerText: function(element) { + return element.innerHTML.stripTags(); + }, + + /** + * Checks if given node is place holder or not. + * + * @param {Node} node DOM node + */ + isPlaceHolder: function(node) {throw "Not implemented"}, + + /** + * Checks if given block is the first LI whose next sibling is a nested list. + * + * @param {Element} block Target block + */ + isFirstLiWithNestedList: function(block) { + return !block.previousSibling && + block.parentNode.nodeName === "LI" && + this.tree.isListContainer(block.nextSibling); + }, + + /** + * Search all links within given element + * + * @param {Element} [element] Container element. If not given, the root element will be used. + * @param {Array} [found] if passed, links will be appended into this array. + * @returns {Array} Array of anchors. It returns empty array if there's no links. + */ + searchAnchors: function(element, found) { + if(!element) element = this.getRoot(); + if(!found) found = []; + + var anchors = element.getElementsByTagName("A"); + for(var i = 0; i < anchors.length; i++) { + found.push(anchors[i]); + } + + return found; + }, + + /** + * Search all headings within given element + * + * @param {Element} [element] Container element. If not given, the root element will be used. + * @param {Array} [found] if passed, headings will be appended into this array. + * @returns {Array} Array of headings. It returns empty array if there's no headings. + */ + searchHeadings: function(element, found) { + if(!element) element = this.getRoot(); + if(!found) found = []; + + var regexp = /^h[1-6]/ig; + var nodes = element.childNodes; + if (!nodes) return []; + + for(var i = 0; i < nodes.length; i++) { + var isContainer = nodes[i] && this.tree._blockContainerTags.indexOf(nodes[i].nodeName) !== -1; + var isHeading = nodes[i] && nodes[i].nodeName.match(regexp); + + if (isContainer) { + this.searchHeadings(nodes[i], found); + } else if (isHeading) { + found.push(nodes[i]); + } + } + + return found; + }, + + /** + * Collect structure and style informations of given element. + * + * @param {Element} element target element + * @returns {Object} object that contains information: {em: true, strong: false, block: "p", list: "ol", ...} + */ + collectStructureAndStyle: function(element) { + if(!element || element.nodeName === "#document") return {}; + + var block = this.getParentBlockElementOf(element); + + if(block === null || (xq.Browser.isTrident && ["ready", "complete"].indexOf(block.readyState) === -1)) return {}; + + var parents = this.tree.collectParentsOf(element, true, function(node) {return block.parentNode === node}); + var blockName = block.nodeName; + + var info = {}; + var doc = this.getDoc(); + var em = doc.queryCommandState("Italic"); + var strong = doc.queryCommandState("Bold"); + var strike = doc.queryCommandState("Strikethrough"); + var underline = doc.queryCommandState("Underline") && !this.getParentElementOf(element, ["A"]); + var superscription = doc.queryCommandState("superscript"); + var subscription = doc.queryCommandState("subscript"); + var foregroundColor = doc.queryCommandValue("forecolor"); + var fontName = doc.queryCommandValue("fontname"); + var fontSize = doc.queryCommandValue("fontsize"); + // @WORKAROUND: Trident's fontSize value is affected by CSS + if(xq.Browser.isTrident && fontSize === "5" && this.getParentElementOf(element, ["H1", "H2", "H3", "H4", "H5", "H6"])) fontSize = ""; + + // @TODO: remove conditional + var backgroundColor; + if(xq.Browser.isGecko) { + this.execCommand("styleWithCSS", "true"); + try { + backgroundColor = doc.queryCommandValue("hilitecolor"); + } catch(e) { + // if there's selection and the first element of the selection is + // an empty block... + backgroundColor = ""; + } + this.execCommand("styleWithCSS", "false"); + } else { + backgroundColor = doc.queryCommandValue("backcolor"); + } + + // if block is only child, select its parent + while(block.parentNode && block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var list = false; + if(block.nodeName === "LI") { + var parent = block.parentNode; + var isCode = parent.nodeName === "OL" && parent.className === "code"; + var hasClass = parent.className.length > 0; + if(isCode) { + list = "CODE"; + } else if(hasClass) { + list = false; + } else { + list = parent.nodeName; + } + } + + var justification = block.style.textAlign || "left"; + + return { + block:blockName, + em: em, + strong: strong, + strike: strike, + underline: underline, + superscription: superscription, + subscription: subscription, + list: list, + justification: justification, + foregroundColor: foregroundColor, + backgroundColor: backgroundColor, + fontSize: fontSize, + fontName: fontName + }; + }, + + /** + * Checks if the element has one or more important attributes: id, class, style + * + * @param {Element} element Target element + */ + hasImportantAttributes: function(element) {throw "Not implemented"}, + + /** + * Checks if the element is empty or not. Place-holder is not counted as a child. + * + * @param {Element} element Target element + */ + isEmptyBlock: function(element) {throw "Not implemented"}, + + /** + * Returns element that contains caret. + */ + getCurrentElement: function() {throw "Not implemented"}, + + /** + * Returns block element that contains caret. Trident overrides this method. + */ + getCurrentBlockElement: function() { + var cur = this.getCurrentElement(); + if(!cur) return null; + + var block = this.getParentBlockElementOf(cur); + if(!block) return null; + + return (block.nodeName === "BODY") ? null : block; + }, + + /** + * Returns parent block element of parameter. + * If the parameter itself is a block, it will be returned. + * + * @param {Element} element Target element + * + * @returns {Element} Element or null + */ + getParentBlockElementOf: function(element) { + while(element) { + if(this.tree._blockTags.indexOf(element.nodeName) !== -1) return element; + element = element.parentNode; + } + return null; + }, + + /** + * Returns parent element of parameter which has one of given tag name. + * If the parameter itself has the same tag name, it will be returned. + * + * @param {Element} element Target element + * @param {Array} tagNames Array of string which contains tag names + * + * @returns {Element} Element or null + */ + getParentElementOf: function(element, tagNames) { + while(element) { + if(tagNames.indexOf(element.nodeName) !== -1) return element; + element = element.parentNode; + } + return null; + }, + + /** + * Collects all block elements between two elements + * + * @param {Element} from Start element(inclusive) + * @param {Element} to End element(inclusive) + */ + getBlockElementsBetween: function(from, to) { + return this.tree.collectNodesBetween(from, to, function(node) { + return node.nodeType === 1 && this.tree.isBlock(node); + }.bind(this)); + }, + + /** + * Returns block element that contains selection start. + * + * This method will return exactly same result with getCurrentBlockElement method + * when there's no selection. + */ + getBlockElementAtSelectionStart: function() {throw "Not implemented"}, + + /** + * Returns block element that contains selection end. + * + * This method will return exactly same result with getCurrentBlockElement method + * when there's no selection. + */ + getBlockElementAtSelectionEnd: function() {throw "Not implemented"}, + + /** + * Returns blocks at each edge of selection(start and end). + * + * TODO: implement ignoreEmptyEdges for FF + * + * @param {boolean} naturalOrder Mak the start element always comes before the end element + * @param {boolean} ignoreEmptyEdges Prevent some browser(Gecko) from selecting one more block than expected + */ + getBlockElementsAtSelectionEdge: function(naturalOrder, ignoreEmptyEdges) {throw "Not implemented"}, + + /** + * Returns array of selected block elements + */ + getSelectedBlockElements: function() { + var selectionEdges = this.getBlockElementsAtSelectionEdge(true, true); + var start = selectionEdges[0]; + var end = selectionEdges[1]; + + return this.tree.collectNodesBetween(start, end, function(node) { + return node.nodeType === 1 && this.tree.isBlock(node); + }.bind(this)); + }, + + /** + * Get element by ID + * + * @param {String} id Element's ID + * @returns {Element} element or null + */ + getElementById: function(id) {return this.getDoc().getElementById(id)}, + + /** + * Shortcut for #getElementById + */ + $: function(id) {return this.getElementById(id)}, + + /** + * Returns first "valid" child of given element. It ignores empty textnodes. + * + * @param {Element} element Target element + * @returns {Node} first child node or null + */ + getFirstChild: function(element) { + if(!element) return null; + + var nodes = xq.$A(element.childNodes); + return nodes.find(function(node) {return !this.isEmptyTextNode(node)}.bind(this)); + }, + + /** + * Returns last "valid" child of given element. It ignores empty textnodes and place-holders. + * + * @param {Element} element Target element + * @returns {Node} last child node or null + */ + getLastChild: function(element) {throw "Not implemented"}, + + getNextSibling: function(node) { + while(node = node.nextSibling) { + if(node.nodeType !== 3 || !node.nodeValue.isBlank()) break; + } + return node; + }, + + getBottommostFirstChild: function(node) { + while(node.firstChild && node.nodeType === 1) node = node.firstChild; + return node; + }, + + getBottommostLastChild: function(node) { + while(node.lastChild && node.nodeType === 1) node = node.lastChild; + return node; + }, + + /** @private */ + _getCssValue: function(str, defaultUnit) { + if(!str || str.length === 0) return {value:0, unit:defaultUnit}; + + var tokens = str.match(/(\d+)(.*)/); + return { + value:parseInt(tokens[1]), + unit:tokens[2] || defaultUnit + }; + } +}); +/** + * @requires Xquared.js + * @requires rdom/Base.js + */ +xq.rdom.Trident = xq.Class(xq.rdom.Base, + /** + * @name xq.rdom.Trident + * @lends xq.rdom.Trident.prototype + * @extends xq.rdom.Base + * @constructor + */ + { + makePlaceHolder: function() { + return this.createTextNode(" "); + }, + + makePlaceHolderString: function() { + return ' '; + }, + + makeEmptyParagraph: function() { + return this.createElementFromHtml("
"); + }, + + isPlaceHolder: function(node) { + return false; + }, + + getOuterHTML: function(element) { + return element.outerHTML; + }, + + getCurrentBlockElement: function() { + var cur = this.getCurrentElement(); + if(!cur) return null; + + var block = this.getParentBlockElementOf(cur); + if(!block) return null; + + if(block.nodeName === "BODY") { + // Atomic block such as HR + var newParagraph = this.insertNode(this.makeEmptyParagraph()); + var next = newParagraph.nextSibling; + if(this.tree.isAtomic(next)) { + this.deleteNode(newParagraph); + return next; + } + } else { + return block; + } + }, + + insertNode: function(node) { + if(this.hasSelection()) this.collapseSelection(true); + + this.rng().pasteHTML(''); + var marker = this.$('xquared_temp'); + if(node.id === 'xquared_temp') return marker; + + if(marker) marker.replaceNode(node); + return node; + }, + + removeTrailingWhitespace: function(block) { + if(!block) return; + + // @TODO: reimplement to handle atomic tags and so on. (use DomTree) + if(this.tree.isBlockOnlyContainer(block)) return; + if(this.isEmptyBlock(block)) return; + + var text = block.innerText; + var html = block.innerHTML; + var lastCharCode = text.charCodeAt(text.length - 1); + if(text.length <= 1 || [32,160].indexOf(lastCharCode) === -1) return; + + // shortcut for most common case + if(text == html.replace(/ /g, " ")) { + block.innerHTML = html.replace(/ $/, ""); + return; + } + + var node = block; + while(node && node.nodeType !== 3) node = node.lastChild; + if(!node) return; + + // DO NOT REMOVE OR MODIFY FOLLOWING CODE. Modifying following code will crash IE7 + var nodeValue = node.nodeValue; + if(nodeValue.length <= 1) { + this.deleteNode(node, true); + } else { + node.nodeValue = nodeValue.substring(0, nodeValue.length - 1); + } + }, + + correctEmptyElement: function(element) { + if(!element || element.nodeType !== 1 || this.tree.isAtomic(element)) return; + + if(element.firstChild) { + this.correctEmptyElement(element.firstChild); + } else { + element.innerHTML = " "; + } + }, + + copyAttributes: function(from, to, copyId) { + to.mergeAttributes(from, !copyId); + }, + + correctParagraph: function() { + if(!this.hasFocus()) return false; + if(this.hasSelection()) return false; + + var block = this.getCurrentElement(); + + // if caret is at + // * atomic block level elements(HR) or + // * ... + // then following is true + if(this.tree.isBlockOnlyContainer(block)) { + // check for atomic block element such as HR + block = this.insertNode(this.makeEmptyParagraph()); + if(this.tree.isAtomic(block.nextSibling)) { + // @WORKAROUND: + // At this point, HR has a caret but getCurrentElement() doesn't return the HR and + // I couldn't find a way to get this HR. So I have to keep this reference. + // I will be used in Editor._handleEnter. + this.recentHR = block.nextSibling; + this.deleteNode(block); + return false; + } else { + // I can't remember exactly when following is executed and what it does :-( + // * Case 1: Performing Ctrl+A and Ctrl+X repeatedly + // * ... + var nextBlock = this.tree.findForward( + block, + function(node) {return this.tree.isBlock(node) && !this.tree.isBlockOnlyContainer(node)}.bind(this) + ); + + if(nextBlock) { + this.deleteNode(block); + this.placeCaretAtStartOf(nextBlock); + } else { + this.placeCaretAtStartOf(block); + } + + return true; + } + } else { + block = this.getCurrentBlockElement(); + if(block.nodeType === 3) block = block.parentNode; + + if(this.tree.hasMixedContents(block)) { + var marker = this.pushMarker(); + this.wrapAllInlineOrTextNodesAs("P", block, true); + this.popMarker(true); + return true; + } else if((this.tree.isTextOrInlineNode(block.previousSibling) || this.tree.isTextOrInlineNode(block.nextSibling)) && this.tree.hasMixedContents(block.parentNode)) { + // @WORKAROUND: + // IE?서??Block?Inline/Text??접??경우 getCurrentElement ?이 ?작?한?? + // ?라???재 Block 주?까? ?번???아주어???다. + this.wrapAllInlineOrTextNodesAs("P", block.parentNode, true); + return true; + } else { + return false; + } + } + }, + + + + ////// + // Commands + execCommand: function(commandId, param) { + return this.getDoc().execCommand(commandId, false, param); + }, + + applyBackgroundColor: function(color) { + this.execCommand("BackColor", color); + }, + + applyEmphasis: function() { + // Generate tag. It will be replaced with
' + this.rdom.makePlaceHolderString() + '
'); - doc.write(''); - doc.close(); - - this.editorWin = this.editorFrame.contentWindow; - this.editorDoc = this.editorWin.document; - this.editorBody = this.editorDoc.body; - this.editorBody.className = "xed"; - - // it is needed to fix IE6 horizontal scrollbar problem - if(xq.Browser.isIE6) { - this.editorDoc.documentElement.style.overflowY='auto'; - this.editorDoc.documentElement.style.overflowX='hidden'; + // turn off Firefox's table editing feature + if(xq.Browser.isGecko) { + try {this.rdom.getDoc().execCommand("enableInlineTableEditing", false, "false")} catch(ignored) {} } - // override image path - if(this.config.generateDefaultToolbar) { - this._addStyleRules([ - {selector:".xquared div.toolbar", rule:"background-image: url(" + this.config.imagePathForDefaultToobar + "toolbarBg.gif)"}, - {selector:".xquared ul.buttons li", rule:"background-image: url(" + this.config.imagePathForDefaultToobar + "toolbarButtonBg.gif)"}, - {selector:".xquared ul.buttons li.xq_separator", rule:"background-image: url(" + this.config.imagePathForDefaultToobar + "toolbarSeparator.gif)"} - ]); - } - - this.rdom.setWin(this.editorWin); - this.rdom.setRoot(this.editorBody); - this.validator = xq.Validator.createInstance(this.doc.location.href, this.config.urlValidationMode, this.config.allowedTags, this.config.allowedAttributes); + // register event handlers + this._registerEventHandlers(); // hook onsubmit of form - if(this.config.automaticallyHookSubmitEvent && this.contentElement.nodeName == 'TEXTAREA' && this.contentElement.form) { + if(this.config.automaticallyHookSubmitEvent && this.contentElement.form) { var original = this.contentElement.form.onsubmit; - this.contentElement.form.onsubmit = function() { - this.contentElement.value = this.getCurrentContent(true); - if(original) { - return original(); - } else { - return true; - } + this.contentElement.value = this.getCurrentContent(); + return original ? original.bind(this.contentElement.form)() : true; }.bind(this); } }, - _addStyleRules: function(rules) { - if(!this.dynamicStyle) { - if(xq.Browser.isTrident) { - this.dynamicStyle = this.doc.createStyleSheet(); - } else { - var style = this.doc.createElement('style'); - this.doc.body.appendChild(style); - this.dynamicStyle = xq.$A(this.doc.styleSheets).last(); - } - } - - for(var i = 0; i < rules.length; i++) { - var rule = rules[i]; - if(xq.Browser.isTrident) { - this.dynamicStyle.addRule(rules[i].selector, rules[i].rule); - } else { - this.dynamicStyle.insertRule(rules[i].selector + " {" + rules[i].rule + "}", this.dynamicStyle.cssRules.length); - } - } - }, - - _defaultToolbarClickHandler: function(e) { - var src = e.target || e.srcElement; - while(src.nodeName != "A") src = src.parentNode; - - if(xq.hasClassName(src.parentNode, 'disabled') || xq.hasClassName(this.toolbarContainer, 'disabled')) { - xq.stopEvent(e); - return false; - } - - if(xq.Browser.isTrident) this.focus(); - - var handler = src.handler; - var xed = this; - var stop = (typeof handler == "function") ? handler(this) : eval(handler); - - if(stop) { - xq.stopEvent(e); - return false; - } else { - return true; - } - }, - - _generateDefaultToolbar: function() { - // outmost container - var container = this.doc.createElement('div'); - container.className = 'toolbar'; - - // button container - var buttons = this.doc.createElement('ul'); - buttons.className = 'buttons'; - container.appendChild(buttons); - - // Generate buttons from map and append it to button container - var map = this.config.defaultToolbarButtonMap; - for(var i = 0; i < map.length; i++) { - for(var j = 0; j < map[i].length; j++) { - var buttonConfig = map[i][j]; - - var li = this.doc.createElement('li'); - buttons.appendChild(li); - li.className = buttonConfig.className; - - var span = this.doc.createElement('span'); - li.appendChild(span); - - var a = this.doc.createElement('a'); - span.appendChild(a); - a.href = '#'; - a.title = buttonConfig.title; - a.handler = buttonConfig.handler; - - this._toolbarAnchorsCache.push(a); - - xq.observe(a, 'mousedown', xq.cancelHandler); - xq.observe(a, 'click', this._defaultToolbarClickHandler.bindAsEventListener(this)); - - var img = this.doc.createElement('img'); - a.appendChild(img); - img.src = this.config.imagePathForDefaultToobar + buttonConfig.className + '.gif'; - - if(j == 0 && i != 0) li.className += ' xq_separator'; - } - } - - return container; - }, - ///////////////////////////////////////////// // Event Management _registerEventHandlers: function() { - var events = ['keydown', 'click', 'keyup', 'mouseup', 'contextmenu']; + var events = [this.platformDepedentKeyEventType, 'click', 'keyup', 'mouseup', 'contextmenu']; if(xq.Browser.isTrident && this.config.changeCursorOnLink) events.push('mousemove'); - if(xq.Browser.isMac && xq.Browser.isGecko) events.push('keypress'); + var handler = this._handleEvent.bindAsEventListener(this); for(var i = 0; i < events.length; i++) { - xq.observe(this.getDoc(), events[i], this._handleEvent.bindAsEventListener(this)); + xq.observe(this.getDoc(), events[i], handler); + } + + if(xq.Browser.isGecko) { + xq.observe(this.getDoc(), "focus", handler); + xq.observe(this.getDoc(), "blur", handler); + xq.observe(this.getDoc(), "scroll", handler); + xq.observe(this.getDoc(), "dragdrop", handler); + } else { + xq.observe(this.getWin(), "focus", handler); + xq.observe(this.getWin(), "blur", handler); + xq.observe(this.getWin(), "scroll", handler); } }, _handleEvent: function(e) { this._fireOnBeforeEvent(this, e); + if(e.stopProcess) { + xq.stopEvent(e); + return false; + } - var stop = false; - - var modifiedByCorrection = false; - - if(e.type == 'mousemove' && this.config.changeCursorOnLink) { - // Trident only + // Trident only + if(e.type === 'mousemove') { + if(!this.config.changeCursorOnLink) return true; + var link = !!this.rdom.getParentElementOf(e.srcElement, ["A"]); - var editable = this.editorBody.contentEditable; - editable = editable == 'inherit' ? false : editable; + var editable = this.getBody().contentEditable; + editable = editable === 'inherit' ? false : editable; - if(editable != link && !this.rdom.hasSelection()) this.editorBody.contentEditable = !link; - } else if(e.type == 'click' && e.button == 0 && this.config.enableLinkClick) { - var a = this.rdom.getParentElementOf(e.target || e.srcElement, ["A"]); - if(a) stop = this.handleClick(e, a); - } else if(e.type == (xq.Browser.isMac && xq.Browser.isGecko ? "keypress" : "keydown")) { + if(editable !== link && !this.rdom.hasSelection()) this.getBody().contentEditable = !link; + return true; + } + + var stop = false; + var modifiedByCorrection = false; + if(e.type === this.platformDepedentKeyEventType) { var undoPerformed = false; - modifiedByCorrection = this.rdom.correctParagraph(); for(var key in this.config.shortcuts) { if(!this.config.shortcuts[key].event.matches(e)) continue; var handler = this.config.shortcuts[key].handler; var xed = this; - stop = (typeof handler == "function") ? handler(this) : eval(handler); + stop = (typeof handler === "function") ? handler(this) : eval(handler); - if(key == "undo") undoPerformed = true; + if(key === "undo") undoPerformed = true; } - } else if(["mouseup", "keyup"].indexOf(e.type) != -1) { + } else if(e.type === 'click' && e.button === 0 && this.config.enableLinkClick) { + var a = this.rdom.getParentElementOf(e.target || e.srcElement, ["A"]); + if(a) stop = this.handleClick(e, a); + } else if(["keyup", "mouseup"].indexOf(e.type) !== -1) { modifiedByCorrection = this.rdom.correctParagraph(); - } else if(["contextmenu"].indexOf(e.type) != -1) { + } else if(["contextmenu"].indexOf(e.type) !== -1) { this._handleContextMenu(e); + } else if("focus" == e.type) { + this.rdom.focused = true; + } else if("blur" == e.type) { + this.rdom.focused = false; } if(stop) xq.stopEvent(e); @@ -1596,7 +7863,6 @@ xq.Editor = xq.Class({ */ handleAutocorrection: function() { var block = this.rdom.getCurrentBlockElement(); - // TODO: use complete unescape algorithm var text = this.rdom.getInnerText(block).replace(/ /gi, " "); @@ -1610,7 +7876,7 @@ xq.Editor = xq.Class({ try { this.editHistory.onCommand(); this.editHistory.disable(); - if(typeof ac.handler == "String") { + if(typeof ac.handler === "String") { var xed = this; var rdom = this.rdom; eval(ac.handler); @@ -1637,7 +7903,7 @@ xq.Editor = xq.Class({ handleAutocompletion: function() { var acs = this.config.autocompletions; if(xq.isEmptyHash(acs)) return; - + if(this.rdom.hasSelection()) { var text = this.rdom.getSelectionAsText(); this.rdom.deleteSelection(); @@ -1651,14 +7917,14 @@ xq.Editor = xq.Class({ filtered.push([key, acs[key].criteria(text)]); } filtered = filtered.findAll(function(elem) { - return elem[1] != -1; + return elem[1] !== -1; }); - - if(filtered.length == 0) { + + if(filtered.length === 0) { this.rdom.popMarker(true); return; } - + var minIndex = 0; var min = filtered[0][1]; for(var i = 0; i < filtered.length; i++) { @@ -1671,6 +7937,7 @@ xq.Editor = xq.Class({ var ac = acs[filtered[minIndex][0]]; this.editHistory.disable(); + this.rdom.selectElement(wrapper); } else { var marker = this.rdom.pushMarker(); @@ -1679,10 +7946,10 @@ xq.Editor = xq.Class({ filtered.push([key, this.rdom.testSmartWrap(marker, acs[key].criteria).textIndex]); } filtered = filtered.findAll(function(elem) { - return elem[1] != -1; + return elem[1] !== -1; }); - if(filtered.length == 0) { + if(filtered.length === 0) { this.rdom.popMarker(true); return; } @@ -1710,7 +7977,7 @@ xq.Editor = xq.Class({ try { // call handler - if(typeof ac.handler == "String") { + if(typeof ac.handler === "String") { var xed = this; var rdom = this.rdom; eval(ac.handler); @@ -1740,7 +8007,7 @@ xq.Editor = xq.Class({ handleClick: function(e, target) { var href = decodeURI(target.href); if(!xq.Browser.isTrident) { - if(!e.ctrlKey && !e.shiftKey && e.button != 1) { + if(!e.ctrlKey && !e.shiftKey && e.button !== 1) { window.location.href = href; return true; } @@ -1760,10 +8027,11 @@ xq.Editor = xq.Class({ * Show link dialog * * TODO: should support modify/unlink + * TODO: Add selenium test */ handleLink: function() { var text = this.rdom.getSelectionAsText() || ''; - var dialog = new xq.controls.FormDialog( + var dialog = new xq.ui.FormDialog( this, xq.ui_templates.basicLinkDialog, function(dialog) { @@ -1796,6 +8064,7 @@ xq.Editor = xq.Class({ /** * Inserts link or apply link into selected area + * @TODO Add selenium test * * @param {boolean} autoSelection if set true and there's no selection, automatically select word to link(if possible) * @param {String} url url @@ -1809,7 +8078,7 @@ xq.Editor = xq.Class({ var marker = this.rdom.pushMarker(); var a = this.rdom.smartWrap(marker, "A", function(text) { var index = text.lastIndexOf(" "); - return index == -1 ? index : index + 1; + return index === -1 ? index : index + 1; }); a.href = url; a.title = title; @@ -1839,8 +8108,24 @@ xq.Editor = xq.Class({ return true; }, + /** + * @TODO Add selenium test + */ + handleSpace: function() { + // If it has selection, perform default action. + if(this.rdom.hasSelection()) return false; + + // Trident performs URL replacing automatically + if(!xq.Browser.isTrident) { + this.replaceUrlToLink(); + } + + return false; + }, + /** * Called when enter key pressed. + * @TODO Add selenium test * * @param {boolean} skipAutocorrection if set true, skips autocorrection * @param {boolean} forceInsertParagraph if set true, inserts paragraph @@ -1849,23 +8134,39 @@ xq.Editor = xq.Class({ // If it has selection, perform default action. if(this.rdom.hasSelection()) return false; + // @WORKAROUND: + // If caret is in HR, default action should be performed and + // this._handleEvent() will correct broken HTML + if(xq.Browser.isTrident && this.rdom.tree.isBlockOnlyContainer(this.rdom.getCurrentElement()) && this.rdom.recentHR) { + this.rdom.insertNodeAt(this.rdom.makeEmptyParagraph(), this.rdom.recentHR, "before"); + this.rdom.recentHR = null; + return true; + } + // Perform autocorrection if(!skipAutocorrection && this.handleAutocorrection()) return true; + var block = this.rdom.getCurrentBlockElement(); + var info = this.rdom.collectStructureAndStyle(block); + + // Perform URL replacing. Trident performs URL replacing automatically + if(!xq.Browser.isTrident) { + this.replaceUrlToLink(); + } + var atEmptyBlock = this.rdom.isCaretAtEmptyBlock(); var atStart = atEmptyBlock || this.rdom.isCaretAtBlockStart(); var atEnd = atEmptyBlock || (!atStart && this.rdom.isCaretAtBlockEnd()); var atEdge = atEmptyBlock || atStart || atEnd; if(!atEdge) { - var block = this.rdom.getCurrentBlockElement(); var marker = this.rdom.pushMarker(); if(this.rdom.isFirstLiWithNestedList(block) && !forceInsertParagraph) { var parent = block.parentNode; this.rdom.unwrapElement(block); block = parent; - } else if(block.nodeName != "LI" && this.rdom.tree.isBlockContainer(block)) { + } else if(block.nodeName !== "LI" && this.rdom.tree.isBlockContainer(block)) { block = this.rdom.wrapAllInlineOrTextNodesAs("P", block, true).first(); } this.rdom.splitElementUpto(marker, block); @@ -1873,8 +8174,18 @@ xq.Editor = xq.Class({ this.rdom.popMarker(true); } else if(atEmptyBlock) { this._handleEnterAtEmptyBlock(); + + if(!xq.Browser.isWebkit) { + if(info.fontSize && info.fontSize !== "2") this.handleFontSize(info.fontSize); + if(info.fontName) this.handleFontFace(info.fontName); + } } else { this._handleEnterAtEdge(atStart, forceInsertParagraph); + + if(!xq.Browser.isWebkit) { + if(info.fontSize && info.fontSize !== "2") this.handleFontSize(info.fontSize); + if(info.fontName) this.handleFontFace(info.fontName); + } } return true; @@ -1889,6 +8200,8 @@ xq.Editor = xq.Class({ var block = this.rdom.moveBlock(this.rdom.getCurrentBlockElement(), up); if(block) { this.rdom.selectElement(block, false); + if(this.rdom.isEmptyBlock(block)) this.rdom.collapseSelection(true); + block.scrollIntoView(false); var historyAdded = this.editHistory.onCommand(); @@ -1899,6 +8212,7 @@ xq.Editor = xq.Class({ /** * Called when tab key pressed + * @TODO: Add selenium test */ handleTab: function() { var hasSelection = this.rdom.hasSelection(); @@ -1906,7 +8220,7 @@ xq.Editor = xq.Class({ if(hasSelection) { this.handleIndent(); - } else if (table && table.className == "datatable") { + } else if (table && table.className === "datatable") { this.handleMoveToNextCell(); } else if (this.rdom.isCaretAtBlockStart()) { this.handleIndent(); @@ -1919,6 +8233,7 @@ xq.Editor = xq.Class({ /** * Called when shift+tab key pressed + * @TODO: Add selenium test */ handleShiftTab: function() { var hasSelection = this.rdom.hasSelection(); @@ -1926,7 +8241,7 @@ xq.Editor = xq.Class({ if(hasSelection) { this.handleOutdent(); - } else if (table && table.className == "datatable") { + } else if (table && table.className === "datatable") { this.handleMoveToPreviousCell(); } else { this.handleOutdent(); @@ -1937,6 +8252,7 @@ xq.Editor = xq.Class({ /** * Inserts three non-breaking spaces + * @TODO: Add selenium test */ handleInsertTab: function() { this.rdom.insertHtml(' '); @@ -1948,6 +8264,7 @@ xq.Editor = xq.Class({ /** * Called when delete key pressed + * @TODO: Add selenium test */ handleDelete: function() { if(this.rdom.hasSelection() || !this.rdom.isCaretAtBlockEnd()) return false; @@ -1956,6 +8273,7 @@ xq.Editor = xq.Class({ /** * Called when backspace key pressed + * @TODO: Add selenium test */ handleBackspace: function() { if(this.rdom.hasSelection() || !this.rdom.isCaretAtBlockStart()) return false; @@ -1965,25 +8283,36 @@ xq.Editor = xq.Class({ _handleMerge: function(withNext) { var block = this.rdom.getCurrentBlockElement(); - // save caret position; - var marker = this.rdom.pushMarker(); - - // perform merge - var merged = this.rdom.mergeElement(block, withNext, withNext); - if(!merged && !withNext) this.rdom.extractOutElementFromParent(block); - - // restore caret position - this.rdom.popMarker(true); - if(merged) this.rdom.correctEmptyElement(merged); - - var historyAdded = this.editHistory.onCommand(); - this._fireOnCurrentContentChanged(this); - - return !!merged; + if(this.rdom.isEmptyBlock(block) && !this.rdom.tree.isBlockContainer(block.nextSibling) && withNext) { + var blockToMove = this.rdom.removeBlock(block); + this.rdom.placeCaretAtStartOf(blockToMove); + blockToMove.scrollIntoView(false); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + + return true; + } else { + // save caret position; + var marker = this.rdom.pushMarker(); + + // perform merge + var merged = this.rdom.mergeElement(block, withNext, withNext); + if(!merged && !withNext) this.rdom.extractOutElementFromParent(block); + + // restore caret position + this.rdom.popMarker(true); + if(merged) this.rdom.correctEmptyElement(merged); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + return !!merged; + } }, /** * (in table) Moves caret to the next cell + * @TODO: Add selenium test */ handleMoveToNextCell: function() { this._handleMoveToCell("next"); @@ -1991,6 +8320,7 @@ xq.Editor = xq.Class({ /** * (in table) Moves caret to the previous cell + * @TODO: Add selenium test */ handleMoveToPreviousCell: function() { this._handleMoveToCell("prev"); @@ -1998,6 +8328,7 @@ xq.Editor = xq.Class({ /** * (in table) Moves caret to the above cell + * @TODO: Add selenium test */ handleMoveToAboveCell: function() { this._handleMoveToCell("above"); @@ -2005,6 +8336,7 @@ xq.Editor = xq.Class({ /** * (in table) Moves caret to the below cell + * @TODO: Add selenium test */ handleMoveToBelowCell: function() { this._handleMoveToCell("below"); @@ -2017,16 +8349,16 @@ xq.Editor = xq.Class({ var rtable = new xq.RichTable(this.rdom, table); var target = null; - if(["next", "prev"].indexOf(dir) != -1) { - var toNext = dir == "next"; + if(["next", "prev"].indexOf(dir) !== -1) { + var toNext = dir === "next"; target = toNext ? rtable.getNextCellOf(cell) : rtable.getPreviousCellOf(cell); } else { - var toBelow = dir == "below"; + var toBelow = dir === "below"; target = toBelow ? rtable.getBelowCellOf(cell) : rtable.getAboveCellOf(cell); } if(!target) { - var finder = function(node) {return ['TD', 'TH'].indexOf(node.nodeName) == -1 && this.tree.isBlock(node) && !this.tree.hasBlocks(node);}.bind(this.rdom); + var finder = function(node) {return ['TD', 'TH'].indexOf(node.nodeName) === -1 && this.tree.isBlock(node) && !this.tree.hasBlocks(node);}.bind(this.rdom); var exitCondition = function(node) {return this.tree.isBlock(node) && !this.tree.isDescendantOf(this.getRoot(), node)}.bind(this.rdom); target = (toNext || toBelow) ? @@ -2039,10 +8371,11 @@ xq.Editor = xq.Class({ /** * Applies STRONG tag + * @TODO: Add selenium test */ handleStrongEmphasis: function() { this.rdom.applyStrongEmphasis(); - + var historyAdded = this.editHistory.onCommand(); this._fireOnCurrentContentChanged(this); @@ -2051,6 +8384,7 @@ xq.Editor = xq.Class({ /** * Applies EM tag + * @TODO: Add selenium test */ handleEmphasis: function() { this.rdom.applyEmphasis(); @@ -2063,6 +8397,7 @@ xq.Editor = xq.Class({ /** * Applies EM.underline tag + * @TODO: Add selenium test */ handleUnderline: function() { this.rdom.applyUnderline(); @@ -2075,6 +8410,7 @@ xq.Editor = xq.Class({ /** * Applies SPAN.strike tag + * @TODO: Add selenium test */ handleStrike: function() { this.rdom.applyStrike(); @@ -2087,6 +8423,7 @@ xq.Editor = xq.Class({ /** * Removes all style + * @TODO: Add selenium test */ handleRemoveFormat: function() { this.rdom.applyRemoveFormat(); @@ -2097,8 +8434,22 @@ xq.Editor = xq.Class({ return true; }, + /** + * Remove link + * @TODO: Add selenium test + */ + handleRemoveLink: function() { + this.rdom.applyRemoveLink(); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + + return true; + }, + /** * Inserts table + * @TODO: Add selenium test * * @param {Number} cols number of columns * @param {Number} rows number of rows @@ -2136,6 +8487,10 @@ xq.Editor = xq.Class({ this.rdom.placeCaretAtStartOf(row.cells[0]); return true; }, + + /** + * @TODO: Add selenium test + */ handleInsertNewColumnAt: function(where) { var cur = this.rdom.getCurrentBlockElement(); var td = this.rdom.getParentElementOf(cur, ["TD"], true); @@ -2149,6 +8504,9 @@ xq.Editor = xq.Class({ return true; }, + /** + * @TODO: Add selenium test + */ handleDeleteRow: function() { var cur = this.rdom.getCurrentBlockElement(); var tr = this.rdom.getParentElementOf(cur, ["TR"]); @@ -2162,6 +8520,9 @@ xq.Editor = xq.Class({ return true; }, + /** + * @TODO: Add selenium test + */ handleDeleteColumn: function() { var cur = this.rdom.getCurrentBlockElement(); var td = this.rdom.getParentElementOf(cur, ["TD"], true); @@ -2171,16 +8532,18 @@ xq.Editor = xq.Class({ var rtable = new xq.RichTable(this.rdom, table); rtable.deleteCell(td); + //this.rdom.placeCaretAtStartOf(table); return true; }, /** * Performs block indentation + * @TODO: Add selenium test */ handleIndent: function() { if(this.rdom.hasSelection()) { var blocks = this.rdom.getBlockElementsAtSelectionEdge(true, true); - if(blocks.first() != blocks.last()) { + if(blocks.first() !== blocks.last()) { var affected = this.rdom.indentElements(blocks.first(), blocks.last()); this.rdom.selectBlocksBetween(affected.first(), affected.last()); @@ -2203,14 +8566,15 @@ xq.Editor = xq.Class({ return true; }, - + /** * Performs block outdentation + * @TODO: Add selenium test */ handleOutdent: function() { if(this.rdom.hasSelection()) { var blocks = this.rdom.getBlockElementsAtSelectionEdge(true, true); - if(blocks.first() != blocks.last()) { + if(blocks.first() !== blocks.last()) { var affected = this.rdom.outdentElements(blocks.first(), blocks.last()); this.rdom.selectBlocksBetween(affected.first(), affected.last()); @@ -2236,20 +8600,22 @@ xq.Editor = xq.Class({ /** * Applies list. + * @TODO: Add selenium test * - * @param {String} type "UL" or "OL" or "CODE". CODE generates OL.code + * @param {String} type "UL" or "OL" + * @param {String} CSS class name */ - handleList: function(type) { + handleList: function(type, className) { if(this.rdom.hasSelection()) { var blocks = this.rdom.getBlockElementsAtSelectionEdge(true, true); - if(blocks.first() != blocks.last()) { - blocks = this.rdom.applyLists(blocks.first(), blocks.last(), type); + if(blocks.first() !== blocks.last()) { + blocks = this.rdom.applyLists(blocks.first(), blocks.last(), type, className); } else { - blocks[0] = blocks[1] = this.rdom.applyList(blocks.first(), type); + blocks[0] = blocks[1] = this.rdom.applyList(blocks.first(), type, className); } this.rdom.selectBlocksBetween(blocks.first(), blocks.last()); } else { - var block = this.rdom.applyList(this.rdom.getCurrentBlockElement(), type); + var block = this.rdom.applyList(this.rdom.getCurrentBlockElement(), type, className); this.rdom.placeCaretAtStartOf(block); } var historyAdded = this.editHistory.onCommand(); @@ -2260,18 +8626,19 @@ xq.Editor = xq.Class({ /** * Applies justification + * @TODO: Add selenium test * * @param {String} dir "left", "center", "right" or "both" */ handleJustify: function(dir) { - var block = this.rdom.getCurrentBlockElement(); - var dir = (dir == "left" || dir == "both") && (block.style.textAlign == "left" || block.style.textAlign == "") ? "both" : dir; - if(this.rdom.hasSelection()) { var blocks = this.rdom.getSelectedBlockElements(); + var dir = (dir === "left" || dir === "both") && (blocks[0].style.textAlign === "left" || blocks[0].style.textAlign === "") ? "both" : dir; this.rdom.justifyBlocks(blocks, dir); this.rdom.selectBlocksBetween(blocks.first(), blocks.last()); } else { + var block = this.rdom.getCurrentBlockElement(); + var dir = (dir === "left" || dir === "both") && (block.style.textAlign === "left" || block.style.textAlign === "") ? "both" : dir; this.rdom.justifyBlock(block, dir); } var historyAdded = this.editHistory.onCommand(); @@ -2282,16 +8649,23 @@ xq.Editor = xq.Class({ /** * Removes current block element + * @TODO: Add selenium test */ handleRemoveBlock: function() { var block = this.rdom.getCurrentBlockElement(); var blockToMove = this.rdom.removeBlock(block); this.rdom.placeCaretAtStartOf(blockToMove); blockToMove.scrollIntoView(false); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + + return true; }, /** * Applies background color + * @TODO: Add selenium test * * @param {String} color CSS color string */ @@ -2302,7 +8676,7 @@ xq.Editor = xq.Class({ var historyAdded = this.editHistory.onCommand(); this._fireOnCurrentContentChanged(this); } else { - var dialog = new xq.controls.FormDialog( + var dialog = new xq.ui.FormDialog( this, xq.ui_templates.basicColorPickerDialog, function(dialog) {}, @@ -2330,17 +8704,18 @@ xq.Editor = xq.Class({ /** * Applies foreground color + * @TODO: Add selenium test * * @param {String} color CSS color string */ handleForegroundColor: function(color) { if(color) { this.rdom.applyForegroundColor(color); - + var historyAdded = this.editHistory.onCommand(); this._fireOnCurrentContentChanged(this); } else { - var dialog = new xq.controls.FormDialog( + var dialog = new xq.ui.FormDialog( this, xq.ui_templates.basicColorPickerDialog, function(dialog) {}, @@ -2366,8 +8741,44 @@ xq.Editor = xq.Class({ return true; }, + /** + * Applies font face + * @TODO: Add selenium test + * + * @param {String} face font face + */ + handleFontFace: function(face) { + if(face) { + this.rdom.applyFontFace(face); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + } else { + //TODO: popup font dialog + } + return true; + }, + + /** + * Applies font size + * + * @param {Number} font size (1 to 6) + */ + handleFontSize: function(size) { + if(size) { + this.rdom.applyFontSize(size); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + } else { + //TODO: popup font dialog + } + return true; + }, + /** * Applies superscription + * @TODO: Add selenium test */ handleSuperscription: function() { this.rdom.applySuperscription(); @@ -2380,6 +8791,7 @@ xq.Editor = xq.Class({ /** * Applies subscription + * @TODO: Add selenium test */ handleSubscription: function() { this.rdom.applySubscription(); @@ -2389,15 +8801,22 @@ xq.Editor = xq.Class({ return true; }, - + /** - * Change of wrap current block's tag + * Change or wrap current block(or selected blocks)'s tag + * @TODO: Add selenium test + * + * @param {String} [tagName] Name of tag. If not provided, it does not modify current tag name + * @param {String} [className] Class name of tag. If not provided, it does not modify current class name, and if empty string is provided, class attribute will be removed. */ - handleApplyBlock: function(tagName) { + handleApplyBlock: function(tagName, className) { + if(!tagName && !className) return true; + + // if current selection contains multi-blocks if(this.rdom.hasSelection()) { var blocks = this.rdom.getBlockElementsAtSelectionEdge(true, true); - if(blocks.first() != blocks.last()) { - var applied = this.rdom.applyTagIntoElements(tagName, blocks.first(), blocks.last()); + if(blocks.first() !== blocks.last()) { + var applied = this.rdom.applyTagIntoElements(tagName, blocks.first(), blocks.last(), className); this.rdom.selectBlocksBetween(applied.first(), applied.last()); var historyAdded = this.editHistory.onCommand(); @@ -2407,13 +8826,14 @@ xq.Editor = xq.Class({ } } + // else var block = this.rdom.getCurrentBlockElement(); this.rdom.pushMarker(); var applied = - this.rdom.applyTagIntoElement(tagName, block) || + this.rdom.applyTagIntoElement(tagName, block, className) || block; this.rdom.popMarker(true); - + if(this.rdom.isEmptyBlock(applied)) { this.rdom.correctEmptyElement(applied); this.rdom.placeCaretAtStartOf(applied); @@ -2424,9 +8844,10 @@ xq.Editor = xq.Class({ return true; }, - + /** * Inserts seperator (HR) + * @TODO: Add selenium test */ handleSeparator: function() { this.rdom.collapseSelection(); @@ -2447,6 +8868,7 @@ xq.Editor = xq.Class({ /** * Performs UNDO + * @TODO: Add selenium test */ handleUndo: function() { var performed = this.editHistory.undo(); @@ -2461,6 +8883,7 @@ xq.Editor = xq.Class({ /** * Performs REDO + * @TODO: Add selenium test */ handleRedo: function() { var performed = this.editHistory.redo(); @@ -2485,20 +8908,12 @@ xq.Editor = xq.Class({ var point = xq.getEventPoint(e); var x = point.x; var y = point.y; - - var pos = xq.getCumulativeOffset(this.getFrame()); + + var pos = xq.getCumulativeOffset(this.wysiwygEditorDiv); x += pos.left; y += pos.top; this._contextMenuTargetElement = e.target || e.srcElement; - //TODO: Safari on Windows doesn't work with context key(app key) - if (!x || !y || xq.Browser.isTrident) { - var pos = xq.getCumulativeOffset(this._contextMenuTargetElement); - var posFrame = xq.getCumulativeOffset(this.getFrame()); - x = pos.left + posFrame.left - this.getDoc().documentElement.scrollLeft; - y = pos.top + posFrame.top - this.getDoc().documentElement.scrollTop; - } - if (!xq.Browser.isTrident) { var doc = this.getDoc(); var body = this.getBody(); @@ -2506,10 +8921,8 @@ xq.Editor = xq.Class({ x -= doc.documentElement.scrollLeft; y -= doc.documentElement.scrollTop; - if (doc != body) { - x -= body.scrollLeft; - y -= body.scrollTop; - } + x -= body.scrollLeft; + y -= body.scrollTop; } for(var cmh in this.config.contextMenuHandlers) { @@ -2526,48 +8939,48 @@ xq.Editor = xq.Class({ showContextMenu: function(menuItems, x, y) { if (!menuItems || menuItems.length <= 0) return; - if (!this._contextMenuContainer) { - this._contextMenuContainer = this.doc.createElement('UL'); - this._contextMenuContainer.className = 'xqContextMenu'; - this._contextMenuContainer.style.display='none'; + if (!this.contextMenuContainer) { + this.contextMenuContainer = this.doc.createElement('UL'); + this.contextMenuContainer.className = 'xqContextMenu'; + this.contextMenuContainer.style.display='none'; xq.observe(this.doc, 'click', this._contextMenuClicked.bindAsEventListener(this)); xq.observe(this.rdom.getDoc(), 'click', this.hideContextMenu.bindAsEventListener(this)); - this.body.appendChild(this._contextMenuContainer); + this.body.appendChild(this.contextMenuContainer); } else { - while (this._contextMenuContainer.childNodes.length > 0) - this._contextMenuContainer.removeChild(this._contextMenuContainer.childNodes[0]); + while (this.contextMenuContainer.childNodes.length > 0) + this.contextMenuContainer.removeChild(this.contextMenuContainer.childNodes[0]); } for (var i=0; i < menuItems.length; i++) { menuItems[i]._node = this._addContextMenuItem(menuItems[i]); } - this._contextMenuContainer.style.display='block'; - this._contextMenuContainer.style.left=Math.min(Math.max(this.doc.body.scrollWidth, this.doc.documentElement.clientWidth)-this._contextMenuContainer.offsetWidth, x)+'px'; - this._contextMenuContainer.style.top=Math.min(Math.max(this.doc.body.scrollHeight, this.doc.documentElement.clientHeight)-this._contextMenuContainer.offsetHeight, y)+'px'; + this.contextMenuContainer.style.display='block'; + this.contextMenuContainer.style.left = Math.min(Math.max(this.doc.body.scrollWidth, this.doc.documentElement.clientWidth) - this.contextMenuContainer.offsetWidth, x) + 'px'; + this.contextMenuContainer.style.top = Math.min(Math.max(this.doc.body.scrollHeight, this.doc.documentElement.clientHeight) - this.contextMenuContainer.offsetHeight, y) + 'px'; - this._contextMenuItems = menuItems; + this.contextMenuItems = menuItems; }, hideContextMenu: function() { - if (this._contextMenuContainer) - this._contextMenuContainer.style.display='none'; + if (this.contextMenuContainer) + this.contextMenuContainer.style.display='none'; }, _addContextMenuItem: function(item) { - if (!this._contextMenuContainer) throw "No conext menu container exists"; + if (!this.contextMenuContainer) throw "No conext menu container exists"; var node = this.doc.createElement('LI'); if (item.disabled) node.className += ' disabled'; - if (item.title == '----') { + if (item.title === '----') { node.innerHTML = ' '; node.className = 'separator'; } else { if(item.handler) { - node.innerHTML = ''+(item.title.toString().escapeHTML())+''; + node.innerHTML = ''+(item.title.toString().escapeHTML())+''; } else { node.innerHTML = (item.title.toString().escapeHTML()); } @@ -2575,7 +8988,7 @@ xq.Editor = xq.Class({ if(item.className) node.className = item.className; - this._contextMenuContainer.appendChild(node); + this.contextMenuContainer.appendChild(node); return node; }, @@ -2583,21 +8996,21 @@ xq.Editor = xq.Class({ _contextMenuClicked: function(e) { this.hideContextMenu(); - if (!this._contextMenuContainer) return; + if (!this.contextMenuContainer) return; var node = e.srcElement || e.target; - while(node && node.nodeName != "LI") { + while(node && node.nodeName !== "LI") { node = node.parentNode; } - if (!node || !this.rdom.tree.isDescendantOf(this._contextMenuContainer, node)) return; + if (!node || !this.rdom.tree.isDescendantOf(this.contextMenuContainer, node)) return; - for (var i=0; i < this._contextMenuItems.length; i++) { - if (this._contextMenuItems[i]._node == node) { - var handler = this._contextMenuItems[i].handler; - if (!this._contextMenuItems[i].disabled && handler) { + for (var i=0; i < this.contextMenuItems.length; i++) { + if (this.contextMenuItems[i]._node === node) { + var handler = this.contextMenuItems[i].handler; + if (!this.contextMenuItems[i].disabled && handler) { var xed = this; var element = this._contextMenuTargetElement; - if(typeof handler == "function") { + if(typeof handler === "function") { handler(xed, element); } else { eval(handler); @@ -2610,6 +9023,7 @@ xq.Editor = xq.Class({ /** * Inserts HTML template + * @TODO: Add selenium test * * @param {String} html Template string. It should have single root element * @returns {Element} inserted element @@ -2620,6 +9034,7 @@ xq.Editor = xq.Class({ /** * Places given HTML template nearby target. + * @TODO: Add selenium test * * @param {String} html Template string. It should have single root element * @param {Node} target Target node. @@ -2640,7 +9055,7 @@ xq.Editor = xq.Class({ } // remove all whitespace characters between block tags - return html = this.removeUnnecessarySpaces(html); + return this.removeUnnecessarySpaces(html); }, @@ -2677,4792 +9092,32 @@ xq.Editor = xq.Class({ this.rdom.placeCaretAtStartOf(blockToPlaceCaret); if(!xq.Browser.isTrident) blockToPlaceCaret.scrollIntoView(false); - } -}); -xq.Browser = { - // By Layout Engines - isTrident: navigator.appName == "Microsoft Internet Explorer", - isWebkit: navigator.userAgent.indexOf('AppleWebKit/') > -1, - isGecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1, - isKHTML: navigator.userAgent.indexOf('KHTML') != -1, - isPresto: navigator.appName == "Opera", - - // By Platforms - isMac: navigator.userAgent.indexOf("Macintosh") != -1, - isUbuntu: navigator.userAgent.indexOf('Ubuntu') != -1, - - // By Browsers - isIE: navigator.appName == "Microsoft Internet Explorer", - isIE6: navigator.userAgent.indexOf('MSIE 6') != -1, - isIE7: navigator.userAgent.indexOf('MSIE 7') != -1 -}; -xq.Shortcut = xq.Class({ - initialize: function(keymapOrExpression) { - xq.addToFinalizeQueue(this); - - this.keymap = (typeof keymapOrExpression == "string") ? - xq.Shortcut.interprete(keymapOrExpression).keymap : - keymapOrExpression; - }, - matches: function(e) { - var which = xq.Browser.isGecko && xq.Browser.isMac ? (e.keyCode + "_" + e.charCode) : e.keyCode; - - var keyMatches = - (this.keymap.which == which) || - (this.keymap.which == 32 && which == 25); // 25 is SPACE in Type-3 keyboard. - - if(typeof e.metaKey == "undefined") e.metaKey = false; - - var modifierMatches = - (typeof this.keymap.shiftKey == "undefined" || this.keymap.shiftKey == e.shiftKey) && - (typeof this.keymap.altKey == "undefined" || this.keymap.altKey == e.altKey) && - (typeof this.keymap.ctrlKey == "undefined" || this.keymap.ctrlKey == e.ctrlKey) && - (typeof this.keymap.metaKey == "undefined" || this.keymap.metaKey == e.metaKey) - - return modifierMatches && keyMatches; - } -}); - -xq.Shortcut.interprete = function(expression) { - expression = expression.toUpperCase(); - - var which = xq.Shortcut._interpreteWhich(expression.split("+").pop()); - var ctrlKey = xq.Shortcut._interpreteModifier(expression, "CTRL"); - var altKey = xq.Shortcut._interpreteModifier(expression, "ALT"); - var shiftKey = xq.Shortcut._interpreteModifier(expression, "SHIFT"); - var metaKey = xq.Shortcut._interpreteModifier(expression, "META"); - - var keymap = {}; - - keymap.which = which; - if(typeof ctrlKey != "undefined") keymap.ctrlKey = ctrlKey; - if(typeof altKey != "undefined") keymap.altKey = altKey; - if(typeof shiftKey != "undefined") keymap.shiftKey = shiftKey; - if(typeof metaKey != "undefined") keymap.metaKey = metaKey; - - return new xq.Shortcut(keymap); -} - -xq.Shortcut._interpreteModifier = function(expression, modifierName) { - return expression.match("\\(" + modifierName + "\\)") ? - undefined : - expression.match(modifierName) ? - true : false; -} -xq.Shortcut._interpreteWhich = function(keyName) { - var which = keyName.length == 1 ? - ((xq.Browser.isMac && xq.Browser.isGecko) ? "0_" + keyName.toLowerCase().charCodeAt(0) : keyName.charCodeAt(0)) : - xq.Shortcut._keyNames[keyName]; - - if(typeof which == "undefined") throw "Unknown special key name: [" + keyName + "]" - - return which; -} -xq.Shortcut._keyNames = - xq.Browser.isMac && xq.Browser.isGecko ? - { - BACKSPACE: "8_0", - TAB: "9_0", - RETURN: "13_0", - ENTER: "13_0", - ESC: "27_0", - SPACE: "0_32", - LEFT: "37_0", - UP: "38_0", - RIGHT: "39_0", - DOWN: "40_0", - DELETE: "46_0", - HOME: "36_0", - END: "35_0", - PAGEUP: "33_0", - PAGEDOWN: "34_0", - COMMA: "0_44", - HYPHEN: "0_45", - EQUAL: "0_61", - PERIOD: "0_46", - SLASH: "0_47", - F1: "112_0", - F2: "113_0", - F3: "114_0", - F4: "115_0", - F5: "116_0", - F6: "117_0", - F7: "118_0", - F8: "119_0" - } - : - { - BACKSPACE: 8, - TAB: 9, - RETURN: 13, - ENTER: 13, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - DELETE: 46, - HOME: 36, - END: 35, - PAGEUP: 33, - PAGEDOWN: 34, - COMMA: 188, - HYPHEN: xq.Browser.isTrident ? 189 : 109, - EQUAL: xq.Browser.isTrident ? 187 : 61, - PERIOD: 190, - SLASH: 191, - F1:112, - F2:113, - F3:114, - F4:115, - F5:116, - F6:117, - F7:118, - F8:119, - F9:120, - F10:121, - F11:122, - F12:123 - } -/** - * Provide various tree operations. - * - * TODO: Add specs - */ -xq.DomTree = xq.Class({ - initialize: function() { - xq.addToFinalizeQueue(this); - this._blockTags = ["DIV", "DD", "LI", "ADDRESS", "CAPTION", "DT", "H1", "H2", "H3", "H4", "H5", "H6", "HR", "P", "BODY", "BLOCKQUOTE", "PRE", "PARAM", "DL", "OL", "UL", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"]; - this._blockContainerTags = ["DIV", "DD", "LI", "BODY", "BLOCKQUOTE", "UL", "OL", "DL", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"]; - this._listContainerTags = ["OL", "UL", "DL"]; - this._tableCellTags = ["TH", "TD"]; - this._blockOnlyContainerTags = ["BODY", "BLOCKQUOTE", "UL", "OL", "DL", "TABLE", "THEAD", "TBODY", "TR"]; - this._atomicTags = ["IMG", "OBJECT", "BR", "HR"]; - }, - - getBlockTags: function() { - return this._blockTags; - }, - - /** - * Find common ancestor(parent) and his immediate children(left and right). - * - * A --- B -+- C -+- D -+- E - * | - * +- F -+- G - * - * For example: - * > findCommonAncestorAndImmediateChildrenOf("E", "G") - * - * will return - * - * > {parent:"B", left:"C", right:"F"} - */ - findCommonAncestorAndImmediateChildrenOf: function(left, right) { - if(left.parentNode == right.parentNode) { - return { - left:left, - right:right, - parent:left.parentNode - }; - } else { - var parentsOfLeft = this.collectParentsOf(left, true); - var parentsOfRight = this.collectParentsOf(right, true); - var ca = this.getCommonAncestor(parentsOfLeft, parentsOfRight); - - var leftAncestor = parentsOfLeft.find(function(node) {return node.parentNode == ca}); - var rightAncestor = parentsOfRight.find(function(node) {return node.parentNode == ca}); - - return { - left:leftAncestor, - right:rightAncestor, - parent:ca - }; - } - }, - - /** - * Find leaves at edge. - * - * A --- B -+- C -+- D -+- E - * | - * +- F -+- G - * - * For example: - * > getLeavesAtEdge("A") - * - * will return - * - * > ["E", "G"] - */ - getLeavesAtEdge: function(element) { - if(!element.hasChildNodes()) return [null, null]; - - var findLeft = function(el) { - for (var i = 0; i < el.childNodes.length; i++) { - if (el.childNodes[i].nodeType == 1 && this.isBlock(el.childNodes[i])) return findLeft(el.childNodes[i]); - } - return el; - }.bind(this); - - var findRight=function(el) { - for (var i = el.childNodes.length; i--;) { - if (el.childNodes[i].nodeType == 1 && this.isBlock(el.childNodes[i])) return findRight(el.childNodes[i]); - } - return el; - }.bind(this); - - var left = findLeft(element); - var right = findRight(element); - - return [left == element ? null : left, right == element ? null : right]; - }, - - getCommonAncestor: function(parents1, parents2) { - for(var i = 0; i < parents1.length; i++) { - for(var j = 0; j < parents2.length; j++) { - if(parents1[i] == parents2[j]) return parents1[i]; - } - } - }, - - collectParentsOf: function(node, includeSelf, exitCondition) { - var parents = []; - if(includeSelf) parents.push(node); - - while((node = node.parentNode) && (node.nodeName != "HTML") && !(typeof exitCondition == "function" && exitCondition(node))) parents.push(node); - return parents; - }, - - isDescendantOf: function(parent, child) { - if(parent.length > 0) { - for(var i = 0; i < parent.length; i++) { - if(this.isDescendantOf(parent[i], child)) return true; - } - return false; - } - - if(parent == child) return false; - - while (child = child.parentNode) - if (child == parent) return true; - return false; - }, - - /** - * Perform tree walking (foreward) - */ - walkForward: function(node) { - if(node.hasChildNodes()) return node.firstChild; - if(node.nextSibling) return node.nextSibling; - - while(node = node.parentNode) { - if(node.nextSibling) return node.nextSibling; - } - - return null; - }, - - /** - * Perform tree walking (backward) - */ - walkBackward: function(node) { - if(node.previousSibling) { - node = node.previousSibling; - while(node.hasChildNodes()) {node = node.lastChild;} - return node; - } - - return node.parentNode; - }, - - /** - * Perform tree walking (to next siblings) - */ - walkNext: function(node) {return node.nextSibling}, - - /** - * Perform tree walking (to next siblings) - */ - walkPrev: function(node) {return node.previousSibling}, - - /** - * Returns true if target is followed by start - */ - checkTargetForward: function(start, target) { - return this._check(start, this.walkForward, target); - }, - - /** - * Returns true if start is followed by target - */ - checkTargetBackward: function(start, target) { - return this._check(start, this.walkBackward, target); - }, - - findForward: function(start, condition, exitCondition) { - return this._find(start, this.walkForward, condition, exitCondition); - }, - - findBackward: function(start, condition, exitCondition) { - return this._find(start, this.walkBackward, condition, exitCondition); - }, - - /** @private */ - _check: function(start, direction, target) { - if(start == target) return false; - - while(start = direction(start)) { - if(start == target) return true; - } - return false; - }, - - /** @private */ - _find: function(start, direction, condition, exitCondition) { - while(start = direction(start)) { - if(exitCondition && exitCondition(start)) return null; - if(condition(start)) return start; - } - return null; - }, - - /** - * Walks Forward through DOM tree from start to end, and collects all nodes that matches with a filter. - * If no filter provided, it just collects all nodes. - * - * @param function filter a filter function - */ - collectNodesBetween: function(start, end, filter) { - if(start == end) return [start, end].findAll(filter || function() {return true}); - - var nodes = this.collectForward(start, function(node) {return node == end}, filter); - if( - start != end && - typeof filter == "function" && - filter(end) - ) nodes.push(end); - - return nodes; - }, - - collectForward: function(start, exitCondition, filter) { - return this.collect(start, this.walkForward, exitCondition, filter); - }, - - collectBackward: function(start, exitCondition, filter) { - return this.collect(start, this.walkBackward, exitCondition, filter); - }, - - collectNext: function(start, exitCondition, filter) { - return this.collect(start, this.walkNext, exitCondition, filter); - }, - - collectPrev: function(start, exitCondition, filter) { - return this.collect(start, this.walkPrev, exitCondition, filter); - }, - - collect: function(start, next, exitCondition, filter) { - var nodes = [start]; - - while(true) { - start = next(start); - if( - (start == null) || - (typeof exitCondition == "function" && exitCondition(start)) - ) break; - - nodes.push(start); - } - - return (typeof filter == "function") ? nodes.findAll(filter) : nodes; - }, - - - hasBlocks: function(element) { - var nodes = element.childNodes; - for(var i = 0; i < nodes.length; i++) { - if(this.isBlock(nodes[i])) return true; - } - return false; - }, - - hasMixedContents: function(element) { - if(!this.isBlock(element)) return false; - if(!this.isBlockContainer(element)) return false; - - var hasTextOrInline = false; - var hasBlock = false; - for(var i = 0; i < element.childNodes.length; i++) { - var node = element.childNodes[i]; - if(!hasTextOrInline && this.isTextOrInlineNode(node)) hasTextOrInline = true; - if(!hasBlock && this.isBlock(node)) hasBlock = true; - - if(hasTextOrInline && hasBlock) break; - } - if(!hasTextOrInline || !hasBlock) return false; - - return true; - }, - - isBlockOnlyContainer: function(element) { - if(!element) return false; - return this._blockOnlyContainerTags.indexOf(typeof element == 'string' ? element : element.nodeName) != -1; - }, - - isTableCell: function(element) { - if(!element) return false; - return this._tableCellTags.indexOf(typeof element == 'string' ? element : element.nodeName) != -1; - }, - - isBlockContainer: function(element) { - if(!element) return false; - return this._blockContainerTags.indexOf(typeof element == 'string' ? element : element.nodeName) != -1; - }, - - isHeading: function(element) { - if(!element) return false; - return (typeof element == 'string' ? element : element.nodeName).match(/H\d/); - }, - - isBlock: function(element) { - if(!element) return false; - return this._blockTags.indexOf(typeof element == 'string' ? element : element.nodeName) != -1; - }, - - isAtomic: function(element) { - if(!element) return false; - return this._atomicTags.indexOf(typeof element == 'string' ? element : element.nodeName) != -1; - }, - - isListContainer: function(element) { - if(!element) return false; - return this._listContainerTags.indexOf(typeof element == 'string' ? element : element.nodeName) != -1; - }, - - isTextOrInlineNode: function(node) { - return node && (node.nodeType == 3 || !this.isBlock(node)); - } -}); -/** - * Encapsulates browser incompatibility problem and provides rich set of DOM manipulation API. - * - * RichDom provides basic CRUD + Advanced DOM manipulation API, various query methods and caret/selection management API - */ -xq.RichDom = xq.Class({ - /** - * Initialize RichDom. Target window and root element should be set after initialization. See setWin and setRoot. - * - * @constructor - */ - initialize: function() { - xq.addToFinalizeQueue(this); - - /** - * {xq.DomTree} instance of DomTree - */ - this.tree = new xq.DomTree(); - - this._lastMarkerId = 0; - }, - - - - /** - * @param {Window} win Browser's window object - */ - setWin: function(win) { - if(!win) throw "[win] is null"; - this.win = win; - }, - - /** - * @param {Element} root Root element - */ - setRoot: function(root) { - if(!root) throw "[root] is null"; - if(this.win && (root.ownerDocument != this.win.document)) throw "root.ownerDocument != this.win.document"; - this.root = root; - this.doc = this.root.ownerDocument; - }, - - /** - * @returns Browser's window object. - */ - getWin: function() {return this.win}, - - /** - * @returns Document object of root element. - */ - getDoc: function() {return this.doc}, - - /** - * @returns Root element. - */ - getRoot: function() {return this.root}, - - - - ///////////////////////////////////////////// - // CRUDs - - clearRoot: function() { - this.root.innerHTML = ""; - this.root.appendChild(this.makeEmptyParagraph()); - }, - - /** - * Removes place holders and empty text nodes of given element. - * - * @param {Element} element target element - */ - removePlaceHoldersAndEmptyNodes: function(element) { - var children = element.childNodes; - if(!children) return; - var stopAt = this.getBottommostLastChild(element); - if(!stopAt) return; - stopAt = this.tree.walkForward(stopAt); - - while(true) { - if(!element || element == stopAt) break; - - if( - this.isPlaceHolder(element) || - (element.nodeType == 3 && element.nodeValue == "") || - (!this.getNextSibling(element) && element.nodeType == 3 && element.nodeValue.strip() == "") - ) { - var deleteTarget = element; - element = this.tree.walkForward(element); - - this.deleteNode(deleteTarget); - } else { - element = this.tree.walkForward(element); - } - } - }, - - /** - * Sets multiple attributes into element at once - * - * @param {Element} element target element - * @param {Object} map key-value pairs - */ - setAttributes: function(element, map) { - for(var key in map) element.setAttribute(key, map[key]); - }, - - /** - * Creates textnode by given node value. - * - * @param {String} value value of textnode - * @returns {Node} Created text node - */ - createTextNode: function(value) {return this.doc.createTextNode(value);}, - - /** - * Creates empty element by given tag name. - * - * @param {String} tagName name of tag - * @returns {Element} Created element - */ - createElement: function(tagName) {return this.doc.createElement(tagName);}, - - /** - * Creates element from HTML string - * - * @param {String} html HTML string - * @returns {Element} Created element - */ - createElementFromHtml: function(html) { - var node = this.createElement("div"); - node.innerHTML = html; - if(node.childNodes.length != 1) { - throw "Illegal HTML fragment"; - } - return this.getFirstChild(node); - }, - - /** - * Deletes node from DOM tree. - * - * @param {Node} node Target node which should be deleted - * @param {boolean} deleteEmptyParentsRecursively Recursively delete empty parent elements - * @param {boolean} correctEmptyParent Call #correctEmptyElement on empty parent element after deletion - */ - deleteNode: function(node, deleteEmptyParentsRecursively, correctEmptyParent) { - if(!node || !node.parentNode) return; - - var parent = node.parentNode; - parent.removeChild(node); - - if(deleteEmptyParentsRecursively) { - while(!parent.hasChildNodes()) { - node = parent; - parent = node.parentNode; - if(!parent || this.getRoot() == node) break; - parent.removeChild(node); - } - } - - if(correctEmptyParent && this.isEmptyBlock(parent)) { - parent.innerHTML = ""; - this.correctEmptyElement(parent); - } - }, - - /** - * Inserts given node into current caret position - * - * @param {Node} node Target node - * @returns {Node} Inserted node. It could be different with given node. - */ - insertNode: function(node) {throw "Not implemented"}, - - /** - * Inserts given html into current caret position - * - * @param {String} html HTML string - * @returns {Node} Inserted node. It could be different with given node. - */ - insertHtml: function(html) { - return this.insertNode(this.createElementFromHtml(html)); - }, - - /** - * Creates textnode from given text and inserts it into current caret position - * - * @param {String} text Value of textnode - * @returns {Node} Inserted node - */ - insertText: function(text) { - this.insertNode(this.createTextNode(text)); - }, - - /** - * Places given node nearby target. - * - * @param {Node} node Node to be inserted. - * @param {Node} target Target node. - * @param {String} where Possible values: "before", "start", "end", "after" - * @param {boolean} performValidation Validate node if needed. For example when P placed into UL, its tag name automatically replaced with LI - * - * @returns {Node} Inserted node. It could be different with given node. - */ - insertNodeAt: function(node, target, where, performValidation) { - if( - ["HTML", "HEAD"].indexOf(target.nodeName) != -1 || - "BODY" == target.nodeName && ["before", "after"].indexOf(where) != -1 - ) throw "Illegal argument. Cannot move node[" + node.nodeName + "] to '" + where + "' of target[" + target.nodeName + "]" - - var object; - var message; - var secondParam; - - switch(where.toLowerCase()) { - case "before": - object = target.parentNode; - message = 'insertBefore'; - secondParam = target; - break - case "start": - if(target.firstChild) { - object = target; - message = 'insertBefore'; - secondParam = target.firstChild; - } else { - object = target; - message = 'appendChild'; - } - break - case "end": - object = target; - message = 'appendChild'; - break - case "after": - if(target.nextSibling) { - object = target.parentNode; - message = 'insertBefore'; - secondParam = target.nextSibling; - } else { - object = target.parentNode; - message = 'appendChild'; - } - break - } - - if(performValidation && this.tree.isListContainer(object) && node.nodeName != "LI") { - var li = this.createElement("LI"); - li.appendChild(node); - node = li; - object[message](node, secondParam); - } else if(performValidation && !this.tree.isListContainer(object) && node.nodeName == "LI") { - this.wrapAllInlineOrTextNodesAs("P", node, true); - var div = this.createElement("DIV"); - this.moveChildNodes(node, div); - this.deleteNode(node); - object[message](div, secondParam); - node = this.unwrapElement(div, true); - } else { - object[message](node, secondParam); - } - - return node; - }, - - /** - * Creates textnode from given text and places given node nearby target. - * - * @param {String} text Text to be inserted. - * @param {Node} target Target node. - * @param {String} where Possible values: "before", "start", "end", "after" - * - * @returns {Node} Inserted node. - */ - insertTextAt: function(text, target, where) { - return this.insertNodeAt(this.createTextNode(text), target, where); - }, - - /** - * Creates element from given HTML string and places given it nearby target. - * - * @param {String} html HTML to be inserted. - * @param {Node} target Target node. - * @param {String} where Possible values: "before", "start", "end", "after" - * - * @returns {Node} Inserted node. - */ - insertHtmlAt: function(html, target, where) { - return this.insertNodeAt(this.createElementFromHtml(html), target, where); - }, - - /** - * Replaces element's tag by removing current element and creating new element by given tag name. - * - * @param {String} tag New tag name - * @param {Element} element Target element - * - * @returns {Element} Replaced element - */ - replaceTag: function(tag, element) { - if(element.nodeName == tag) return null; - if(this.tree.isTableCell(element)) return null; - - var newElement = this.createElement(tag); - this.moveChildNodes(element, newElement); - this.copyAttributes(element, newElement, true); - element.parentNode.replaceChild(newElement, element); - - if(!newElement.hasChildNodes()) this.correctEmptyElement(newElement); - - return newElement; - }, - - /** - * Unwraps unnecessary paragraph. - * - * Unnecessary paragraph is P which is the only child of given container element. - * For example, P which is contained by LI and is the only child is the unnecessary paragraph. - * But if given container element is a block-only-container(BLOCKQUOTE, BODY), this method does nothing. - * - * @param {Element} element Container element - * @returns {boolean} True if unwrap performed. - */ - unwrapUnnecessaryParagraph: function(element) { - if(!element) return false; - - if(!this.tree.isBlockOnlyContainer(element) && element.childNodes.length == 1 && element.firstChild.nodeName == "P" && !this.hasImportantAttributes(element.firstChild)) { - var p = element.firstChild; - this.moveChildNodes(p, element); - this.deleteNode(p); - return true; - } - return false; - }, - - /** - * Unwraps element by extracting all children out and removing the element. - * - * @param {Element} element Target element - * @param {boolean} wrapInlineAndTextNodes Wrap all inline and text nodes with P before unwrap - * @returns {Node} First child of unwrapped element - */ - unwrapElement: function(element, wrapInlineAndTextNodes) { - if(wrapInlineAndTextNodes) this.wrapAllInlineOrTextNodesAs("P", element); - - var nodeToReturn = element.firstChild; - - while(element.firstChild) this.insertNodeAt(element.firstChild, element, "before"); - this.deleteNode(element); - - return nodeToReturn; - }, - - /** - * Wraps element by given tag - * - * @param {String} tag tag name - * @param {Element} element target element to wrap - * @returns {Element} wrapper - */ - wrapElement: function(tag, element) { - var wrapper = this.insertNodeAt(this.createElement(tag), element, "before"); - wrapper.appendChild(element); - return wrapper; - }, - - /** - * Tests #smartWrap with given criteria but doesn't change anything - */ - testSmartWrap: function(endElement, criteria) { - return this.smartWrap(endElement, null, criteria, true); - }, - - /** - * Create inline element with given tag name and wraps nodes nearby endElement by given criteria - * - * @param {Element} endElement Boundary(end point, exclusive) of wrapper. - * @param {String} tag Tag name of wrapper. - * @param {Object} function which returns text index of start boundary. - * @param {boolean} testOnly just test boundary and do not perform actual wrapping. - * - * @returns {Element} wrapper - */ - smartWrap: function(endElement, tag, criteria, testOnly) { - var block = this.getParentBlockElementOf(endElement); - - tag = tag || "SPAN"; - criteria = criteria || function(text) {return -1}; - - // check for empty wrapper - if(!testOnly && (!endElement.previousSibling || this.isEmptyBlock(block))) { - var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); - return wrapper; - } - - // collect all textnodes - var textNodes = this.tree.collectForward(block, function(node) {return node == endElement}, function(node) {return node.nodeType == 3}); - - // find textnode and break-point - var nodeIndex = 0; - var nodeValues = []; - for(var i = 0; i < textNodes.length; i++) { - nodeValues.push(textNodes[i].nodeValue); - } - var textToWrap = nodeValues.join(""); - var textIndex = criteria(textToWrap) - var breakPoint = textIndex; - - if(breakPoint == -1) { - breakPoint = 0; - } else { - textToWrap = textToWrap.substring(breakPoint); - } - - for(var i = 0; i < textNodes.length; i++) { - if(breakPoint > nodeValues[i].length) { - breakPoint -= nodeValues[i].length; - } else { - nodeIndex = i; - break; - } - } - - if(testOnly) return {text:textToWrap, textIndex:textIndex, nodeIndex:nodeIndex, breakPoint:breakPoint}; - - // break textnode if necessary - if(breakPoint != 0) { - var splitted = textNodes[nodeIndex].splitText(breakPoint); - nodeIndex++; - textNodes.splice(nodeIndex, 0, splitted); - } - var startElement = textNodes[nodeIndex] || block.firstChild; - - // split inline elements up to parent block if necessary - var family = this.tree.findCommonAncestorAndImmediateChildrenOf(startElement, endElement); - var ca = family.parent; - if(ca) { - if(startElement.parentNode != ca) startElement = this.splitElementUpto(startElement, ca, true); - if(endElement.parentNode != ca) endElement = this.splitElementUpto(endElement, ca, true); - - var prevStart = startElement.previousSibling; - var nextEnd = endElement.nextSibling; - - // remove empty inline elements - if(prevStart && prevStart.nodeType == 1 && this.isEmptyBlock(prevStart)) this.deleteNode(prevStart); - if(nextEnd && nextEnd.nodeType == 1 && this.isEmptyBlock(nextEnd)) this.deleteNode(nextEnd); - - // wrap - var wrapper = this.insertNodeAt(this.createElement(tag), startElement, "before"); - while(wrapper.nextSibling != endElement) wrapper.appendChild(wrapper.nextSibling); - return wrapper; - } else { - // wrap - var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); - return wrapper; - } - }, - - /** - * Wraps all adjust inline elements and text nodes into block element. - * - * TODO: empty element should return empty array when it is not forced and (at least) single item array when forced - * - * @param {String} tag Tag name of wrapper - * @param {Element} element Target element - * @param {boolean} force Force wrapping. If it is set to false, this method do not makes unnecessary wrapper. - * - * @returns {Array} Array of wrappers. If nothing performed it returns empty array - */ - wrapAllInlineOrTextNodesAs: function(tag, element, force) { - var wrappers = []; - - if(!force && !this.tree.hasMixedContents(element)) return wrappers; - - var node = element.firstChild; - while(node) { - if(this.tree.isTextOrInlineNode(node)) { - var wrapper = this.wrapInlineOrTextNodesAs(tag, node); - wrappers.push(wrapper); - node = wrapper.nextSibling; - } else { - node = node.nextSibling; - } - } - - return wrappers; - }, - - /** - * Wraps node and its adjust next siblings into an element - */ - wrapInlineOrTextNodesAs: function(tag, node) { - var wrapper = this.createElement(tag); - var from = node; - - from.parentNode.replaceChild(wrapper, from); - wrapper.appendChild(from); - - // move nodes into wrapper - while(wrapper.nextSibling && this.tree.isTextOrInlineNode(wrapper.nextSibling)) wrapper.appendChild(wrapper.nextSibling); - - return wrapper; - }, - - /** - * Turns block element into list item - * - * @param {Element} element Target element - * @param {String} type One of "UL", "OL", "CODE". "CODE" is same with "OL" but it gives "OL" a class name "code" - * - * @return {Element} LI element - */ - turnElementIntoListItem: function(element, type) { - type = type.toUpperCase(); - - var container = this.createElement(type == "UL" ? "UL" : "OL"); - if(type == "CODE") container.className = "code"; - - if(this.tree.isTableCell(element)) { - var p = this.wrapAllInlineOrTextNodesAs("P", element, true)[0]; - container = this.insertNodeAt(container, element, "start"); - var li = this.insertNodeAt(this.createElement("LI"), container, "start"); - li.appendChild(p); - } else { - container = this.insertNodeAt(container, element, "after"); - var li = this.insertNodeAt(this.createElement("LI"), container, "start"); - li.appendChild(element); - } - - this.unwrapUnnecessaryParagraph(li); - this.mergeAdjustLists(container); - - return li; - }, - - /** - * Extracts given element out from its parent element. - * - * @param {Element} element Target element - */ - extractOutElementFromParent: function(element) { - if(element == this.root || this.root == element.parentNode || !element.offsetParent) return null; - - if(element.nodeName == "LI") { - this.wrapAllInlineOrTextNodesAs("P", element, true); - element = element.firstChild; - } - - var container = element.parentNode; - var nodeToReturn = null; - - if(container.nodeName == "LI" && container.parentNode.parentNode.nodeName == "LI") { - // nested list item - if(element.previousSibling) { - this.splitContainerOf(element, true); - this.correctEmptyElement(element); - } - - this.outdentListItem(element); - nodeToReturn = element; - } else if(container.nodeName == "LI") { - // not-nested list item - - if(this.tree.isListContainer(element.nextSibling)) { - // 1. split listContainer - var listContainer = container.parentNode; - this.splitContainerOf(container, true); - this.correctEmptyElement(element); - - // 2. extract out LI's children - nodeToReturn = container.firstChild; - while(container.firstChild) { - this.insertNodeAt(container.firstChild, listContainer, "before"); - } - - // 3. remove listContainer and merge adjust lists - var prevContainer = listContainer.previousSibling; - this.deleteNode(listContainer); - if(prevContainer && this.tree.isListContainer(prevContainer)) this.mergeAdjustLists(prevContainer); - } else { - // 1. split LI - this.splitContainerOf(element, true); - this.correctEmptyElement(element); - - // 2. split list container - var listContainer = this.splitContainerOf(container); - - // 3. extract out - this.insertNodeAt(element, listContainer.parentNode, "before"); - this.deleteNode(listContainer.parentNode); - - nodeToReturn = element; - } - } else if(this.tree.isTableCell(container) || this.tree.isTableCell(element)) { - // do nothing - } else { - // normal block - this.splitContainerOf(element, true); - this.correctEmptyElement(element); - nodeToReturn = this.insertNodeAt(element, container, "before"); - - this.deleteNode(container); - } - - return nodeToReturn; - }, - - /** - * Insert new block above or below given element. - * - * @param {Element} block Target block - * @param {boolean} before Insert new block above(before) target block - * @param {String} forceTag New block's tag name. If omitted, target block's tag name will be used. - * - * @returns {Element} Inserted block - */ - insertNewBlockAround: function(block, before, forceTag) { - var isListItem = block.nodeName == "LI" || block.parentNode.nodeName == "LI"; - - this.removeTrailingWhitespace(block); - if(this.isFirstLiWithNestedList(block) && !forceTag && before) { - var li = this.getParentElementOf(block, ["LI"]); - var newBlock = this._insertNewBlockAround(li, before); - return newBlock; - } else if(isListItem && !forceTag) { - var li = this.getParentElementOf(block, ["LI"]); - var newBlock = this._insertNewBlockAround(block, before); - if(li != block) newBlock = this.splitContainerOf(newBlock, false, "prev"); - return newBlock; - } else if(this.tree.isBlockContainer(block)) { - this.wrapAllInlineOrTextNodesAs("P", block, true); - return this._insertNewBlockAround(block.firstChild, before, forceTag); - } else { - return this._insertNewBlockAround(block, before, this.tree.isHeading(block) ? "P" : forceTag); - } - }, - - /** - * @private - * - * TODO: Rename - */ - _insertNewBlockAround: function(element, before, tagName) { - var newElement = this.createElement(tagName || element.nodeName); - this.copyAttributes(element, newElement, false); - this.correctEmptyElement(newElement); - newElement = this.insertNodeAt(newElement, element, before ? "before" : "after"); - return newElement; - }, - - /** - * Wrap or replace element with given tag name. - * - * @param {String} tag Tag name - * @param {Element} element Target element - * - * @return {Element} wrapper element or replaced element. - */ - applyTagIntoElement: function(tag, element) { - if(this.tree.isBlockOnlyContainer(tag)) { - return this.wrapBlock(tag, element); - } else if(this.tree.isBlockContainer(element)) { - var wrapper = this.createElement(tag); - this.moveChildNodes(element, wrapper); - return this.insertNodeAt(wrapper, element, "start"); - } else { - if(this.tree.isBlockContainer(tag) && this.hasImportantAttributes(element)) { - return this.wrapBlock(tag, element); - } else { - return this.replaceTag(tag, element); - } - } - - throw "IllegalArgumentException - [" + tag + ", " + element + "]"; - }, - - /** - * Wrap or replace elements with given tag name. - * - * @param {String} tag Tag name - * @param {Element} from Start boundary (inclusive) - * @param {Element} to End boundary (inclusive) - * - * @returns {Array} Array of wrappers or replaced elements - */ - applyTagIntoElements: function(tagName, from, to) { - var applied = []; - - if(this.tree.isBlockContainer(tagName)) { - var family = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); - var node = family.left; - var wrapper = this.insertNodeAt(this.createElement(tagName), node, "before"); - - var coveringWholeList = - family.parent.nodeName == "LI" && - family.parent.parentNode.childNodes.length == 1 && - !family.left.previousSilbing && - !family.right.nextSibling; - - if(coveringWholeList) { - var ul = node.parentNode.parentNode; - this.insertNodeAt(wrapper, ul, "before"); - wrapper.appendChild(ul); - } else { - while(node != family.right) { - next = node.nextSibling; - wrapper.appendChild(node); - node = next; - } - wrapper.appendChild(family.right); - } - applied.push(wrapper); - } else { - // is normal tagName - var elements = this.getBlockElementsBetween(from, to); - for(var i = 0; i < elements.length; i++) { - if(this.tree.isBlockContainer(elements[i])) { - var wrappers = this.wrapAllInlineOrTextNodesAs(tagName, elements[i], true); - for(var j = 0; j < wrappers.length; j++) { - applied.push(wrappers[j]); - } - } else { - applied.push(this.replaceTag(tagName, elements[i])); - } - } - } - return applied; - }, - - /** - * Moves block up or down - * - * @param {Element} block Target block - * @param {boolean} up Move up if true - * - * @returns {Element} Moved block. It could be different with given block. - */ - moveBlock: function(block, up) { - // if block is table cell or contained by table cell, select its row as mover - block = this.getParentElementOf(block, ["TR"]) || block; - - // if block is only child, select its parent as mover - while(block.nodeName != "TR" && block.parentNode != this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { - block = block.parentNode; - } - - // find target and where - var target, where; - if (up) { - target = block.previousSibling; - - if(target) { - var singleNodeLi = target.nodeName == 'LI' && ((target.childNodes.length == 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); - var table = ['TABLE', 'TR'].indexOf(target.nodeName) != -1; - - where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "end" : "before"; - } else if(block.parentNode != this.getRoot()) { - target = block.parentNode; - where = "before"; - } - } else { - target = block.nextSibling; - - if(target) { - var singleNodeLi = target.nodeName == 'LI' && ((target.childNodes.length == 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); - var table = ['TABLE', 'TR'].indexOf(target.nodeName) != -1; - - where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "start" : "after"; - } else if(block.parentNode != this.getRoot()) { - target = block.parentNode; - where = "after"; - } - } - - - // no way to go? - if(!target) return null; - if(["TBODY", "THEAD"].indexOf(target.nodeName) != -1) return null; - - // normalize - this.wrapAllInlineOrTextNodesAs("P", target, true); - - // make placeholder if needed - if(this.isFirstLiWithNestedList(block)) { - this.insertNewBlockAround(block, false, "P"); - } - - // perform move - var parent = block.parentNode; - var moved = this.insertNodeAt(block, target, where, true); - - // cleanup - if(!parent.hasChildNodes()) this.deleteNode(parent, true); - this.unwrapUnnecessaryParagraph(moved); - this.unwrapUnnecessaryParagraph(target); - - // remove placeholder - if(up) { - if(moved.previousSibling && this.isEmptyBlock(moved.previousSibling) && !moved.previousSibling.previousSibling && moved.parentNode.nodeName == "LI" && this.tree.isListContainer(moved.nextSibling)) { - this.deleteNode(moved.previousSibling); - } - } else { - if(moved.nextSibling && this.isEmptyBlock(moved.nextSibling) && !moved.previousSibling && moved.parentNode.nodeName == "LI" && this.tree.isListContainer(moved.nextSibling.nextSibling)) { - this.deleteNode(moved.nextSibling); - } - } - - this.correctEmptyElement(moved); - - return moved; - }, - - /** - * Remove given block - * - * @param {Element} block Target block - * @returns {Element} Nearest block of remove element - */ - removeBlock: function(block) { - var blockToMove; - - // if block is only child, select its parent as mover - while(block.parentNode != this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { - block = block.parentNode; - } - - var finder = function(node) {return this.tree.isBlock(node) && !this.tree.isAtomic(node) && !this.tree.isDescendantOf(block, node) && !this.tree.hasBlocks(node);}.bind(this); - var exitCondition = function(node) {return this.tree.isBlock(node) && !this.tree.isDescendantOf(this.getRoot(), node)}.bind(this); - - if(this.isFirstLiWithNestedList(block)) { - blockToMove = this.outdentListItem(block.nextSibling.firstChild); - this.deleteNode(blockToMove.previousSibling, true); - } else if(this.tree.isTableCell(block)) { - var rtable = new xq.RichTable(this, this.getParentElementOf(block, ["TABLE"])); - blockToMove = rtable.getBelowCellOf(block); - - // should not delete row when there's thead and the row is the only child of tbody - if( - block.parentNode.parentNode.nodeName == "TBODY" && - rtable.hasHeadingAtTop() && - rtable.getDom().tBodies[0].rows.length == 1) return blockToMove; - - blockToMove = blockToMove || - this.tree.findForward(block, finder, exitCondition) || - this.tree.findBackward(block, finder, exitCondition); - - this.deleteNode(block.parentNode, true); - } else { - blockToMove = blockToMove || - this.tree.findForward(block, finder, exitCondition) || - this.tree.findBackward(block, finder, exitCondition); - - if(!blockToMove) blockToMove = this.insertNodeAt(this.makeEmptyParagraph(), block, "after"); - - this.deleteNode(block, true); - } - if(!this.getRoot().hasChildNodes()) { - blockToMove = this.createElement("P"); - this.getRoot().appendChild(blockToMove); - this.correctEmptyElement(blockToMove); - } - - return blockToMove; - }, - - /** - * Removes trailing whitespaces of given block - * - * @param {Element} block Target block - */ - removeTrailingWhitespace: function(block) {throw "Not implemented"}, - - /** - * Extract given list item out and change its container's tag - * - * @param {Element} element LI or P which is a child of LI - * @param {String} type "OL", "UL", or "CODE" - * - * @returns {Element} changed element - */ - changeListTypeTo: function(element, type) { - type = type.toUpperCase(); - - var li = this.getParentElementOf(element, ["LI"]); - if(!li) throw "IllegalArgumentException"; - - var container = li.parentNode; - - this.splitContainerOf(li); - - var newContainer = this.insertNodeAt(this.createElement(type == "UL" ? "UL" : "OL"), container, "before"); - if(type == "CODE") newContainer.className = "code"; - - this.insertNodeAt(li, newContainer, "start"); - this.deleteNode(container); - - this.mergeAdjustLists(newContainer); - - return element; - }, - - /** - * Split container of element into (maxium) three pieces. - */ - splitContainerOf: function(element, preserveElementItself, dir) { - if([element, element.parentNode].indexOf(this.getRoot()) != -1) return element; - - var container = element.parentNode; - if(element.previousSibling && (!dir || dir.toLowerCase() == "prev")) { - var prev = this.createElement(container.nodeName); - this.copyAttributes(container, prev); - while(container.firstChild != element) { - prev.appendChild(container.firstChild); - } - this.insertNodeAt(prev, container, "before"); - this.unwrapUnnecessaryParagraph(prev); - } - - if(element.nextSibling && (!dir || dir.toLowerCase() == "next")) { - var next = this.createElement(container.nodeName); - this.copyAttributes(container, next); - while(container.lastChild != element) { - this.insertNodeAt(container.lastChild, next, "start"); - } - this.insertNodeAt(next, container, "after"); - this.unwrapUnnecessaryParagraph(next); - } - - if(!preserveElementItself) element = this.unwrapUnnecessaryParagraph(container) ? container : element; - return element; - }, - - /** - * TODO: Add specs - */ - splitParentElement: function(seperator) { - var parent = seperator.parentNode; - if(["HTML", "HEAD", "BODY"].indexOf(parent.nodeName) != -1) throw "Illegal argument. Cannot seperate element[" + parent.nodeName + "]"; - - var previousSibling = seperator.previousSibling; - var nextSibling = seperator.nextSibling; - - var newElement = this.insertNodeAt(this.createElement(parent.nodeName), parent, "after"); - - var next; - while(next = seperator.nextSibling) newElement.appendChild(next); - - this.insertNodeAt(seperator, newElement, "start"); - this.copyAttributes(parent, newElement); - - return newElement; - }, - - /** - * TODO: Add specs - */ - splitElementUpto: function(seperator, element, excludeElement) { - while(seperator.previousSibling != element) { - if(excludeElement && seperator.parentNode == element) break; - seperator = this.splitParentElement(seperator); - } - return seperator; - }, - - /** - * Merges two adjust elements - * - * @param {Element} element base element - * @param {boolean} withNext merge base element with next sibling - * @param {boolean} skip skip merge steps - */ - mergeElement: function(element, withNext, skip) { - this.wrapAllInlineOrTextNodesAs("P", element.parentNode, true); - - // find two block - if(withNext) { - var prev = element; - var next = this.tree.findForward( - element, - function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node != element.parentNode}.bind(this) - ); - } else { - var next = element; - var prev = this.tree.findBackward( - element, - function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node != element.parentNode}.bind(this) - ); - } - - // normalize next block - if(next && this.tree.isDescendantOf(this.getRoot(), next)) { - var nextContainer = next.parentNode; - if(this.tree.isBlockContainer(next)) { - nextContainer = next; - this.wrapAllInlineOrTextNodesAs("P", nextContainer, true); - next = nextContainer.firstChild; - } - } else { - next = null; - } - - // normalize prev block - if(prev && this.tree.isDescendantOf(this.getRoot(), prev)) { - var prevContainer = prev.parentNode; - if(this.tree.isBlockContainer(prev)) { - prevContainer = prev; - this.wrapAllInlineOrTextNodesAs("P", prevContainer, true); - prev = prevContainer.lastChild; - } - } else { - prev = null; - } - - try { - var containersAreTableCell = - prevContainer && (this.tree.isTableCell(prevContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(prevContainer.nodeName) != -1) && - nextContainer && (this.tree.isTableCell(nextContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(nextContainer.nodeName) != -1); - - if(containersAreTableCell && prevContainer != nextContainer) return null; - - // if next has margin, perform outdent - if((!skip || !prev) && next && this.outdentElement(next)) return element; - - // nextContainer is first li and next of it is list container - if(nextContainer && nextContainer.nodeName == 'LI' && this.tree.isListContainer(next.nextSibling)) { - this.extractOutElementFromParent(nextContainer); - return prev; - } - - // merge two list containers - if(nextContainer && nextContainer.nodeName == 'LI' && this.tree.isListContainer(nextContainer.parentNode.previousSibling)) { - this.mergeAdjustLists(nextContainer.parentNode.previousSibling, true, "next"); - return prev; - } - - if(next && !containersAreTableCell && prevContainer && prevContainer.nodeName == 'LI' && nextContainer && nextContainer.nodeName == 'LI' && prevContainer.parentNode.nextSibling == nextContainer.parentNode) { - var nextContainerContainer = nextContainer.parentNode; - this.moveChildNodes(nextContainer.parentNode, prevContainer.parentNode); - this.deleteNode(nextContainerContainer); - return prev; - } - - // merge two containers - if(next && !containersAreTableCell && prevContainer && prevContainer.nextSibling == nextContainer && ((skip && prevContainer.nodeName != "LI") || (!skip && prevContainer.nodeName == "LI"))) { - this.moveChildNodes(nextContainer, prevContainer); - return prev; - } - - // unwrap container - if(nextContainer && nextContainer.nodeName != "LI" && !this.getParentElementOf(nextContainer, ["TABLE"]) && !this.tree.isListContainer(nextContainer) && nextContainer != this.getRoot() && !next.previousSibling) { - return this.unwrapElement(nextContainer, true); - } - - // delete table - if(withNext && nextContainer && nextContainer.nodeName == "TABLE") { - this.deleteNode(nextContainer, true); - return prev; - } else if(!withNext && prevContainer && this.tree.isTableCell(prevContainer) && !this.tree.isTableCell(nextContainer)) { - this.deleteNode(this.getParentElementOf(prevContainer, ["TABLE"]), true); - return next; - } - - // if prev is same with next, do nothing - if(prev == next) return null; - - // if there is a null block, do nothing - if(!prev || !next || !prevContainer || !nextContainer) return null; - - // if two blocks are not in the same table cell, do nothing - if(this.getParentElementOf(prev, ["TD", "TH"]) != this.getParentElementOf(next, ["TD", "TH"])) return null; - - var prevIsEmpty = false; - - // cleanup empty block before merge - - // 1. cleanup prev node which ends with marker + - if( - xq.Browser.isTrident && - prev.childNodes.length >= 2 && - this.isMarker(prev.lastChild.previousSibling) && - prev.lastChild.nodeType == 3 && - prev.lastChild.nodeValue.length == 1 && - prev.lastChild.nodeValue.charCodeAt(0) == 160 - ) { - this.deleteNode(prev.lastChild); - } - - // 2. cleanup prev node (if prev is empty, then replace prev's tag with next's) - this.removePlaceHoldersAndEmptyNodes(prev); - if(this.isEmptyBlock(prev)) { - // replace atomic block with normal block so that following code don't need to care about atomic block - if(this.tree.isAtomic(prev)) prev = this.replaceTag("P", prev); - - prev = this.replaceTag(next.nodeName, prev) || prev; - prev.innerHTML = ""; - } else if(prev.firstChild == prev.lastChild && this.isMarker(prev.firstChild)) { - prev = this.replaceTag(next.nodeName, prev) || prev; - } - - // 3. cleanup next node - if(this.isEmptyBlock(next)) { - // replace atomic block with normal block so that following code don't need to care about atomic block - if(this.tree.isAtomic(next)) next = this.replaceTag("P", next); - - next.innerHTML = ""; - } - - // perform merge - this.moveChildNodes(next, prev); - this.deleteNode(next); - return prev; - } finally { - // cleanup - if(prevContainer && this.isEmptyBlock(prevContainer)) this.deleteNode(prevContainer, true); - if(nextContainer && this.isEmptyBlock(nextContainer)) this.deleteNode(nextContainer, true); - - if(prevContainer) this.unwrapUnnecessaryParagraph(prevContainer); - if(nextContainer) this.unwrapUnnecessaryParagraph(nextContainer); - } - }, - - /** - * Merges adjust list containers which has same tag name - * - * @param {Element} container target list container - * @param {boolean} force force adjust list container even if they have different list type - * @param {String} dir Specify merge direction: PREV or NEXT. If not supplied it will be merged with both direction. - */ - mergeAdjustLists: function(container, force, dir) { - var prev = container.previousSibling; - var isPrevSame = prev && (prev.nodeName == container.nodeName && prev.className == container.className); - if((!dir || dir.toLowerCase() == 'prev') && (isPrevSame || (force && this.tree.isListContainer(prev)))) { - while(prev.lastChild) { - this.insertNodeAt(prev.lastChild, container, "start"); - } - this.deleteNode(prev); - } - - var next = container.nextSibling; - var isNextSame = next && (next.nodeName == container.nodeName && next.className == container.className); - if((!dir || dir.toLowerCase() == 'next') && (isNextSame || (force && this.tree.isListContainer(next)))) { - while(next.firstChild) { - this.insertNodeAt(next.firstChild, container, "end"); - } - this.deleteNode(next); - } - }, - - /** - * Moves child nodes from one element into another. - * - * @param {Elemet} from source element - * @param {Elemet} to target element - */ - moveChildNodes: function(from, to) { - if(this.tree.isDescendantOf(from, to) || ["HTML", "HEAD"].indexOf(to.nodeName) != -1) - throw "Illegal argument. Cannot move children of element[" + from.nodeName + "] to element[" + to.nodeName + "]"; - - if(from == to) return; - - while(from.firstChild) to.appendChild(from.firstChild); - }, - - /** - * Copies attributes from one element into another. - * - * @param {Element} from source element - * @param {Element} to target element - * @param {boolean} copyId copy ID attribute of source element - */ - copyAttributes: function(from, to, copyId) { - // IE overrides this - - var attrs = from.attributes; - if(!attrs) return; - - for(var i = 0; i < attrs.length; i++) { - if(attrs[i].nodeName == "class" && attrs[i].nodeValue) { - to.className = attrs[i].nodeValue; - } else if((copyId || "id" != attrs[i].nodeName) && attrs[i].nodeValue) { - to.setAttribute(attrs[i].nodeName, attrs[i].nodeValue); - } - } - }, - - _indentElements: function(node, blocks, affect) { - for (var i=0; i < affect.length; i++) { - if (affect[i] == node || this.tree.isDescendantOf(affect[i], node)) - return; - } - leaves = this.tree.getLeavesAtEdge(node); - - if (blocks.include(leaves[0])) { - var affected = this.indentElement(node, true); - if (affected) { - affect.push(affected); - return; - } - } - - if (blocks.include(node)) { - var affected = this.indentElement(node, true); - if (affected) { - affect.push(affected); - return; - } - } - - var children=xq.$A(node.childNodes); - for (var i=0; i < children.length; i++) - this._indentElements(children[i], blocks, affect); - return; - }, - - indentElements: function(from, to) { - var blocks = this.getBlockElementsBetween(from, to); - var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); - - var affect = []; - - leaves = this.tree.getLeavesAtEdge(top.parent); - if (blocks.include(leaves[0])) { - var affected = this.indentElement(top.parent); - if (affected) - return [affected]; - } - - var children = xq.$A(top.parent.childNodes); - for (var i=0; i < children.length; i++) { - this._indentElements(children[i], blocks, affect); - } - - affect = affect.flatten() - return affect.length > 0 ? affect : blocks; - }, - - outdentElementsCode: function(node) { - if (node.tagName == 'LI') - node = node.parentNode; - if (node.tagName == 'OL' && node.className == 'code') - return true; - return false; - }, - - _outdentElements: function(node, blocks, affect) { - for (var i=0; i < affect.length; i++) { - if (affect[i] == node || this.tree.isDescendantOf(affect[i], node)) - return; - } - leaves = this.tree.getLeavesAtEdge(node); - - if (blocks.include(leaves[0]) && !this.outdentElementsCode(leaves[0])) { - var affected = this.outdentElement(node, true); - if (affected) { - affect.push(affected); - return; - } - } - - if (blocks.include(node)) { - var children = xq.$A(node.parentNode.childNodes); - var isCode = this.outdentElementsCode(node); - var affected = this.outdentElement(node, true, isCode); - if (affected) { - if (children.include(affected) && this.tree.isListContainer(node.parentNode) && !isCode) { - for (var i=0; i < children.length; i++) { - if (blocks.include(children[i]) && !affect.include(children[i])) - affect.push(children[i]); - } - }else - affect.push(affected); - return; - } - } - - var children=xq.$A(node.childNodes); - for (var i=0; i < children.length; i++) - this._outdentElements(children[i], blocks, affect); - return; - }, - - outdentElements: function(from, to) { - var start, end; - - if (from.parentNode.tagName == 'LI') start=from.parentNode; - if (to.parentNode.tagName == 'LI') end=to.parentNode; - - var blocks = this.getBlockElementsBetween(from, to); - var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); - - var affect = []; - - leaves = this.tree.getLeavesAtEdge(top.parent); - if (blocks.include(leaves[0]) && !this.outdentElementsCode(top.parent)) { - var affected = this.outdentElement(top.parent); - if (affected) - return [affected]; - } - - var children = xq.$A(top.parent.childNodes); - for (var i=0; i < children.length; i++) { - this._outdentElements(children[i], blocks, affect); - } - - if (from.offsetParent && to.offsetParent) { - start = from; - end = to; - }else if (blocks.first().offsetParent && blocks.last().offsetParent) { - start = blocks.first(); - end = blocks.last(); - } - - affect = affect.flatten() - if (!start || !start.offsetParent) - start = affect.first(); - if (!end || !end.offsetParent) - end = affect.last(); - - return this.getBlockElementsBetween(start, end); - }, - - /** - * Performs indent by increasing element's margin-left - */ - indentElement: function(element, noParent, forceMargin) { - if( - !forceMargin && - (element.nodeName == "LI" || (!this.tree.isListContainer(element) && !element.previousSibling && element.parentNode.nodeName == "LI")) - ) return this.indentListItem(element, noParent); - - var root = this.getRoot(); - if(!element || element == root) return null; - - if (element.parentNode != root && !element.previousSibling && !noParent) element=element.parentNode; - - var margin = element.style.marginLeft; - var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; - - cssValue.value += 2; - element.style.marginLeft = cssValue.value + cssValue.unit; - - return element; - }, - - /** - * Performs outdent by decreasing element's margin-left - */ - outdentElement: function(element, noParent, forceMargin) { - if(!forceMargin && element.nodeName == "LI") return this.outdentListItem(element, noParent); - - var root = this.getRoot(); - if(!element || element == root) return null; - - var margin = element.style.marginLeft; - - var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; - if(cssValue.value == 0) { - return element.previousSibling || forceMargin ? - null : - this.outdentElement(element.parentNode, noParent); - } - - cssValue.value -= 2; - element.style.marginLeft = cssValue.value <= 0 ? "" : cssValue.value + cssValue.unit; - if(element.style.cssText == "") element.removeAttribute("style"); - - return element; - }, - - /** - * Performs indent for list item - */ - indentListItem: function(element, treatListAsNormalBlock) { - var li = this.getParentElementOf(element, ["LI"]); - var container = li.parentNode; - var prev = li.previousSibling; - if(!li.previousSibling) return this.indentElement(container); - - if(li.parentNode.nodeName == "OL" && li.parentNode.className == "code") return this.indentElement(li, treatListAsNormalBlock, true); - - if(!prev.lastChild) prev.appendChild(this.makePlaceHolder()); - - var targetContainer = - this.tree.isListContainer(prev.lastChild) ? - // if there's existing list container, select it as target container - prev.lastChild : - // if there's nothing, create new one - this.insertNodeAt(this.createElement(container.nodeName), prev, "end"); - - this.wrapAllInlineOrTextNodesAs("P", prev, true); - - // perform move - targetContainer.appendChild(li); - - // flatten nested list - if(!treatListAsNormalBlock && li.lastChild && this.tree.isListContainer(li.lastChild)) { - var childrenContainer = li.lastChild; - var child; - while(child = childrenContainer.lastChild) { - this.insertNodeAt(child, li, "after"); - } - this.deleteNode(childrenContainer); - } - - this.unwrapUnnecessaryParagraph(li); - - return li; - }, - - /** - * Performs outdent for list item - * - * @return {Element} outdented list item or null if no outdent performed - */ - outdentListItem: function(element, treatListAsNormalBlock) { - var li = this.getParentElementOf(element, ["LI"]); - var container = li.parentNode; - - if(!li.previousSibling) { - var performed = this.outdentElement(container); - if(performed) return performed; - } - - if(li.parentNode.nodeName == "OL" && li.parentNode.className == "code") return this.outdentElement(li, treatListAsNormalBlock, true); - - var parentLi = container.parentNode; - if(parentLi.nodeName != "LI") return null; - - if(treatListAsNormalBlock) { - while(container.lastChild != li) { - this.insertNodeAt(container.lastChild, parentLi, "after"); - } - } else { - // make next siblings as children - if(li.nextSibling) { - var targetContainer = - li.lastChild && this.tree.isListContainer(li.lastChild) ? - // if there's existing list container, select it as target container - li.lastChild : - // if there's nothing, create new one - this.insertNodeAt(this.createElement(container.nodeName), li, "end"); - - this.copyAttributes(container, targetContainer); - - var sibling; - while(sibling = li.nextSibling) { - targetContainer.appendChild(sibling); - } - } - } - - // move current LI into parent LI's next sibling - li = this.insertNodeAt(li, parentLi, "after"); - - // remove empty container - if(container.childNodes.length == 0) this.deleteNode(container); - - if(li.firstChild && this.tree.isListContainer(li.firstChild)) { - this.insertNodeAt(this.makePlaceHolder(), li, "start"); - } - - this.wrapAllInlineOrTextNodesAs("P", li); - this.unwrapUnnecessaryParagraph(parentLi); - - return li; - }, - - /** - * Performs justification - * - * @param {Element} block target element - * @param {String} dir one of "LEFT", "CENTER", "RIGHT", "BOTH" - */ - justifyBlock: function(block, dir) { - // if block is only child, select its parent as mover - while(block.parentNode != this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { - block = block.parentNode; - } - - var styleValue = dir.toLowerCase() == "both" ? "justify" : dir; - if(styleValue == "left") { - block.style.textAlign = ""; - if(block.style.cssText == "") block.removeAttribute("style"); - } else { - block.style.textAlign = styleValue; - } - return block; - }, - - justifyBlocks: function(blocks, dir) { - for(var i = 0; i < blocks.length; i++) { - this.justifyBlock(blocks[i], dir); - } - return blocks; - }, - - /** - * Turn given element into list. If the element is a list already, it will be reversed into normal element. - * - * @param {Element} element target element - * @param {String} type one of "UL", "OL" - * @returns {Element} affected element - */ - applyList: function(element, type) { - type = type.toUpperCase(); - var containerTag = type == "UL" ? "UL" : "OL"; - - if(element.nodeName == "LI" || (element.parentNode.nodeName == "LI" && !element.previousSibling)) { - var element = this.getParentElementOf(element, ["LI"]); - var container = element.parentNode; - if(container.nodeName == containerTag) { - return this.extractOutElementFromParent(element); - } else { - return this.changeListTypeTo(element, type); - } - } else { - return this.turnElementIntoListItem(element, type); - } - }, - - applyLists: function(from, to, type) { - type = type.toUpperCase(); - var containerTag = type == "UL" ? "UL" : "OL"; - var blocks = this.getBlockElementsBetween(from, to); - - // LIs or Non-containing blocks - var whole = blocks.findAll(function(e) { - return e.nodeName == "LI" || !this.tree.isBlockContainer(e); - }.bind(this)); - - // LIs - var listItems = whole.findAll(function(e) {return e.nodeName == "LI"}.bind(this)); - - // Non-containing blocks which is not a descendant of any LIs selected above(listItems). - var normalBlocks = whole.findAll(function(e) { - return e.nodeName != "LI" && - !(e.parentNode.nodeName == "LI" && !e.previousSibling && !e.nextSibling) && - !this.tree.isDescendantOf(listItems, e) - }.bind(this)); - - var diffListItems = listItems.findAll(function(e) { - return e.parentNode.nodeName != containerTag; - }.bind(this)); - - // Conditions needed to determine mode - var hasNormalBlocks = normalBlocks.length > 0; - var hasDifferentListStyle = diffListItems.length > 0; - - var blockToHandle = null; - - if(hasNormalBlocks) { - blockToHandle = normalBlocks; - } else if(hasDifferentListStyle) { - blockToHandle = diffListItems; - } else { - blockToHandle = listItems; - } - - // perform operation - for(var i = 0; i < blockToHandle.length; i++) { - var block = blockToHandle[i]; - - // preserve original index to restore selection - var originalIndex = blocks.indexOf(block); - blocks[originalIndex] = this.applyList(block, type); - } - - return blocks; - }, - - /** - * Insert place-holder for given empty element. Empty element does not displayed and causes many editing problems. - * - * @param {Element} element empty element - */ - correctEmptyElement: function(element) {throw "Not implemented"}, - - /** - * Corrects current block-only-container to do not take any non-block element or node. - */ - correctParagraph: function() {throw "Not implemented"}, - - /** - * Makes place-holder for empty element. - * - * @returns {Node} Platform specific place holder - */ - makePlaceHolder: function() {throw "Not implemented"}, - - /** - * Makes place-holder string. - * - * @returns {String} Platform specific place holder string - */ - makePlaceHolderString: function() {throw "Not implemented"}, - - /** - * Makes empty paragraph which contains only one place-holder - */ - makeEmptyParagraph: function() {throw "Not implemented"}, - - /** - * Applies background color to selected area - * - * @param {Object} color valid CSS color value - */ - applyBackgroundColor: function(color) {throw "Not implemented";}, - - /** - * Applies foreground color to selected area - * - * @param {Object} color valid CSS color value - */ - applyForegroundColor: function(color) { - this.execCommand("forecolor", color); - }, - - execCommand: function(commandId, param) {throw "Not implemented";}, - - applyRemoveFormat: function() {throw "Not implemented";}, - applyEmphasis: function() {throw "Not implemented";}, - applyStrongEmphasis: function() {throw "Not implemented";}, - applyStrike: function() {throw "Not implemented";}, - applyUnderline: function() {throw "Not implemented";}, - applySuperscription: function() { - this.execCommand("superscript"); - }, - applySubscription: function() { - this.execCommand("subscript"); - }, - indentBlock: function(element, treatListAsNormalBlock) { - return (!element.previousSibling && element.parentNode.nodeName == "LI") ? - this.indentListItem(element, treatListAsNormalBlock) : - this.indentElement(element); - }, - outdentBlock: function(element, treatListAsNormalBlock) { - while(true) { - if(!element.previousSibling && element.parentNode.nodeName == "LI") { - element = this.outdentListItem(element, treatListAsNormalBlock); - return element; - } else { - var performed = this.outdentElement(element); - if(performed) return performed; - - // first-child can outdent container - if(!element.previousSibling) { - element = element.parentNode; - } else { - break; - } - } - } - - return null; - }, - wrapBlock: function(tag, start, end) { - if(this.tree._blockTags.indexOf(tag) == -1) throw "Unsuppored block container: [" + tag + "]"; - if(!start) start = this.getCurrentBlockElement(); - if(!end) end = start; - - // Check if the selection captures valid fragement - var validFragment = false; - - if(start == end) { - // are they same block? - validFragment = true; - } else if(start.parentNode == end.parentNode && !start.previousSibling && !end.nextSibling) { - // are they covering whole parent? - validFragment = true; - start = end = start.parentNode; - } else { - // are they siblings of non-LI blocks? - validFragment = - (start.parentNode == end.parentNode) && - (start.nodeName != "LI"); - } - - if(!validFragment) return null; - - var wrapper = this.createElement(tag); - - if(start == end) { - // They are same. - if(this.tree.isBlockContainer(start) && !this.tree.isListContainer(start)) { - // It's a block container. Wrap its contents. - if(this.tree.isBlockOnlyContainer(wrapper)) { - this.correctEmptyElement(start); - this.wrapAllInlineOrTextNodesAs("P", start, true); - } - this.moveChildNodes(start, wrapper); - start.appendChild(wrapper); - } else { - // It's not a block container. Wrap itself. - wrapper = this.insertNodeAt(wrapper, start, "after"); - wrapper.appendChild(start); - } - - this.correctEmptyElement(wrapper); - } else { - // They are siblings. Wrap'em all. - wrapper = this.insertNodeAt(wrapper, start, "before"); - var node = start; - - while(node != end) { - next = node.nextSibling; - wrapper.appendChild(node); - node = next; - } - wrapper.appendChild(node); - } - - return wrapper; - }, - - - - ///////////////////////////////////////////// - // Focus/Caret/Selection - - /** - * Gives focus to root element's window - */ - focus: function() {throw "Not implemented";}, - - /** - * Returns selection object - */ - sel: function() {throw "Not implemented";}, - - /** - * Returns range object - */ - rng: function() {throw "Not implemented";}, - - /** - * Returns true if DOM has selection - */ - hasSelection: function() {throw "Not implemented";}, - - /** - * Returns true if root element's window has selection - */ - hasFocus: function() { - var cur = this.getCurrentElement(); - return (cur && cur.ownerDocument == this.getDoc()); - }, - - /** - * Adjust scrollbar to make the element visible in current viewport. - * - * @param {Element} element Target element - * @param {boolean} toTop Align element to top of the viewport - * @param {boolean} moveCaret Move caret to the element - */ - scrollIntoView: function(element, toTop, moveCaret) { - element.scrollIntoView(toTop); - if(moveCaret) this.placeCaretAtStartOf(element); - }, - - /** - * Select all document - */ - selectAll: function() { - return this.execCommand('selectall'); - }, - - /** - * Select specified element. - * - * @param {Element} element element to select - * @param {boolean} entireElement true to select entire element, false to select inner content of element - */ - selectElement: function(node, entireElement) {throw "Not implemented"}, - - /** - * Select all elements between two blocks(inclusive). - * - * @param {Element} start start of selection - * @param {Element} end end of selection - */ - selectBlocksBetween: function(start, end) {throw "Not implemented"}, - - /** - * Delete selected area - */ - deleteSelection: function() {throw "Not implemented"}, - - /** - * Collapses current selection. - * - * @param {boolean} toStart true to move caret to start of selected area. - */ - collapseSelection: function(toStart) {throw "Not implemented"}, - - /** - * Returns selected area as HTML string - */ - getSelectionAsHtml: function() {throw "Not implemented"}, - - /** - * Returns selected area as text string - */ - getSelectionAsText: function() {throw "Not implemented"}, - - /** - * Places caret at start of the element - * - * @param {Element} element Target element - */ - placeCaretAtStartOf: function(element) {throw "Not implemented"}, - - /** - * Checks if the node is empty-text-node or not - */ - isEmptyTextNode: function(node) { - return node.nodeType == 3 && node.nodeValue.length == 0; - }, - - /** - * Checks if the caret is place in empty block element - */ - isCaretAtEmptyBlock: function() { - return this.isEmptyBlock(this.getCurrentBlockElement()); - }, - - /** - * Checks if the caret is place at start of the block - */ - isCaretAtBlockStart: function() {throw "Not implemented"}, - - /** - * Checks if the caret is place at end of the block - */ - isCaretAtBlockEnd: function() {throw "Not implemented"}, - - /** - * Saves current selection info - * - * @returns {Object} Bookmark for selection - */ - saveSelection: function() {throw "Not implemented"}, - - /** - * Restores current selection info - * - * @param {Object} bookmark Bookmark - */ - restoreSelection: function(bookmark) {throw "Not implemented"}, - - /** - * Create marker - */ - createMarker: function() { - var marker = this.createElement("SPAN"); - marker.id = "xquared_marker_" + (this._lastMarkerId++); - marker.className = "xquared_marker"; - return marker; - }, - - /** - * Create and insert marker into current caret position. - * Marker is an inline element which has no child nodes. It can be used with many purposes. - * For example, You can push marker to mark current caret position. - * - * @returns {Element} marker - */ - pushMarker: function() { - var marker = this.createMarker(); - return this.insertNode(marker); - }, - - /** - * Removes last marker - * - * @params {boolean} moveCaret move caret into marker before delete. - */ - popMarker: function(moveCaret) { - var id = "xquared_marker_" + (--this._lastMarkerId); - var marker = this.$(id); - if(!marker) return; - - if(moveCaret) { - this.selectElement(marker, true); - this.collapseSelection(false); - } - - this.deleteNode(marker); - }, - - - - ///////////////////////////////////////////// - // Query methods - - isMarker: function(node) { - return (node.nodeType == 1 && node.nodeName == "SPAN" && node.className == "xquared_marker"); - }, - - isFirstBlockOfBody: function(block) { - var root = this.getRoot(); - var found = this.tree.findBackward( - block, - function(node) {return (node == root) || node.previousSibling;}.bind(this) - ); - - return found == root; - }, - - /** - * Returns outer HTML of given element - */ - getOuterHTML: function(element) {throw "Not implemented"}, - - /** - * Returns inner text of given element - * - * @param {Element} element Target element - * @returns {String} Text string - */ - getInnerText: function(element) { - return element.innerHTML.stripTags(); - }, - - /** - * Checks if given node is place holder or not. - * - * @param {Node} node DOM node - */ - isPlaceHolder: function(node) {throw "Not implemented"}, - - /** - * Checks if given block is the first LI whose next sibling is a nested list. - * - * @param {Element} block Target block - */ - isFirstLiWithNestedList: function(block) { - return !block.previousSibling && - block.parentNode.nodeName == "LI" && - this.tree.isListContainer(block.nextSibling); - }, - - /** - * Search all links within given element - * - * @param {Element} [element] Container element. If not given, the root element will be used. - * @param {Array} [found] if passed, links will be appended into this array. - * @returns {Array} Array of anchors. It returns empty array if there's no links. - */ - searchAnchors: function(element, found) { - if(!element) element = this.getRoot(); - if(!found) found = []; - - var anchors = element.getElementsByTagName("A"); - for(var i = 0; i < anchors.length; i++) { - found.push(anchors[i]); - } - - return found; - }, - - /** - * Search all headings within given element - * - * @param {Element} [element] Container element. If not given, the root element will be used. - * @param {Array} [found] if passed, headings will be appended into this array. - * @returns {Array} Array of headings. It returns empty array if there's no headings. - */ - searchHeadings: function(element, found) { - if(!element) element = this.getRoot(); - if(!found) found = []; - - var regexp = /^h[1-6]/ig; - var nodes = element.childNodes; - if (!nodes) return []; - - for(var i = 0; i < nodes.length; i++) { - var isContainer = nodes[i] && this.tree._blockContainerTags.indexOf(nodes[i].nodeName) != -1; - var isHeading = nodes[i] && nodes[i].nodeName.match(regexp); - - if (isContainer) { - this.searchHeadings(nodes[i], found); - } else if (isHeading) { - found.push(nodes[i]); - } - } - - return found; - }, - - /** - * Collect structure and style informations of given element. - * - * @param {Element} element target element - * @returns {Object} object that contains information: {em: true, strong: false, block: "p", list: "ol", ...} - */ - collectStructureAndStyle: function(element) { - if(!element || element.nodeName == "#document") return {}; - - var block = this.getParentBlockElementOf(element); - - // IE���� ��Ȥ DOM�� �� ��: element�� ���ڷ� �Ѿ�4?��찡�? - if(block == null) return {}; - - var parents = this.tree.collectParentsOf(element, true, function(node) {return block.parentNode == node}); - var blockName = block.nodeName; - - var info = {}; - - var doc = this.getDoc(); - var em = doc.queryCommandState("Italic"); - var strong = doc.queryCommandState("Bold"); - var strike = doc.queryCommandState("Strikethrough"); - var underline = doc.queryCommandState("Underline") && !this.getParentElementOf(element, ["A"]); - var superscription = doc.queryCommandState("superscript"); - var subscription = doc.queryCommandState("subscript"); - - // if block is only child, select its parent - while(block.parentNode && block.parentNode != this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { - block = block.parentNode; - } - - var list = false; - if(block.nodeName == "LI") { - var parent = block.parentNode; - var isCode = parent.nodeName == "OL" && parent.className == "code"; - list = isCode ? "CODE" : parent.nodeName; - } - - var justification = block.style.textAlign || "left"; - - return { - block:blockName, - em: em, - strong: strong, - strike: strike, - underline: underline, - superscription: superscription, - subscription: subscription, - list: list, - justification: justification - }; - }, - - /** - * Checks if the element has one or more important attributes: id, class, style - * - * @param {Element} element Target element - */ - hasImportantAttributes: function(element) {throw "Not implemented"}, - - /** - * Checks if the element is empty or not. Place-holder is not counted as a child. - * - * @param {Element} element Target element - */ - isEmptyBlock: function(element) {throw "Not implemented"}, - - /** - * Returns element that contains caret. - */ - getCurrentElement: function() {throw "Not implemented"}, - - /** - * Returns block element that contains caret. - */ - getCurrentBlockElement: function() { - var cur = this.getCurrentElement(); - if(!cur) return null; - - var block = this.getParentBlockElementOf(cur); - if(!block) return null; - - return (block.nodeName == "BODY") ? null : block; - }, - - /** - * Returns parent block element of parameter. - * If the parameter itself is a block, it will be returned. - * - * @param {Element} element Target element - * - * @returns {Element} Element or null - */ - getParentBlockElementOf: function(element) { - while(element) { - if(this.tree._blockTags.indexOf(element.nodeName) != -1) return element; - element = element.parentNode; - } - return null; - }, - - /** - * Returns parent element of parameter which has one of given tag name. - * If the parameter itself has the same tag name, it will be returned. - * - * @param {Element} element Target element - * @param {Array} tagNames Array of string which contains tag names - * - * @returns {Element} Element or null - */ - getParentElementOf: function(element, tagNames) { - while(element) { - if(tagNames.indexOf(element.nodeName) != -1) return element; - element = element.parentNode; - } - return null; - }, - - /** - * Collects all block elements between two elements - * - * @param {Element} from Start element(inclusive) - * @param {Element} to End element(inclusive) - */ - getBlockElementsBetween: function(from, to) { - return this.tree.collectNodesBetween(from, to, function(node) { - return node.nodeType == 1 && this.tree.isBlock(node); - }.bind(this)); - }, - - /** - * Returns block element that contains selection start. - * - * This method will return exactly same result with getCurrentBlockElement method - * when there's no selection. - */ - getBlockElementAtSelectionStart: function() {throw "Not implemented"}, - - /** - * Returns block element that contains selection end. - * - * This method will return exactly same result with getCurrentBlockElement method - * when there's no selection. - */ - getBlockElementAtSelectionEnd: function() {throw "Not implemented"}, - - /** - * Returns blocks at each edge of selection(start and end). - * - * TODO: implement ignoreEmptyEdges for FF - * - * @param {boolean} naturalOrder Mak the start element always comes before the end element - * @param {boolean} ignoreEmptyEdges Prevent some browser(Gecko) from selecting one more block than expected - */ - getBlockElementsAtSelectionEdge: function(naturalOrder, ignoreEmptyEdges) {throw "Not implemented"}, - - /** - * Returns array of selected block elements - */ - getSelectedBlockElements: function() { - var selectionEdges = this.getBlockElementsAtSelectionEdge(true, true); - var start = selectionEdges[0]; - var end = selectionEdges[1]; - - return this.tree.collectNodesBetween(start, end, function(node) { - return node.nodeType == 1 && this.tree.isBlock(node); - }.bind(this)); - }, - - /** - * Get element by ID - * - * @param {String} id Element's ID - * @returns {Element} element or null - */ - getElementById: function(id) {return this.doc.getElementById(id)}, - - /** - * Shortcut for #getElementById - */ - $: function(id) {return this.getElementById(id)}, - - /** - * Returns first "valid" child of given element. It ignores empty textnodes. - * - * @param {Element} element Target element - * @returns {Node} first child node or null - */ - getFirstChild: function(element) { - if(!element) return null; - - var nodes = xq.$A(element.childNodes); - return nodes.find(function(node) {return !this.isEmptyTextNode(node)}.bind(this)); - }, - - /** - * Returns last "valid" child of given element. It ignores empty textnodes and place-holders. - * - * @param {Element} element Target element - * @returns {Node} last child node or null - */ - getLastChild: function(element) {throw "Not implemented"}, - - getNextSibling: function(node) { - while(node = node.nextSibling) { - if(node.nodeType != 3 || node.nodeValue.strip() != "") break; - } - return node; - }, - - getBottommostFirstChild: function(node) { - while(node.firstChild && node.nodeType == 1) node = node.firstChild; - return node; - }, - - getBottommostLastChild: function(node) { - while(node.lastChild && node.nodeType == 1) node = node.lastChild; - return node; - }, - - /** @private */ - _getCssValue: function(str, defaultUnit) { - if(!str || str.length == 0) return {value:0, unit:defaultUnit}; - - var tokens = str.match(/(\d+)(.*)/); - return { - value:parseInt(tokens[1]), - unit:tokens[2] || defaultUnit - }; - } -}); - -/** - * Creates and returns instance of browser specific implementation. - */ -xq.RichDom.createInstance = function() { - if(xq.Browser.isTrident) { - return new xq.RichDomTrident(); - } else if(xq.Browser.isWebkit) { - return new xq.RichDomWebkit(); - } else { - return new xq.RichDomGecko(); - } -} -/** - * RichDom for W3C Standard Engine - */ -xq.RichDomW3 = xq.Class(xq.RichDom, { - insertNode: function(node) { - var rng = this.rng(); - rng.insertNode(node); - rng.selectNode(node); - rng.collapse(false); - return node; - }, - - removeTrailingWhitespace: function(block) { - // TODO: do nothing - }, - - getOuterHTML: function(element) { - var div = element.ownerDocument.createElement("div"); - div.appendChild(element.cloneNode(true)); - return div.innerHTML; - }, - - correctEmptyElement: function(element) { - if(!element || element.nodeType != 1 || this.tree.isAtomic(element)) return; - - if(element.firstChild) - this.correctEmptyElement(element.firstChild); - else - element.appendChild(this.makePlaceHolder()); - }, - - correctParagraph: function() { - if(this.hasSelection()) return false; - - var block = this.getCurrentElement(); - var modified = false; - - if(this.tree.isBlockOnlyContainer(block)) { - this.execCommand("InsertParagraph"); - - // check for atomic block element such as HR - var newBlock = this.getCurrentElement(); - if(this.tree.isAtomic(newBlock.previousSibling)) { - var nextBlock = this.tree.findForward( - newBlock, - function(node) {return this.tree.isBlock(node) && !this.tree.isBlockOnlyContainer(node)}.bind(this) - ); - if(nextBlock) { - this.deleteNode(newBlock); - this.placeCaretAtStartOf(nextBlock); - } - } - modified = true; - } else if(this.tree.hasMixedContents(block)) { - this.wrapAllInlineOrTextNodesAs("P", block, true); - modified = true; - } - - block = this.getCurrentElement(); - if(this.tree.isBlock(block) && !this._hasPlaceHolderAtEnd(block)) { - block.appendChild(this.makePlaceHolder()); - modified = true; - } - - if(this.tree.isBlock(block)) { - var parentsLastChild = block.parentNode.lastChild; - if(this.isPlaceHolder(parentsLastChild)) { - this.deleteNode(parentsLastChild); - modified = true; - } - } - - return modified; - }, - - _hasPlaceHolderAtEnd: function(block) { - if(!block.hasChildNodes()) return false; - return this.isPlaceHolder(block.lastChild) || this._hasPlaceHolderAtEnd(block.lastChild); - }, - - applyBackgroundColor: function(color) { - this.execCommand("styleWithCSS", "true"); - this.execCommand("hilitecolor", color); - this.execCommand("styleWithCSS", "false"); - - // 0. Save current selection - var bookmark = this.saveSelection(); - - // 1. Get selected blocks - var blocks = this.getSelectedBlockElements(); - if(blocks.length == 0) return; - - // 2. Apply background-color to all adjust inline elements - // 3. Remove background-color from blocks - for(var i = 0; i < blocks.length; i++) { - if((i == 0 || i == blocks.length-1) && !blocks[i].style.backgroundColor) continue; - - var spans = this.wrapAllInlineOrTextNodesAs("SPAN", blocks[i], true); - for(var j = 0; j < spans.length; j++) { - spans[j].style.backgroundColor = color; - } - blocks[i].style.backgroundColor = ""; - } - - // 4. Restore selection - this.restoreSelection(bookmark); - }, - - - - - ////// - // Commands - execCommand: function(commandId, param) { - return this.doc.execCommand(commandId, false, param || null); - }, - - saveSelection: function() { - var rng = this.rng(); - return [rng.startContainer, rng.startOffset, rng.endContainer, rng.endOffset]; - }, - - restoreSelection: function(bookmark) { - var rng = this.rng(); - rng.setStart(bookmark[0], bookmark[1]); - rng.setEnd(bookmark[2], bookmark[3]); - }, - - applyRemoveFormat: function() { - this.execCommand("RemoveFormat"); - this.execCommand("Unlink"); - }, - applyEmphasis: function() { - // Generate tag. It will be replaced with+ * Derived class may override this to make a plugin as a event listener.
+ * Whenever you override this function, you should also implement at least one event handler for xq.Editor. + */ + isEventListener: function() {return false}, + + /** + * Callback function. Derived class may override this. + */ + onBeforeLoad: function(editor) {}, + + /** + * Callback function. Derived class may override this. + */ + onAfterLoad: function(editor) {}, + + /** + * Callback function. Derived class may override this. + */ + onBeforeUnload: function(editor) {}, + + /** + * Callback function. Derived class may override this. + */ + onAfterUnload: function(editor) {}, + + /** + * Callback function. Derived class may override this. + */ + getShortcuts: function() {return [];}, + + /** + * Callback function. Derived class may override this. + */ + getAutocorrections: function() {return [];}, + + /** + * Callback function. Derived class may override this. + */ + getAutocompletions: function() {return [];}, + + /** + * Callback function. Derived class may override this. + */ + getTemplateProcessors: function() {return [];}, + + /** + * Callback function. Derived class may override this. + */ + getContextMenuHandlers: function() {return [];} +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/plugin/EditorResizePlugin.js b/modules/editor/skins/xquared/javascripts/plugin/EditorResizePlugin.js new file mode 100644 index 000000000..53711aba5 --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/plugin/EditorResizePlugin.js @@ -0,0 +1,121 @@ +/** + * @requires Xquared.js + * @requires Browser.js + * @requires Editor.js + * @requires plugin/Base.js + */ +xq.plugin.EditorResizePlugin = xq.Class(xq.plugin.Base, + /** + * @name xq.plugin.EditorResizePlugin + * @lends xq.plugin.EditorResizePlugin.prototype + * @extends xq.plugin.Base + * @constructor + */ + { + isEventListener: function() {return true;}, + + onAfterLoad: function(xed) { + this.xed = xed; + this.bar = null; + this.screen = null; + this.active = false; + }, + + onEditorInitialized: function(xed) { + xed.registerEventFirer("Editor", "Resized"); + + var wrapper = this.xed.getOutmostWrapper(); + var doc = wrapper.ownerDocument; + + // create resize bar + this.bar = doc.createElement("DIV"); + if(xq.Browser.isIE6) this.bar.innerHTML = ""; + this.bar.style.height = "6px"; + this.bar.style.backgroundColor = "#ddd"; + this.bar.style.cursor = "n-resize"; + wrapper.appendChild(this.bar); + + // register event + xq.observe(this.bar, 'mousedown', this.onMousedown.bindAsEventListener(this)); + xq.observe(this.bar, 'mouseup', this.onMouseup.bindAsEventListener(this)); + xq.observe(this.bar, 'click', this.onMouseup.bindAsEventListener(this)); + this.mousemoveHandler = this.onMousemove.bindAsEventListener(this); + }, + + onMousedown: function(e) { + if(this.active) return; + + xq.observe(document, 'mousemove', this.mousemoveHandler); + this.last = e.screenY; + + var wrapper = this.xed.getOutmostWrapper(); + var doc = wrapper.ownerDocument; + var wysiwygDiv = this.xed.getWysiwygEditorDiv(); + var sourceDiv = this.xed.getSourceEditorDiv(); + var visibleDiv = this.xed.getCurrentEditMode() == "wysiwyg" ? wysiwygDiv : sourceDiv; + var location = xq.getCumulativeOffset(visibleDiv); + + // create screen + this.screen = doc.createElement("DIV"); + if(xq.Browser.isIE6) this.screen.innerHTML = ""; + + if(xq.Browser.isIE6) { + this.screen.style.backgroundColor = "#EEE"; + wysiwygDiv.style.display = "none"; + } else { + this.screen.style.position = "absolute"; + this.screen.style.left = location.left + "px"; + this.screen.style.top = location.top + "px"; + } + + this.screen.style.width = visibleDiv.clientWidth + "px"; + this.screen.style.height = visibleDiv.clientHeight + "px"; + wrapper.insertBefore(this.screen, visibleDiv); + + this.resize(e.screenY); + this.active = true; + + xq.stopEvent(e); + return true; + }, + onMouseup: function(e) { + if(!this.active) return; + + this.active = false; + + xq.stopObserving(document, 'mousemove', this.mousemoveHandler); + this.resize(e.screenY); + + if(xq.Browser.isIE6) { + var wysiwygDiv = this.xed.getWysiwygEditorDiv(); + var sourceDiv = this.xed.getSourceEditorDiv(); + var visibleDiv = this.xed.getCurrentEditMode() == "wysiwyg" ? wysiwygDiv : sourceDiv; + visibleDiv.style.display = "block"; + } + + this.screen.parentNode.removeChild(this.screen); + this.screen = null; + + this.xed._fireOnResized(this.xed); + + xq.stopEvent(e); + return true; + }, + onMousemove: function(e) { + this.resize(e.screenY); + + xq.stopEvent(e); + return true; + }, + resize: function(y) { + var delta = y - this.last; + + var wysiwygDiv = this.xed.getWysiwygEditorDiv(); + var sourceDiv = this.xed.getSourceEditorDiv(); + var newHeight = Math.max(0, this.screen.clientHeight + delta); + + sourceDiv.style.height = wysiwygDiv.style.height = this.screen.style.height = newHeight + "px"; + + this.last = y; + } +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/plugin/EventLogPlugin.js b/modules/editor/skins/xquared/javascripts/plugin/EventLogPlugin.js new file mode 100644 index 000000000..1314dc709 --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/plugin/EventLogPlugin.js @@ -0,0 +1,77 @@ +/** + * @requires Xquared.js + * @requires Browser.js + * @requires Editor.js + * @requires plugin/Base.js + */ +xq.plugin.EventLogPlugin = xq.Class(xq.plugin.Base, + /** + * @name xq.plugin.EventLogPlugin + * @lends xq.plugin.EventLogPlugin.prototype + * @extends xq.plugin.Base + * @constructor + */ + { + isEventListener: function() {return true;}, + + onAfterLoad: function(xed) { + this.createLogWindow(); + }, + + onEditorStartInitialization: function(xed) { + this.log("Start initialization."); + }, + onEditorInitialized: function(xed) { + this.log("Initialized."); + }, + onEditorElementChanged: function(xed, from, to) { + this.log("Element changed from <" + (from ? from.nodeName : null) + "> to <" + (to ? to.nodeName : null) + ">."); + }, + onEditorBeforeEvent: function(xed, e) { + this.log("Before event [" + e.type + "]"); + }, + onEditorAfterEvent: function(xed, e) { + this.log("After event [" + e.type + "]"); + }, + onEditorCurrentContentChanged: function(xed) { + this.log("Current content changed."); + }, + onEditorStaticContentChanged: function(xed, content) { + this.log("Static content changed."); + }, + onEditorCurrentEditModeChanged: function(xed, from, to) { + this.log("Edit mode changed from <" + from + "> to <" + to + ">."); + }, + + + + createLogWindow: function() { + var wrapper = document.createElement("DIV"); + wrapper.innerHTML = "
Log
"; + wrapper.style.width = "500px"; + document.body.appendChild(wrapper); + + this.logWindow = document.createElement("PRE"); + this.logWindow.style.fontSize = "0.75em"; + this.logWindow.style.height = "200px"; + this.logWindow.style.overflow = "scroll"; + this.logWindow.style.border = "1px solid black"; + this.logWindow.style.padding = "2px"; + wrapper.appendChild(this.logWindow); + }, + + log: function(message) { + var line = document.createTextNode(this.getFormattedTime() + ": " + message); + this.logWindow.insertBefore(document.createElement("BR"), this.logWindow.firstChild); + this.logWindow.insertBefore(line, this.logWindow.firstChild); + }, + + getFormattedTime: function() { + var date = new Date(); + var time = date.toTimeString().split(" ")[0]; + var msec = "000" + date.getMilliseconds(); + msec = msec.substring(msec.length - 4); + + return time + "." + msec; + } +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/plugin/FlashMovieMacroPlugin.js b/modules/editor/skins/xquared/javascripts/plugin/FlashMovieMacroPlugin.js new file mode 100644 index 000000000..118750fd0 --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/plugin/FlashMovieMacroPlugin.js @@ -0,0 +1,65 @@ +/** + * @requires Xquared.js + * @requires Browser.js + * @requires Editor.js + * @requires plugin/Base.js + * @requires ui/Control.js + * @requires macro/Factory.js + * @requires macro/FlashMovieMacro.js + */ +xq.plugin.FlashMovieMacroPlugin = xq.Class(xq.plugin.Base, + /** + * @name xq.plugin.FlashMovieMacroPlugin + * @lends xq.plugin.FlashMovieMacroPlugin.prototype + * @extends xq.plugin.Base + * @constructor + */ + { + onAfterLoad: function(xed) { + xed.config.macroIds.push("FlashMovie"); + xed.config.defaultToolbarButtonGroups.insert.push( + {className:"movie", title:"Movie", handler:"xed.handleMovie()"} + ) + + xed.handleInsertMovie = function(html) { + var macro = this.macroFactory.createMacroFromDefinition({id:"FlashMovie", params:{html:html}}); + if(macro) { + var placeHolder = macro.createPlaceHolderHtml(); + this.rdom.insertHtml(placeHolder); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + } else { + alert("Unknown URL pattern"); + } + return true; + }; + + xed.handleMovie = function() { + var dialog = new xq.ui.FormDialog( + this, + xq.ui_templates.basicMovieDialog, + function(dialog) {}, + function(data) { + this.focus(); + + if(xq.Browser.isTrident) { + var rng = this.rdom.rng(); + rng.moveToBookmark(bm); + rng.select(); + } + + // cancel? + if(!data) return; + + this.handleInsertMovie(data.html); + }.bind(this) + ); + + if(xq.Browser.isTrident) var bm = this.rdom.rng().getBookmark(); + dialog.show({position: 'centerOfEditor'}); + + return true; + } + } +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/plugin/IFrameMacroPlugin.js b/modules/editor/skins/xquared/javascripts/plugin/IFrameMacroPlugin.js new file mode 100644 index 000000000..e1dcc2f43 --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/plugin/IFrameMacroPlugin.js @@ -0,0 +1,50 @@ +/** + * @requires Xquared.js + * @requires Browser.js + * @requires Editor.js + * @requires plugin/Base.js + * @requires ui/Control.js + * @requires macro/Factory.js + * @requires macro/IFrameMacro.js + */ +xq.plugin.IFrameMacroPlugin = xq.Class(xq.plugin.Base, + /** + * @name xq.plugin.IFrameMacroPlugin + * @lends xq.plugin.IFrameMacroPlugin.prototype + * @extends xq.plugin.Base + * @constructor + */ + { + onAfterLoad: function(xed) { + xed.config.macroIds.push("IFrame"); + xed.config.defaultToolbarButtonGroups.insert.push( + {className:"iframe", title:"IFrame", handler:"xed.handleIFrame()"} + ) + + xed.handleIFrame = function() { + var dialog = new xq.ui.FormDialog( + this, + xq.ui_templates.basicIFrameDialog, + function(dialog) {}, + function(data) { + this.focus(); + + // cancel? + if(!data) return; + + var macro = this.macroFactory.createMacroFromDefinition({id:"IFrame", params:data}); + if(macro) { + var placeHolder = macro.createPlaceHolderHtml(); + this.rdom.insertHtml(placeHolder); + } else { + alert("Unknown error"); + } + }.bind(this) + ); + + dialog.show({position: 'centerOfEditor'}); + + return true; + } + } +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/plugin/JavascriptMacroPlugin.js b/modules/editor/skins/xquared/javascripts/plugin/JavascriptMacroPlugin.js new file mode 100644 index 000000000..ad7e15923 --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/plugin/JavascriptMacroPlugin.js @@ -0,0 +1,66 @@ +/** + * @requires Xquared.js + * @requires Browser.js + * @requires Editor.js + * @requires plugin/Base.js + * @requires ui/Control.js + * @requires macro/Factory.js + * @requires macro/JavascriptMacro.js + */ +xq.plugin.JavascriptMacroPlugin = xq.Class(xq.plugin.Base, + /** + * @name xq.plugin.JavascriptMacroPlugin + * @lends xq.plugin.JavascriptMacroPlugin.prototype + * @extends xq.plugin.Base + * @constructor + */ + { + onAfterLoad: function(xed) { + xed.config.macroIds.push("Javascript"); + xed.config.defaultToolbarButtonGroups.insert.push( + {className:"script", title:"Script", handler:"xed.handleScript()"} + ) + + xed.handleInsertScript = function(url) { + var params = {url: url}; + var macro = this.macroFactory.createMacroFromDefinition({id:"Javascript", params:params}); + if(macro) { + var placeHolder = macro.createPlaceHolderHtml(); + this.rdom.insertHtml(placeHolder); + + var historyAdded = this.editHistory.onCommand(); + this._fireOnCurrentContentChanged(this); + } else { + alert("Unknown URL pattern"); + } + return true; + }; + + xed.handleScript = function() { + var dialog = new xq.ui.FormDialog( + this, + xq.ui_templates.basicScriptDialog, + function(dialog) {}, + function(data) { + this.focus(); + + if(xq.Browser.isTrident) { + var rng = this.rdom.rng(); + rng.moveToBookmark(bm); + rng.select(); + } + + // cancel? + if(!data) return; + + this.handleInsertScript(data.url); + }.bind(this) + ); + + if(xq.Browser.isTrident) var bm = this.rdom.rng().getBookmark(); + dialog.show({position: 'centerOfEditor'}); + + return true; + } + } +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/plugin/MacroPlugin.js b/modules/editor/skins/xquared/javascripts/plugin/MacroPlugin.js new file mode 100644 index 000000000..1050ca04f --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/plugin/MacroPlugin.js @@ -0,0 +1,110 @@ +/** + * @requires Xquared.js + * @requires Browser.js + * @requires Editor.js + * + * @requires macro/Factory.js + * @requires Layer.js + * @requires Json2.js + * + * @requires plugin/Base.js + */ +xq.plugin.MacroPlugin = xq.Class(xq.plugin.Base, + /** + * @name xq.plugin.MacroPlugin + * @lends xq.plugin.MacroPlugin.prototype + * @extends xq.plugin.Base + * @constructor + */ + { + isEventListener: function() {return true;}, + + onAfterLoad: function(xed) { + this.xed = xed; + this.xed.config.macroIds = []; + this.layers = []; + }, + + onEditorStartInitialization: function(xed) { + this.xed.validator.addListener(this); + + this.xed.macroFactory = new xq.macro.Factory(this.xed.config.imagePathForContent + 'placeholder.gif'); + for(var i = 0; i < this.xed.config.macroIds.length; i++) { + this.xed.macroFactory.register(this.xed.config.macroIds[i]); + } + + xed.timer.register(this.updateLayers.bind(this), 100); + xed.timer.register(this.updateLayerList.bind(this), 2000); + }, + + /** + * @param {Element} [placeHolder] place holder element + */ + attachMacro: function(element) { + var longdesc = element.getAttribute("longdesc") || element.longdesc; + var def = JSON.parse(unescape(longdesc)); + var macro = this.xed.macroFactory.createMacroFromDefinition(def); + var layer = new xq.Layer(this.xed, element, macro.createHtml()); + macro.onLayerInitialzied(layer); + this.layers.push(layer); + }, + + isAttachedPlaceHolder: function(element) { + for(var i = 0; i < this.layers.length; i++) { + if(this.layers[i].element === element) return true; + } + return false; + }, + + updateLayerList: function() { + if(this.xed.getCurrentEditMode() !== 'wysiwyg') { + for(var i = 0; i < this.layers.length; i++) { + this.layers[i].detach(); + } + this.layers = []; + } else { + var placeHolders = xq.getElementsByClassName(this.xed.rdom.getRoot(), "xqlayer", xq.Browser.isTrident ? "img" : null); + for(var i = 0; i < placeHolders.length; i++) { + if(!this.isAttachedPlaceHolder(placeHolders[i])) { + this.attachMacro(placeHolders[i]); + } + } + } + }, + + /** + * Updates all layers immediately. If there're invalid layers, detachs and removes them. + */ + updateLayers: function() { + if(this.xed.getCurrentEditMode() !== 'wysiwyg') return; + + for(var i = 0; i < this.layers.length; i++) { + var layer = this.layers[i]; + if(layer.isValid()) { + layer.updatePosition(); + } else { + layer.detach(); + this.layers.splice(i, 1); + } + } + }, + + onValidatorPreprocessing: function(html) { + var p = xq.compilePattern("<(IFRAME|SCRIPT|OBJECT|EMBED)\\s+[^>]+(?:/>|>.*?)", "img"); + html.value = html.value.replace(p, function(str, tag) { + var macro = this.xed.macroFactory.createMacroFromHtml(str); + return macro ? macro.createPlaceHolderHtml() : ""; + }.bind(this)); + }, + + onValidatorAfterStringValidation: function(html) { + var p1 = /+ *
+ * Base provides basic CRUD + Advanced DOM manipulation API, various query methods and caret/selection management API. + * + * @constructs + */ + initialize: function() { + xq.addToFinalizeQueue(this); + + /** + * Instance of DomTree + * @type xq.DomTree + */ + this.tree = new xq.DomTree(); + this.focused = false; + this._lastMarkerId = 0; + }, + + + + /** + * Initialize Base instance using window object. + * Reads document and body from window object and sets them as a property + * + * @param {Window} win Browser's window object + */ + setWin: function(win) { + if(!win) throw "[win] is null"; + this.win = win; + }, + + /** + * Initialize Base instance using root element. + * Reads window and document from root element and sets them as a property. + * + * @param {Element} root Root element + */ + setRoot: function(root) { + if(!root) throw "[root] is null"; + this.root = root; + }, + + /** + * @returns Browser's window object. + */ + getWin: function() { + return this.win || + (this.root ? (this.root.ownerDocument.defaultView || this.root.ownerDocument.parentWindow) : window); + }, + + /** + * @returns Root element. + */ + getRoot: function() { + return this.root || this.win.document.body; + }, + + /** + * @returns Document object of root element. + */ + getDoc: function() { + return this.getWin().document || this.getRoot().ownerDocument; + }, + + + + ///////////////////////////////////////////// + // CRUDs + + clearRoot: function() { + this.getRoot().innerHTML = ""; + this.getRoot().appendChild(this.makeEmptyParagraph()); + }, + + /** + * Removes place holders and empty text nodes of given element. + * + * @param {Element} element target element + */ + removePlaceHoldersAndEmptyNodes: function(element) { + if(!element.hasChildNodes()) return; + + var stopAt = this.getBottommostLastChild(element); + if(!stopAt) return; + stopAt = this.tree.walkForward(stopAt); + + while(element && element !== stopAt) { + if( + this.isPlaceHolder(element) || + (element.nodeType === 3 && (element.nodeValue === "" || (!element.nextSibling && element.nodeValue.isBlank()))) + ) { + var deleteTarget = element; + element = this.tree.walkForward(element); + this.deleteNode(deleteTarget); + } else { + element = this.tree.walkForward(element); + } + } + }, + + /** + * Sets multiple attributes into element at once + * + * @param {Element} element target element + * @param {Object} map key-value pairs + */ + setAttributes: function(element, map) { + for(var key in map) element.setAttribute(key, map[key]); + }, + + /** + * Creates textnode by given node value. + * + * @param {String} value value of textnode + * @returns {Node} Created text node + */ + createTextNode: function(value) {return this.getDoc().createTextNode(value);}, + + /** + * Creates empty element by given tag name. + * + * @param {String} tagName name of tag + * @returns {Element} Created element + */ + createElement: function(tagName) {return this.getDoc().createElement(tagName);}, + + /** + * Creates element from HTML string + * + * @param {String} html HTML string + * @returns {Element} Created element + */ + createElementFromHtml: function(html) { + var node = this.createElement("div"); + node.innerHTML = html; + if(node.childNodes.length !== 1) { + throw "Illegal HTML fragment"; + } + return this.getFirstChild(node); + }, + + /** + * Deletes node from DOM tree. + * + * @param {Node} node Target node which should be deleted + * @param {boolean} deleteEmptyParentsRecursively Recursively delete empty parent elements + * @param {boolean} correctEmptyParent Call #correctEmptyElement on empty parent element after deletion + */ + deleteNode: function(node, deleteEmptyParentsRecursively, correctEmptyParent) { + if(!node || !node.parentNode) return; + if(node.nodeName === "BODY") throw "Cannot delete BODY"; + + var parent = node.parentNode; + parent.removeChild(node); + + if(deleteEmptyParentsRecursively) { + while(!parent.hasChildNodes()) { + node = parent; + parent = node.parentNode; + if(!parent || this.getRoot() === node) break; + parent.removeChild(node); + } + } + + if(correctEmptyParent && this.isEmptyBlock(parent)) { + parent.innerHTML = ""; + this.correctEmptyElement(parent); + } + }, + + /** + * Inserts given node into current caret position + * + * @param {Node} node Target node + * @returns {Node} Inserted node. It could be different with given node. + */ + insertNode: function(node) {throw "Not implemented"}, + + /** + * Inserts given html into current caret position + * + * @param {String} html HTML string + * @returns {Node} Inserted node. It could be different with given node. + */ + insertHtml: function(html) { + return this.insertNode(this.createElementFromHtml(html)); + }, + + /** + * Creates textnode from given text and inserts it into current caret position + * + * @param {String} text Value of textnode + * @returns {Node} Inserted node + */ + insertText: function(text) { + this.insertNode(this.createTextNode(text)); + }, + + /** + * Places given node nearby target. + * + * @param {Node} node Node to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * @param {boolean} performValidation Validate node if needed. For example when P placed into UL, its tag name automatically replaced with LI + * + * @returns {Node} Inserted node. It could be different with given node. + */ + insertNodeAt: function(node, target, where, performValidation) { + if( + ["HTML", "HEAD"].indexOf(target.nodeName) !== -1 || + "BODY" === target.nodeName && ["before", "after"].indexOf(where) !== -1 + ) throw "Illegal argument. Cannot move node[" + node.nodeName + "] to '" + where + "' of target[" + target.nodeName + "]" + + var object; + var message; + var secondParam; + + switch(where.toLowerCase()) { + case "before": + object = target.parentNode; + message = 'insertBefore'; + secondParam = target; + break + case "start": + if(target.firstChild) { + object = target; + message = 'insertBefore'; + secondParam = target.firstChild; + } else { + object = target; + message = 'appendChild'; + } + break + case "end": + object = target; + message = 'appendChild'; + break + case "after": + if(target.nextSibling) { + object = target.parentNode; + message = 'insertBefore'; + secondParam = target.nextSibling; + } else { + object = target.parentNode; + message = 'appendChild'; + } + break + } + + if(performValidation && this.tree.isListContainer(object) && node.nodeName !== "LI") { + var li = this.createElement("LI"); + li.appendChild(node); + node = li; + object[message](node, secondParam); + } else if(performValidation && !this.tree.isListContainer(object) && node.nodeName === "LI") { + this.wrapAllInlineOrTextNodesAs("P", node, true); + var div = this.createElement("DIV"); + this.moveChildNodes(node, div); + this.deleteNode(node); + object[message](div, secondParam); + node = this.unwrapElement(div, true); + } else { + object[message](node, secondParam); + } + + return node; + }, + + /** + * Creates textnode from given text and places given node nearby target. + * + * @param {String} text Text to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * + * @returns {Node} Inserted node. + */ + insertTextAt: function(text, target, where) { + return this.insertNodeAt(this.createTextNode(text), target, where); + }, + + /** + * Creates element from given HTML string and places given it nearby target. + * + * @param {String} html HTML to be inserted. + * @param {Node} target Target node. + * @param {String} where Possible values: "before", "start", "end", "after" + * + * @returns {Node} Inserted node. + */ + insertHtmlAt: function(html, target, where) { + return this.insertNodeAt(this.createElementFromHtml(html), target, where); + }, + + /** + * Replaces element's tag by removing current element and creating new element by given tag name. + * + * @param {String} tag New tag name + * @param {Element} element Target element + * + * @returns {Element} Replaced element + */ + replaceTag: function(tag, element) { + if(element.nodeName === tag) return null; + if(this.tree.isTableCell(element)) return null; + + var newElement = this.createElement(tag); + this.moveChildNodes(element, newElement); + this.copyAttributes(element, newElement, true); + element.parentNode.replaceChild(newElement, element); + + if(!newElement.hasChildNodes()) this.correctEmptyElement(newElement); + + return newElement; + }, + + /** + * Unwraps unnecessary paragraph. + * + * Unnecessary paragraph is P which is the only child of given container element. + * For example, P which is contained by LI and is the only child is the unnecessary paragraph. + * But if given container element is a block-only-container(BLOCKQUOTE, BODY), this method does nothing. + * + * @param {Element} element Container element + * @returns {boolean} True if unwrap performed. + */ + unwrapUnnecessaryParagraph: function(element) { + if(!element) return false; + + if(!this.tree.isBlockOnlyContainer(element) && element.childNodes.length === 1 && element.firstChild.nodeName === "P" && !this.hasImportantAttributes(element.firstChild)) { + var p = element.firstChild; + this.moveChildNodes(p, element); + this.deleteNode(p); + return true; + } + return false; + }, + + /** + * Unwraps element by extracting all children out and removing the element. + * + * @param {Element} element Target element + * @param {boolean} wrapInlineAndTextNodes Wrap all inline and text nodes with P before unwrap + * @returns {Node} First child of unwrapped element + */ + unwrapElement: function(element, wrapInlineAndTextNodes) { + if(wrapInlineAndTextNodes) this.wrapAllInlineOrTextNodesAs("P", element); + + var nodeToReturn = element.firstChild; + + while(element.firstChild) this.insertNodeAt(element.firstChild, element, "before"); + this.deleteNode(element); + + return nodeToReturn; + }, + + /** + * Wraps element by given tag + * + * @param {String} tag tag name + * @param {Element} element target element to wrap + * @returns {Element} wrapper + */ + wrapElement: function(tag, element) { + var wrapper = this.insertNodeAt(this.createElement(tag), element, "before"); + wrapper.appendChild(element); + return wrapper; + }, + + /** + * Tests #smartWrap with given criteria but doesn't change anything + */ + testSmartWrap: function(endElement, criteria) { + return this.smartWrap(endElement, null, criteria, true); + }, + + /** + * Create inline element with given tag name and wraps nodes nearby endElement by given criteria + * + * @param {Element} endElement Boundary(end point, exclusive) of wrapper. + * @param {String} tag Tag name of wrapper. + * @param {Object} function which returns text index of start boundary. + * @param {boolean} testOnly just test boundary and do not perform actual wrapping. + * + * @returns {Element} wrapper + */ + smartWrap: function(endElement, tag, criteria, testOnly) { + var block = this.getParentBlockElementOf(endElement); + + tag = tag || "SPAN"; + criteria = criteria || function(text) {return -1}; + + // check for empty wrapper + if(!testOnly && (!endElement.previousSibling || this.isEmptyBlock(block))) { + var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); + return wrapper; + } + + // collect all textnodes + var textNodes = this.tree.collectForward(block, function(node) {return node === endElement}, function(node) {return node.nodeType === 3}); + + // find textnode and break-point + var nodeIndex = 0; + var nodeValues = []; + for(var i = 0; i < textNodes.length; i++) { + nodeValues.push(textNodes[i].nodeValue); + } + var textToWrap = nodeValues.join(""); + var textIndex = criteria(textToWrap) + var breakPoint = textIndex; + + if(breakPoint === -1) { + breakPoint = 0; + } else { + textToWrap = textToWrap.substring(breakPoint); + } + + for(var i = 0; i < textNodes.length; i++) { + if(breakPoint > nodeValues[i].length) { + breakPoint -= nodeValues[i].length; + } else { + nodeIndex = i; + break; + } + } + + if(testOnly) return {text:textToWrap, textIndex:textIndex, nodeIndex:nodeIndex, breakPoint:breakPoint}; + + // break textnode if necessary + if(breakPoint !== 0) { + var splitted = textNodes[nodeIndex].splitText(breakPoint); + nodeIndex++; + textNodes.splice(nodeIndex, 0, splitted); + } + var startElement = textNodes[nodeIndex] || block.firstChild; + + // split inline elements up to parent block if necessary + var family = this.tree.findCommonAncestorAndImmediateChildrenOf(startElement, endElement); + var ca = family.parent; + if(ca) { + if(startElement.parentNode !== ca) startElement = this.splitElementUpto(startElement, ca, true); + if(endElement.parentNode !== ca) endElement = this.splitElementUpto(endElement, ca, true); + + var prevStart = startElement.previousSibling; + var nextEnd = endElement.nextSibling; + + // remove empty inline elements + if(prevStart && prevStart.nodeType === 1 && this.isEmptyBlock(prevStart)) this.deleteNode(prevStart); + if(nextEnd && nextEnd.nodeType === 1 && this.isEmptyBlock(nextEnd)) this.deleteNode(nextEnd); + + // wrap + var wrapper = this.insertNodeAt(this.createElement(tag), startElement, "before"); + while(wrapper.nextSibling !== endElement) wrapper.appendChild(wrapper.nextSibling); + return wrapper; + } else { + // wrap + var wrapper = this.insertNodeAt(this.createElement(tag), endElement, "before"); + return wrapper; + } + }, + + /** + * Wraps all adjust inline elements and text nodes into block element. + * + * TODO: empty element should return empty array when it is not forced and (at least) single item array when forced + * + * @param {String} tag Tag name of wrapper + * @param {Element} element Target element + * @param {boolean} force Force wrapping. If it is set to false, this method do not makes unnecessary wrapper. + * + * @returns {Array} Array of wrappers. If nothing performed it returns empty array + */ + wrapAllInlineOrTextNodesAs: function(tag, element, force) { + var wrappers = []; + + if(!force && !this.tree.hasMixedContents(element)) return wrappers; + + var node = element.firstChild; + while(node) { + if(this.tree.isTextOrInlineNode(node)) { + var wrapper = this.wrapInlineOrTextNodesAs(tag, node); + wrappers.push(wrapper); + node = wrapper.nextSibling; + } else { + node = node.nextSibling; + } + } + + return wrappers; + }, + + /** + * Wraps node and its adjust next siblings into an element + */ + wrapInlineOrTextNodesAs: function(tag, node) { + var wrapper = this.createElement(tag); + var from = node; + + from.parentNode.replaceChild(wrapper, from); + wrapper.appendChild(from); + + // move nodes into wrapper + while(wrapper.nextSibling && this.tree.isTextOrInlineNode(wrapper.nextSibling)) wrapper.appendChild(wrapper.nextSibling); + + return wrapper; + }, + + /** + * Turns block element into list item + * + * @param {Element} element Target element + * @param {String} type One of "UL", "OL". + * @param {String} className CSS class name. + * + * @return {Element} LI element + */ + turnElementIntoListItem: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var container = this.createElement(type); + if(className) container.className = className; + + if(this.tree.isTableCell(element)) { + var p = this.wrapAllInlineOrTextNodesAs("P", element, true)[0]; + container = this.insertNodeAt(container, element, "start"); + var li = this.insertNodeAt(this.createElement("LI"), container, "start"); + li.appendChild(p); + } else { + container = this.insertNodeAt(container, element, "after"); + var li = this.insertNodeAt(this.createElement("LI"), container, "start"); + li.appendChild(element); + } + + this.unwrapUnnecessaryParagraph(li); + this.mergeAdjustLists(container); + + return li; + }, + + /** + * Extracts given element out from its parent element. + * + * @param {Element} element Target element + */ + extractOutElementFromParent: function(element) { + if(element === this.getRoot() || element.parentNode === this.getRoot() || !element.offsetParent) return null; + + if(element.nodeName === "LI") { + this.wrapAllInlineOrTextNodesAs("P", element, true); + element = element.firstChild; + } + + var container = element.parentNode; + var nodeToReturn = null; + + if(container.nodeName === "LI" && container.parentNode.parentNode.nodeName === "LI") { + // nested list item + if(element.previousSibling) { + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + } + + this.outdentListItem(element); + nodeToReturn = element; + } else if(container.nodeName === "LI") { + // not-nested list item + + if(this.tree.isListContainer(element.nextSibling)) { + // 1. split listContainer + var listContainer = container.parentNode; + this.splitContainerOf(container, true); + this.correctEmptyElement(element); + + // 2. extract out LI's children + nodeToReturn = container.firstChild; + while(container.firstChild) { + this.insertNodeAt(container.firstChild, listContainer, "before"); + } + + // 3. remove listContainer and merge adjust lists + var prevContainer = listContainer.previousSibling; + this.deleteNode(listContainer); + if(prevContainer && this.tree.isListContainer(prevContainer)) this.mergeAdjustLists(prevContainer); + } else { + // 1. split LI + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + + // 2. split list container + var listContainer = this.splitContainerOf(container); + + // 3. extract out + this.insertNodeAt(element, listContainer.parentNode, "before"); + this.deleteNode(listContainer.parentNode); + + nodeToReturn = element; + } + } else if(this.tree.isTableCell(container) || this.tree.isTableCell(element)) { + // do nothing + } else { + // normal block + this.splitContainerOf(element, true); + this.correctEmptyElement(element); + nodeToReturn = this.insertNodeAt(element, container, "before"); + + this.deleteNode(container); + } + + return nodeToReturn; + }, + + /** + * Insert new block above or below given element. + * + * @param {Element} block Target block + * @param {boolean} before Insert new block above(before) target block + * @param {String} forceTag New block's tag name. If omitted, target block's tag name will be used. + * + * @returns {Element} Inserted block + */ + insertNewBlockAround: function(block, before, forceTag) { + var isListItem = block.nodeName === "LI" || block.parentNode.nodeName === "LI"; + + this.removeTrailingWhitespace(block); + if(this.isFirstLiWithNestedList(block) && !forceTag && before) { + var li = this.getParentElementOf(block, ["LI"]); + var newBlock = this._insertNewBlockAround(li, before); + return newBlock; + } else if(isListItem && !forceTag) { + var li = this.getParentElementOf(block, ["LI"]); + var newBlock = this._insertNewBlockAround(block, before); + if(li !== block) newBlock = this.splitContainerOf(newBlock, false, "prev"); + return newBlock; + } else if(this.tree.isBlockContainer(block)) { + this.wrapAllInlineOrTextNodesAs("P", block, true); + return this._insertNewBlockAround(block.firstChild, before, forceTag); + } else { + return this._insertNewBlockAround(block, before, this.tree.isHeading(block) ? "P" : forceTag); + } + }, + + /** + * @private + * + * TODO: Rename + */ + _insertNewBlockAround: function(element, before, tagName) { + var newElement = this.createElement(tagName || element.nodeName); + this.copyAttributes(element, newElement, false); + this.correctEmptyElement(newElement); + newElement = this.insertNodeAt(newElement, element, before ? "before" : "after"); + return newElement; + }, + + /** + * Wrap or replace element with given tag name. + * + * @param {String} [tag] Tag name. If not provided, it does not modify tag name. + * @param {Element} element Target element + * @param {String} [className] Class name of tag. If not provided, it does not modify current class name, and if empty string is provided, class attribute will be removed. + * + * @return {Element} wrapper element or replaced element. + */ + applyTagIntoElement: function(tag, element, className) { + if(!tag && !className) return null; + + var result = element; + + if(tag) { + if(this.tree.isBlockOnlyContainer(tag)) { + result = this.wrapBlock(tag, element); + } else if(this.tree.isBlockContainer(element)) { + var wrapper = this.createElement(tag); + this.moveChildNodes(element, wrapper); + result = this.insertNodeAt(wrapper, element, "start"); + } else if(this.tree.isBlockContainer(tag) && this.hasImportantAttributes(element)) { + result = this.wrapBlock(tag, element); + } else { + result = this.replaceTag(tag, element); + } + } + + if(className) { + result.className = className; + } + + return result; + }, + + /** + * Wrap or replace elements with given tag name. + * + * @param {String} [tag] Tag name. If not provided, it does not modify tag name. + * @param {Element} from Start boundary (inclusive) + * @param {Element} to End boundary (inclusive) + * @param {String} [className] Class name of tag. If not provided, it does not modify current class name, and if empty string is provided, class attribute will be removed. + * + * @returns {Array} Array of wrappers or replaced elements + */ + applyTagIntoElements: function(tagName, from, to, className) { + if(!tagName && !className) return [from, to]; + + var applied = []; + + if(tagName) { + if(this.tree.isBlockContainer(tagName)) { + var family = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + var node = family.left; + var wrapper = this.insertNodeAt(this.createElement(tagName), node, "before"); + + var coveringWholeList = + family.parent.nodeName === "LI" && + family.parent.parentNode.childNodes.length === 1 && + !family.left.previousSilbing && + !family.right.nextSibling; + + if(coveringWholeList) { + var ul = node.parentNode.parentNode; + this.insertNodeAt(wrapper, ul, "before"); + wrapper.appendChild(ul); + } else { + while(node !== family.right) { + next = node.nextSibling; + wrapper.appendChild(node); + node = next; + } + wrapper.appendChild(family.right); + } + applied.push(wrapper); + } else { + // is normal tagName + var elements = this.getBlockElementsBetween(from, to); + for(var i = 0; i < elements.length; i++) { + if(this.tree.isBlockContainer(elements[i])) { + var wrappers = this.wrapAllInlineOrTextNodesAs(tagName, elements[i], true); + for(var j = 0; j < wrappers.length; j++) { + applied.push(wrappers[j]); + } + } else { + applied.push(this.replaceTag(tagName, elements[i]) || elements[i]); + } + } + } + } + + if(className) { + var elements = this.tree.collectNodesBetween(from, to, function(n) {return n.nodeType == 1;}); + for(var i = 0; i < elements.length; i++) { + elements[i].className = className; + } + } + + return applied; + }, + + /** + * Moves block up or down + * + * @param {Element} block Target block + * @param {boolean} up Move up if true + * + * @returns {Element} Moved block. It could be different with given block. + */ + moveBlock: function(block, up) { + // if block is table cell or contained by table cell, select its row as mover + block = this.getParentElementOf(block, ["TR"]) || block; + + // if block is only child, select its parent as mover + while(block.nodeName !== "TR" && block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + // find target and where + var target, where; + if (up) { + target = block.previousSibling; + + if(target) { + var singleNodeLi = target.nodeName === 'LI' && ((target.childNodes.length === 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); + var table = ['TABLE', 'TR'].indexOf(target.nodeName) !== -1; + + where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "end" : "before"; + } else if(block.parentNode !== this.getRoot()) { + target = block.parentNode; + where = "before"; + } + } else { + target = block.nextSibling; + + if(target) { + var singleNodeLi = target.nodeName === 'LI' && ((target.childNodes.length === 1 && this.tree.isBlock(target.firstChild)) || !this.tree.hasBlocks(target)); + var table = ['TABLE', 'TR'].indexOf(target.nodeName) !== -1; + + where = this.tree.isBlockContainer(target) && !singleNodeLi && !table ? "start" : "after"; + } else if(block.parentNode !== this.getRoot()) { + target = block.parentNode; + where = "after"; + } + } + + + // no way to go? + if(!target) return null; + if(["TBODY", "THEAD"].indexOf(target.nodeName) !== -1) return null; + + // normalize + this.wrapAllInlineOrTextNodesAs("P", target, true); + + // make placeholder if needed + if(this.isFirstLiWithNestedList(block)) { + this.insertNewBlockAround(block, false, "P"); + } + + // perform move + var parent = block.parentNode; + var moved = this.insertNodeAt(block, target, where, true); + + // cleanup + if(!parent.hasChildNodes()) this.deleteNode(parent, true); + this.unwrapUnnecessaryParagraph(moved); + this.unwrapUnnecessaryParagraph(target); + + // remove placeholder + if(up) { + if(moved.previousSibling && this.isEmptyBlock(moved.previousSibling) && !moved.previousSibling.previousSibling && moved.parentNode.nodeName === "LI" && this.tree.isListContainer(moved.nextSibling)) { + this.deleteNode(moved.previousSibling); + } + } else { + if(moved.nextSibling && this.isEmptyBlock(moved.nextSibling) && !moved.previousSibling && moved.parentNode.nodeName === "LI" && this.tree.isListContainer(moved.nextSibling.nextSibling)) { + this.deleteNode(moved.nextSibling); + } + } + + this.correctEmptyElement(moved); + + return moved; + }, + + /** + * Remove given block + * + * @param {Element} block Target block + * @returns {Element} Nearest block of remove element + */ + removeBlock: function(block) { + var blockToMove; + + // if block is only child, select its parent as mover + while(block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var finder = function(node) {return this.tree.isBlock(node) && !this.tree.isAtomic(node) && !this.tree.isDescendantOf(block, node) && !this.tree.hasBlocks(node);}.bind(this); + var exitCondition = function(node) {return this.tree.isBlock(node) && !this.tree.isDescendantOf(this.getRoot(), node)}.bind(this); + + if(this.isFirstLiWithNestedList(block)) { + blockToMove = this.outdentListItem(block.nextSibling.firstChild); + this.deleteNode(blockToMove.previousSibling, true); + } else if(this.tree.isTableCell(block)) { + var rtable = new xq.RichTable(this, this.getParentElementOf(block, ["TABLE"])); + blockToMove = rtable.getBelowCellOf(block); + + // should not delete row when there's thead and the row is the only child of tbody + if( + block.parentNode.parentNode.nodeName === "TBODY" && + rtable.hasHeadingAtTop() && + rtable.getDom().tBodies[0].rows.length === 1) return blockToMove; + + blockToMove = blockToMove || + this.tree.findForward(block, finder, exitCondition) || + this.tree.findBackward(block, finder, exitCondition); + + this.deleteNode(block.parentNode, true); + } else { + blockToMove = blockToMove || + this.tree.findForward(block, finder, exitCondition) || + this.tree.findBackward(block, finder, exitCondition); + + if(!blockToMove) blockToMove = this.insertNodeAt(this.makeEmptyParagraph(), block, "after"); + + this.deleteNode(block, true); + } + if(!this.getRoot().hasChildNodes()) { + blockToMove = this.createElement("P"); + this.getRoot().appendChild(blockToMove); + this.correctEmptyElement(blockToMove); + } + + return blockToMove; + }, + + /** + * Removes trailing whitespaces of given block + * + * @param {Element} block Target block + */ + removeTrailingWhitespace: function(block) {throw "Not implemented"}, + + /** + * Extract given list item out and change its container's tag + * + * @param {Element} element LI or P which is a child of LI + * @param {String} type "OL", "UL" + * @param {String} className CSS class name + * + * @returns {Element} changed element + */ + changeListTypeTo: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var li = this.getParentElementOf(element, ["LI"]); + if(!li) throw "IllegalArgumentException"; + + var container = li.parentNode; + + this.splitContainerOf(li); + + var newContainer = this.insertNodeAt(this.createElement(type), container, "before"); + if(className) newContainer.className = className; + + this.insertNodeAt(li, newContainer, "start"); + this.deleteNode(container); + + this.mergeAdjustLists(newContainer); + + return element; + }, + + /** + * Split container of element into (maxium) three pieces. + */ + splitContainerOf: function(element, preserveElementItself, dir) { + if([element, element.parentNode].indexOf(this.getRoot()) !== -1) return element; + + var container = element.parentNode; + if(element.previousSibling && (!dir || dir.toLowerCase() === "prev")) { + var prev = this.createElement(container.nodeName); + this.copyAttributes(container, prev); + while(container.firstChild !== element) { + prev.appendChild(container.firstChild); + } + this.insertNodeAt(prev, container, "before"); + this.unwrapUnnecessaryParagraph(prev); + } + + if(element.nextSibling && (!dir || dir.toLowerCase() === "next")) { + var next = this.createElement(container.nodeName); + this.copyAttributes(container, next); + while(container.lastChild !== element) { + this.insertNodeAt(container.lastChild, next, "start"); + } + this.insertNodeAt(next, container, "after"); + this.unwrapUnnecessaryParagraph(next); + } + + if(!preserveElementItself) element = this.unwrapUnnecessaryParagraph(container) ? container : element; + return element; + }, + + /** + * TODO: Add specs + */ + splitParentElement: function(seperator) { + var parent = seperator.parentNode; + if(["HTML", "HEAD", "BODY"].indexOf(parent.nodeName) !== -1) throw "Illegal argument. Cannot seperate element[" + parent.nodeName + "]"; + + var previousSibling = seperator.previousSibling; + var nextSibling = seperator.nextSibling; + + var newElement = this.insertNodeAt(this.createElement(parent.nodeName), parent, "after"); + + var next; + while(next = seperator.nextSibling) newElement.appendChild(next); + + this.insertNodeAt(seperator, newElement, "start"); + this.copyAttributes(parent, newElement); + + return newElement; + }, + + /** + * TODO: Add specs + */ + splitElementUpto: function(seperator, element, excludeElement) { + while(seperator.previousSibling !== element) { + if(excludeElement && seperator.parentNode === element) break; + seperator = this.splitParentElement(seperator); + } + return seperator; + }, + + /** + * Merges two adjust elements + * + * @param {Element} element base element + * @param {boolean} withNext merge base element with next sibling + * @param {boolean} skip skip merge steps + */ + mergeElement: function(element, withNext, skip) { + this.wrapAllInlineOrTextNodesAs("P", element.parentNode, true); + + // find two block + if(withNext) { + var prev = element; + var next = this.tree.findForward( + element, + function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node !== element.parentNode}.bind(this) + ); + } else { + var next = element; + var prev = this.tree.findBackward( + element, + function(node) {return this.tree.isBlock(node) && !this.tree.isListContainer(node) && node !== element.parentNode}.bind(this) + ); + } + + // normalize next block + if(next && this.tree.isDescendantOf(this.getRoot(), next)) { + var nextContainer = next.parentNode; + if(this.tree.isBlockContainer(next)) { + nextContainer = next; + this.wrapAllInlineOrTextNodesAs("P", nextContainer, true); + next = nextContainer.firstChild; + } + } else { + next = null; + } + + // normalize prev block + if(prev && this.tree.isDescendantOf(this.getRoot(), prev)) { + var prevContainer = prev.parentNode; + if(this.tree.isBlockContainer(prev)) { + prevContainer = prev; + this.wrapAllInlineOrTextNodesAs("P", prevContainer, true); + prev = prevContainer.lastChild; + } + } else { + prev = null; + } + + try { + var containersAreTableCell = + prevContainer && (this.tree.isTableCell(prevContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(prevContainer.nodeName) !== -1) && + nextContainer && (this.tree.isTableCell(nextContainer) || ['TR', 'THEAD', 'TBODY'].indexOf(nextContainer.nodeName) !== -1); + + if(containersAreTableCell && prevContainer !== nextContainer) return null; + + // if next has margin, perform outdent + if((!skip || !prev) && next && nextContainer.nodeName !== "LI" && this.outdentElement(next)) return element; + + // nextContainer is first li and next of it is list container ([I] represents caret position): + // + // * A[I] + // * B + // * C + if(nextContainer && nextContainer.nodeName === 'LI' && this.tree.isListContainer(next.nextSibling)) { + // move child nodes and... + this.moveChildNodes(nextContainer, prevContainer); + + // merge two paragraphs + this.removePlaceHoldersAndEmptyNodes(prev); + this.moveChildNodes(next, prev); + this.deleteNode(next); + + return prev; + } + + // merge two list containers + if(nextContainer && nextContainer.nodeName === 'LI' && this.tree.isListContainer(nextContainer.parentNode.previousSibling)) { + this.mergeAdjustLists(nextContainer.parentNode.previousSibling, true, "next"); + return prev; + } + + if(next && !containersAreTableCell && prevContainer && prevContainer.nodeName === 'LI' && nextContainer && nextContainer.nodeName === 'LI' && prevContainer.parentNode.nextSibling === nextContainer.parentNode) { + var nextContainerContainer = nextContainer.parentNode; + this.moveChildNodes(nextContainer.parentNode, prevContainer.parentNode); + this.deleteNode(nextContainerContainer); + return prev; + } + + // merge two containers + if(next && !containersAreTableCell && prevContainer && prevContainer.nextSibling === nextContainer && ((skip && prevContainer.nodeName !== "LI") || (!skip && prevContainer.nodeName === "LI"))) { + this.moveChildNodes(nextContainer, prevContainer); + return prev; + } + + // unwrap container + if(nextContainer && nextContainer.nodeName !== "LI" && !this.getParentElementOf(nextContainer, ["TABLE"]) && !this.tree.isListContainer(nextContainer) && nextContainer !== this.getRoot() && !next.previousSibling) { + return this.unwrapElement(nextContainer, true); + } + + // delete table + if(withNext && nextContainer && nextContainer.nodeName === "TABLE") { + this.deleteNode(nextContainer, true); + return prev; + } else if(!withNext && prevContainer && this.tree.isTableCell(prevContainer) && !this.tree.isTableCell(nextContainer)) { + this.deleteNode(this.getParentElementOf(prevContainer, ["TABLE"]), true); + return next; + } + + // if prev is same with next, do nothing + if(prev === next) return null; + + // if there is a null block, do nothing + if(!prev || !next || !prevContainer || !nextContainer) return null; + + // if two blocks are not in the same table cell, do nothing + if(this.getParentElementOf(prev, ["TD", "TH"]) !== this.getParentElementOf(next, ["TD", "TH"])) return null; + + var prevIsEmpty = false; + + // cleanup empty block before merge + + // 1. cleanup prev node which ends with marker + + if( + xq.Browser.isTrident && + prev.childNodes.length >= 2 && + this.isMarker(prev.lastChild.previousSibling) && + prev.lastChild.nodeType === 3 && + prev.lastChild.nodeValue.length === 1 && + prev.lastChild.nodeValue.charCodeAt(0) === 160 + ) { + this.deleteNode(prev.lastChild); + } + + // 2. cleanup prev node (if prev is empty, then replace prev's tag with next's) + this.removePlaceHoldersAndEmptyNodes(prev); + if(this.isEmptyBlock(prev)) { + // replace atomic block with normal block so that following code don't need to care about atomic block + if(this.tree.isAtomic(prev)) prev = this.replaceTag("P", prev); + + prev = this.replaceTag(next.nodeName, prev) || prev; + prev.innerHTML = ""; + } else if(prev.firstChild === prev.lastChild && this.isMarker(prev.firstChild)) { + prev = this.replaceTag(next.nodeName, prev) || prev; + } + + // 3. cleanup next node + if(this.isEmptyBlock(next)) { + // replace atomic block with normal block so that following code don't need to care about atomic block + if(this.tree.isAtomic(next)) next = this.replaceTag("P", next); + + next.innerHTML = ""; + } + + // perform merge + this.moveChildNodes(next, prev); + this.deleteNode(next); + return prev; + } finally { + // cleanup + if(prevContainer && this.isEmptyBlock(prevContainer)) this.deleteNode(prevContainer, true); + if(nextContainer && this.isEmptyBlock(nextContainer)) this.deleteNode(nextContainer, true); + + if(prevContainer) this.unwrapUnnecessaryParagraph(prevContainer); + if(nextContainer) this.unwrapUnnecessaryParagraph(nextContainer); + } + }, + + /** + * Merges adjust list containers which has same tag name + * + * @param {Element} container target list container + * @param {boolean} force force adjust list container even if they have different list type + * @param {String} dir Specify merge direction: PREV or NEXT. If not supplied it will be merged with both direction. + */ + mergeAdjustLists: function(container, force, dir) { + var prev = container.previousSibling; + var isPrevSame = prev && (prev.nodeName === container.nodeName && prev.className === container.className); + if((!dir || dir.toLowerCase() === 'prev') && (isPrevSame || (force && this.tree.isListContainer(prev)))) { + while(prev.lastChild) { + this.insertNodeAt(prev.lastChild, container, "start"); + } + this.deleteNode(prev); + } + + var next = container.nextSibling; + var isNextSame = next && (next.nodeName === container.nodeName && next.className === container.className); + if((!dir || dir.toLowerCase() === 'next') && (isNextSame || (force && this.tree.isListContainer(next)))) { + while(next.firstChild) { + this.insertNodeAt(next.firstChild, container, "end"); + } + this.deleteNode(next); + } + }, + + /** + * Moves child nodes from one element into another. + * + * @param {Elemet} from source element + * @param {Elemet} to target element + */ + moveChildNodes: function(from, to) { + if(this.tree.isDescendantOf(from, to) || ["HTML", "HEAD"].indexOf(to.nodeName) !== -1) + throw "Illegal argument. Cannot move children of element[" + from.nodeName + "] to element[" + to.nodeName + "]"; + + if(from === to) return; + + while(from.firstChild) to.appendChild(from.firstChild); + }, + + /** + * Copies attributes from one element into another. + * + * @param {Element} from source element + * @param {Element} to target element + * @param {boolean} copyId copy ID attribute of source element + */ + copyAttributes: function(from, to, copyId) { + // IE overrides this + + var attrs = from.attributes; + if(!attrs) return; + + for(var i = 0; i < attrs.length; i++) { + if(attrs[i].nodeName === "class" && attrs[i].nodeValue) { + to.className = attrs[i].nodeValue; + } else if((copyId || "id" !== attrs[i].nodeName) && attrs[i].nodeValue) { + to.setAttribute(attrs[i].nodeName, attrs[i].nodeValue); + } + } + }, + + _indentElements: function(node, blocks, affect) { + for (var i=0; i < affect.length; i++) { + if (affect[i] === node || this.tree.isDescendantOf(affect[i], node)) + return; + } + leaves = this.tree.getLeavesAtEdge(node); + + if (blocks.includeElement(leaves[0])) { + var affected = this.indentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + if (blocks.includeElement(node)) { + var affected = this.indentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + var children=xq.$A(node.childNodes); + for (var i=0; i < children.length; i++) + this._indentElements(children[i], blocks, affect); + return; + }, + + indentElements: function(from, to) { + var blocks = this.getBlockElementsBetween(from, to); + var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + + var affect = []; + + leaves = this.tree.getLeavesAtEdge(top.parent); + if (blocks.includeElement(leaves[0])) { + var affected = this.indentElement(top.parent); + if (affected) + return [affected]; + } + + var children = xq.$A(top.parent.childNodes); + for (var i=0; i < children.length; i++) { + this._indentElements(children[i], blocks, affect); + } + + affect = affect.flatten() + return affect.length > 0 ? affect : blocks; + }, + + outdentElementsCode: function(node) { + if (node.tagName === 'LI') + node = node.parentNode; + if (node.tagName === 'OL' && node.className === 'code') + return true; + return false; + }, + + _outdentElements: function(node, blocks, affect) { + for (var i=0; i < affect.length; i++) { + if (affect[i] === node || this.tree.isDescendantOf(affect[i], node)) + return; + } + leaves = this.tree.getLeavesAtEdge(node); + + if (blocks.includeElement(leaves[0]) && !this.outdentElementsCode(leaves[0])) { + var affected = this.outdentElement(node, true); + if (affected) { + affect.push(affected); + return; + } + } + + if (blocks.includeElement(node)) { + var children = xq.$A(node.parentNode.childNodes); + var isCode = this.outdentElementsCode(node); + var affected = this.outdentElement(node, true, isCode); + if (affected) { + if (children.includeElement(affected) && this.tree.isListContainer(node.parentNode) && !isCode) { + for (var i=0; i < children.length; i++) { + if (blocks.includeElement(children[i]) && !affect.includeElement(children[i])) + affect.push(children[i]); + } + }else + affect.push(affected); + return; + } + } + + var children=xq.$A(node.childNodes); + for (var i=0; i < children.length; i++) + this._outdentElements(children[i], blocks, affect); + return; + }, + + outdentElements: function(from, to) { + var start, end; + + if (from.parentNode.tagName === 'LI') start=from.parentNode; + if (to.parentNode.tagName === 'LI') end=to.parentNode; + + var blocks = this.getBlockElementsBetween(from, to); + var top = this.tree.findCommonAncestorAndImmediateChildrenOf(from, to); + + var affect = []; + + leaves = this.tree.getLeavesAtEdge(top.parent); + if (blocks.includeElement(leaves[0]) && !this.outdentElementsCode(top.parent)) { + var affected = this.outdentElement(top.parent); + if (affected) + return [affected]; + } + + var children = xq.$A(top.parent.childNodes); + for (var i=0; i < children.length; i++) { + this._outdentElements(children[i], blocks, affect); + } + + if (from.offsetParent && to.offsetParent) { + start = from; + end = to; + }else if (blocks.first().offsetParent && blocks.last().offsetParent) { + start = blocks.first(); + end = blocks.last(); + } + + affect = affect.flatten() + if (!start || !start.offsetParent) + start = affect.first(); + if (!end || !end.offsetParent) + end = affect.last(); + + return this.getBlockElementsBetween(start, end); + }, + + /** + * Performs indent by increasing element's margin-left + */ + indentElement: function(element, noParent, forceMargin) { + if( + !forceMargin && + (element.nodeName === "LI" || (!this.tree.isListContainer(element) && !element.previousSibling && element.parentNode.nodeName === "LI")) + ) return this.indentListItem(element, noParent); + + var root = this.getRoot(); + if(!element || element === root) return null; + + if (element.parentNode !== root && !element.previousSibling && !noParent) element=element.parentNode; + + var margin = element.style.marginLeft; + var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; + + cssValue.value += 2; + element.style.marginLeft = cssValue.value + cssValue.unit; + + return element; + }, + + /** + * Performs outdent by decreasing element's margin-left + */ + outdentElement: function(element, noParent, forceMargin) { + if(!forceMargin && element.nodeName === "LI") return this.outdentListItem(element, noParent); + + var root = this.getRoot(); + if(!element || element === root) return null; + + var margin = element.style.marginLeft; + + var cssValue = margin ? this._getCssValue(margin, "px") : {value:0, unit:"em"}; + if(cssValue.value === 0) { + return element.previousSibling || forceMargin ? + null : + this.outdentElement(element.parentNode, noParent); + } + + cssValue.value -= 2; + element.style.marginLeft = cssValue.value <= 0 ? "" : cssValue.value + cssValue.unit; + if(element.style.cssText === "") element.removeAttribute("style"); + + return element; + }, + + /** + * Performs indent for list item + */ + indentListItem: function(element, treatListAsNormalBlock) { + var li = this.getParentElementOf(element, ["LI"]); + var container = li.parentNode; + var prev = li.previousSibling; + if(!li.previousSibling) return this.indentElement(container); + + if(li.parentNode.nodeName === "OL" && li.parentNode.className === "code") return this.indentElement(li, treatListAsNormalBlock, true); + + if(!prev.lastChild) prev.appendChild(this.makePlaceHolder()); + + var targetContainer = + this.tree.isListContainer(prev.lastChild) ? + // if there's existing list container, select it as target container + prev.lastChild : + // if there's nothing, create new one + this.insertNodeAt(this.createElement(container.nodeName), prev, "end"); + + this.wrapAllInlineOrTextNodesAs("P", prev, true); + + // perform move + targetContainer.appendChild(li); + + // flatten nested list + if(!treatListAsNormalBlock && li.lastChild && this.tree.isListContainer(li.lastChild)) { + var childrenContainer = li.lastChild; + var child; + while(child = childrenContainer.lastChild) { + this.insertNodeAt(child, li, "after"); + } + this.deleteNode(childrenContainer); + } + + this.unwrapUnnecessaryParagraph(li); + + return li; + }, + + /** + * Performs outdent for list item + * + * @return {Element} outdented list item or null if no outdent performed + */ + outdentListItem: function(element, treatListAsNormalBlock) { + var li = this.getParentElementOf(element, ["LI"]); + var container = li.parentNode; + + if(!li.previousSibling) { + var performed = this.outdentElement(container); + if(performed) return performed; + } + + if(li.parentNode.nodeName === "OL" && li.parentNode.className === "code") return this.outdentElement(li, treatListAsNormalBlock, true); + + var parentLi = container.parentNode; + if(parentLi.nodeName !== "LI") return null; + + if(treatListAsNormalBlock) { + while(container.lastChild !== li) { + this.insertNodeAt(container.lastChild, parentLi, "after"); + } + } else { + // make next siblings as children + if(li.nextSibling) { + var targetContainer = + li.lastChild && this.tree.isListContainer(li.lastChild) ? + // if there's existing list container, select it as target container + li.lastChild : + // if there's nothing, create new one + this.insertNodeAt(this.createElement(container.nodeName), li, "end"); + + this.copyAttributes(container, targetContainer); + + var sibling; + while(sibling = li.nextSibling) { + targetContainer.appendChild(sibling); + } + } + } + + // move current LI into parent LI's next sibling + li = this.insertNodeAt(li, parentLi, "after"); + + // remove empty container + if(container.childNodes.length === 0) this.deleteNode(container); + + if(li.firstChild && this.tree.isListContainer(li.firstChild)) { + this.insertNodeAt(this.makePlaceHolder(), li, "start"); + } + + this.wrapAllInlineOrTextNodesAs("P", li); + this.unwrapUnnecessaryParagraph(parentLi); + + return li; + }, + + /** + * Performs justification + * + * @param {Element} block target element + * @param {String} dir one of "LEFT", "CENTER", "RIGHT", "BOTH" + */ + justifyBlock: function(block, dir) { + // if block is only child, select its parent as mover + while(block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var styleValue = dir.toLowerCase() === "both" ? "justify" : dir; + if(styleValue === "left") { + block.style.textAlign = ""; + if(block.style.cssText === "") block.removeAttribute("style"); + } else { + block.style.textAlign = styleValue; + } + return block; + }, + + justifyBlocks: function(blocks, dir) { + for(var i = 0; i < blocks.length; i++) { + this.justifyBlock(blocks[i], dir); + } + return blocks; + }, + + /** + * Turn given element into list. If the element is a list already, it will be reversed into normal element. + * + * @param {Element} element target element + * @param {String} type one of "UL", "OL" + * @param {String} className CSS className + * @returns {Element} affected element + */ + applyList: function(element, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var containerTag = type; + + if(element.nodeName === "LI" || (element.parentNode.nodeName === "LI" && !element.previousSibling)) { + var element = this.getParentElementOf(element, ["LI"]); + var container = element.parentNode; + if(container.nodeName === containerTag && container.className === className) { + return this.extractOutElementFromParent(element); + } else { + return this.changeListTypeTo(element, type, className); + } + } else { + return this.turnElementIntoListItem(element, type, className); + } + }, + + applyLists: function(from, to, type, className) { + type = type.toUpperCase(); + className = className || ""; + + var containerTag = type; + var blocks = this.getBlockElementsBetween(from, to); + + // LIs or Non-containing blocks + var whole = blocks.findAll(function(e) { + return e.nodeName === "LI" || !this.tree.isBlockContainer(e); + }.bind(this)); + + // LIs + var listItems = whole.findAll(function(e) {return e.nodeName === "LI"}.bind(this)); + + // Non-containing blocks which is not a descendant of any LIs selected above(listItems). + var normalBlocks = whole.findAll(function(e) { + return e.nodeName !== "LI" && + !(e.parentNode.nodeName === "LI" && !e.previousSibling && !e.nextSibling) && + !this.tree.isDescendantOf(listItems, e) + }.bind(this)); + + var diffListItems = listItems.findAll(function(e) { + return e.parentNode.nodeName !== containerTag; + }.bind(this)); + + // Conditions needed to determine mode + var hasNormalBlocks = normalBlocks.length > 0; + var hasDifferentListStyle = diffListItems.length > 0; + + var blockToHandle = null; + + if(hasNormalBlocks) { + blockToHandle = normalBlocks; + } else if(hasDifferentListStyle) { + blockToHandle = diffListItems; + } else { + blockToHandle = listItems; + } + + // perform operation + for(var i = 0; i < blockToHandle.length; i++) { + var block = blockToHandle[i]; + + // preserve original index to restore selection + var originalIndex = blocks.indexOf(block); + blocks[originalIndex] = this.applyList(block, type, className); + } + + return blocks; + }, + + /** + * Insert place-holder for given empty element. Empty element does not displayed and causes many editing problems. + * + * @param {Element} element empty element + */ + correctEmptyElement: function(element) {throw "Not implemented"}, + + /** + * Corrects current block-only-container to do not take any non-block element or node. + */ + correctParagraph: function() {throw "Not implemented"}, + + /** + * Makes place-holder for empty element. + * + * @returns {Node} Platform specific place holder + */ + makePlaceHolder: function() {throw "Not implemented"}, + + /** + * Makes place-holder string. + * + * @returns {String} Platform specific place holder string + */ + makePlaceHolderString: function() {throw "Not implemented"}, + + /** + * Makes empty paragraph which contains only one place-holder + */ + makeEmptyParagraph: function() {throw "Not implemented"}, + + /** + * Applies background color to selected area + * + * @param {Object} color valid CSS color value + */ + applyBackgroundColor: function(color) {throw "Not implemented";}, + + /** + * Applies foreground color to selected area + * + * @param {Object} color valid CSS color value + */ + applyForegroundColor: function(color) { + this.execCommand("forecolor", color); + }, + + /** + * Applies font face to selected area + * + * @param {String} face font face + */ + applyFontFace: function(face) { + this.execCommand("fontname", face); + }, + + /** + * Applies font size to selected area + * + * @param {Number} size font size (px) + */ + applyFontSize: function(size) { + this.execCommand("fontsize", size); + }, + + execCommand: function(commandId, param) {throw "Not implemented";}, + + applyRemoveFormat: function() {throw "Not implemented";}, + applyEmphasis: function() {throw "Not implemented";}, + applyStrongEmphasis: function() {throw "Not implemented";}, + applyStrike: function() {throw "Not implemented";}, + applyUnderline: function() {throw "Not implemented";}, + applySuperscription: function() { + this.execCommand("superscript"); + }, + applySubscription: function() { + this.execCommand("subscript"); + }, + indentBlock: function(element, treatListAsNormalBlock) { + return (!element.previousSibling && element.parentNode.nodeName === "LI") ? + this.indentListItem(element, treatListAsNormalBlock) : + this.indentElement(element); + }, + outdentBlock: function(element, treatListAsNormalBlock) { + while(true) { + if(!element.previousSibling && element.parentNode.nodeName === "LI") { + element = this.outdentListItem(element, treatListAsNormalBlock); + return element; + } else { + var performed = this.outdentElement(element); + if(performed) return performed; + + // first-child can outdent container + if(!element.previousSibling) { + element = element.parentNode; + } else { + break; + } + } + } + + return null; + }, + wrapBlock: function(tag, start, end) { + if(this.tree._blockTags.indexOf(tag) === -1) throw "Unsuppored block container: [" + tag + "]"; + if(!start) start = this.getCurrentBlockElement(); + if(!end) end = start; + + // Check if the selection captures valid fragement + var validFragment = false; + + if(start === end) { + // are they same block? + validFragment = true; + } else if(start.parentNode === end.parentNode && !start.previousSibling && !end.nextSibling) { + // are they covering whole parent? + validFragment = true; + start = end = start.parentNode; + } else { + // are they siblings of non-LI blocks? + validFragment = + (start.parentNode === end.parentNode) && + (start.nodeName !== "LI"); + } + + if(!validFragment) return null; + + var wrapper = this.createElement(tag); + + if(start === end) { + // They are same. + if(this.tree.isBlockContainer(start) && !this.tree.isListContainer(start)) { + // It's a block container. Wrap its contents. + if(this.tree.isBlockOnlyContainer(wrapper)) { + this.correctEmptyElement(start); + this.wrapAllInlineOrTextNodesAs("P", start, true); + } + this.moveChildNodes(start, wrapper); + start.appendChild(wrapper); + } else { + // It's not a block container. Wrap itself. + wrapper = this.insertNodeAt(wrapper, start, "after"); + wrapper.appendChild(start); + } + + this.correctEmptyElement(wrapper); + } else { + // They are siblings. Wrap'em all. + wrapper = this.insertNodeAt(wrapper, start, "before"); + var node = start; + + while(node !== end) { + next = node.nextSibling; + wrapper.appendChild(node); + node = next; + } + wrapper.appendChild(node); + } + + return wrapper; + }, + + + + ///////////////////////////////////////////// + // Focus/Caret/Selection + + /** + * Gives focus to root element's window + */ + focus: function() {throw "Not implemented";}, + + /** + * Returns selection object + */ + sel: function() {throw "Not implemented";}, + + /** + * Returns range object + */ + rng: function() {throw "Not implemented";}, + + /** + * Returns true if DOM has selection + */ + hasSelection: function() {throw "Not implemented";}, + + /** + * Returns true if root element's window has selection + */ + hasFocus: function() { + return this.focused; + }, + + /** + * Adjust scrollbar to make the element visible in current viewport. + * + * @param {Element} element Target element + * @param {boolean} toTop Align element to top of the viewport + * @param {boolean} moveCaret Move caret to the element + */ + scrollIntoView: function(element, toTop, moveCaret) { + element.scrollIntoView(toTop); + if(moveCaret) this.placeCaretAtStartOf(element); + }, + + /** + * Select all document + */ + selectAll: function() { + return this.execCommand('selectall'); + }, + + /** + * Select specified element. + * + * @param {Element} element element to select + * @param {boolean} entireElement true to select entire element, false to select inner content of element + */ + selectElement: function(node, entireElement) {throw "Not implemented"}, + + /** + * Select all elements between two blocks(inclusive). + * + * @param {Element} start start of selection + * @param {Element} end end of selection + */ + selectBlocksBetween: function(start, end) {throw "Not implemented"}, + + /** + * Delete selected area + */ + deleteSelection: function() {throw "Not implemented"}, + + /** + * Collapses current selection. + * + * @param {boolean} toStart true to move caret to start of selected area. + */ + collapseSelection: function(toStart) {throw "Not implemented"}, + + /** + * Returns selected area as HTML string + */ + getSelectionAsHtml: function() {throw "Not implemented"}, + + /** + * Returns selected area as text string + */ + getSelectionAsText: function() {throw "Not implemented"}, + + /** + * Places caret at start of the element + * + * @param {Element} element Target element + */ + placeCaretAtStartOf: function(element) {throw "Not implemented"}, + + + /** + * Checks if the caret is place at start of the block + */ + isCaretAtBlockStart: function() { + if(this.isCaretAtEmptyBlock()) return true; + if(this.hasSelection()) return false; + var node = this.getCurrentBlockElement(); + var marker = this.pushMarker(); + + var isTrue = false; + while (node = this.getFirstChild(node)) { + if (node === marker) { + isTrue = true; + break; + } + } + + this.popMarker(); + + return isTrue; + }, + + /** + * Checks if the caret is place at end of the block + */ + isCaretAtBlockEnd: function() {throw "Not implemented"}, + + /** + * Checks if the node is empty-text-node or not + */ + isEmptyTextNode: function(node) { + return node.nodeType === 3 && (node.nodeValue.length === 0 || (node.nodeValue.length === 1 && (node.nodeValue.charAt(0) === 32 || node.nodeValue.charAt(0) === 160))); + }, + + /** + * Checks if the caret is place in empty block element + */ + isCaretAtEmptyBlock: function() { + return this.isEmptyBlock(this.getCurrentBlockElement()); + }, + + /** + * Saves current selection info + * + * @returns {Object} Bookmark for selection + */ + saveSelection: function() {throw "Not implemented"}, + + /** + * Restores current selection info + * + * @param {Object} bookmark Bookmark + */ + restoreSelection: function(bookmark) {throw "Not implemented"}, + + /** + * Create marker + */ + createMarker: function() { + var marker = this.createElement("SPAN"); + marker.id = "xquared_marker_" + (this._lastMarkerId++); + marker.className = "xquared_marker"; + return marker; + }, + + /** + * Create and insert marker into current caret position. + * Marker is an inline element which has no child nodes. It can be used with many purposes. + * For example, You can push marker to mark current caret position. + * + * @returns {Element} marker + */ + pushMarker: function() { + var marker = this.createMarker(); + return this.insertNode(marker); + }, + + /** + * Removes last marker + * + * @params {boolean} moveCaret move caret into marker before delete. + */ + popMarker: function(moveCaret) { + var id = "xquared_marker_" + (--this._lastMarkerId); + var marker = this.$(id); + if(!marker) return; + + if(moveCaret) { + this.selectElement(marker, true); + this.collapseSelection(false); + } + + this.deleteNode(marker); + }, + + + + ///////////////////////////////////////////// + // Query methods + + isMarker: function(node) { + return (node.nodeType === 1 && node.nodeName === "SPAN" && node.className === "xquared_marker"); + }, + + isFirstBlockOfBody: function(block) { + var root = this.getRoot(); + if(this.isFirstLiWithNestedList(block)) block = block.parentNode; + + var found = this.tree.findBackward( + block, + function(node) { + return node === root || (this.tree.isBlock(node) && !this.tree.isBlockOnlyContainer(node)); + }.bind(this) + ); + + return found === root; + }, + + /** + * Returns outer HTML of given element + */ + getOuterHTML: function(element) {throw "Not implemented"}, + + /** + * Returns inner text of given element + * + * @param {Element} element Target element + * @returns {String} Text string + */ + getInnerText: function(element) { + return element.innerHTML.stripTags(); + }, + + /** + * Checks if given node is place holder or not. + * + * @param {Node} node DOM node + */ + isPlaceHolder: function(node) {throw "Not implemented"}, + + /** + * Checks if given block is the first LI whose next sibling is a nested list. + * + * @param {Element} block Target block + */ + isFirstLiWithNestedList: function(block) { + return !block.previousSibling && + block.parentNode.nodeName === "LI" && + this.tree.isListContainer(block.nextSibling); + }, + + /** + * Search all links within given element + * + * @param {Element} [element] Container element. If not given, the root element will be used. + * @param {Array} [found] if passed, links will be appended into this array. + * @returns {Array} Array of anchors. It returns empty array if there's no links. + */ + searchAnchors: function(element, found) { + if(!element) element = this.getRoot(); + if(!found) found = []; + + var anchors = element.getElementsByTagName("A"); + for(var i = 0; i < anchors.length; i++) { + found.push(anchors[i]); + } + + return found; + }, + + /** + * Search all headings within given element + * + * @param {Element} [element] Container element. If not given, the root element will be used. + * @param {Array} [found] if passed, headings will be appended into this array. + * @returns {Array} Array of headings. It returns empty array if there's no headings. + */ + searchHeadings: function(element, found) { + if(!element) element = this.getRoot(); + if(!found) found = []; + + var regexp = /^h[1-6]/ig; + var nodes = element.childNodes; + if (!nodes) return []; + + for(var i = 0; i < nodes.length; i++) { + var isContainer = nodes[i] && this.tree._blockContainerTags.indexOf(nodes[i].nodeName) !== -1; + var isHeading = nodes[i] && nodes[i].nodeName.match(regexp); + + if (isContainer) { + this.searchHeadings(nodes[i], found); + } else if (isHeading) { + found.push(nodes[i]); + } + } + + return found; + }, + + /** + * Collect structure and style informations of given element. + * + * @param {Element} element target element + * @returns {Object} object that contains information: {em: true, strong: false, block: "p", list: "ol", ...} + */ + collectStructureAndStyle: function(element) { + if(!element || element.nodeName === "#document") return {}; + + var block = this.getParentBlockElementOf(element); + + if(block === null || (xq.Browser.isTrident && ["ready", "complete"].indexOf(block.readyState) === -1)) return {}; + + var parents = this.tree.collectParentsOf(element, true, function(node) {return block.parentNode === node}); + var blockName = block.nodeName; + + var info = {}; + var doc = this.getDoc(); + var em = doc.queryCommandState("Italic"); + var strong = doc.queryCommandState("Bold"); + var strike = doc.queryCommandState("Strikethrough"); + var underline = doc.queryCommandState("Underline") && !this.getParentElementOf(element, ["A"]); + var superscription = doc.queryCommandState("superscript"); + var subscription = doc.queryCommandState("subscript"); + var foregroundColor = doc.queryCommandValue("forecolor"); + var fontName = doc.queryCommandValue("fontname"); + var fontSize = doc.queryCommandValue("fontsize"); + // @WORKAROUND: Trident's fontSize value is affected by CSS + if(xq.Browser.isTrident && fontSize === "5" && this.getParentElementOf(element, ["H1", "H2", "H3", "H4", "H5", "H6"])) fontSize = ""; + + // @TODO: remove conditional + var backgroundColor; + if(xq.Browser.isGecko) { + this.execCommand("styleWithCSS", "true"); + try { + backgroundColor = doc.queryCommandValue("hilitecolor"); + } catch(e) { + // if there's selection and the first element of the selection is + // an empty block... + backgroundColor = ""; + } + this.execCommand("styleWithCSS", "false"); + } else { + backgroundColor = doc.queryCommandValue("backcolor"); + } + + // if block is only child, select its parent + while(block.parentNode && block.parentNode !== this.getRoot() && !block.previousSibling && !block.nextSibling && !this.tree.isListContainer(block.parentNode)) { + block = block.parentNode; + } + + var list = false; + if(block.nodeName === "LI") { + var parent = block.parentNode; + var isCode = parent.nodeName === "OL" && parent.className === "code"; + var hasClass = parent.className.length > 0; + if(isCode) { + list = "CODE"; + } else if(hasClass) { + list = false; + } else { + list = parent.nodeName; + } + } + + var justification = block.style.textAlign || "left"; + + return { + block:blockName, + em: em, + strong: strong, + strike: strike, + underline: underline, + superscription: superscription, + subscription: subscription, + list: list, + justification: justification, + foregroundColor: foregroundColor, + backgroundColor: backgroundColor, + fontSize: fontSize, + fontName: fontName + }; + }, + + /** + * Checks if the element has one or more important attributes: id, class, style + * + * @param {Element} element Target element + */ + hasImportantAttributes: function(element) {throw "Not implemented"}, + + /** + * Checks if the element is empty or not. Place-holder is not counted as a child. + * + * @param {Element} element Target element + */ + isEmptyBlock: function(element) {throw "Not implemented"}, + + /** + * Returns element that contains caret. + */ + getCurrentElement: function() {throw "Not implemented"}, + + /** + * Returns block element that contains caret. Trident overrides this method. + */ + getCurrentBlockElement: function() { + var cur = this.getCurrentElement(); + if(!cur) return null; + + var block = this.getParentBlockElementOf(cur); + if(!block) return null; + + return (block.nodeName === "BODY") ? null : block; + }, + + /** + * Returns parent block element of parameter. + * If the parameter itself is a block, it will be returned. + * + * @param {Element} element Target element + * + * @returns {Element} Element or null + */ + getParentBlockElementOf: function(element) { + while(element) { + if(this.tree._blockTags.indexOf(element.nodeName) !== -1) return element; + element = element.parentNode; + } + return null; + }, + + /** + * Returns parent element of parameter which has one of given tag name. + * If the parameter itself has the same tag name, it will be returned. + * + * @param {Element} element Target element + * @param {Array} tagNames Array of string which contains tag names + * + * @returns {Element} Element or null + */ + getParentElementOf: function(element, tagNames) { + while(element) { + if(tagNames.indexOf(element.nodeName) !== -1) return element; + element = element.parentNode; + } + return null; + }, + + /** + * Collects all block elements between two elements + * + * @param {Element} from Start element(inclusive) + * @param {Element} to End element(inclusive) + */ + getBlockElementsBetween: function(from, to) { + return this.tree.collectNodesBetween(from, to, function(node) { + return node.nodeType === 1 && this.tree.isBlock(node); + }.bind(this)); + }, + + /** + * Returns block element that contains selection start. + * + * This method will return exactly same result with getCurrentBlockElement method + * when there's no selection. + */ + getBlockElementAtSelectionStart: function() {throw "Not implemented"}, + + /** + * Returns block element that contains selection end. + * + * This method will return exactly same result with getCurrentBlockElement method + * when there's no selection. + */ + getBlockElementAtSelectionEnd: function() {throw "Not implemented"}, + + /** + * Returns blocks at each edge of selection(start and end). + * + * TODO: implement ignoreEmptyEdges for FF + * + * @param {boolean} naturalOrder Mak the start element always comes before the end element + * @param {boolean} ignoreEmptyEdges Prevent some browser(Gecko) from selecting one more block than expected + */ + getBlockElementsAtSelectionEdge: function(naturalOrder, ignoreEmptyEdges) {throw "Not implemented"}, + + /** + * Returns array of selected block elements + */ + getSelectedBlockElements: function() { + var selectionEdges = this.getBlockElementsAtSelectionEdge(true, true); + var start = selectionEdges[0]; + var end = selectionEdges[1]; + + return this.tree.collectNodesBetween(start, end, function(node) { + return node.nodeType === 1 && this.tree.isBlock(node); + }.bind(this)); + }, + + /** + * Get element by ID + * + * @param {String} id Element's ID + * @returns {Element} element or null + */ + getElementById: function(id) {return this.getDoc().getElementById(id)}, + + /** + * Shortcut for #getElementById + */ + $: function(id) {return this.getElementById(id)}, + + /** + * Returns first "valid" child of given element. It ignores empty textnodes. + * + * @param {Element} element Target element + * @returns {Node} first child node or null + */ + getFirstChild: function(element) { + if(!element) return null; + + var nodes = xq.$A(element.childNodes); + return nodes.find(function(node) {return !this.isEmptyTextNode(node)}.bind(this)); + }, + + /** + * Returns last "valid" child of given element. It ignores empty textnodes and place-holders. + * + * @param {Element} element Target element + * @returns {Node} last child node or null + */ + getLastChild: function(element) {throw "Not implemented"}, + + getNextSibling: function(node) { + while(node = node.nextSibling) { + if(node.nodeType !== 3 || !node.nodeValue.isBlank()) break; + } + return node; + }, + + getBottommostFirstChild: function(node) { + while(node.firstChild && node.nodeType === 1) node = node.firstChild; + return node; + }, + + getBottommostLastChild: function(node) { + while(node.lastChild && node.nodeType === 1) node = node.lastChild; + return node; + }, + + /** @private */ + _getCssValue: function(str, defaultUnit) { + if(!str || str.length === 0) return {value:0, unit:defaultUnit}; + + var tokens = str.match(/(\d+)(.*)/); + return { + value:parseInt(tokens[1]), + unit:tokens[2] || defaultUnit + }; + } +}); \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/rdom/Factory.js b/modules/editor/skins/xquared/javascripts/rdom/Factory.js new file mode 100644 index 000000000..c9b7a53bd --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/rdom/Factory.js @@ -0,0 +1,18 @@ +/** + * Creates and returns instance of browser specific implementation. + * + * @requires Xquared.js + * @requires rdom/Base.js + * @requires rdom/Trident.js + * @requires rdom/Gecko.js + * @requires rdom/Webkit.js + */ +xq.rdom.Base.createInstance = function() { + if(xq.Browser.isTrident) { + return new xq.rdom.Trident(); + } else if(xq.Browser.isWebkit) { + return new xq.rdom.Webkit(); + } else { + return new xq.rdom.Gecko(); + } +} \ No newline at end of file diff --git a/modules/editor/skins/xquared/javascripts/rdom/Gecko.js b/modules/editor/skins/xquared/javascripts/rdom/Gecko.js new file mode 100644 index 000000000..3b9c932f6 --- /dev/null +++ b/modules/editor/skins/xquared/javascripts/rdom/Gecko.js @@ -0,0 +1,48 @@ +/** + * @requires Xquared.js + * @requires rdom/W3.js + */ +xq.rdom.Gecko = xq.Class(xq.rdom.W3, + /** + * @name xq.rdom.Gecko + * @lends xq.rdom.Gecko.prototype + * @extends xq.rdom.W3 + * @constructor + */ + { + makePlaceHolder: function() { + var holder = this.createElement("BR"); + holder.setAttribute("type", "_moz"); + return holder; + }, + + makePlaceHolderString: function() { + return '
'; + }, + + makeEmptyParagraph: function() { + return this.createElementFromHtml('
"); + }, + + isPlaceHolder: function(node) { + return false; + }, + + getOuterHTML: function(element) { + return element.outerHTML; + }, + + getCurrentBlockElement: function() { + var cur = this.getCurrentElement(); + if(!cur) return null; + + var block = this.getParentBlockElementOf(cur); + if(!block) return null; + + if(block.nodeName === "BODY") { + // Atomic block such as HR + var newParagraph = this.insertNode(this.makeEmptyParagraph()); + var next = newParagraph.nextSibling; + if(this.tree.isAtomic(next)) { + this.deleteNode(newParagraph); + return next; + } + } else { + return block; + } + }, + + insertNode: function(node) { + if(this.hasSelection()) this.collapseSelection(true); + + this.rng().pasteHTML(''); + var marker = this.$('xquared_temp'); + if(node.id === 'xquared_temp') return marker; + + if(marker) marker.replaceNode(node); + return node; + }, + + removeTrailingWhitespace: function(block) { + if(!block) return; + + // @TODO: reimplement to handle atomic tags and so on. (use DomTree) + if(this.tree.isBlockOnlyContainer(block)) return; + if(this.isEmptyBlock(block)) return; + + var text = block.innerText; + var html = block.innerHTML; + var lastCharCode = text.charCodeAt(text.length - 1); + if(text.length <= 1 || [32,160].indexOf(lastCharCode) === -1) return; + + // shortcut for most common case + if(text == html.replace(/ /g, " ")) { + block.innerHTML = html.replace(/ $/, ""); + return; + } + + var node = block; + while(node && node.nodeType !== 3) node = node.lastChild; + if(!node) return; + + // DO NOT REMOVE OR MODIFY FOLLOWING CODE. Modifying following code will crash IE7 + var nodeValue = node.nodeValue; + if(nodeValue.length <= 1) { + this.deleteNode(node, true); + } else { + node.nodeValue = nodeValue.substring(0, nodeValue.length - 1); + } + }, + + correctEmptyElement: function(element) { + if(!element || element.nodeType !== 1 || this.tree.isAtomic(element)) return; + + if(element.firstChild) { + this.correctEmptyElement(element.firstChild); + } else { + element.innerHTML = " "; + } + }, + + copyAttributes: function(from, to, copyId) { + to.mergeAttributes(from, !copyId); + }, + + correctParagraph: function() { + if(!this.hasFocus()) return false; + if(this.hasSelection()) return false; + + var block = this.getCurrentElement(); + + // if caret is at + // * atomic block level elements(HR) or + // * ... + // then following is true + if(this.tree.isBlockOnlyContainer(block)) { + // check for atomic block element such as HR + block = this.insertNode(this.makeEmptyParagraph()); + if(this.tree.isAtomic(block.nextSibling)) { + // @WORKAROUND: + // At this point, HR has a caret but getCurrentElement() doesn't return the HR and + // I couldn't find a way to get this HR. So I have to keep this reference. + // I will be used in Editor._handleEnter. + this.recentHR = block.nextSibling; + this.deleteNode(block); + return false; + } else { + // I can't remember exactly when following is executed and what it does :-( + // * Case 1: Performing Ctrl+A and Ctrl+X repeatedly + // * ... + var nextBlock = this.tree.findForward( + block, + function(node) {return this.tree.isBlock(node) && !this.tree.isBlockOnlyContainer(node)}.bind(this) + ); + + if(nextBlock) { + this.deleteNode(block); + this.placeCaretAtStartOf(nextBlock); + } else { + this.placeCaretAtStartOf(block); + } + + return true; + } + } else { + block = this.getCurrentBlockElement(); + if(block.nodeType === 3) block = block.parentNode; + + if(this.tree.hasMixedContents(block)) { + var marker = this.pushMarker(); + this.wrapAllInlineOrTextNodesAs("P", block, true); + this.popMarker(true); + return true; + } else if((this.tree.isTextOrInlineNode(block.previousSibling) || this.tree.isTextOrInlineNode(block.nextSibling)) && this.tree.hasMixedContents(block.parentNode)) { + // @WORKAROUND: + // IE에서는 Block과 Inline/Text가 인접한 경우 getCurrentElement 등이 오작동한다. + // 따라서 현재 Block 주변까지 한번에 잡아주어야 한다. + this.wrapAllInlineOrTextNodesAs("P", block.parentNode, true); + return true; + } else { + return false; + } + } + }, + + + + ////// + // Commands + execCommand: function(commandId, param) { + return this.getDoc().execCommand(commandId, false, param); + }, + + applyBackgroundColor: function(color) { + this.execCommand("BackColor", color); + }, + + applyEmphasis: function() { + // Generate tag. It will be replaced with
"+this.rdom.makePlaceHolderString()+"
"); -B.write("