X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/0bea7025f60aa5cc2ed89eed72da0d616f3574ef..fd61d32052c78abe8ea8adba3ca0de00b5e12976:/src/editor/modules/documentCanvas/canvas/genericElement.js diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js index 7d5d986..b4a4ce5 100644 --- a/src/editor/modules/documentCanvas/canvas/genericElement.js +++ b/src/editor/modules/documentCanvas/canvas/genericElement.js @@ -2,177 +2,108 @@ define(function(require) { 'use strict'; -var documentElement = require('./documentElement'), - utils = require('./utils'), - wlxmlUtils = require('utils/wlxml'); - -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 generic = { - onNodeAttrChange: function(event) { - if(event.meta.attr === 'class') { - this.setWlxmlClass(event.meta.newVal); // - } - }, - onNodeAdded: function(event) { - if(event.meta.node.isRoot()) { - this.canvas.reloadRoot(); - return; - } +var $ = require('libs/jquery'), + _ = require('libs/underscore'), + documentElement = require('./documentElement'), + CommentsView = require('./comments/comments'); - var nodeIndex = event.meta.node.getIndex(), - referenceElement, referenceAction, actionArg; - if(nodeIndex === 0) { - referenceElement = this; - referenceAction = 'prepend'; - } else { - referenceElement = this.children()[nodeIndex-1]; - referenceAction = 'after'; +var DocumentNodeElement = documentElement.DocumentNodeElement; + +var generic = Object.create(DocumentNodeElement.prototype); + +$.extend(generic, { + init: function() { + DocumentNodeElement.prototype.init.call(this); + this._container() + .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); + this.commentTip = $('
'); + this.addWidget(this.commentTip); + + if(!this.wlxmlNode.hasChild({klass: 'comment'})) { + this.commentTip.hide(); } - actionArg = (event.type === 'nodeMoved' && utils.findCanvasElement(event.meta.node, event.meta.parent)) || event.meta.node; - referenceElement[referenceAction](actionArg); - }, - onNodeMoved: function(event) { - return this.onNodeAdded.call(this, event, true); + this.refresh(); }, - onNodeDetached: function(event) { - if(event.meta.node.sameNode(this)) { - this.detach(); + + refresh: function() { + if(this.wlxmlNode.getTagName() === 'span' || this.wlxmlNode.getTagName() === 'aside') { + if(this.containsBlock()) { + this.displayAsBlock(); + } else { + this.displayInline(); + } } else { - this.children().some(function(child) { - if(child.wlxmlNode.sameNode(event.meta.node)) { - child.detach(); - return true; - } - }); + this.displayAsBlock(); } }, - onNodeTextChange: function(event) { - var toSet = event.meta.node.getText(); - this.children().some(function(child) { - if(child.wlxmlNode.sameNode(event.meta.node)) { - if(toSet === '') { - toSet = utils.unicode.ZWS; - } - if(toSet !== child.getText()) { - child.setText(toSet); - } - return true; - } - }); + + getFirst: function(e1, e2) { + return this.container.getFirst(e1, e2); }, - prepend: function(param) { - var element; - if(param instanceof documentElement.DocumentElement) { - element = param; - } else { - element = this.canvas.createElement(param); - } - this._container().prepend(element.dom()); - this.refreshPath(); - return element; + containsBlock: function() { + return this.container.containsBlock(); }, children: function() { - var element = this, - toret = []; - this._container().contents().each(function() { - var childElement = element.canvas.getDocumentElement(this); - if(childElement === undefined) { - return true; - } + return this.container.children(); + }, - toret.push(childElement); - }); - return toret; + getVerticallyFirstTextElement: function(params) { + return this.container.getVerticallyFirstTextElement(params); }, - getFirst: function(e1, e2) { - var idx1 = this.childIndex(e1), - idx2 = this.childIndex(e2); - if(e1 === null || e2 === null) { - return undefined; + onNodeAdded: function(event) { + if(event.meta.node.is('comment')) { + this.commentTip.show(); + this.commentsView.render(); } - return idx1 <= idx2 ? e1: e2; }, - childIndex: function(child) { - var children = this.children(), - toret = null; - children.forEach(function(c, idx) { - if(c.sameNode(child)) { - toret = idx; - return false; + onNodeDetached: function(event) { + var isComment = event.meta.node.is('comment'); + if(event.meta.node.sameNode(this)) { + // defacto jestesmy rootem? + this.detach(); + } else { + if(isComment && !this.wlxmlNode.hasChild({klass: 'comment'})) { + this.commentTip.hide(); } - }); - return toret; + this.commentsView.render(); + } }, - getWlxmlClass: function() { - var klass = this._container().attr('wlxml-class'); - if(klass) { - return klass.replace(/-/g, '.'); + onNodeTextChange: function(event) { + var node = event.meta.node; + + /* 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(); } - return undefined; }, - setWlxmlClass: function(klass) { - if(klass === this.getWlxmlClass()) { - return; - } - if(klass) { - this._container().attr('wlxml-class', klass.replace(/\./g, '-')); + + onStateChange: function(changes) { + var isSpan = this.wlxmlNode.getTagName() === 'span'; + if(_.isBoolean(changes.exposed) && !isSpan) { + this._container().toggleClass('highlighted-element', changes.exposed); } - else { - this._container().removeAttr('wlxml-class'); + if(_.isBoolean(changes.active) && !isSpan) { + this._container().toggleClass('current-node-element', changes.active); } - this.refreshPath(); - }, - init: function() { - this._container() - .attr('wlxml-tag', this.wlxmlNode.getTagName()); - this.setWlxmlClass(this.wlxmlNode.getClass()); - this.wlxmlNode.contents().forEach(function(node) { - this._container().append(this.canvas.createElement(node).dom()); - }.bind(this)); - }, - 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(); - } - }); - }, - 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; - }, -}; + } +}); return generic;