X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/61143e615dfb903cd11c11539b7259cc4bc8b9fe..5b89eff5afcb92f0e7b20daf62eae30aeb7b4e1c:/modules/documentCanvas/canvas/documentElement.js?ds=sidebyside diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index 94b8422..b7e8352 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -1,8 +1,11 @@ define([ 'libs/jquery-1.9.1.min', 'libs/underscore-min', -'modules/documentCanvas/classAttributes' -], function($, _, classAttributes) { +'modules/documentCanvas/classAttributes', +'modules/documentCanvas/canvas/utils', +'modules/documentCanvas/canvas/widgets', +'modules/documentCanvas/canvas/wlxmlManagers' +], function($, _, classAttributes, utils, widgets, wlxmlManagers) { 'use strict'; @@ -31,9 +34,9 @@ $.extend(DocumentElement, { fromHTMLElement: function(htmlElement, canvas) { var $element = $(htmlElement); - if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('wlxml-tag')) + if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); - if($element.attr('wlxml-text') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('wlxml-text') !== undefined)) + if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined)) return DocumentTextElement.fromHTMLElement(htmlElement, canvas); return undefined; } @@ -43,11 +46,14 @@ $.extend(DocumentElement.prototype, { _setupDOMHandler: function(htmlElement) { this.$element = $(htmlElement); }, + bound: function() { + return this.canvas !== undefined; + }, dom: function() { return this.$element; }, parent: function() { - var parents = this.$element.parents('[wlxml-tag]'); + var parents = this.$element.parents('[document-node-element]'); if(parents.length) return DocumentElement.fromHTMLElement(parents[0], this.canvas); return null; @@ -68,17 +74,12 @@ $.extend(DocumentElement.prototype, { }, wrapWithNodeElement: function(wlxmlNode) { - var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass}); + var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass}, this); this.dom().replaceWith(wrapper.dom()); wrapper.append(this); return wrapper; }, - detach: function() { - this.dom().detach(); - this.canvas = null; - }, - markAsCurrent: function() { this.canvas.markAsCurrent(this); }, @@ -100,8 +101,34 @@ $.extend(DocumentElement.prototype, { return toret; }, + getPreviousTextElement: function(includeInvisible) { + return this.getNearestTextElement('above', includeInvisible); + }, + + getNextTextElement: function(includeInvisible) { + return this.getNearestTextElement('below', includeInvisible); + }, + + getNearestTextElement: function(direction, includeInvisible) { + includeInvisible = includeInvisible !== undefined ? includeInvisible : false; + var selector = '[document-text-element]' + (includeInvisible ? '' : ':visible'); + return this.canvas.getDocumentElement(utils.nearestInDocumentOrder(selector, direction, this.dom()[0])); + }, + isVisible: function() { return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata'; + }, + + isInsideList: function() { + return this.parents().some(function(parent) { + return parent.is('list'); + }); + }, + + exec: function(method) { + var manager = this.data('_wlxmlManager'); + if(manager[method]) + return manager[method].apply(manager, Array.prototype.slice.call(arguments, 1)); } }); @@ -112,22 +139,39 @@ var DocumentNodeElement = function(htmlElement, canvas) { }; $.extend(DocumentNodeElement, { - createDOM: function(params) { + createDOM: function(params, canvas) { var dom = $('
') - .attr('wlxml-tag', params.tag); - if(params.klass) - dom.attr('wlxml-class', params.klass.replace(/\./g, '-')); + .attr('document-node-element', ''), + widgetsContainer = $('
') + .addClass('canvas-widgets') + .attr('contenteditable', false), + container = $('
') + .attr('document-element-content', ''); + + dom.append(widgetsContainer, container); + // Make sure widgets aren't navigable with arrow keys + widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1); + + var element = this.fromHTMLElement(dom[0], canvas); + + element.setWlxml({tag: params.tag, klass: params.klass}); if(params.meta) { _.keys(params.meta).forEach(function(key) { - dom.attr('wlxml-meta-'+key, params.meta[key]); + element.setWlxmlMetaAttr(key, params.meta[key]); }); } - dom.data('other-attrs', params.others); + element.data('other-attrs', params.others); + + if(params.rawChildren && params.rawChildren.length) { + container.append(params.rawChildren); + } else if(params.prepopulateOnEmpty) { + element.append(DocumentTextElement.create({text: ''})); + } return dom; }, create: function(params, canvas) { - return this.fromHTMLElement(this.createDOM(params)[0]); + return this.fromHTMLElement(this.createDOM(params, canvas)[0], canvas); }, fromHTMLElement: function(htmlElement, canvas) { @@ -142,23 +186,46 @@ var manipulate = function(e, params, action) { } else { element = DocumentElement.create(params); } - e.dom()[action](element.dom()); + var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom(); + target[action](element.dom()); return element; }; DocumentNodeElement.prototype = new DocumentElement(); + $.extend(DocumentNodeElement.prototype, { + _container: function() { + return this.dom().children('[document-element-content]'); + }, + detach: function() { + var parent = this.parent(); + if(!parent) + return; + + var parentChildren = parent.children(), + myIdx = parent.childIndex(this); + + if(myIdx > 0 && myIdx < parentChildren.length) { + if((parentChildren[myIdx-1] instanceof DocumentTextElement) && (parentChildren[myIdx+1] instanceof DocumentTextElement)) { + parentChildren[myIdx-1].appendText(parentChildren[myIdx+1].getText()); + parentChildren[myIdx+1].detach(); + } + } + this.dom().detach(); + this.canvas = null; + return this; + }, data: function() { var dom = this.dom(), args = Array.prototype.slice.call(arguments, 0); if(args.length === 2 && args[1] === undefined) - return dom.removeData(args[1]); + return dom.removeData(args[0]); return dom.data.apply(dom, arguments); }, toXML: function(level) { - var node = $('<' + this.getWlxmlTag() + '>'), - toret = $('
'); + var node = $('<' + this.getWlxmlTag() + '>'); + if(this.getWlxmlClass()) node.attr('class', this.getWlxmlClass()); var meta = this.getWlxmlMetaAttrs(); @@ -170,26 +237,68 @@ $.extend(DocumentNodeElement.prototype, { node.attr(key, this.data('other-attrs')[key]); }, this); - if(this.data('orig-before') !== undefined) { - toret.append(document.createTextNode(this.data('orig-before'))); - } else if(level && this.getWlxmlTag() !== 'span') { - toret.append('\n' + (new Array(level * 2 + 1)).join(' ')); - } - if(this.data('orig-append') !== undefined) { - node.append(this.data('orig-append')); - //toret = toret.prepend(document.createTextNode(this.data('orig-prepend'))); - } else if(this.getWlxmlTag() !== 'span'){ - node.append('\n' + (new Array(level * 2 + 1)).join(' ')); - } + var addFormatting = function() { + var toret = $('
'); + var formattings = {}; - toret.append(node); - return toret.contents(); + if(this.data('orig-before') !== undefined) { + if(this.data('orig-before')) { + toret.prepend(document.createTextNode(this.data('orig-before'))); + } + } else if(level && this.getWlxmlTag() !== 'span') { + toret.append('\n' + (new Array(level * 2 + 1)).join(' ')); + } + + toret.append(node); + + if(this.data('orig-after')) { + toret.append(document.createTextNode(this.data('orig-after'))); + } + + /* Inside node */ + if(this.data('orig-begin')) { + node.prepend(this.data('orig-begin')); + formattings.begin = true; + } + + if(this.data('orig-end') !== undefined) { + if(this.data('orig-end')) { + node.append(this.data('orig-end')); + } + } else if(this.getWlxmlTag() !== 'span' && children.length){ + node.append('\n' + (new Array(level * 2 + 1)).join(' ')); + } + + return {parts: toret.contents(), formattings: formattings}; + }.bind(this); + + + + var children = this.children(), + childParts; + + var formatting = addFormatting(node); + + for(var i = children.length - 1; i >= 0; i--) { + childParts = children[i].toXML(level + 1); + if(typeof childParts === 'string') + childParts = [document.createTextNode(childParts)]; + + if(formatting.formattings.begin) { + $(node.contents()[0]).after(childParts); + } else + node.prepend(childParts); + } + return formatting.parts; }, append: function(params) { if(params.tag !== 'span') - this.data('orig-append', undefined); + this.data('orig-end', undefined); return manipulate(this, params, 'append'); }, + prepend: function(params) { + return manipulate(this, params, 'prepend'); + }, before: function(params) { return manipulate(this, params, 'before'); @@ -203,10 +312,12 @@ $.extend(DocumentNodeElement.prototype, { return toret; - var elementContent = this.dom().contents(); + var elementContent = this._container().contents(); var element = this; elementContent.each(function(idx) { var childElement = DocumentElement.fromHTMLElement(this, element.canvas); + if(childElement === undefined) + return true; if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '') return true; if(idx > 0 && childElement instanceof DocumentTextElement) { @@ -229,38 +340,62 @@ $.extend(DocumentNodeElement.prototype, { return toret; }, getWlxmlTag: function() { - return this.dom().attr('wlxml-tag'); + return this._container().attr('wlxml-tag'); }, setWlxmlTag: function(tag) { - this.dom().attr('wlxml-tag', tag); + if(tag === this.getWlxmlTag()) + return; + + this._container().attr('wlxml-tag', tag); + if(!this.__updatingWlxml) + this._updateWlxmlManager(); }, getWlxmlClass: function() { - var klass = this.dom().attr('wlxml-class'); + var klass = this._container().attr('wlxml-class'); if(klass) return klass.replace(/-/g, '.'); return undefined; }, setWlxmlClass: function(klass) { + if(klass === this.getWlxmlClass()) + return; + this.getWlxmlMetaAttrs().forEach(function(attr) { if(!classAttributes.hasMetaAttr(klass, attr.name)) this.dom().removeAttr('wlxml-meta-' + attr.name); }, this); if(klass) - this.dom().attr('wlxml-class', klass.replace(/\./g, '-')); + this._container().attr('wlxml-class', klass.replace(/\./g, '-')); else - this.dom().removeAttr('wlxml-class'); + this._container().removeAttr('wlxml-class'); + if(!this.__updatingWlxml) + this._updateWlxmlManager(); + }, + setWlxml: function(params) { + this.__updatingWlxml = true; + if(params.tag !== undefined) + this.setWlxmlTag(params.tag); + if(params.klass !== undefined) + this.setWlxmlClass(params.klass); + this._updateWlxmlManager(); + this.__updatingWlxml = false; + }, + _updateWlxmlManager: function() { + var manager = wlxmlManagers.getFor(this); + this.data('_wlxmlManager', manager); + manager.setup(); }, is: function(what) { - if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.dom().attr('wlxml-class'))) + if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass())) return true; return false; }, - getWlxmlMetaAttr: function(attr) { return this.dom().attr('wlxml-meta-'+attr); }, + getWlxmlMetaAttrs: function() { var toret = []; var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass()); @@ -269,8 +404,27 @@ $.extend(DocumentNodeElement.prototype, { }, this); return toret; }, + setWlxmlMetaAttr: function(attr, value) { this.dom().attr('wlxml-meta-'+attr, value); + }, + + toggleLabel: function(toggle) { + var displayCss = toggle ? 'inline-block' : 'none'; + var label = this.dom().children('.canvas-widgets').find('.canvas-widget-label'); + label.css('display', displayCss); + this.toggleHighlight(toggle); + }, + + toggleHighlight: function(toggle) { + this._container().toggleClass('highlighted-element', toggle); + }, + + toggle: function(toggle) { + var mng = this.data('_wlxmlManager'); + if(mng) { + mng.toggle(toggle); + } } }); @@ -283,8 +437,8 @@ var DocumentTextElement = function(htmlElement, canvas) { $.extend(DocumentTextElement, { createDOM: function(params) { return $('
') - .attr('wlxml-text', '') - .text(params.text); + .attr('document-text-element', '') + .text(params.text || utils.unicode.ZWS); }, create: function(params, canvas) { @@ -293,13 +447,16 @@ $.extend(DocumentTextElement, { fromHTMLElement: function(htmlElement, canvas) { return new this(htmlElement, canvas); + }, + isContentContainer: function(htmlElement) { + return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]'); } }); DocumentTextElement.prototype = new DocumentElement(); $.extend(DocumentTextElement.prototype, { - toXML: function() { + toXML: function(parent) { return this.getText(); }, _setupDOMHandler: function(htmlElement) { @@ -309,11 +466,23 @@ $.extend(DocumentTextElement.prototype, { else this.$element = $element; }, + detach: function() { + this.dom().detach(); + this.canvas = null; + return this; + }, setText: function(text) { this.dom().contents()[0].data = text; }, + appendText: function(text) { + this.dom().contents()[0].data += text; + }, getText: function() { - return this.dom().text(); + return this.dom().text().replace(utils.unicode.ZWS, ''); + }, + isEmpty: function() { + // Having at least Zero Width Space is guaranteed be Content Observer + return this.dom().contents()[0].data === utils.unicode.ZWS; }, after: function(params) { if(params instanceof DocumentTextElement || params.text) @@ -322,7 +491,7 @@ $.extend(DocumentTextElement.prototype, { if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentNodeElement.create(params); + element = DocumentNodeElement.create(params, this.canvas); } this.dom().wrap('
'); this.dom().parent().after(element.dom()); @@ -336,7 +505,7 @@ $.extend(DocumentTextElement.prototype, { if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentNodeElement.create(params); + element = DocumentNodeElement.create(params, this.canvas); } this.dom().wrap('
'); this.dom().parent().before(element.dom()); @@ -367,12 +536,17 @@ $.extend(DocumentTextElement.prototype, { idx = grandParent.childIndex(parent), prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null, next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null; + + prev = (prev instanceof DocumentTextElement) ? prev : null; + next = (next instanceof DocumentTextElement) ? next : null; + if(prev && next) { prev.setText(prev.getText() + this.getText() + next.getText()); next.detach(); } else if (prev || next) { - var target = prev ? prev : next; - target.setText(target.getText() + this.getText()); + var target = prev ? prev : next, + newText = prev ? target.getText() + this.getText() : this.getText() + target.getText(); + target.setText(newText); } else { parent.after(this); } @@ -416,6 +590,28 @@ $.extend(DocumentTextElement.prototype, { return {first: parentElement, second: newElement}; }, + divide: function(params) { + var myText = this.getText(); + + if(params.offset === myText.length) + return this.after(params); + if(params.offset === 0) + return this.before(params); + + var lhsText = myText.substr(0, params.offset), + rhsText = myText.substr(params.offset), + newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas), + rhsTextElement = DocumentTextElement.create({text: rhsText}); + + this.setText(lhsText); + this.after(newElement); + newElement.after(rhsTextElement); + return newElement; + }, + + toggleHighlight: function() { + // do nothing for now + } }); return {