X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/2546c9dabe14b77b9e97c81efb2403eb93e9f79d..f046659fbe4fd9fb752854f8ccb547918eddc5df:/src/editor/modules/documentCanvas/canvas/documentElement.js?ds=sidebyside diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 116ebf4..d40ca9b 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -1,67 +1,66 @@ define([ 'libs/jquery', 'libs/underscore', -'modules/documentCanvas/canvas/utils', -'modules/documentCanvas/canvas/widgets', -'modules/documentCanvas/canvas/wlxmlManagers' -], function($, _, utils, widgets, wlxmlManagers) { +'modules/documentCanvas/canvas/utils' +], function($, _, utils) { 'use strict'; - +/* global Node:false */ // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas -var DocumentElement = function(htmlElement, canvas) { - if(arguments.length === 0) - return; +var DocumentElement = function(wlxmlNode, canvas) { + this.wlxmlNode = wlxmlNode; this.canvas = canvas; - this._setupDOMHandler(htmlElement); -} - - -var elementTypeFromWlxmlNode = function(wlxmlNode) { - return wlxmlNode.nodeType === Node.TEXT_NODE ? DocumentTextElement : DocumentNodeElement; -} - -$.extend(DocumentElement, { - create: function(node, canvas) { - return elementTypeFromWlxmlNode(node).create(node, canvas); - }, - - createDOM: function(wlxmlNode) { - return elementTypeFromParams(wlxmlNode).createDOM(params); - }, + this.state = { + exposed: false, + active: false + }; - fromHTMLElement: function(htmlElement, canvas) { - var $element = $(htmlElement); - if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) - return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); - 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; - } -}); + this.dom = this.createDOM(); + this.dom.data('canvas-element', this); +}; $.extend(DocumentElement.prototype, { - _setupDOMHandler: function(htmlElement) { - this.$element = $(htmlElement); - }, - bound: function() { - return $.contains(document.documentElement, this.dom()[0]); - }, - dom: function() { - return this.$element; - }, - data: function() { - var dom = this.dom(), - args = Array.prototype.slice.call(arguments, 0); - if(args.length === 2 && args[1] === undefined) - return dom.removeData(args[0]); - return dom.data.apply(dom, arguments); + refreshPath: function() { + this.parents().forEach(function(parent) { + parent.refresh(); + }); + this.refresh(); + }, + refresh: function() { + // noop + }, + updateState: function(toUpdate) { + var changes = {}; + _.keys(toUpdate) + .filter(function(key) { + return this.state.hasOwnProperty(key); + }.bind(this)) + .forEach(function(key) { + if(this.state !== toUpdate[key]) { + this.state[key] = changes[key] = toUpdate[key]; + } + }.bind(this)); + if(_.isFunction(this.onStateChange)) { + this.onStateChange(changes); + if(_.isBoolean(changes.active)) { + if(changes.active) { + var ptr = this; + while(ptr && ptr.wlxmlNode.getTagName() === 'span') { + ptr = ptr.parent(); + } + if(ptr && ptr.gutterGroup) { + ptr.gutterGroup.show(); + } + } + } + } }, parent: function() { - var parents = this.$element.parents('[document-node-element]'); - if(parents.length) - return DocumentElement.fromHTMLElement(parents[0], this.canvas); + var parents = this.dom.parents('[document-node-element]'); + if(parents.length) { + return this.canvas.getDocumentElement(parents[0]); + } return null; }, @@ -76,150 +75,103 @@ $.extend(DocumentElement.prototype, { }, sameNode: function(other) { - return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0]; - }, - - 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; - }, - - getPreviousTextElement: function(includeInvisible) { - return this.getNearestTextElement('above', includeInvisible); - }, - - getNextTextElement: function(includeInvisible) { - return this.getNearestTextElement('below', includeInvisible); - }, - - getNearestTextElement: function(direction, includeInvisible) { - includeInvisible = includeInvisible !== undefined ? includeInvisible : false; - var selector = '[document-text-element]' + (includeInvisible ? '' : ':visible'); - return this.canvas.getDocumentElement(utils.nearestInDocumentOrder(selector, direction, this.dom()[0])); + return other && (typeof other === typeof this) && other.dom[0] === this.dom[0]; }, - isVisible: function() { - return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata'; - }, + trigger: function() { + this.canvas.eventBus.trigger.apply(this.canvas.eventBus, Array.prototype.slice.call(arguments, 0)); + } - isInsideList: function() { - return this.parents().some(function(parent) { - return parent.is('list'); - }); - }, - exec: function(method) { - var manager = this.data('_wlxmlManager'); - if(manager[method]) - return manager[method].apply(manager, Array.prototype.slice.call(arguments, 1)); - } }); // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas -var DocumentNodeElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); +var DocumentNodeElement = function(wlxmlNode, canvas) { + DocumentElement.call(this, wlxmlNode, canvas); + wlxmlNode.setData('canvasElement', this); + this.init(this.dom); }; -$.extend(DocumentNodeElement, { - create: function(wlxmlNode, canvas) { - return this.fromHTMLElement(this.createDOM(wlxmlNode, canvas)[0], canvas); - }, - - fromHTMLElement: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - }, - - createDOM: function(wlxmlNode, canvas) { - var dom = $('
') - .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], canvas); - - element.data('wlxmlNode', wlxmlNode); - wlxmlNode.setData('canvasElement', element); - - element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()}); - - wlxmlNode.contents().forEach((function(node) { - container.append(DocumentElement.create(node).dom()); - }).bind(this)); - - return dom; - } - -}); var manipulate = function(e, params, action) { var element; if(params instanceof DocumentElement) { element = params; } else { - element = DocumentElement.create(params); + element = e.canvas.createElement(params); + } + if(element.dom) { + e.dom[action](element.dom); + e.refreshPath(); } - var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom(); - target[action](element.dom()); return element; }; -DocumentNodeElement.prototype = new DocumentElement(); +DocumentNodeElement.prototype = Object.create(DocumentElement.prototype); $.extend(DocumentNodeElement.prototype, { + defaultDisplayStyle: 'block', + init: function() {}, + addWidget: function(widget) { + this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget); + }, + clearWidgets: function() { + this.dom.children('.canvas-widgets').empty(); + }, + addToGutter: function(view) { + if(!this.gutterGroup) { + this.gutterGroup = this.canvas.gutter.createViewGroup({ + offsetHint: function() { + return this.canvas.getElementOffset(this); + }.bind(this) + }, this); + } + this.gutterGroup.addView(view); + }, + handle: function(event) { + var method = 'on' + event.type[0].toUpperCase() + event.type.substr(1); + if(this[method]) { + this[method](event); + } + }, + createDOM: function() { + var wrapper = $('
').attr('document-node-element', ''), + widgetsContainer = $('
') + .addClass('canvas-widgets') + .attr('contenteditable', false), + contentContainer = $('
') + .attr('document-element-content', ''); + + wrapper.append(contentContainer, widgetsContainer); + widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1); + return wrapper; + }, _container: function() { - return this.dom().children('[document-element-content]'); + return this.dom.children('[document-element-content]'); }, - detach: function() { - var parent = this.parent(); - if(!parent) - return; + detach: function(isChild) { + var parents; - var parentChildren = parent.children(), - myIdx = parent.childIndex(this); + if(this.gutterGroup) { + this.gutterGroup.remove(); + } + if(_.isFunction(this.children)) { + this.children().forEach(function(child) { + child.detach(true); + }); + } - if(myIdx > 0 && myIdx < parentChildren.length) { - if((parentChildren[myIdx-1] instanceof DocumentTextElement) && (parentChildren[myIdx+1] instanceof DocumentTextElement)) { - parentChildren[myIdx-1].appendText(parentChildren[myIdx+1].getText()); - parentChildren[myIdx+1].detach(); + if(!isChild) { + parents = this.parents(); + this.dom.detach(); + if(parents[0]) { + parents[0].refreshPath(); } } - this.dom().detach(); - this.canvas = null; return this; }, - append: function(params) { - if(params.tag !== 'span') - this.data('orig-end', undefined); - return manipulate(this, params, 'append'); - }, - prepend: function(params) { - return manipulate(this, params, 'prepend'); - }, before: function(params) { return manipulate(this, params, 'before'); @@ -227,159 +179,74 @@ $.extend(DocumentNodeElement.prototype, { after: function(params) { return manipulate(this, params, 'after'); }, - children: function() { - var toret = []; - if(this instanceof DocumentTextElement) - return toret; - - 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) { - if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '') - return true; - } - toret.push(childElement); - }); - return toret; - }, - childIndex: function(child) { - var children = this.children(), - toret = null; - children.forEach(function(c, idx) { - if(c.sameNode(child)) { - toret = idx; - return false; - } - }); - return toret; - }, - getWlxmlTag: function() { - return this._container().attr('wlxml-tag'); + isBlock: function() { + return this.dom.css('display') === 'block'; }, - setWlxmlTag: function(tag) { - if(tag === this.getWlxmlTag()) - return; - this._container().attr('wlxml-tag', tag); - if(!this.__updatingWlxml) - this._updateWlxmlManager(); + displayAsBlock: function() { + this.dom.css('display', 'block'); + this._container().css('display', 'block'); }, - 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'); - if(!this.__updatingWlxml) - this._updateWlxmlManager(); - }, - setWlxml: function(params) { - this.__updatingWlxml = true; - if(params.tag !== undefined) - this.setWlxmlTag(params.tag); - if(params.klass !== undefined) - this.setWlxmlClass(params.klass); - this._updateWlxmlManager(); - this.__updatingWlxml = false; - }, - _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())) - return true; - return false; - }, - 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(toggle) { - this._container().toggleClass('highlighted-element', toggle); + displayInline: function() { + this.dom.css('display', 'inline'); + this._container().css('display', 'inline'); }, - - toggle: function(toggle) { - var mng = this.data('_wlxmlManager'); - if(mng) { - mng.toggle(toggle); - } + displayAs: function(what) { + // [this.dom(), this._container()].forEach(e) { + // var isBlock = window.getComputedStyle(e).display === 'block'; + // if(!isBlock && what === 'block') { + // e.css('display', what); + // } else if(isBlock && what === 'inline') { + // e.css('display') + // } + // }) + this.dom.css('display', what); + this._container().css('display', what); } }); // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas -var DocumentTextElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); +var DocumentTextElement = function(wlxmlTextNode, canvas) { + DocumentElement.call(this, wlxmlTextNode, canvas); }; $.extend(DocumentTextElement, { - createDOM: function(wlxmlTextNode) { - var dom = $('
') - .attr('document-text-element', '') - .text(wlxmlTextNode.getText() || utils.unicode.ZWS), - element = this.fromHTMLElement(dom[0], this); - element.data('wlxmlNode', wlxmlTextNode); - return dom; - }, - - create: function(wlxmlTextNode, canvas) { - return this.fromHTMLElement(this.createDOM(wlxmlTextNode)[0]); - }, - - fromHTMLElement: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - }, isContentContainer: function(htmlElement) { return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]'); } }); -DocumentTextElement.prototype = new DocumentElement(); +DocumentTextElement.prototype = Object.create(DocumentElement.prototype); $.extend(DocumentTextElement.prototype, { - _setupDOMHandler: function(htmlElement) { - var $element = $(htmlElement); - if(htmlElement.nodeType === Node.TEXT_NODE) - this.$element = $element.parent(); - else - this.$element = $element; + createDOM: function() { + var dom = $('
') + .attr('document-text-element', '') + .text(this.wlxmlNode.getText() || utils.unicode.ZWS); + return dom; }, - detach: function() { - this.dom().detach(); - this.canvas = null; + detach: function(isChild) { + if(!isChild) { + this.dom.detach(); + } return this; }, setText: function(text) { - this.dom().contents()[0].data = text; - }, - appendText: function(text) { - this.dom().contents()[0].data += text; + if(text === '') { + text = utils.unicode.ZWS; + } + if(text !== this.getText()) { + this.dom.contents()[0].data = text; + } }, - prependText: function(text) { - this.dom().contents()[0].data = text + this.dom().contents()[0].data; + handle: function(event) { + this.setText(event.meta.node.getText()); }, getText: function(options) { options = _.extend({raw: false}, options || {}); - var toret = this.dom().text(); + var toret = this.dom.text(); if(!options.raw) { toret = toret.replace(utils.unicode.ZWS, ''); } @@ -387,61 +254,52 @@ $.extend(DocumentTextElement.prototype, { }, isEmpty: function() { // Having at least Zero Width Space is guaranteed be Content Observer - return this.dom().contents()[0].data === utils.unicode.ZWS; + return this.dom.contents()[0].data === utils.unicode.ZWS; }, after: function(params) { - if(params instanceof DocumentTextElement || params.text) + if(params instanceof DocumentTextElement || params.text) { return false; + } var element; if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentNodeElement.create(params, this.canvas); + element = this.canvas.createElement(params); + } + if(element.dom) { + this.dom.wrap('
'); + this.dom.parent().after(element.dom); + this.dom.unwrap(); + this.refreshPath(); } - this.dom().wrap('
'); - this.dom().parent().after(element.dom()); - this.dom().unwrap(); return element; }, before: function(params) { - if(params instanceof DocumentTextElement || params.text) + if(params instanceof DocumentTextElement || params.text) { return false; + } var element; if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentNodeElement.create(params, this.canvas); + element = this.canvas.createElement(params); + } + if(element.dom) { + this.dom.wrap('
'); + this.dom.parent().before(element.dom); + this.dom.unwrap(); + this.refreshPath(); } - this.dom().wrap('
'); - this.dom().parent().before(element.dom()); - this.dom().unwrap(); return element; }, - divide: function(params) { - var myText = this.getText(); - - if(params.offset === myText.length) - return this.after(params); - if(params.offset === 0) - return this.before(params); - - var lhsText = myText.substr(0, params.offset), - rhsText = myText.substr(params.offset), - newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas), - rhsTextElement = DocumentTextElement.create({text: rhsText}); - - this.setText(lhsText); - this.after(newElement); - newElement.after(rhsTextElement); - return newElement; - }, - - toggleHighlight: function() { - // do nothing for now + children: function() { + return []; } + }); + return { DocumentElement: DocumentElement, DocumentNodeElement: DocumentNodeElement,