diff options
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-x | js/document/html-document.js | 300 |
1 files changed, 253 insertions, 47 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index 9a7755e6..5d507476 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js | |||
@@ -23,6 +23,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
23 | 23 | ||
24 | _document: { value: null, enumerable: false }, | 24 | _document: { value: null, enumerable: false }, |
25 | _documentRoot: { value: null, enumerable: false }, | 25 | _documentRoot: { value: null, enumerable: false }, |
26 | _liveNodeList: { value: null, enumarable: false }, | ||
26 | _stageBG: { value: null, enumerable: false }, | 27 | _stageBG: { value: null, enumerable: false }, |
27 | _window: { value: null, enumerable: false }, | 28 | _window: { value: null, enumerable: false }, |
28 | _styles: { value: null, enumerable: false }, | 29 | _styles: { value: null, enumerable: false }, |
@@ -53,6 +54,11 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
53 | }, | 54 | }, |
54 | 55 | ||
55 | 56 | ||
57 | //drawUtils state | ||
58 | _gridHorizontalSpacing: {value:0}, | ||
59 | _gridVerticalSpacing: {value:0}, | ||
60 | //end - drawUtils state | ||
61 | |||
56 | 62 | ||
57 | // GETTERS / SETTERS | 63 | // GETTERS / SETTERS |
58 | 64 | ||
@@ -71,6 +77,16 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
71 | set: function(value) { this._savedTopScroll = value} | 77 | set: function(value) { this._savedTopScroll = value} |
72 | }, | 78 | }, |
73 | 79 | ||
80 | gridHorizontalSpacing:{ | ||
81 | get: function() { return this._gridHorizontalSpacing; }, | ||
82 | set: function(value) { this._gridHorizontalSpacing = value} | ||
83 | }, | ||
84 | |||
85 | gridVerticalSpacing:{ | ||
86 | get: function() { return this._gridVerticalSpacing; }, | ||
87 | set: function(value) { this._gridVerticalSpacing = value} | ||
88 | }, | ||
89 | |||
74 | selectionExclude: { | 90 | selectionExclude: { |
75 | get: function() { return this._selectionExclude; }, | 91 | get: function() { return this._selectionExclude; }, |
76 | set: function(value) { this._selectionExclude = value; } | 92 | set: function(value) { this._selectionExclude = value; } |
@@ -152,51 +168,26 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
152 | glData: { | 168 | glData: { |
153 | get: function() | 169 | get: function() |
154 | { | 170 | { |
155 | var elt = this.iframe; | ||
156 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); | 171 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); |
157 | this._glData = null; | 172 | this._glData = null; |
158 | if (elt) | 173 | if (elt) |
159 | { | 174 | { |
160 | this._glData = new Array(); | 175 | var cdm = new CanvasDataManager(); |
161 | this.collectGLData( elt, this._glData ); | 176 | this._glData = []; |
177 | cdm.collectGLData( elt, this._glData ); | ||
162 | } | 178 | } |
163 | 179 | ||
164 | return this._glData | 180 | return this._glData; |
165 | }, | 181 | }, |
166 | 182 | ||
167 | set: function(value) | 183 | set: function(value) |
168 | { | 184 | { |
169 | var nWorlds = value.length; | 185 | var elt = this.documentRoot; |
170 | for (var i=0; i<nWorlds; i++) | 186 | if (elt) |
171 | { | 187 | { |
172 | var importStr = value[i]; | 188 | console.log( "load canvas data: " , value ); |
173 | var startIndex = importStr.indexOf( "id: " ); | 189 | var cdm = new CanvasDataManager(); |
174 | if (startIndex >= 0) | 190 | cdm.loadGLData(elt, value); |
175 | { | ||
176 | var endIndex = importStr.indexOf( "\n", startIndex ); | ||
177 | if (endIndex > 0) | ||
178 | { | ||
179 | var id = importStr.substring( startIndex+4, endIndex ); | ||
180 | var canvas = this.iframe.contentWindow.document.getElementById( id ); | ||
181 | if (canvas) | ||
182 | { | ||
183 | if (!canvas.elementModel) | ||
184 | { | ||
185 | NJUtils.makeElementModel(canvas, "Canvas", "shape", true); | ||
186 | } | ||
187 | |||
188 | if (canvas.elementModel) | ||
189 | { | ||
190 | if (canvas.elementModel.shapeModel.GLWorld) | ||
191 | canvas.elementModel.shapeModel.GLWorld.clearTree(); | ||
192 | |||
193 | var world = new GLWorld( canvas ); | ||
194 | canvas.elementModel.shapeModel.GLWorld = world; | ||
195 | world.import( importStr ); | ||
196 | } | ||
197 | } | ||
198 | } | ||
199 | } | ||
200 | } | 191 | } |
201 | } | 192 | } |
202 | }, | 193 | }, |
@@ -377,39 +368,178 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
377 | value: function(event){ | 368 | value: function(event){ |
378 | //TODO: Clean up, using for prototyping save | 369 | //TODO: Clean up, using for prototyping save |
379 | this._templateDocument = {}; | 370 | this._templateDocument = {}; |
371 | this._templateDocument.html = this.iframe.contentWindow.document; | ||
380 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); | 372 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); |
381 | this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | 373 | this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); |
382 | //TODO: Remove, also for prototyping | 374 | //TODO: Remove, also for prototyping |
383 | this.application.ninja.documentController._hackRootFlag = true; | 375 | this.application.ninja.documentController._hackRootFlag = true; |
384 | // | 376 | // |
385 | //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | ||
386 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); | 377 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); |
387 | this.stageBG.onclick = null; | 378 | this.stageBG.onclick = null; |
388 | this._document = this.iframe.contentWindow.document; | 379 | this._document = this.iframe.contentWindow.document; |
389 | this._window = this.iframe.contentWindow; | 380 | this._window = this.iframe.contentWindow; |
390 | // | 381 | // |
391 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; | 382 | for (var k in this._document.styleSheets) { |
383 | if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) { | ||
384 | this._document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true'); | ||
385 | } | ||
386 | } | ||
392 | // | 387 | // |
388 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; | ||
389 | //Inserting user's document into template | ||
393 | this._templateDocument.head.innerHTML = this._userDocument.content.head; | 390 | this._templateDocument.head.innerHTML = this._userDocument.content.head; |
394 | this._templateDocument.body.innerHTML = this._userDocument.content.body; | 391 | this._templateDocument.body.innerHTML = this._userDocument.content.body; |
395 | 392 | //TODO: Use querySelectorAll | |
396 | // Adding a handler for the main user document reel to finish loading. | 393 | var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; |
394 | // | ||
395 | for (var w in scripttags) { | ||
396 | if (scripttags[w].getAttribute) { | ||
397 | if (scripttags[w].getAttribute('data-ninja-webgl') !== null) { | ||
398 | //TODO: Add logic to handle more than one data tag | ||
399 | webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", "")); | ||
400 | } | ||
401 | } | ||
402 | } | ||
403 | // | ||
404 | if (webgldata) { | ||
405 | for (var n=0; webgldata.data[n]; n++) { | ||
406 | webgldata.data[n] = unescape(webgldata.data[n]); | ||
407 | } | ||
408 | this._templateDocument.webgl = webgldata.data; | ||
409 | } | ||
410 | |||
411 | |||
412 | |||
413 | |||
414 | //Temporarily checking for disabled special case | ||
415 | var stags = this.iframe.contentWindow.document.getElementsByTagName('style'), | ||
416 | ltags = this.iframe.contentWindow.document.getElementsByTagName('link'); | ||
417 | // | ||
418 | for (var m = 0; m < ltags.length; m++) { | ||
419 | if (ltags[m].getAttribute('data-ninja-template') === null) { | ||
420 | if (ltags[m].getAttribute('disabled')) { | ||
421 | ltags[m].removeAttribute('disabled'); | ||
422 | ltags[m].setAttribute('data-ninja-disabled', 'true'); | ||
423 | } | ||
424 | } | ||
425 | } | ||
426 | // | ||
427 | for (var n = 0; n < stags.length; n++) { | ||
428 | if (stags[n].getAttribute('data-ninja-template') === null) { | ||
429 | if (stags[n].getAttribute('disabled')) { | ||
430 | stags[n].removeAttribute('disabled'); | ||
431 | stags[n].setAttribute('data-ninja-disabled', 'true'); | ||
432 | } | ||
433 | } | ||
434 | } | ||
435 | |||
436 | |||
437 | |||
438 | |||
439 | //Adding a handler for the main user document reel to finish loading | ||
397 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); | 440 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); |
398 | 441 | ||
399 | 442 | // Live node list of the current loaded document | |
443 | this._liveNodeList = this.documentRoot.getElementsByTagName('*'); | ||
444 | |||
445 | // TODO Move this to the appropriate location | ||
446 | var len = this._liveNodeList.length; | ||
447 | |||
448 | for(var i = 0; i < len; i++) { | ||
449 | NJUtils.makeModelFromElement(this._liveNodeList[i]); | ||
450 | } | ||
451 | |||
400 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once | 452 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once |
401 | 453 | ||
402 | //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified | 454 | //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified |
403 | setTimeout(function () { | 455 | setTimeout(function () { |
404 | 456 | ||
405 | 457 | ||
406 | |||
407 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 458 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
408 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 459 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
409 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 460 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |