X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/d0db6d70e04af12eeac7275d6140b53df001aa1e..8f2b5f13ac74ab18a0c2bac0e2d8209a40ce3c1c:/modules/documentCanvas/canvas/documentElement.js diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index 49fcd22..230e987 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -1,20 +1,48 @@ define([ 'libs/jquery-1.9.1.min', -'libs/underscore-min' -], function($, _) { +'libs/underscore-min', +'modules/documentCanvas/classAttributes' +], function($, _, classAttributes) { 'use strict'; -// DocumentElement represents a node from WLXML document rendered inside Canvas +// DocumentElement represents a text or an element node from WLXML document rendered inside Canvas var DocumentElement = function(htmlElement, canvas) { if(arguments.length === 0) return; this.canvas = canvas; - this.$element = $(htmlElement); + this._setupDOMHandler(htmlElement); } +var elementTypeFromParams = function(params) { + return params.text !== undefined ? DocumentTextElement : DocumentNodeElement; + +}; + +$.extend(DocumentElement, { + create: function(params, canvas) { + return elementTypeFromParams(params).create(params); + }, + + createDOM: function(params) { + return elementTypeFromParams(params).createDOM(params); + }, + + fromHTMLElement: function(htmlElement, canvas) { + var $element = $(htmlElement); + if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('wlxml-tag')) + return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); + if($element.attr('wlxml-text') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('wlxml-text') !== undefined)) + return DocumentTextElement.fromHTMLElement(htmlElement, canvas); + return undefined; + } +}); + $.extend(DocumentElement.prototype, { + _setupDOMHandler: function(htmlElement) { + this.$element = $(htmlElement); + }, dom: function() { return this.$element; }, @@ -25,6 +53,16 @@ $.extend(DocumentElement.prototype, { return null; }, + parents: function() { + var parents = [], + parent = this.parent(); + while(parent) { + parents.push(parent); + parent = parent.parent(); + } + return parents; + }, + sameNode: function(other) { return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0]; }, @@ -39,20 +77,62 @@ $.extend(DocumentElement.prototype, { detach: function() { this.dom().detach(); this.canvas = null; + }, + + markAsCurrent: function() { + this.canvas.markAsCurrent(this); + }, + + getVerticallyFirstTextElement: function() { + var toret; + this.children().some(function(child) { + if(!child.isVisible()) + return false; // continue + if(child instanceof DocumentTextElement) { + toret = child; + return true; // break + } else { + toret = child.getVerticallyFirstTextElement(); + if(toret) + return true; // break + } + }); + return toret; + }, + + isVisible: function() { + return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata'; } }); +// DocumentNodeElement represents an element node from WLXML document rendered inside Canvas var DocumentNodeElement = function(htmlElement, canvas) { DocumentElement.call(this, htmlElement, canvas); }; -var DocumentTextElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); -}; +$.extend(DocumentNodeElement, { + createDOM: function(params) { + var dom = $('
') + .attr('wlxml-tag', params.tag); + if(params.klass) + dom.attr('wlxml-class', params.klass.replace(/\./g, '-')); + if(params.meta) { + _.keys(params.meta).forEach(function(key) { + dom.attr('wlxml-meta-'+key, params.meta[key]); + }); + } + return dom; + }, -DocumentNodeElement.prototype = new DocumentElement(); -DocumentTextElement.prototype = new DocumentElement(); + create: function(params, canvas) { + return this.fromHTMLElement(this.createDOM(params)[0]); + }, + + fromHTMLElement: function(htmlElement, canvas) { + return new this(htmlElement, canvas); + } +}); var manipulate = function(e, params, action) { var element; @@ -65,16 +145,18 @@ var manipulate = function(e, params, action) { return element; }; +DocumentNodeElement.prototype = new DocumentElement(); + $.extend(DocumentNodeElement.prototype, { append: function(params) { - manipulate(this, params, 'append'); + return manipulate(this, params, 'append'); }, before: function(params) { - manipulate(this, params, 'before'); + return manipulate(this, params, 'before'); }, after: function(params) { - manipulate(this, params, 'after'); + return manipulate(this, params, 'after'); }, children: function() { var toret = []; @@ -116,12 +198,17 @@ $.extend(DocumentNodeElement.prototype, { getWlxmlClass: function() { var klass = this.dom().attr('wlxml-class'); if(klass) - return klass.replace('-', '.'); + return klass.replace(/-/g, '.'); return undefined; }, setWlxmlClass: function(klass) { + 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); + this.dom().attr('wlxml-class', klass.replace(/\./g, '-')); else this.dom().removeAttr('wlxml-class'); }, @@ -129,58 +216,59 @@ $.extend(DocumentNodeElement.prototype, { if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.dom().attr('wlxml-class'))) return true; return false; - } -}); - - -DocumentElement.create = function(params, canvas) { - var ElementType = params.text !== undefined ? DocumentTextElement : DocumentNodeElement; - return ElementType.create(params); -}; - -DocumentElement.createDOM = function(params) { - var ElementType = params.text !== undefined ? DocumentTextElement : DocumentNodeElement; - return ElementType.createDOM(params); -}; + }, -DocumentElement.fromHTMLElement = function(htmlElement, canvas) { - if(htmlElement.nodeType === Node.ELEMENT_NODE) - return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); - if(htmlElement.nodeType === Node.TEXT_NODE) - return DocumentTextElement.fromHTMLElement(htmlElement, canvas); -} -DocumentNodeElement.createDOM = function(params) { - var dom = $('
').attr('wlxml-tag', params.tag); - if(params.klass) - dom.attr('wlxml-class', params.klass); - return dom; -}; + getWlxmlMetaAttr: function(attr) { + return this.dom().attr('wlxml-meta-'+attr); + }, + getWlxmlMetaAttrs: function() { + var toret = []; + var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass()); + attrList.all.forEach(function(attr) { + toret.push({name: attr.name, value: this.getWlxmlMetaAttr(attr.name) || ''}); + }, this); + return toret; + }, + setWlxmlMetaAttr: function(attr, value) { + this.dom().attr('wlxml-meta-'+attr, value); + } +}); -DocumentTextElement.createDOM = function(params) { - return $(document.createTextNode(params.text)); -}; -DocumentNodeElement.create = function(params, canvas) { - return this.fromHTMLElement(this.createDOM(params)[0]); +// DocumentNodeElement represents a text node from WLXML document rendered inside Canvas +var DocumentTextElement = function(htmlElement, canvas) { + DocumentElement.call(this, htmlElement, canvas); }; -DocumentTextElement.create = function(params, canvas) { - return this.fromHTMLElement(this.createDOM(params)[0]); -}; +$.extend(DocumentTextElement, { + createDOM: function(params) { + return $('
') + .attr('wlxml-text', '') + .text(params.text); + }, -DocumentNodeElement.fromHTMLElement = function(htmlElement, canvas) { - return new this(htmlElement, canvas); -}; + create: function(params, canvas) { + return this.fromHTMLElement(this.createDOM(params)[0]); + }, -DocumentTextElement.fromHTMLElement = function(htmlElement, canvas) { - return new this(htmlElement, canvas); -}; + fromHTMLElement: function(htmlElement, canvas) { + return new this(htmlElement, canvas); + } +}); +DocumentTextElement.prototype = new DocumentElement(); $.extend(DocumentTextElement.prototype, { + _setupDOMHandler: function(htmlElement) { + var $element = $(htmlElement); + if(htmlElement.nodeType === Node.TEXT_NODE) + this.$element = $element.parent(); + else + this.$element = $element; + }, setText: function(text) { - this.dom()[0].data = text; + this.dom().contents()[0].data = text; }, getText: function() { return this.dom().text(); @@ -227,8 +315,10 @@ $.extend(DocumentTextElement.prototype, { } }, unwrap: function() { - var parent = this.parent(); + var parent = this.parent(), + toret; if(parent.children().length === 1) { + toret = parent.parent(); var grandParent = parent.parent(); if(grandParent) { var grandParentChildren = grandParent.children(), @@ -248,6 +338,7 @@ $.extend(DocumentTextElement.prototype, { parent.after(this); } parent.detach(); + return toret; } }, split: function(params) { @@ -280,7 +371,9 @@ $.extend(DocumentTextElement.prototype, { succeedingChildren.forEach(function(child) { newElement.append(child); }); - } + + return {first: parentElement, second: newElement}; + }, }); return {