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, params) {
16 this.wlxmlNode = wlxmlNode;
17 this.mirror = params.mirror;
24 this.dom = this.createDOM();
25 this.dom.data('canvas-element', this);
27 var mirrorElements = this.wlxmlNode.getData('mirrorElements');
30 this.wlxmlNode.setData('mirrorElements', mirrorElements);
33 mirrorElements.push(this);
35 this.wlxmlNode.setData('canvasElement', this);
39 $.extend(DocumentElement.prototype, {
40 refreshPath: function() {
41 this.parents().forEach(function(parent) {
49 updateState: function(toUpdate) {
52 .filter(function(key) {
53 return this.state.hasOwnProperty(key);
55 .forEach(function(key) {
56 if(this.state !== toUpdate[key]) {
57 this.state[key] = changes[key] = toUpdate[key];
60 if(_.isFunction(this.onStateChange)) {
61 this.onStateChange(changes);
62 if(_.isBoolean(changes.active)) {
65 while(ptr && ptr.wlxmlNode.getTagName() === 'span') {
68 if(ptr && ptr.gutterGroup) {
69 ptr.gutterGroup.show();
76 var parents = this.dom.parents('[document-node-element]');
78 return this.canvas.getDocumentElement(parents[0]);
85 parent = this.parent();
88 parent = parent.parent();
93 sameNode: function(other) {
94 return other && (typeof other === typeof this) && other.dom[0] === this.dom[0];
96 isRootElement: function() {
97 return this.sameNode(this.canvas.rootElement);
100 trigger: function() {
101 this.canvas.eventBus.trigger.apply(this.canvas.eventBus, Array.prototype.slice.call(arguments, 0));
108 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
109 var DocumentNodeElement = function(wlxmlNode, canvas, params) {
110 DocumentElement.call(this, wlxmlNode, canvas, params);
111 this.containers = [];
112 this.elementsRegister = canvas.createElementsRegister();
113 this.contextMenuActions = [];
118 var manipulate = function(e, params, action, params2) {
120 if(params instanceof DocumentElement) {
123 element = e.createElement(params, params2);
126 e.dom[action](element.dom);
132 DocumentNodeElement.prototype = Object.create(DocumentElement.prototype);
135 $.extend(DocumentNodeElement.prototype, {
136 defaultDisplayStyle: 'block',
138 addWidget: function(widget) {
139 this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget);
141 clearWidgets: function() {
142 this.dom.children('.canvas-widgets').empty();
144 addToGutter: function(view) {
145 if(!this.gutterGroup) {
146 this.gutterGroup = this.canvas.gutter.createViewGroup({
147 offsetHint: function() {
148 return this.canvas.getElementOffset(this);
152 this.gutterGroup.addView(view);
154 createContainer: function(nodes, params) {
155 var toret = container.create(nodes, params, this);
156 this.containers.push(toret);
159 removeContainer: function(container) {
161 if((idx = this.containers.indexOf(container)) !== -1) {
162 this.containers.splice(idx, 1);
165 createElement: function(wlxmlNode, params) {
166 params = params || {mirror: false};
167 var parent = this.wlxmlNode.parent() ? utils.getElementForNode(this.wlxmlNode.parent()) : null;
168 return this.canvas.createElement(wlxmlNode, this.elementsRegister, !parent, params) || parent.createElement(wlxmlNode, params);
170 addToContextMenu: function(actionFqName) {
171 this.contextMenuActions.push(this.canvas.createAction(actionFqName));
173 handle: function(event) {
174 var method = 'on' + event.type[0].toUpperCase() + event.type.substr(1),
175 containerExisted = false;
176 if(event.type === 'nodeAdded' || event.type === 'nodeDetached') {
177 this.containers.some(function(container) {
178 if(container.manages(event.meta.node, event.meta.parent)) {
179 //target = container;
180 container[method](event);
181 containerExisted = true;
186 if(!containerExisted && this[method]) {
191 // target[method](event);
194 createDOM: function() {
195 var wrapper = $('<div>').attr('document-node-element', ''),
196 widgetsContainer = $('<div>')
197 .addClass('canvas-widgets'),
198 contentContainer = $('<div>')
199 .attr('document-element-content', '');
201 wrapper.append(contentContainer, widgetsContainer);
202 widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
205 _container: function() {
206 return this.dom.children('[document-element-content]');
208 detach: function(isChild) {
211 if(this.gutterGroup) {
212 this.gutterGroup.remove();
214 if(_.isFunction(this.children)) {
215 this.children().forEach(function(child) {
221 parents = this.parents();
224 parents[0].refreshPath();
229 before: function(params, params2) {
230 return manipulate(this, params, 'before', params2);
233 after: function(params, params2) {
234 return manipulate(this, params, 'after', params2);
237 isBlock: function() {
238 return this.dom.css('display') === 'block';
241 displayAsBlock: function() {
242 this.dom.css('display', 'block');
243 this._container().css('display', 'block');
245 displayInline: function() {
246 this.dom.css('display', 'inline');
247 this._container().css('display', 'inline');
249 displayAs: function(what) {
250 // [this.dom(), this._container()].forEach(e) {
251 // var isBlock = window.getComputedStyle(e).display === 'block';
252 // if(!isBlock && what === 'block') {
253 // e.css('display', what);
254 // } else if(isBlock && what === 'inline') {
258 this.dom.css('display', what);
259 this._container().css('display', what);
261 children: function() {
267 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
268 var DocumentTextElement = function(wlxmlTextNode, canvas, params) {
269 DocumentElement.call(this, wlxmlTextNode, canvas, params);
272 $.extend(DocumentTextElement, {
273 isContentContainer: function(htmlElement) {
274 return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
278 DocumentTextElement.prototype = Object.create(DocumentElement.prototype);
280 $.extend(DocumentTextElement.prototype, {
281 createDOM: function() {
283 .attr('document-text-element', '')
284 .text(this.wlxmlNode.getText() || utils.unicode.ZWS);
287 detach: function(isChild) {
293 setText: function(text) {
295 text = utils.unicode.ZWS;
297 if(text !== this.getText()) {
298 this.dom.contents()[0].data = text;
301 handle: function(event) {
302 this.setText(event.meta.node.getText());
304 getText: function(options) {
305 options = _.extend({raw: false}, options || {});
306 var toret = this.dom.text();
308 toret = toret.replace(utils.unicode.ZWS, '');
312 isEmpty: function() {
313 // Having at least Zero Width Space is guaranteed be Content Observer
314 return this.dom.contents()[0].data === utils.unicode.ZWS;
316 after: function(params, params2) {
317 if(params instanceof DocumentTextElement || params.text) {
321 if(params instanceof DocumentNodeElement) {
324 element = this.parent().createElement(params, params2);
327 this.dom.wrap('<div>');
328 this.dom.parent().after(element.dom);
334 before: function(params) {
335 if(params instanceof DocumentTextElement || params.text) {
339 if(params instanceof DocumentNodeElement) {
342 element = this.createElement(params);
345 this.dom.wrap('<div>');
346 this.dom.parent().before(element.dom);
353 children: function() {
361 DocumentElement: DocumentElement,
362 DocumentNodeElement: DocumentNodeElement,
363 DocumentTextElement: DocumentTextElement