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.toggleHighlight(toggle);
 364     },
 365
 366     toggleHighlight: function(toogle) {
 367         this.dom().toggleClass('highlighted-element');
 368     }
 369 });
 370
 371
 372 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
 373 var DocumentTextElement = function(htmlElement, canvas) {
 374     DocumentElement.call(this, htmlElement, canvas);
 375 };
 376
 377 $.extend(DocumentTextElement, {
 378     createDOM: function(params) {
 379         return $('<div>')
 380             .attr('document-text-element', '')
 381             .text(params.text || utils.unicode.ZWS);
 382     },
 383
 384     create: function(params, canvas) {
 385         return this.fromHTMLElement(this.createDOM(params)[0]);
 386     },
 387
 388     fromHTMLElement: function(htmlElement, canvas) {
 389         return new this(htmlElement, canvas);
 390     },
 391     isContentContainer: function(htmlElement) {
 392         return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
 393     }
 394 });
 395
 396 DocumentTextElement.prototype = new DocumentElement();
 397
 398 $.extend(DocumentTextElement.prototype, {
 399     toXML: function(parent) {
 400         return this.getText();
 401     },
 402     _setupDOMHandler: function(htmlElement) {
 403         var $element = $(htmlElement);
 404         if(htmlElement.nodeType === Node.TEXT_NODE)
 405             this.$element = $element.parent();
 406         else
 407             this.$element = $element;
 408     },
 409     setText: function(text) {
 410         this.dom().contents()[0].data = text;
 411     },
 412     getText: function() {
 413         return this.dom().text().replace(utils.unicode.ZWS, '');
 414     },
 415     isEmpty: function() {
 416         // Having at least Zero Width Space is guaranteed be Content Observer
 417         return this.dom().contents()[0].data === utils.unicode.ZWS;
 418     },
 419     after: function(params) {
 420         if(params instanceof DocumentTextElement || params.text)
 421             return false;
 422         var element;
 423         if(params instanceof DocumentNodeElement) {
 424             element = params;
 425         } else {
 426             element = DocumentNodeElement.create(params);
 427         }
 428         this.dom().wrap('<div>');
 429         this.dom().parent().after(element.dom());
 430         this.dom().unwrap();
 431         return element;
 432     },
 433     before: function(params) {
 434         if(params instanceof DocumentTextElement || params.text)
 435             return false;
 436         var element;
 437         if(params instanceof DocumentNodeElement) {
 438             element = params;
 439         } else {
 440             element = DocumentNodeElement.create(params);
 441         }
 442         this.dom().wrap('<div>');
 443         this.dom().parent().before(element.dom());
 444         this.dom().unwrap();
 445         return element;
 446     },
 447     wrapWithNodeElement: function(wlxmlNode) {
 448         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
 449             return this.canvas.wrapText({
 450                 inside: this.parent(),
 451                 textNodeIdx: this.parent().childIndex(this),
 452                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
 453                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
 454                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
 455             });
 456         } else {
 457             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
 458         }
 459     },
 460     unwrap: function() {
 461         var parent = this.parent(),
 462             toret;
 463         if(parent.children().length === 1) {
 464             toret = parent.parent();
 465             var grandParent = parent.parent();
 466             if(grandParent) {
 467                 var grandParentChildren = grandParent.children(),
 468                     idx = grandParent.childIndex(parent),
 469                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
 470                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
 471                 if(prev && next) {
 472                     prev.setText(prev.getText() + this.getText() + next.getText());
 473                     next.detach();
 474                 } else if (prev || next) {
 475                     var target = prev ? prev : next;
 476                     target.setText(target.getText() + this.getText());
 477                 } else {
 478                     parent.after(this);
 479                 }
 480             } else {
 481                 parent.after(this);
 482             }
 483             parent.detach();
 484             return toret;
 485         }
 486     },
 487     split: function(params) {
 488         var parentElement = this.parent(),
 489             myIdx = parentElement.childIndex(this),
 490             myCanvas = this.canvas,
 491             passed = false,
 492             succeedingChildren = [],
 493             thisElement = this,
 494             prefix = this.getText().substr(0, params.offset),
 495             suffix = this.getText().substr(params.offset);
 496
 497         parentElement.children().forEach(function(child) {
 498             if(passed)
 499                 succeedingChildren.push(child);
 500             if(child.sameNode(thisElement))
 501                 passed = true;
 502         });
 503
 504         if(prefix.length > 0)
 505             this.setText(prefix);
 506         else
 507             this.detach();
 508
 509         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
 510         parentElement.after(newElement);
 511
 512         if(suffix.length > 0)
 513             newElement.append({text: suffix});
 514         succeedingChildren.forEach(function(child) {
 515             newElement.append(child);
 516         });
 517
 518         return {first: parentElement, second: newElement};
 519     },
 520     divide: function(params) {
 521         var myText = this.getText();
 522
 523         if(params.offset === myText.length)
 524             return this.after(params);
 525         if(params.offset === 0)
 526             return this.before(params);
 527
 528         var lhsText = myText.substr(0, params.offset),
 529             rhsText = myText.substr(params.offset),
 530             newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas),
 531             rhsTextElement = DocumentTextElement.create({text: rhsText});
 532
 533         this.setText(lhsText);
 534         this.after(newElement);
 535         newElement.after(rhsTextElement);
 536         return newElement;
 537     },
 538
 539     toggleHighlight: function() {
 540         // do nothing for now
 541     }
 542 });
 543
 544 return {
 545     DocumentElement: DocumentElement,
 546     DocumentNodeElement: DocumentNodeElement,
 547     DocumentTextElement: DocumentTextElement
 548 };
 549
 550 });