modules/documentCanvas/canvas/documentElement.js

   1 define([
   2 'libs/jquery-1.9.1.min',
   3 'libs/underscore-min',
   4 'modules/documentCanvas/classAttributes',
   5 'modules/documentCanvas/canvas/utils'
   6 ], function($, _, classAttributes, utils) {
   7
   8 'use strict';
   9
  10
  11 // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas
  12 var DocumentElement = function(htmlElement, canvas) {
  13     if(arguments.length === 0)
  14         return;
  15     this.canvas = canvas;
  16     this._setupDOMHandler(htmlElement);
  17 }
  18
  19 var elementTypeFromParams = function(params) {
  20     return params.text !== undefined ? DocumentTextElement : DocumentNodeElement;
  21
  22 };
  23
  24 $.extend(DocumentElement, {
  25     create: function(params, canvas) {
  26         return elementTypeFromParams(params).create(params);
  27     },
  28
  29     createDOM: function(params) {
  30         return elementTypeFromParams(params).createDOM(params);
  31     },
  32
  33     fromHTMLElement: function(htmlElement, canvas) {
  34         var $element = $(htmlElement);
  35         if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined)
  36             return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
  37         if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined))
  38             return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
  39         return undefined;
  40     }
  41 });
  42
  43 $.extend(DocumentElement.prototype, {
  44     _setupDOMHandler: function(htmlElement) {
  45         this.$element = $(htmlElement);
  46     },
  47     dom: function() {
  48         return this.$element;
  49     },
  50     parent: function() {
  51         var parents = this.$element.parents('[document-node-element]');
  52         if(parents.length)
  53             return DocumentElement.fromHTMLElement(parents[0], this.canvas);
  54         return null;
  55     },
  56
  57     parents: function() {
  58         var parents = [],
  59             parent = this.parent();
  60         while(parent) {
  61             parents.push(parent);
  62             parent = parent.parent();
  63         }
  64         return parents;
  65     },
  66
  67     sameNode: function(other) {
  68         return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
  69     },
  70
  71     wrapWithNodeElement: function(wlxmlNode) {
  72         var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass});
  73         this.dom().replaceWith(wrapper.dom());
  74         wrapper.append(this);
  75         return wrapper;
  76     },
  77
  78     detach: function() {
  79         this.dom().detach();
  80         this.canvas = null;
  81     },
  82
  83     markAsCurrent: function() {
  84         this.canvas.markAsCurrent(this);
  85     },
  86
  87     getVerticallyFirstTextElement: function() {
  88         var toret;
  89         this.children().some(function(child) {
  90             if(!child.isVisible())
  91                 return false; // continue
  92             if(child instanceof DocumentTextElement) {
  93                 toret = child;
  94                 return true; // break
  95             } else {
  96                 toret = child.getVerticallyFirstTextElement();
  97                 if(toret)
  98                     return true; // break
  99             }
 100         });
 101         return toret;
 102     },
 103
 104     isVisible: function() {
 105         return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata';
 106     }
 107 });
 108
 109
 110 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
 111 var DocumentNodeElement = function(htmlElement, canvas) {
 112     DocumentElement.call(this, htmlElement, canvas);
 113 };
 114
 115 var getDisplayStyle = function(tag, klass) {
 116     if(tag === 'metadata')
 117         return 'none';
 118     if(tag === 'span')
 119         return 'inline';
 120     return 'block';
 121 }
 122
 123 $.extend(DocumentNodeElement, {
 124     createDOM: function(params) {
 125         var dom = $('<div document-node-element>'),
 126             container = $('<div document-element-content>');
 127
 128         container.attr('wlxml-tag', params.tag);
 129         if(params.klass)
 130             container.attr('wlxml-class', params.klass.replace(/\./g, '-'));
 131         if(params.meta) {
 132             _.keys(params.meta).forEach(function(key) {
 133                 dom.attr('wlxml-meta-'+key, params.meta[key]);
 134             });
 135         }
 136         dom.data('other-attrs', params.others);
 137
 138         /* display style */
 139         var displayStyle = getDisplayStyle(params.tag, params.klass);
 140         dom.css('display', displayStyle);
 141         container.css('display', displayStyle);
 142
 143         var widgets = $('<div class="canvas-widgets" contenteditable="false">');
 144         widgets.append($('<span class="canvas-widget canvas-widget-label">').text(params.tag + (params.klass ? ' / ' + params.klass : '')));
 145         dom.append(widgets);
 146
 147         // Make sure widgets aren't navigable with arrow keys
 148         widgets.find('*').add(widgets).attr('tabindex', -1);
 149
 150         dom.append(container);
 151
 152         if(params.rawChildren) {
 153             container.append(params.rawChildren);
 154         }
 155         return dom;
 156     },
 157
 158     create: function(params, canvas) {
 159         return this.fromHTMLElement(this.createDOM(params)[0]);
 160     },
 161
 162     fromHTMLElement: function(htmlElement, canvas) {
 163         return new this(htmlElement, canvas);
 164     }
 165 });
 166
 167 var manipulate = function(e, params, action) {
 168     var element;
 169     if(params instanceof DocumentElement) {
 170         element = params;
 171     } else {
 172         element = DocumentElement.create(params);
 173     }
 174     var target = action === 'append' ? e._container() : e.dom();
 175     target[action](element.dom());
 176     return element;
 177 };
 178
 179 DocumentNodeElement.prototype = new DocumentElement();
 180
 181
 182 $.extend(DocumentNodeElement.prototype, {
 183     _container: function() {
 184         return this.dom().children('[document-element-content]');
 185     },
 186     data: function() {
 187         var dom = this.dom(),
 188             args = Array.prototype.slice.call(arguments, 0);
 189         if(args.length === 2 && args[1] === undefined)
 190             return dom.removeData(args[0]);
 191         return dom.data.apply(dom, arguments);
 192     },
 193     toXML: function(level) {
 194         var node = $('<' + this.getWlxmlTag() + '>');
 195
 196         if(this.getWlxmlClass())
 197             node.attr('class', this.getWlxmlClass());
 198         var meta = this.getWlxmlMetaAttrs();
 199         meta.forEach(function(attr) {
 200             if(attr.value)
 201                 node.attr('meta-' + attr.name, attr.value);
 202         });
 203         _.keys(this.data('other-attrs') || {}).forEach(function(key) {
 204             node.attr(key, this.data('other-attrs')[key]);
 205         }, this);
 206
 207         var addFormatting = function() {
 208             var toret = $('<div>');
 209             var formattings = {};
 210
 211             if(this.data('orig-before') !== undefined) {
 212                 if(this.data('orig-before')) {
 213                     toret.prepend(document.createTextNode(this.data('orig-before')));
 214                 }
 215             } else if(level && this.getWlxmlTag() !== 'span') {
 216                 toret.append('\n' + (new Array(level * 2 + 1)).join(' '));
 217             }
 218
 219             toret.append(node);
 220
 221             if(this.data('orig-after')) {
 222                 toret.append(document.createTextNode(this.data('orig-after')));
 223             }
 224
 225             /* Inside node */
 226             if(this.data('orig-begin')) {
 227                 node.prepend(this.data('orig-begin'));
 228                 formattings.begin = true;
 229             }
 230
 231             if(this.data('orig-end') !== undefined) {
 232                 if(this.data('orig-end')) {
 233                     node.append(this.data('orig-end'));
 234                 }
 235             } else if(this.getWlxmlTag() !== 'span' && children.length){
 236                 node.append('\n' + (new Array(level * 2 + 1)).join(' '));
 237             }
 238
 239             return {parts: toret.contents(), formattings: formattings};
 240         }.bind(this);
 241
 242
 243
 244         var children = this.children(),
 245             childParts;
 246
 247         var formatting = addFormatting(node);
 248
 249         for(var i = children.length - 1; i >= 0; i--) {
 250             childParts = children[i].toXML(level + 1);
 251             if(typeof childParts === 'string')
 252                 childParts = [document.createTextNode(childParts)];
 253
 254             if(formatting.formattings.begin) {
 255                 $(node.contents()[0]).after(childParts);
 256             } else
 257                 node.prepend(childParts);
 258         }
 259         return formatting.parts;
 260     },
 261     append: function(params) {
 262         if(params.tag !== 'span')
 263             this.data('orig-end', undefined);
 264         return manipulate(this, params, 'append');
 265     },
 266     before: function(params) {
 267         return manipulate(this, params, 'before');
 268
 269     },
 270     after: function(params) {
 271         return manipulate(this, params, 'after');
 272     },
 273     children: function() {
 274         var toret = [];
 275         if(this instanceof DocumentTextElement)
 276             return toret;
 277
 278
 279         var elementContent = this._container().contents();
 280         var element = this;
 281         elementContent.each(function(idx) {
 282             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
 283             if(childElement === undefined)
 284                 return true;
 285             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
 286                 return true;
 287             if(idx > 0 && childElement instanceof DocumentTextElement) {
 288                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
 289                     return true;
 290             }
 291             toret.push(childElement);
 292         });
 293         return toret;
 294     },
 295     childIndex: function(child) {
 296         var children = this.children(),
 297             toret = null;
 298         children.forEach(function(c, idx) {
 299             if(c.sameNode(child)) {
 300                 toret = idx;
 301                 return false;
 302             }
 303         });
 304         return toret;
 305     },
 306     getWlxmlTag: function() {
 307         return this._container().attr('wlxml-tag');
 308     },
 309     setWlxmlTag: function(tag) {
 310         this._container().attr('wlxml-tag', tag);
 311         this._updateDisplayStyle();
 312     },
 313     getWlxmlClass: function() {
 314         var klass = this._container().attr('wlxml-class');
 315         if(klass)
 316             return klass.replace(/-/g, '.');
 317         return undefined;
 318     },
 319     setWlxmlClass: function(klass) {
 320         this.getWlxmlMetaAttrs().forEach(function(attr) {
 321             if(!classAttributes.hasMetaAttr(klass, attr.name))
 322                 this.dom().removeAttr('wlxml-meta-' + attr.name);
 323         }, this);
 324
 325         if(klass)
 326             this._container().attr('wlxml-class', klass.replace(/\./g, '-'));
 327         else
 328             this._container().removeAttr('wlxml-class');
 329         this._updateDisplayStyle();
 330     },
 331     _updateDisplayStyle: function() {
 332         var displayStyle = getDisplayStyle(this.getWlxmlTag, this.getWlxmlClass);
 333         this.dom().css('display', displayStyle);
 334         this._container().css('display', displayStyle);
 335     },
 336     is: function(what) {
 337         if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass()))
 338             return true;
 339         return false;
 340     },
 341
 342     getWlxmlMetaAttr: function(attr) {
 343         return this.dom().attr('wlxml-meta-'+attr);
 344     },
 345
 346     getWlxmlMetaAttrs: function() {
 347         var toret = [];
 348         var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass());
 349         attrList.all.forEach(function(attr) {
 350             toret.push({name: attr.name, value: this.getWlxmlMetaAttr(attr.name) || ''});
 351         }, this);
 352         return toret;
 353     },
 354
 355     setWlxmlMetaAttr: function(attr, value) {
 356         this.dom().attr('wlxml-meta-'+attr, value);
 357     },
 358
 359     toggleLabel: function(toggle) {
 360         var displayCss = toggle ? 'inline-block' : 'none';
 361         var label = this.dom().children('.canvas-widgets').find('.canvas-widget-label');
 362         label.css('display', displayCss);
 363         this.dom().toggleClass('highlighted-element');
 364     }
 365 });
 366
 367
 368 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
 369 var DocumentTextElement = function(htmlElement, canvas) {
 370     DocumentElement.call(this, htmlElement, canvas);
 371 };
 372
 373 $.extend(DocumentTextElement, {
 374     createDOM: function(params) {
 375         return $('<div>')
 376             .attr('document-text-element', '')
 377             .text(params.text || utils.unicode.ZWS);
 378     },
 379
 380     create: function(params, canvas) {
 381         return this.fromHTMLElement(this.createDOM(params)[0]);
 382     },
 383
 384     fromHTMLElement: function(htmlElement, canvas) {
 385         return new this(htmlElement, canvas);
 386     },
 387     isContentContainer: function(htmlElement) {
 388         return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
 389     }
 390 });
 391
 392 DocumentTextElement.prototype = new DocumentElement();
 393
 394 $.extend(DocumentTextElement.prototype, {
 395     toXML: function(parent) {
 396         return this.getText();
 397     },
 398     _setupDOMHandler: function(htmlElement) {
 399         var $element = $(htmlElement);
 400         if(htmlElement.nodeType === Node.TEXT_NODE)
 401             this.$element = $element.parent();
 402         else
 403             this.$element = $element;
 404     },
 405     setText: function(text) {
 406         this.dom().contents()[0].data = text;
 407     },
 408     getText: function() {
 409         return this.dom().text().replace(utils.unicode.ZWS, '');
 410     },
 411     isEmpty: function() {
 412         // Having at least Zero Width Space is guaranteed be Content Observer
 413         return this.dom().contents()[0].data === utils.unicode.ZWS;
 414     },
 415     after: function(params) {
 416         if(params instanceof DocumentTextElement || params.text)
 417             return false;
 418         var element;
 419         if(params instanceof DocumentNodeElement) {
 420             element = params;
 421         } else {
 422             element = DocumentNodeElement.create(params);
 423         }
 424         this.dom().wrap('<div>');
 425         this.dom().parent().after(element.dom());
 426         this.dom().unwrap();
 427         return element;
 428     },
 429     before: function(params) {
 430         if(params instanceof DocumentTextElement || params.text)
 431             return false;
 432         var element;
 433         if(params instanceof DocumentNodeElement) {
 434             element = params;
 435         } else {
 436             element = DocumentNodeElement.create(params);
 437         }
 438         this.dom().wrap('<div>');
 439         this.dom().parent().before(element.dom());
 440         this.dom().unwrap();
 441         return element;
 442     },
 443     wrapWithNodeElement: function(wlxmlNode) {
 444         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
 445             return this.canvas.wrapText({
 446                 inside: this.parent(),
 447                 textNodeIdx: this.parent().childIndex(this),
 448                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
 449                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
 450                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
 451             });
 452         } else {
 453             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
 454         }
 455     },
 456     unwrap: function() {
 457         var parent = this.parent(),
 458             toret;
 459         if(parent.children().length === 1) {
 460             toret = parent.parent();
 461             var grandParent = parent.parent();
 462             if(grandParent) {
 463                 var grandParentChildren = grandParent.children(),
 464                     idx = grandParent.childIndex(parent),
 465                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
 466                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
 467                 if(prev && next) {
 468                     prev.setText(prev.getText() + this.getText() + next.getText());
 469                     next.detach();
 470                 } else if (prev || next) {
 471                     var target = prev ? prev : next;
 472                     target.setText(target.getText() + this.getText());
 473                 } else {
 474                     parent.after(this);
 475                 }
 476             } else {
 477                 parent.after(this);
 478             }
 479             parent.detach();
 480             return toret;
 481         }
 482     },
 483     split: function(params) {
 484         var parentElement = this.parent(),
 485             myIdx = parentElement.childIndex(this),
 486             myCanvas = this.canvas,
 487             passed = false,
 488             succeedingChildren = [],
 489             thisElement = this,
 490             prefix = this.getText().substr(0, params.offset),
 491             suffix = this.getText().substr(params.offset);
 492
 493         parentElement.children().forEach(function(child) {
 494             if(passed)
 495                 succeedingChildren.push(child);
 496             if(child.sameNode(thisElement))
 497                 passed = true;
 498         });
 499
 500         if(prefix.length > 0)
 501             this.setText(prefix);
 502         else
 503             this.detach();
 504
 505         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
 506         parentElement.after(newElement);
 507
 508         if(suffix.length > 0)
 509             newElement.append({text: suffix});
 510         succeedingChildren.forEach(function(child) {
 511             newElement.append(child);
 512         });
 513
 514         return {first: parentElement, second: newElement};
 515     },
 516     divide: function(params) {
 517         var myText = this.getText();
 518
 519         if(params.offset === myText.length)
 520             return this.after(params);
 521         if(params.offset === 0)
 522             return this.before(params);
 523
 524         var lhsText = myText.substr(0, params.offset),
 525             rhsText = myText.substr(params.offset),
 526             newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas),
 527             rhsTextElement = DocumentTextElement.create({text: rhsText});
 528
 529         this.setText(lhsText);
 530         this.after(newElement);
 531         newElement.after(rhsTextElement);
 532         return newElement;
 533     }
 534 });
 535
 536 return {
 537     DocumentElement: DocumentElement,
 538     DocumentNodeElement: DocumentNodeElement,
 539     DocumentTextElement: DocumentTextElement
 540 };
 541
 542 });