X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/1d56a243018175d9f384e995e1cf4531fcf0c648..3cf3a2daadbd34576c9ae6cb4f96caef23c4e07d:/modules/documentCanvas/canvas/documentElement.js?ds=sidebyside diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index 0ecde71..0cf2e2c 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -3,8 +3,9 @@ define([ 'libs/underscore-min', 'modules/documentCanvas/classAttributes', 'modules/documentCanvas/canvas/utils', -'modules/documentCanvas/canvas/widgets' -], function($, _, classAttributes, utils, widgets) { +'modules/documentCanvas/canvas/widgets', +'modules/documentCanvas/canvas/wlxmlManagers' +], function($, _, classAttributes, utils, widgets, wlxmlManagers) { 'use strict'; @@ -113,42 +114,31 @@ var DocumentNodeElement = function(htmlElement, canvas) { DocumentElement.call(this, htmlElement, canvas); }; -var getDisplayStyle = function(tag, klass) { - if(tag === 'metadata') - return 'none'; - if(tag === 'span') - return 'inline'; - return 'block'; -} - $.extend(DocumentNodeElement, { createDOM: function(params) { - var dom = $('
'), - container = $('
'); + var dom = $('
') + .attr('document-node-element', ''), + widgetsContainer = $('
') + .addClass('canvas-widgets') + .attr('contenteditable', false), + container = $('
') + .attr('document-element-content', ''); - container.attr('wlxml-tag', params.tag); + 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]); + + element.setWlxmlTag(params.tag); if(params.klass) - container.attr('wlxml-class', params.klass.replace(/\./g, '-')); + element.setWlxmlClass(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); - - /* display style */ - var displayStyle = getDisplayStyle(params.tag, params.klass); - dom.css('display', displayStyle); - container.css('display', displayStyle); - - var widgetsContainer = $('
'); - widgetsContainer.append(widgets.labelWidget(params.tag, params.klass)); - dom.append(widgetsContainer); - - // Make sure widgets aren't navigable with arrow keys - widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1); - - dom.append(container); + element.data('other-attrs', params.others); if(params.rawChildren) { container.append(params.rawChildren); @@ -308,8 +298,11 @@ $.extend(DocumentNodeElement.prototype, { return this._container().attr('wlxml-tag'); }, setWlxmlTag: function(tag) { + if(tag === this.getWlxmlTag()) + return; + this._container().attr('wlxml-tag', tag); - this._updateDisplayStyle(); + this._updateWlxmlManager(); }, getWlxmlClass: function() { var klass = this._container().attr('wlxml-class'); @@ -318,6 +311,9 @@ $.extend(DocumentNodeElement.prototype, { 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); @@ -327,12 +323,12 @@ $.extend(DocumentNodeElement.prototype, { this._container().attr('wlxml-class', klass.replace(/\./g, '-')); else this._container().removeAttr('wlxml-class'); - this._updateDisplayStyle(); + this._updateWlxmlManager(); }, - _updateDisplayStyle: function() { - var displayStyle = getDisplayStyle(this.getWlxmlTag, this.getWlxmlClass); - this.dom().css('display', displayStyle); - this._container().css('display', displayStyle); + _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.getWlxmlClass()))