X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/0c57fd826a58a217f499b5084c837fb8ef3f6d4f..6473eb47e2b1b17a3935cbfae451199123607bc9:/src/editor/modules/documentCanvas/canvas/genericElement.js?ds=sidebyside diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js index 878e140..fd0dfc4 100644 --- a/src/editor/modules/documentCanvas/canvas/genericElement.js +++ b/src/editor/modules/documentCanvas/canvas/genericElement.js @@ -5,16 +5,8 @@ define(function(require) { var $ = require('libs/jquery'), _ = require('libs/underscore'), documentElement = require('./documentElement'), - utils = require('./utils'), - wlxmlUtils = require('utils/wlxml'), CommentsView = require('./comments/comments'); -var labelWidget = function(tag, klass) { - return $('') - .addClass('canvas-widget canvas-widget-label') - .text(wlxmlUtils.getTagLabel(tag) + (klass ? ' / ' + wlxmlUtils.getClassLabel(klass) : '')); -}; -void(labelWidget); // for linters; labelWidget is unused on purpose for now var DocumentNodeElement = documentElement.DocumentNodeElement; @@ -24,14 +16,13 @@ $.extend(generic, { init: function() { DocumentNodeElement.prototype.init.call(this); this._container() - .attr('wlxml-tag', this.wlxmlNode.getTagName()); - this.setWlxmlClass(this.wlxmlNode.getClass()); - this.wlxmlNode.contents().forEach(function(node) { - var el = this.canvas.createElement(node); - if(el.dom) { - this._container().append(el.dom); - } - }.bind(this)); + .attr('wlxml-tag', this.wlxmlNode.getTagName()) + .attr('wlxml-class', this.wlxmlNode.getClass().replace(/\./g, '-')); + + this.container = this.createContainer(this.wlxmlNode.contents(), { + manages: function(node) { return !node.isInside('comment'); }, + dom: this._container() + }); this.commentsView = new CommentsView(this.wlxmlNode, this.canvas.metadata.user); this.addToGutter(this.commentsView); @@ -46,7 +37,7 @@ $.extend(generic, { }, refresh: function() { - if(this.wlxmlNode.getTagName() === 'span') { + if(this.wlxmlNode.getTagName() === 'span' || this.wlxmlNode.getTagName() === 'aside') { if(this.containsBlock()) { this.displayAsBlock(); } else { @@ -58,197 +49,60 @@ $.extend(generic, { }, getFirst: function(e1, e2) { - var idx1 = this.childIndex(e1), - idx2 = this.childIndex(e2); - if(e1 === null || e2 === null) { - return undefined; - } - return idx1 <= idx2 ? e1: e2; + return this.container.getFirst(e1, e2); }, - children: function() { - var element = this, - toret = []; - this._container().contents().each(function() { - var childElement = element.canvas.getDocumentElement(this); - if(childElement === undefined) { - return true; - } - - toret.push(childElement); - }); - return toret; + containsBlock: function() { + return this.container.containsBlock(); }, - getVerticallyFirstTextElement: function() { - var toret; - this.children().some(function(child) { - if(child instanceof documentElement.DocumentTextElement) { - toret = child; - return true; // break - } else { - toret = child.getVerticallyFirstTextElement(); - if(toret) { - return true; // break - } - } - }); - return toret; + children: function() { + return this.container.children(); }, - onNodeAttrChange: function(event) { - if(event.meta.attr === 'class') { - this.setWlxmlClass(event.meta.newVal); // - } + getVerticallyFirstTextElement: function(params) { + return this.container.getVerticallyFirstTextElement(params); }, - onNodeAdded: function(event) { - if(event.meta.node.isRoot()) { - this.canvas.reloadRoot(); - return; - } - - var ptr = event.meta.node.prev(), - referenceElement, referenceAction, actionArg; - - while(ptr && !(referenceElement = utils.getElementForElementRootNode(ptr))) { - ptr = ptr.prev(); - } - - if(referenceElement) { - referenceAction = 'after'; - } else { - referenceElement = this; - referenceAction = 'prepend'; - } - - if(event.meta.move) { - /* Let's check if this node had its own canvas element and it's accessible. */ - actionArg = utils.getElementForElementRootNode(event.meta.node); - } - if(!actionArg) { - actionArg = event.meta.node; - } - - referenceElement[referenceAction](actionArg); + onNodeAdded: function(event) { if(event.meta.node.is('comment')) { this.commentTip.show(); this.commentsView.render(); } }, + onNodeDetached: function(event) { var isComment = event.meta.node.is('comment'); if(event.meta.node.sameNode(this)) { + // defacto jestesmy rootem? this.detach(); } else { - this.children().some(function(child) { - if(child.wlxmlNode.sameNode(event.meta.node)) { - child.detach(); - return true; - } - }); if(isComment && !this.wlxmlNode.hasChild({klass: 'comment'})) { this.commentTip.hide(); } this.commentsView.render(); } }, + onNodeTextChange: function(event) { - var node = event.meta.node, - toSet = node.getText(), - handled; - - handled = this.children().some(function(child) { - if(child.wlxmlNode.sameNode(node)) { - if(toSet === '') { - toSet = utils.unicode.ZWS; - } - if(toSet !== child.getText()) { - child.setText(toSet); - } - return true; - } - }); + var node = event.meta.node; - if(!handled && node.parent() && node.parent().is('comment') && this.wlxmlNode.sameNode(node.parent().parent())) { + /* TODO: This handling of changes to the comments should probably be implemented via separate, + non-rendering comments element */ + if(node.parent() && node.parent().is('comment') && this.wlxmlNode.sameNode(node.parent().parent())) { this.commentsView.render(); } }, onStateChange: function(changes) { - if(_.isBoolean(changes.exposed) && !this.isSpan()) { + var isSpan = this.wlxmlNode.getTagName() === 'span'; + if(_.isBoolean(changes.exposed) && !isSpan) { this._container().toggleClass('highlighted-element', changes.exposed); } - if(_.isBoolean(changes.active) && !this.isSpan()) { + if(_.isBoolean(changes.active) && !isSpan) { this._container().toggleClass('current-node-element', changes.active); } }, - - /// - - isSpan: function() { - return this.wlxmlNode.getTagName() === 'span'; - }, - - containsBlock: function() { - return this.children() - .filter(function(child) { - return child instanceof documentElement.DocumentNodeElement; - }) - .some(function(child) { - if(child.isBlock()) { - return true; - } else { - return child.containsBlock(); - } - }); - }, - - prepend: function(param) { - var element; - if(param instanceof documentElement.DocumentElement) { - element = param; - } else { - element = this.canvas.createElement(param); - } - if(element.dom) { - this._container().prepend(element.dom); - this.refreshPath(); - } - return element; - }, - - childIndex: function(child) { - var children = this.children(), - toret = null; - children.forEach(function(c, idx) { - if(c.sameNode(child)) { - toret = idx; - return false; - } - }); - return toret; - }, - - getWlxmlClass: function() { - var klass = this._container().attr('wlxml-class'); - if(klass) { - return klass.replace(/-/g, '.'); - } - return undefined; - }, - setWlxmlClass: function(klass) { - if(klass === this.getWlxmlClass()) { - return; - } - if(klass) { - this._container().attr('wlxml-class', klass.replace(/\./g, '-')); - } - else { - this._container().removeAttr('wlxml-class'); - } - this.refreshPath(); - } });