modules/documentCanvas/canvas/documentElement.js

   1 define([
   2 'libs/jquery-1.9.1.min',
   3 'libs/underscore-min'
   4 ], function($, _) {
   5
   6 'use strict';
   7
   8
   9 // DocumentElement represents a node from WLXML document rendered inside Canvas
  10 var DocumentElement = function(htmlElement, canvas) {
  11     if(arguments.length === 0)
  12         return;
  13     this.canvas = canvas;
  14     this.$element = $(htmlElement);
  15 }
  16
  17 $.extend(DocumentElement.prototype, {
  18     dom: function() {
  19         return this.$element;
  20     },
  21     parent: function() {
  22         var parents = this.$element.parents('[wlxml-tag]');
  23         if(parents.length)
  24             return DocumentElement.fromHTMLElement(parents[0], this.canvas);
  25         return null;
  26     },
  27
  28     sameNode: function(other) {
  29         return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
  30     },
  31
  32     wrapWithNodeElement: function(wlxmlNode) {
  33         var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass});
  34         this.dom().replaceWith(wrapper.dom());
  35         wrapper.append(this);
  36         return wrapper;
  37     },
  38
  39     detach: function() {
  40         this.dom().detach();
  41         this.canvas = null;
  42     }
  43 });
  44
  45
  46 var DocumentNodeElement = function(htmlElement, canvas) {
  47     DocumentElement.call(this, htmlElement, canvas);
  48 };
  49
  50 var DocumentTextElement = function(htmlElement, canvas) {
  51     DocumentElement.call(this, htmlElement, canvas);
  52 };
  53
  54 DocumentNodeElement.prototype = new DocumentElement();
  55 DocumentTextElement.prototype = new DocumentElement();
  56
  57 var manipulate = function(e, params, action) {
  58     var element;
  59     if(params instanceof DocumentElement) {
  60         element = params;
  61     } else {
  62         element = DocumentElement.create(params);
  63     }
  64     e.dom()[action](element.dom());
  65     return element;
  66 };
  67
  68 $.extend(DocumentNodeElement.prototype, {
  69     append: function(params) {
  70         manipulate(this, params, 'append');
  71     },
  72     before: function(params) {
  73         manipulate(this, params, 'before');
  74
  75     },
  76     after: function(params) {
  77         manipulate(this, params, 'after');
  78     },
  79     children: function() {
  80         var toret = [];
  81         if(this instanceof DocumentTextElement)
  82             return toret;
  83
  84
  85         var elementContent = this.dom().contents();
  86         var element = this;
  87         elementContent.each(function(idx) {
  88             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
  89             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
  90                 return true;
  91             if(idx > 0 && childElement instanceof DocumentTextElement) {
  92                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
  93                     return true;
  94             }
  95             toret.push(childElement);
  96         });
  97         return toret;
  98     },
  99     childIndex: function(child) {
 100         var children = this.children(),
 101             toret = null;
 102         children.forEach(function(c, idx) {
 103             if(c.sameNode(child)) {
 104                 toret = idx;
 105                 return false;
 106             }
 107         });
 108         return toret;
 109     },
 110     getWlxmlTag: function() {
 111         return this.dom().attr('wlxml-tag');
 112     },
 113     setWlxmlTag: function(tag) {
 114         this.dom().attr('wlxml-tag', tag);
 115     },
 116     getWlxmlClass: function() {
 117         var klass = this.dom().attr('wlxml-class');
 118         if(klass)
 119             return klass.replace('-', '.');
 120         return undefined;
 121     },
 122     setWlxmlClass: function(klass) {
 123         if(klass)
 124             this.dom().attr('wlxml-class', klass);
 125         else
 126             this.dom().removeAttr('wlxml-class');
 127     },
 128     is: function(what) {
 129         if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.dom().attr('wlxml-class')))
 130             return true;
 131         return false;
 132     }
 133 });
 134
 135
 136 DocumentElement.create = function(params, canvas) {
 137     var ElementType = params.text !== undefined ? DocumentTextElement : DocumentNodeElement;
 138     return ElementType.create(params);
 139 };
 140
 141 DocumentElement.createDOM = function(params) {
 142     var ElementType = params.text !== undefined ? DocumentTextElement : DocumentNodeElement;
 143     return ElementType.createDOM(params);
 144 };
 145
 146 DocumentElement.fromHTMLElement = function(htmlElement, canvas) {
 147     if(htmlElement.nodeType === Node.ELEMENT_NODE)
 148         return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
 149     if(htmlElement.nodeType === Node.TEXT_NODE)
 150         return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
 151 }
 152
 153 DocumentNodeElement.createDOM = function(params) {
 154     var dom = $('<div>').attr('wlxml-tag', params.tag);
 155     if(params.klass)
 156         dom.attr('wlxml-class', params.klass);
 157     return dom;
 158 };
 159
 160 DocumentTextElement.createDOM = function(params) {
 161     return $(document.createTextNode(params.text));
 162 };
 163
 164 DocumentNodeElement.create = function(params, canvas) {
 165     return this.fromHTMLElement(this.createDOM(params)[0]);
 166 };
 167
 168 DocumentTextElement.create = function(params, canvas) {
 169     return this.fromHTMLElement(this.createDOM(params)[0]);
 170 };
 171
 172 DocumentNodeElement.fromHTMLElement = function(htmlElement, canvas) {
 173     return new this(htmlElement, canvas);
 174 };
 175
 176 DocumentTextElement.fromHTMLElement = function(htmlElement, canvas) {
 177     return new this(htmlElement, canvas);
 178 };
 179
 180
 181 $.extend(DocumentTextElement.prototype, {
 182     setText: function(text) {
 183         this.dom()[0].data = text;
 184     },
 185     getText: function() {
 186         return this.dom().text();
 187     },
 188     after: function(params) {
 189         if(params instanceof DocumentTextElement || params.text)
 190             return false;
 191         var element;
 192         if(params instanceof DocumentNodeElement) {
 193             element = params;
 194         } else {
 195             element = DocumentNodeElement.create(params);
 196         }
 197         this.dom().wrap('<div>');
 198         this.dom().parent().after(element.dom());
 199         this.dom().unwrap();
 200         return element;
 201     },
 202     before: function(params) {
 203         if(params instanceof DocumentTextElement || params.text)
 204             return false;
 205         var element;
 206         if(params instanceof DocumentNodeElement) {
 207             element = params;
 208         } else {
 209             element = DocumentNodeElement.create(params);
 210         }
 211         this.dom().wrap('<div>');
 212         this.dom().parent().before(element.dom());
 213         this.dom().unwrap();
 214         return element;
 215     },
 216     wrapWithNodeElement: function(wlxmlNode) {
 217         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
 218             return this.canvas.wrapText({
 219                 inside: this.parent(),
 220                 textNodeIdx: this.parent().childIndex(this),
 221                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
 222                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
 223                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
 224             });
 225         } else {
 226             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
 227         }
 228     },
 229     unwrap: function() {
 230         var parent = this.parent();
 231         if(parent.children().length === 1) {
 232             var grandParent = parent.parent();
 233             if(grandParent) {
 234                 var grandParentChildren = grandParent.children(),
 235                     idx = grandParent.childIndex(parent),
 236                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
 237                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
 238                 if(prev && next) {
 239                     prev.setText(prev.getText() + this.getText() + next.getText());
 240                     next.detach();
 241                 } else if (prev || next) {
 242                     var target = prev ? prev : next;
 243                     target.setText(target.getText() + this.getText());
 244                 } else {
 245                     parent.after(this);
 246                 }
 247             } else {
 248                 parent.after(this);
 249             }
 250             parent.detach();
 251         }
 252     },
 253     split: function(params) {
 254         var parentElement = this.parent(),
 255             myIdx = parentElement.childIndex(this),
 256             myCanvas = this.canvas,
 257             passed = false,
 258             succeedingChildren = [],
 259             thisElement = this,
 260             prefix = this.getText().substr(0, params.offset),
 261             suffix = this.getText().substr(params.offset);
 262
 263         parentElement.children().forEach(function(child) {
 264             if(passed)
 265                 succeedingChildren.push(child);
 266             if(child.sameNode(thisElement))
 267                 passed = true;
 268         });
 269
 270         if(prefix.length > 0)
 271             this.setText(prefix);
 272         else
 273             this.detach();
 274
 275         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
 276         parentElement.after(newElement);
 277
 278         if(suffix.length > 0)
 279             newElement.append({text: suffix});
 280         succeedingChildren.forEach(function(child) {
 281             newElement.append(child);
 282         });
 283     }
 284 });
 285
 286 return {
 287     DocumentElement: DocumentElement,
 288     DocumentNodeElement: DocumentNodeElement,
 289     DocumentTextElement: DocumentTextElement
 290 };
 291
 292 });