4 'modules/documentCanvas/canvas/utils',
5 'modules/documentCanvas/canvas/container'
6 ], function($, _, utils, container) {
9 /* global Node:false */
11 // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas
12 var DocumentElement = function(wlxmlNode, canvas) {
13 this.wlxmlNode = wlxmlNode;
20 this.dom = this.createDOM();
21 this.dom.data('canvas-element', this);
22 this.wlxmlNode.setData('canvasElement', this);
25 $.extend(DocumentElement.prototype, {
26 refreshPath: function() {
27 this.parents().forEach(function(parent) {
35 updateState: function(toUpdate) {
38 .filter(function(key) {
39 return this.state.hasOwnProperty(key);
41 .forEach(function(key) {
42 if(this.state !== toUpdate[key]) {
43 this.state[key] = changes[key] = toUpdate[key];
46 // console.log(changes);
47 if(_.isFunction(this.onStateChange)) {
48 this.onStateChange(changes);
49 if(_.isBoolean(changes.active)) {
52 while(ptr && ptr.wlxmlNode.getTagName() === 'span') {
55 if(ptr && ptr.gutterGroup) {
56 ptr.gutterGroup.show();
63 var parents = this.dom.parents('[document-node-element]');
65 return this.canvas.getDocumentElement(parents[0]);
72 parent = this.parent();
75 parent = parent.parent();
80 sameNode: function(other) {
81 return other && (typeof other === typeof this) && other.dom[0] === this.dom[0];
83 isRootElement: function() {
84 return this.sameNode(this.canvas.rootElement);
88 this.canvas.eventBus.trigger.apply(this.canvas.eventBus, Array.prototype.slice.call(arguments, 0));
95 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
96 var DocumentNodeElement = function(wlxmlNode, canvas) {
97 DocumentElement.call(this, wlxmlNode, canvas);
99 this.elementsRegister = canvas.createElementsRegister();
100 this.contextMenuActions = [];
105 var manipulate = function(e, params, action) {
107 if(params instanceof DocumentElement) {
110 element = e.createElement(params);
113 e.dom[action](element.dom);
119 DocumentNodeElement.prototype = Object.create(DocumentElement.prototype);
122 $.extend(DocumentNodeElement.prototype, {
123 defaultDisplayStyle: 'block',
125 addWidget: function(widget) {
126 this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget);
128 clearWidgets: function() {
129 this.dom.children('.canvas-widgets').empty();
131 addToGutter: function(view) {
132 if(!this.gutterGroup) {
133 this.gutterGroup = this.canvas.gutter.createViewGroup({
134 offsetHint: function() {
135 return this.canvas.getElementOffset(this);
139 this.gutterGroup.addView(view);
141 createContainer: function(nodes, params) {
142 var toret = container.create(nodes, params, this);
143 this.containers.push(toret);
146 removeContainer: function(container) {
148 if((idx = this.containers.indexOf(container)) !== -1) {
149 this.containers.splice(idx, 1);
152 createElement: function(wlxmlNode) {
153 var parent = this.wlxmlNode.parent() ? utils.getElementForNode(this.wlxmlNode.parent()) : null;
154 return this.canvas.createElement(wlxmlNode, this.elementsRegister, !parent) || parent.createElement(wlxmlNode);
156 addToContextMenu: function(actionFqName) {
157 this.contextMenuActions.push(this.canvas.createAction(actionFqName));
159 handle: function(event) {
160 var method = 'on' + event.type[0].toUpperCase() + event.type.substr(1),
162 if(event.type === 'nodeAdded' || event.type === 'nodeDetached') {
163 this.containers.some(function(container) {
164 if(container.manages(event.meta.node, event.meta.parent)) {
171 if(!target && this[method]) {
176 target[method](event);
179 createDOM: function() {
180 var wrapper = $('<div>').attr('document-node-element', ''),
181 widgetsContainer = $('<div>')
182 .addClass('canvas-widgets'),
183 contentContainer = $('<div>')
184 .attr('document-element-content', '');
186 wrapper.append(contentContainer, widgetsContainer);
187 widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
190 _container: function() {
191 return this.dom.children('[document-element-content]');
193 detach: function(isChild) {
196 if(this.gutterGroup) {
197 this.gutterGroup.remove();
199 if(_.isFunction(this.children)) {
200 this.children().forEach(function(child) {
206 parents = this.parents();
209 parents[0].refreshPath();
214 before: function(params) {
215 return manipulate(this, params, 'before');
218 after: function(params) {
219 return manipulate(this, params, 'after');
222 isBlock: function() {
223 return this.dom.css('display') === 'block';
226 displayAsBlock: function() {
227 this.dom.css('display', 'block');
228 this._container().css('display', 'block');
230 displayInline: function() {
231 this.dom.css('display', 'inline');
232 this._container().css('display', 'inline');
234 displayAs: function(what) {
235 // [this.dom(), this._container()].forEach(e) {
236 // var isBlock = window.getComputedStyle(e).display === 'block';
237 // if(!isBlock && what === 'block') {
238 // e.css('display', what);
239 // } else if(isBlock && what === 'inline') {
243 this.dom.css('display', what);
244 this._container().css('display', what);
246 children: function() {
252 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
253 var DocumentTextElement = function(wlxmlTextNode, canvas) {
254 DocumentElement.call(this, wlxmlTextNode, canvas);
257 $.extend(DocumentTextElement, {
258 isContentContainer: function(htmlElement) {
259 return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
263 DocumentTextElement.prototype = Object.create(DocumentElement.prototype);
265 $.extend(DocumentTextElement.prototype, {
266 createDOM: function() {
268 .attr('document-text-element', '')
269 .text(this.wlxmlNode.getText() || utils.unicode.ZWS);
272 detach: function(isChild) {
278 setText: function(text) {
280 text = utils.unicode.ZWS;
282 if(text !== this.getText()) {
283 this.dom.contents()[0].data = text;
286 handle: function(event) {
287 this.setText(event.meta.node.getText());
289 getText: function(options) {
290 options = _.extend({raw: false}, options || {});
291 var toret = this.dom.text();
293 toret = toret.replace(utils.unicode.ZWS, '');
297 isEmpty: function() {
298 // Having at least Zero Width Space is guaranteed be Content Observer
299 return this.dom.contents()[0].data === utils.unicode.ZWS;
301 after: function(params) {
302 if(params instanceof DocumentTextElement || params.text) {
306 if(params instanceof DocumentNodeElement) {
309 element = this.parent().createElement(params);
312 this.dom.wrap('<div>');
313 this.dom.parent().after(element.dom);
319 before: function(params) {
320 if(params instanceof DocumentTextElement || params.text) {
324 if(params instanceof DocumentNodeElement) {
327 element = this.createElement(params);
330 this.dom.wrap('<div>');
331 this.dom.parent().before(element.dom);
338 children: function() {
346 DocumentElement: DocumentElement,
347 DocumentNodeElement: DocumentNodeElement,
348 DocumentTextElement: DocumentTextElement