modules/documentCanvas/canvas/documentElement.js

   1 define([
   2 'libs/jquery-1.9.1.min'
   3 ], function($) {
   4
   5 'use strict';
   6
   7 // DocumentElement represents a node from WLXML document rendered inside Canvas
   8 var DocumentElement = function(htmlElement) {
   9     if(arguments.length === 0)
  10         return;
  11     this.$element = $(htmlElement);
  12     this.wlxmlTag = this.$element.prop('tagName');
  13 };
  14
  15 $.extend(DocumentElement.prototype, {
  16     children: function() {
  17         var toret = [];
  18         if(this instanceof DocumentTextElement)
  19             return toret;
  20
  21
  22         var elementContent = this.$element.contents();
  23         elementContent.each(function(idx) {
  24             var element = documentElementFromHTMLElement(this);
  25             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (element instanceof DocumentTextElement) && $.trim($(this).text()) === '')
  26                 return true;
  27             if(idx > 0 && element instanceof DocumentTextElement) {
  28                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
  29                     return true;
  30             }
  31             toret.push(element);
  32         });
  33         return toret;
  34     },
  35     parent: function() {
  36         return documentElementFromHTMLElement(this.$element.parent()[0]);
  37     },
  38
  39     sameNode: function(other) {
  40         return other && (typeof other === typeof this) && other.$element[0] === this.$element[0];
  41     },
  42
  43     wrapWithNodeElement: function(wlxmlNode) {
  44         this.$element.wrap($('<' + wlxmlNode.tag + ' class="' + wlxmlNode.klass + '"">')[0]);
  45         return documentElementFromHTMLElement(this.$element.parent().get(0));
  46     },
  47
  48     childIndex: function(child) {
  49         var children = this.children(),
  50             toret = null;
  51         children.forEach(function(c, idx) {
  52             if(c.sameNode(child)) {
  53                 toret = idx;
  54                 return false;
  55             }
  56         });
  57         return toret;
  58     }
  59 });
  60
  61 var DocumentNodeElement = function(htmlElement) {
  62     DocumentElement.call(this, htmlElement);
  63 };
  64
  65 var DocumentTextElement = function(htmlElement) {
  66     DocumentElement.call(this, htmlElement);
  67 };
  68
  69 DocumentNodeElement.prototype = new DocumentElement();
  70 DocumentTextElement.prototype = new DocumentElement();
  71
  72 var manipulate = function(e, params, action) {
  73     var dom;
  74     if(params instanceof DocumentElement) {
  75         dom = params.dom()
  76     } else {
  77         dom = DocumentNodeElement.createDOM(params);
  78     }
  79     e.$element[action](dom);
  80     return documentElementFromHTMLElement(dom);
  81 };
  82
  83 $.extend(DocumentNodeElement.prototype, {
  84     append: function(params) {
  85         manipulate(this, params, 'append');
  86     },
  87     before: function(params) {
  88         manipulate(this, params, 'before');
  89
  90     },
  91     after: function(params) {
  92         manipulate(this, params, 'after');
  93     }
  94 });
  95
  96 DocumentNodeElement.createDOM = function(params) {
  97     var dom;
  98     if(params.text) {
  99         dom = $(document.createTextNode(params.text));
 100     } else {
 101         dom = $('<' + params.tag + '>');
 102         if(params.klass)
 103             dom.attr('class', params.klass);
 104     }
 105     return dom;
 106 };
 107
 108 $.extend(DocumentTextElement.prototype, {
 109     setText: function(text) {
 110         this.$element[0].data = text;
 111     },
 112     getText: function() {
 113         return this.$element.text();
 114     },
 115     after: function(params) {
 116         if(params.text || params instanceof DocumentTextElement)
 117             return false;
 118         var dom;
 119         if(params instanceof DocumentNodeElement) {
 120             dom = params.dom();
 121         } else {
 122             dom = DocumentNodeElement.createDOM(params);
 123         }
 124         this.$element.wrap('<div>');
 125         this.$element.parent().after(dom[0]);
 126         this.$element.unwrap();
 127         return documentElementFromHTMLElement(dom[0]);
 128     }
 129 });
 130
 131 var documentElementFromHTMLElement = function(htmlElement) {
 132     if(htmlElement.nodeType === Node.ELEMENT_NODE)
 133         return new DocumentNodeElement(htmlElement);
 134     if(htmlElement.nodeType === Node.TEXT_NODE)
 135         return new DocumentTextElement(htmlElement);
 136 };
 137
 138 return {
 139     wrap: function(htmlElement) {
 140         return documentElementFromHTMLElement(htmlElement);
 141     },
 142     DocumentElement: DocumentElement,
 143     DocumentNodeElement: DocumentNodeElement,
 144     DocumentTextElement: DocumentTextElement
 145 };
 146
 147 });