X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/eda3b8f3b50cc6f2a7d770c8cdd0e35010062931..3cf3a2daadbd34576c9ae6cb4f96caef23c4e07d:/modules/documentCanvas/canvas/documentElement.js diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index b516af1..0cf2e2c 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -2,8 +2,10 @@ define([ 'libs/jquery-1.9.1.min', 'libs/underscore-min', 'modules/documentCanvas/classAttributes', -'modules/documentCanvas/canvas/utils' -], function($, _, classAttributes, utils) { +'modules/documentCanvas/canvas/utils', +'modules/documentCanvas/canvas/widgets', +'modules/documentCanvas/canvas/wlxmlManagers' +], function($, _, classAttributes, utils, widgets, wlxmlManagers) { 'use strict'; @@ -32,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; } @@ -48,7 +50,7 @@ $.extend(DocumentElement.prototype, { 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; @@ -115,15 +117,32 @@ var DocumentNodeElement = function(htmlElement, canvas) { $.extend(DocumentNodeElement, { createDOM: function(params) { var dom = $('
') - .attr('wlxml-tag', params.tag); + .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]); + + element.setWlxmlTag(params.tag); if(params.klass) - dom.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); + element.data('other-attrs', params.others); + + if(params.rawChildren) { + container.append(params.rawChildren); + } return dom; }, @@ -143,7 +162,8 @@ var manipulate = function(e, params, action) { } else { element = DocumentElement.create(params); } - e.dom()[action](element.dom()); + var target = action === 'append' ? e._container() : e.dom(); + target[action](element.dom()); return element; }; @@ -151,6 +171,9 @@ DocumentNodeElement.prototype = new DocumentElement(); $.extend(DocumentNodeElement.prototype, { + _container: function() { + return this.dom().children('[document-element-content]'); + }, data: function() { var dom = this.dom(), args = Array.prototype.slice.call(arguments, 0); @@ -244,10 +267,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) { @@ -270,27 +295,40 @@ $.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); + 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'); + this._updateWlxmlManager(); + }, + _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())) @@ -298,10 +336,10 @@ $.extend(DocumentNodeElement.prototype, { return false; }, - getWlxmlMetaAttr: function(attr) { return this.dom().attr('wlxml-meta-'+attr); }, + getWlxmlMetaAttrs: function() { var toret = []; var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass()); @@ -310,8 +348,20 @@ $.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(toogle) { + this._container().toggleClass('highlighted-element'); } }); @@ -324,7 +374,7 @@ var DocumentTextElement = function(htmlElement, canvas) { $.extend(DocumentTextElement, { createDOM: function(params) { return $('
') - .attr('wlxml-text', '') + .attr('document-text-element', '') .text(params.text || utils.unicode.ZWS); }, @@ -336,7 +386,7 @@ $.extend(DocumentTextElement, { return new this(htmlElement, canvas); }, isContentContainer: function(htmlElement) { - return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[wlxml-text]'); + return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]'); } }); @@ -481,6 +531,10 @@ $.extend(DocumentTextElement.prototype, { this.after(newElement); newElement.after(rhsTextElement); return newElement; + }, + + toggleHighlight: function() { + // do nothing for now } });