diff options
author | Valerio Virgillito | 2012-02-28 12:44:31 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-02-28 12:44:31 -0800 |
commit | 7c9291a5bab4abd849547f8878f6fb962fc88250 (patch) | |
tree | d5dd4ee6ff901c00b40f3e89c3cfb620e60a5051 /js/document/html-document.js | |
parent | 6054d13cf1254447d2396889eafc6a953f0b8d4a (diff) | |
parent | 700611c9aaee6093bbf4e86503c1decb5ac65c83 (diff) | |
download | ninja-7c9291a5bab4abd849547f8878f6fb962fc88250.tar.gz |
Merge branch 'refs/heads/integration-candidate'
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-x | js/document/html-document.js | 258 |
1 files changed, 213 insertions, 45 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index 9a7755e6..76436732 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,29 +368,63 @@ 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 | //Adding a handler for the main user document reel to finish loading | ||
397 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); | 413 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); |
398 | 414 | ||
399 | 415 | // Live node list of the current loaded document | |
416 | this._liveNodeList = this.documentRoot.getElementsByTagName('*'); | ||
417 | |||
418 | // TODO Move this to the appropriate location | ||
419 | var len = this._liveNodeList.length; | ||
420 | |||
421 | for(var i = 0; i < len; i++) { | ||
422 | NJUtils.makeModelFromElement(this._liveNodeList[i]); | ||
423 | } | ||
424 | |||
400 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once | 425 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once |
401 | 426 | ||
402 | //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified | 427 | //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified |
403 | setTimeout(function () { | 428 | setTimeout(function () { |
404 | 429 | ||
405 | 430 | ||
@@ -408,8 +433,80 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
408 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 433 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
409 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 434 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
410 | if(this._document.styleSheets.length > 1) { | 435 | if(this._document.styleSheets.length > 1) { |
411 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | 436 | //Checking all styleSheets in document |
412 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array | 437 | for (var i in this._document.styleSheets) { |
438 | //If rules are null, assuming cross-origin issue | ||
439 | if(this._document.styleSheets[i].rules === null) { | ||
440 | //TODO: Revisit URLs and URI creation logic, very hack right now | ||
441 | var fileUri, cssUrl, cssData, tag, query; | ||
442 | if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) { | ||
443 | //Getting the url of the CSS file | ||
444 | cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1]; | ||
445 | //Creating the URI of the file (this is wrong should not be splitting cssUrl) | ||
446 | fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1]; | ||
447 | //Loading the data from the file | ||
448 | cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); | ||
449 | //Creating tag with file content | ||
450 | tag = this.iframe.contentWindow.document.createElement('style'); | ||