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