diff options
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-x | js/document/html-document.js | 172 |
1 files changed, 128 insertions, 44 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index 9a7755e6..ca1b0886 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 }, |
@@ -152,51 +153,26 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
152 | glData: { | 153 | glData: { |
153 | get: function() | 154 | get: function() |
154 | { | 155 | { |
155 | var elt = this.iframe; | ||
156 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); | 156 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); |
157 | this._glData = null; | 157 | this._glData = null; |
158 | if (elt) | 158 | if (elt) |
159 | { | 159 | { |
160 | this._glData = new Array(); | 160 | var cdm = new CanvasDataManager(); |
161 | this.collectGLData( elt, this._glData ); | 161 | this._glData = []; |
162 | cdm.collectGLData( elt, this._glData ); | ||
162 | } | 163 | } |
163 | 164 | ||
164 | return this._glData | 165 | return this._glData; |
165 | }, | 166 | }, |
166 | 167 | ||
167 | set: function(value) | 168 | set: function(value) |
168 | { | 169 | { |
169 | var nWorlds = value.length; | 170 | var elt = this.documentRoot; |
170 | for (var i=0; i<nWorlds; i++) | 171 | if (elt) |
171 | { | 172 | { |
172 | var importStr = value[i]; | 173 | console.log( "load canvas data: " , value ); |
173 | var startIndex = importStr.indexOf( "id: " ); | 174 | var cdm = new CanvasDataManager(); |
174 | if (startIndex >= 0) | 175 | 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 | } | 176 | } |
201 | } | 177 | } |
202 | }, | 178 | }, |
@@ -377,29 +353,63 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
377 | value: function(event){ | 353 | value: function(event){ |
378 | //TODO: Clean up, using for prototyping save | 354 | //TODO: Clean up, using for prototyping save |
379 | this._templateDocument = {}; | 355 | this._templateDocument = {}; |
356 | this._templateDocument.html = this.iframe.contentWindow.document; | ||
380 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); | 357 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); |
381 | this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | 358 | this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); |
382 | //TODO: Remove, also for prototyping | 359 | //TODO: Remove, also for prototyping |
383 | this.application.ninja.documentController._hackRootFlag = true; | 360 | this.application.ninja.documentController._hackRootFlag = true; |
384 | // | 361 | // |
385 | //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | ||
386 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); | 362 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); |
387 | this.stageBG.onclick = null; | 363 | this.stageBG.onclick = null; |
388 | this._document = this.iframe.contentWindow.document; | 364 | this._document = this.iframe.contentWindow.document; |
389 | this._window = this.iframe.contentWindow; | 365 | this._window = this.iframe.contentWindow; |
390 | // | 366 | // |
391 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; | 367 | for (var k in this._document.styleSheets) { |
368 | if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) { | ||
369 | this._document.styleSheets[k].ownerNode.setAttribute('ninjatemplate', 'true'); | ||
370 | } | ||
371 | } | ||
392 | // | 372 | // |
373 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; | ||
374 | //Inserting user's document into template | ||
393 | this._templateDocument.head.innerHTML = this._userDocument.content.head; | 375 | this._templateDocument.head.innerHTML = this._userDocument.content.head; |
394 | this._templateDocument.body.innerHTML = this._userDocument.content.body; | 376 | this._templateDocument.body.innerHTML = this._userDocument.content.body; |
395 | 377 | //TODO: Use querySelectorAll | |
396 | // Adding a handler for the main user document reel to finish loading. | 378 | var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; |
379 | // | ||
380 | for (var w in scripttags) { | ||
381 | if (scripttags[w].getAttribute) { | ||
382 | if (scripttags[w].getAttribute('data-ninja-webgl') !== null) { | ||
383 | //TODO: Add logic to handle more than one data tag | ||
384 | webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", "")); | ||
385 | } | ||
386 | } | ||
387 | } | ||
388 | // | ||
389 | if (webgldata) { | ||
390 | for (var n=0; webgldata.data[n]; n++) { | ||
391 | webgldata.data[n] = unescape(webgldata.data[n]); | ||
392 | } | ||
393 | this._templateDocument.webgl = webgldata.data; | ||
394 | } | ||
395 | |||
396 | |||
397 | //Adding a handler for the main user document reel to finish loading | ||
397 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); | 398 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); |
398 | 399 | ||
399 | 400 | // Live node list of the current loaded document | |
401 | this._liveNodeList = this.documentRoot.getElementsByTagName('*'); | ||
402 | |||
403 | // TODO Move this to the appropriate location | ||
404 | var len = this._liveNodeList.length; | ||
405 | |||
406 | for(var i = 0; i < len; i++) { | ||
407 | NJUtils.makeModelFromElement(this._liveNodeList[i]); | ||
408 | } | ||
409 | |||
400 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once | 410 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once |
401 | 411 | ||
402 | //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified | 412 | //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified |
403 | setTimeout(function () { | 413 | setTimeout(function () { |
404 | 414 | ||
405 | 415 | ||
@@ -408,8 +418,47 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
408 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 418 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
409 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 419 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
410 | if(this._document.styleSheets.length > 1) { | 420 | if(this._document.styleSheets.length > 1) { |
411 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | 421 | //Checking all styleSheets in document |
412 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array | 422 | for (var i in this._document.styleSheets) { |
423 | //If rules are null, assuming cross-origin issue | ||
424 | if(this._document.styleSheets[i].rules === null) { | ||
425 | //TODO: Revisit URLs and URI creation logic, very hack right now | ||
426 | var fileUri, cssUrl, cssData, tag, query; | ||
427 | if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) { | ||
428 | //Getting the url of the CSS file | ||
429 | cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1]; | ||
430 | //Creating the URI of the file (this is wrong should not be splitting cssUrl) | ||
431 | fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1]; | ||
432 | //Loading the data from the file | ||
433 | cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); | ||
434 | //Creating tag with file content | ||
435 | tag = this.iframe.contentWindow.document.createElement('style'); | ||
436 | tag.setAttribute('type', 'text/css'); | ||
437 | tag.setAttribute('ninjauri', fileUri); | ||
438 | tag.setAttribute('ninjafileurl', cssUrl); | ||
439 | tag.setAttribute('ninjafilename', cssUrl.split('/')[cssUrl.split('/').length-1]); | ||
440 | tag.innerHTML = cssData.content; | ||
441 | //Looping through DOM to insert style tag at location of link element | ||
442 | query = this._templateDocument.html.querySelectorAll(['link']); | ||
443 | for (var j in query) { | ||
444 | if (query[j].href === this._document.styleSheets[i].href) { | ||
445 | //Disabling style sheet to reload via inserting in style tag | ||
446 | query[j].setAttribute('disabled', 'true'); | ||
447 | //Inserting tag | ||
448 | this._templateDocument.head.insertBefore(tag, query[j]); | ||
449 | } | ||
450 | } | ||
451 | } | ||
452 | } | ||
453 | } | ||
454 | //////////////////////////////////////////////////////////////////////////// | ||
455 | //////////////////////////////////////////////////////////////////////////// | ||
456 | |||
457 | //TODO: Check if this is needed | ||
458 | this._stylesheets = this._document.styleSheets; | ||
459 | |||
460 | //////////////////////////////////////////////////////////////////////////// | ||
461 | //////////////////////////////////////////////////////////////////////////// | ||
413 | 462 | ||
414 | //TODO Finish this implementation once we start caching Core Elements | 463 | //TODO Finish this implementation once we start caching Core Elements |
415 | // Assign a model to the UserContent and add |