X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/804d77fa4cea068e90b6461f1a5f151fe6f67fbc..7c3b96afaff05673bf699b131581c84a40e3ad1d:/src/editor/modules/documentCanvas/canvas/documentElement.js?ds=inline diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index b2e25ed..859a80b 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -1,8 +1,9 @@ define([ 'libs/jquery', 'libs/underscore', -'modules/documentCanvas/canvas/utils' -], function($, _, utils) { +'modules/documentCanvas/canvas/utils', +'modules/documentCanvas/canvas/container' +], function($, _, utils, container) { 'use strict'; /* global Node:false */ @@ -11,9 +12,14 @@ define([ var DocumentElement = function(wlxmlNode, canvas) { this.wlxmlNode = wlxmlNode; this.canvas = canvas; + this.state = { + exposed: false, + active: false + }; - this.$element = this.createDOM(); - this.$element.data('canvas-element', this); + this.dom = this.createDOM(); + this.dom.data('canvas-element', this); + this.wlxmlNode.setData('canvasElement', this); }; $.extend(DocumentElement.prototype, { @@ -26,11 +32,34 @@ $.extend(DocumentElement.prototype, { refresh: function() { // noop }, - dom: function() { - return this.$element; + 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]'); + var parents = this.dom.parents('[document-node-element]'); if(parents.length) { return this.canvas.getDocumentElement(parents[0]); } @@ -48,7 +77,10 @@ $.extend(DocumentElement.prototype, { }, sameNode: function(other) { - return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0]; + return other && (typeof other === typeof this) && other.dom[0] === this.dom[0]; + }, + isRootElement: function() { + return this.sameNode(this.canvas.rootElement); }, trigger: function() { @@ -62,8 +94,8 @@ $.extend(DocumentElement.prototype, { // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas var DocumentNodeElement = function(wlxmlNode, canvas) { DocumentElement.call(this, wlxmlNode, canvas); - wlxmlNode.setData('canvasElement', this); - this.init(this.$element); + this.containers = []; + this.init(this.dom); }; @@ -74,8 +106,10 @@ var manipulate = function(e, params, action) { } else { element = e.canvas.createElement(params); } - e.dom()[action](element.dom()); - e.refreshPath(); + if(element.dom) { + e.dom[action](element.dom); + e.refreshPath(); + } return element; }; @@ -84,41 +118,88 @@ DocumentNodeElement.prototype = Object.create(DocumentElement.prototype); $.extend(DocumentNodeElement.prototype, { defaultDisplayStyle: 'block', + init: function() {}, addWidget: function(widget) { - this.$element.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget); + this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget); }, clearWidgets: function() { - this.$element.children('.canvas-widgets').empty(); + 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); + }, + createContainer: function(nodes, params) { + var toret = container.create(nodes, params, this); + this.containers.push(toret); + return toret; + }, + removeContainer: function(container) { + var idx; + if((idx = this.containers.indexOf(container)) !== -1) { + this.containers.splice(idx, 1); + } }, handle: function(event) { - var method = 'on' + event.type[0].toUpperCase() + event.type.substr(1); - if(this[method]) { - this[method](event); + var method = 'on' + event.type[0].toUpperCase() + event.type.substr(1), + target; + if(event.type === 'nodeAdded' || event.type === 'nodeDetached') { + this.containers.some(function(container) { + if(container.manages(event.meta.node, event.meta.parent)) { + target = container; + return true; + } + }); + } + + if(!target && this[method]) { + target = this; + } + + if(target) { + target[method](event); } }, createDOM: function() { var wrapper = $('
').attr('document-node-element', ''), widgetsContainer = $('
') - .addClass('canvas-widgets') - .attr('contenteditable', false), + .addClass('canvas-widgets'), contentContainer = $('
') .attr('document-element-content', ''); - wrapper.append(widgetsContainer, contentContainer); + 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 parents = this.parents(); - this.dom().detach(); - this.canvas = null; - if(parents[0]) { - parents[0].refreshPath(); + detach: function(isChild) { + var parents; + + if(this.gutterGroup) { + this.gutterGroup.remove(); + } + if(_.isFunction(this.children)) { + this.children().forEach(function(child) { + child.detach(true); + }); } - return this; + + if(!isChild) { + parents = this.parents(); + this.dom.detach(); + if(parents[0]) { + parents[0].refreshPath(); + } + } + return this; }, before: function(params) { return manipulate(this, params, 'before'); @@ -128,27 +209,16 @@ $.extend(DocumentNodeElement.prototype, { return manipulate(this, params, 'after'); }, - 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); - }, - isBlock: function() { - return this.dom().css('display') === 'block'; + return this.dom.css('display') === 'block'; }, displayAsBlock: function() { - this.dom().css('display', 'block'); + this.dom.css('display', 'block'); this._container().css('display', 'block'); }, displayInline: function() { - this.dom().css('display', 'inline'); + this.dom.css('display', 'inline'); this._container().css('display', 'inline'); }, displayAs: function(what) { @@ -160,7 +230,7 @@ $.extend(DocumentNodeElement.prototype, { // e.css('display') // } // }) - this.dom().css('display', what); + this.dom.css('display', what); this._container().css('display', what); } }); @@ -186,17 +256,26 @@ $.extend(DocumentTextElement.prototype, { .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; + if(text === '') { + text = utils.unicode.ZWS; + } + if(text !== this.getText()) { + this.dom.contents()[0].data = text; + } + }, + 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, ''); } @@ -204,7 +283,7 @@ $.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) { @@ -216,10 +295,12 @@ $.extend(DocumentTextElement.prototype, { } else { element = this.canvas.createElement(params); } - this.dom().wrap('
'); - this.dom().parent().after(element.dom()); - this.dom().unwrap(); - this.refreshPath(); + if(element.dom) { + this.dom.wrap('
'); + this.dom.parent().after(element.dom); + this.dom.unwrap(); + this.refreshPath(); + } return element; }, before: function(params) { @@ -232,16 +313,15 @@ $.extend(DocumentTextElement.prototype, { } else { element = this.canvas.createElement(params); } - this.dom().wrap('
'); - this.dom().parent().before(element.dom()); - this.dom().unwrap(); - this.refreshPath(); + if(element.dom) { + this.dom.wrap('
'); + this.dom.parent().before(element.dom); + this.dom.unwrap(); + this.refreshPath(); + } return element; }, - toggleHighlight: function() { - // do nothing for now - }, children: function() { return []; }