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('wlxml-tag'))
  36             return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
  37         if($element.attr('wlxml-text') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('wlxml-text') !== 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('[wlxml-tag]');
  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 $.extend(DocumentNodeElement, {
 116     createDOM: function(params) {
 117         var dom = $('<div>')
 118             .attr('wlxml-tag', params.tag);
 119         if(params.klass)
 120             dom.attr('wlxml-class', params.klass.replace(/\./g, '-'));
 121         if(params.meta) {
 122             _.keys(params.meta).forEach(function(key) {
 123                 dom.attr('wlxml-meta-'+key, params.meta[key]);
 124             });
 125         }
 126         dom.data('other-attrs', params.others);
 127         return dom;
 128     },
 129
 130     create: function(params, canvas) {
 131         return this.fromHTMLElement(this.createDOM(params)[0]);
 132     },
 133
 134     fromHTMLElement: function(htmlElement, canvas) {
 135         return new this(htmlElement, canvas);
 136     }
 137 });
 138
 139 var manipulate = function(e, params, action) {
 140     var element;
 141     if(params instanceof DocumentElement) {
 142         element = params;
 143     } else {
 144         element = DocumentElement.create(params);
 145     }
 146     e.dom()[action](element.dom());
 147     return element;
 148 };
 149
 150 DocumentNodeElement.prototype = new DocumentElement();
 151
 152
 153 $.extend(DocumentNodeElement.prototype, {
 154     data: function() {
 155         var dom = this.dom(),
 156             args = Array.prototype.slice.call(arguments, 0);
 157         if(args.length === 2 && args[1] === undefined)
 158             return dom.removeData(args[0]);
 159         return dom.data.apply(dom, arguments);
 160     },
 161     toXML: function(level) {
 162         var node = $('<' + this.getWlxmlTag() + '>');
 163
 164         if(this.getWlxmlClass())
 165             node.attr('class', this.getWlxmlClass());
 166         var meta = this.getWlxmlMetaAttrs();
 167         meta.forEach(function(attr) {
 168             if(attr.value)
 169                 node.attr('meta-' + attr.name, attr.value);
 170         });
 171         _.keys(this.data('other-attrs') || {}).forEach(function(key) {
 172             node.attr(key, this.data('other-attrs')[key]);
 173         }, this);
 174
 175         var addFormatting = function() {
 176             var toret = $('<div>');
 177             var formattings = {};
 178
 179             if(this.data('orig-before') !== undefined) {
 180                 if(this.data('orig-before')) {
 181                     toret.prepend(document.createTextNode(this.data('orig-before')));
 182                 }
 183             } else if(level && this.getWlxmlTag() !== 'span') {
 184                 toret.append('\n' + (new Array(level * 2 + 1)).join(' '));
 185             }
 186
 187             toret.append(node);
 188
 189             if(this.data('orig-after')) {
 190                 toret.append(document.createTextNode(this.data('orig-after')));
 191             }
 192
 193             /* Inside node */
 194             if(this.data('orig-begin')) {
 195                 node.prepend(this.data('orig-begin'));
 196                 formattings.begin = true;
 197             }
 198
 199             if(this.data('orig-end') !== undefined) {
 200                 if(this.data('orig-end')) {
 201                     node.append(this.data('orig-end'));
 202                 }
 203             } else if(this.getWlxmlTag() !== 'span' && children.length){
 204                 node.append('\n' + (new Array(level * 2 + 1)).join(' '));
 205             }
 206
 207             return {parts: toret.contents(), formattings: formattings};
 208         }.bind(this);
 209
 210
 211
 212         var children = this.children(),
 213             childParts;
 214
 215         var formatting = addFormatting(node);
 216
 217         for(var i = children.length - 1; i >= 0; i--) {
 218             childParts = children[i].toXML(level + 1);
 219             if(typeof childParts === 'string')
 220                 childParts = [document.createTextNode(childParts)];
 221
 222             if(formatting.formattings.begin) {
 223                 $(node.contents()[0]).after(childParts);
 224             } else
 225                 node.prepend(childParts);
 226         }
 227         return formatting.parts;
 228     },
 229     append: function(params) {
 230         if(params.tag !== 'span')
 231             this.data('orig-end', undefined);
 232         return manipulate(this, params, 'append');
 233     },
 234     before: function(params) {
 235         return manipulate(this, params, 'before');
 236
 237     },
 238     after: function(params) {
 239         return manipulate(this, params, 'after');
 240     },
 241     children: function() {
 242         var toret = [];
 243         if(this instanceof DocumentTextElement)
 244             return toret;
 245
 246
 247         var elementContent = this.dom().contents();
 248         var element = this;
 249         elementContent.each(function(idx) {
 250             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
 251             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
 252                 return true;
 253             if(idx > 0 && childElement instanceof DocumentTextElement) {
 254                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
 255                     return true;
 256             }
 257             toret.push(childElement);
 258         });
 259         return toret;
 260     },
 261     childIndex: function(child) {
 262         var children = this.children(),
 263             toret = null;
 264         children.forEach(function(c, idx) {
 265             if(c.sameNode(child)) {
 266                 toret = idx;
 267                 return false;
 268             }
 269         });
 270         return toret;
 271     },
 272     getWlxmlTag: function() {
 273         return this.dom().attr('wlxml-tag');
 274     },
 275     setWlxmlTag: function(tag) {
 276         this.dom().attr('wlxml-tag', tag);
 277     },
 278     getWlxmlClass: function() {
 279         var klass = this.dom().attr('wlxml-class');
 280         if(klass)
 281             return klass.replace(/-/g, '.');
 282         return undefined;
 283     },
 284     setWlxmlClass: function(klass) {
 285         this.getWlxmlMetaAttrs().forEach(function(attr) {
 286             if(!classAttributes.hasMetaAttr(klass, attr.name))
 287                 this.dom().removeAttr('wlxml-meta-' + attr.name);
 288         }, this);
 289
 290         if(klass)
 291             this.dom().attr('wlxml-class', klass.replace(/\./g, '-'));
 292         else
 293             this.dom().removeAttr('wlxml-class');
 294     },
 295     is: function(what) {
 296         if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass()))
 297             return true;
 298         return false;
 299     },
 300
 301
 302     getWlxmlMetaAttr: function(attr) {
 303         return this.dom().attr('wlxml-meta-'+attr);
 304     },
 305     getWlxmlMetaAttrs: function() {
 306         var toret = [];
 307         var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass());
 308         attrList.all.forEach(function(attr) {
 309             toret.push({name: attr.name, value: this.getWlxmlMetaAttr(attr.name) || ''});
 310         }, this);
 311         return toret;
 312     },
 313     setWlxmlMetaAttr: function(attr, value) {
 314         this.dom().attr('wlxml-meta-'+attr, value);
 315     }
 316 });
 317
 318
 319 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
 320 var DocumentTextElement = function(htmlElement, canvas) {
 321     DocumentElement.call(this, htmlElement, canvas);
 322 };
 323
 324 $.extend(DocumentTextElement, {
 325     createDOM: function(params) {
 326         return $('<div>')
 327             .attr('wlxml-text', '')
 328             .text(params.text || utils.unicode.ZWS);
 329     },
 330
 331     create: function(params, canvas) {
 332         return this.fromHTMLElement(this.createDOM(params)[0]);
 333     },
 334
 335     fromHTMLElement: function(htmlElement, canvas) {
 336         return new this(htmlElement, canvas);
 337     },
 338     isContentContainer: function(htmlElement) {
 339         return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[wlxml-text]');
 340     }
 341 });
 342
 343 DocumentTextElement.prototype = new DocumentElement();
 344
 345 $.extend(DocumentTextElement.prototype, {
 346     toXML: function(parent) {
 347         return this.getText();
 348     },
 349     _setupDOMHandler: function(htmlElement) {
 350         var $element = $(htmlElement);
 351         if(htmlElement.nodeType === Node.TEXT_NODE)
 352             this.$element = $element.parent();
 353         else
 354             this.$element = $element;
 355     },
 356     setText: function(text) {
 357         this.dom().contents()[0].data = text;
 358     },
 359     getText: function() {
 360         return this.dom().text().replace(utils.unicode.ZWS, '');
 361     },
 362     isEmpty: function() {
 363         // Having at least Zero Width Space is guaranteed be Content Observer
 364         return this.dom().contents()[0].data === utils.unicode.ZWS;
 365     },
 366     after: function(params) {
 367         if(params instanceof DocumentTextElement || params.text)
 368             return false;
 369         var element;
 370         if(params instanceof DocumentNodeElement) {
 371             element = params;
 372         } else {
 373             element = DocumentNodeElement.create(params);
 374         }
 375         this.dom().wrap('<div>');
 376         this.dom().parent().after(element.dom());
 377         this.dom().unwrap();
 378         return element;
 379     },
 380     before: function(params) {
 381         if(params instanceof DocumentTextElement || params.text)
 382             return false;
 383         var element;
 384         if(params instanceof DocumentNodeElement) {
 385             element = params;
 386         } else {
 387             element = DocumentNodeElement.create(params);
 388         }
 389         this.dom().wrap('<div>');
 390         this.dom().parent().before(element.dom());
 391         this.dom().unwrap();
 392         return element;
 393     },
 394     wrapWithNodeElement: function(wlxmlNode) {
 395         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
 396             return this.canvas.wrapText({
 397                 inside: this.parent(),
 398                 textNodeIdx: this.parent().childIndex(this),
 399                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
 400                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
 401                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
 402             });
 403         } else {
 404             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
 405         }
 406     },
 407     unwrap: function() {
 408         var parent = this.parent(),
 409             toret;
 410         if(parent.children().length === 1) {
 411             toret = parent.parent();
 412             var grandParent = parent.parent();
 413             if(grandParent) {
 414                 var grandParentChildren = grandParent.children(),
 415                     idx = grandParent.childIndex(parent),
 416                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
 417                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
 418                 if(prev && next) {
 419                     prev.setText(prev.getText() + this.getText() + next.getText());
 420                     next.detach();
 421                 } else if (prev || next) {
 422                     var target = prev ? prev : next;
 423                     target.setText(target.getText() + this.getText());
 424                 } else {
 425                     parent.after(this);
 426                 }
 427             } else {
 428                 parent.after(this);
 429             }
 430             parent.detach();
 431             return toret;
 432         }
 433     },
 434     split: function(params) {
 435         var parentElement = this.parent(),
 436             myIdx = parentElement.childIndex(this),
 437             myCanvas = this.canvas,
 438             passed = false,
 439             succeedingChildren = [],
 440             thisElement = this,
 441             prefix = this.getText().substr(0, params.offset),
 442             suffix = this.getText().substr(params.offset);
 443
 444         parentElement.children().forEach(function(child) {
 445             if(passed)
 446                 succeedingChildren.push(child);
 447             if(child.sameNode(thisElement))
 448                 passed = true;
 449         });
 450
 451         if(prefix.length > 0)
 452             this.setText(prefix);
 453         else
 454             this.detach();
 455
 456         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
 457         parentElement.after(newElement);
 458
 459         if(suffix.length > 0)
 460             newElement.append({text: suffix});
 461         succeedingChildren.forEach(function(child) {
 462             newElement.append(child);
 463         });
 464
 465         return {first: parentElement, second: newElement};
 466     },
 467     divide: function(params) {
 468         var myText = this.getText();
 469
 470         if(params.offset <= 0 || params.offset >= myText.length)
 471             return;
 472
 473         var lhsText = myText.substr(0, params.offset),
 474             rhsText = myText.substr(params.offset),
 475             newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas),
 476             rhsTextElement = DocumentTextElement.create({text: rhsText});
 477
 478         this.setText(lhsText);
 479         this.after(newElement);
 480         newElement.after(rhsTextElement);
 481         return newElement;
 482     }
 483 });
 484
 485 return {
 486     DocumentElement: DocumentElement,
 487     DocumentNodeElement: DocumentNodeElement,
 488     DocumentTextElement: DocumentTextElement
 489 };
 490
 491 });