diff options
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-x | js/document/html-document.js | 221 |
1 files changed, 207 insertions, 14 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index f5816f64..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; } |
@@ -161,15 +177,15 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
161 | cdm.collectGLData( elt, 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 elt = this.iframe.contentWindow.document.getElementById("UserContent"); | 185 | var elt = this.documentRoot; |
170 | if (elt) | 186 | if (elt) |
171 | { | 187 | { |
172 | console.log( "load canvas data: " + value ); | 188 | console.log( "load canvas data: " , value ); |
173 | var cdm = new CanvasDataManager(); | 189 | var cdm = new CanvasDataManager(); |
174 | cdm.loadGLData(elt, value); | 190 | cdm.loadGLData(elt, value); |
175 | } | 191 | } |
@@ -352,29 +368,63 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
352 | value: function(event){ | 368 | value: function(event){ |
353 | //TODO: Clean up, using for prototyping save | 369 | //TODO: Clean up, using for prototyping save |
354 | this._templateDocument = {}; | 370 | this._templateDocument = {}; |
371 | this._templateDocument.html = this.iframe.contentWindow.document; | ||
355 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); | 372 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); |
356 | this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | 373 | this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); |
357 | //TODO: Remove, also for prototyping | 374 | //TODO: Remove, also for prototyping |
358 | this.application.ninja.documentController._hackRootFlag = true; | 375 | this.application.ninja.documentController._hackRootFlag = true; |
359 | // | 376 | // |
360 | //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | ||
361 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); | 377 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); |
362 | this.stageBG.onclick = null; | 378 | this.stageBG.onclick = null; |
363 | this._document = this.iframe.contentWindow.document; | 379 | this._document = this.iframe.contentWindow.document; |
364 | this._window = this.iframe.contentWindow; | 380 | this._window = this.iframe.contentWindow; |
365 | // | 381 | // |
366 | 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 | } | ||
367 | // | 387 | // |
388 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; | ||
389 | //Inserting user's document into template | ||
368 | this._templateDocument.head.innerHTML = this._userDocument.content.head; | 390 | this._templateDocument.head.innerHTML = this._userDocument.content.head; |
369 | this._templateDocument.body.innerHTML = this._userDocument.content.body; | 391 | this._templateDocument.body.innerHTML = this._userDocument.content.body; |
370 | 392 | //TODO: Use querySelectorAll | |
371 | // 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 | ||
372 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); | 413 | this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); |
373 | 414 | ||
374 | 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 | |||
375 | /* 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 |
376 | 426 | ||
377 | //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 |
378 | setTimeout(function () { | 428 | setTimeout(function () { |
379 | 429 | ||
380 | 430 | ||
@@ -383,8 +433,80 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
383 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 433 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
384 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 434 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
385 | if(this._document.styleSheets.length > 1) { | 435 | if(this._document.styleSheets.length > 1) { |
386 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | 436 | //Checking all styleSheets in document |
387 | 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'); | ||
451 | tag.setAttribute('type', 'text/css'); | ||
452 | tag.setAttribute('data-ninja-uri', fileUri); | ||
453 | tag.setAttribute('data-ninja-file-url', cssUrl); | ||
454 | tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly); | ||
455 | tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]); | ||
456 | tag.innerHTML = cssData.content; | ||
457 | //Looping through DOM to insert style tag at location of link element | ||
458 | query = this._templateDocument.html.querySelectorAll(['link']); | ||
459 | for (var j in query) { | ||
460 | if (query[j].href === this._document.styleSheets[i].href) { | ||
461 | //Disabling style sheet to reload via inserting in style tag | ||
462 | query[j].setAttribute('disabled', 'true'); | ||
463 | //Inserting tag | ||
464 | this._templateDocument.head.insertBefore(tag, query[j]); | ||
465 | } | ||
466 | } | ||
467 | } else { | ||
468 | /* | ||
469 | //None local stylesheet, probably on a CDN (locked) | ||
470 | tag = this.iframe.contentWindow.document.createElement('style'); | ||
471 | tag.setAttribute('type', 'text/css'); | ||
472 | tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href); | ||
473 | tag.setAttribute('data-ninja-file-read-only', "true"); | ||
474 | tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]); | ||
475 | |||
476 | //TODO: Figure out cross-domain XHR issue, might need cloud to handle | ||
477 | var xhr = new XMLHttpRequest(); | ||
478 | xhr.open("GET", this._document.styleSheets[i].href, true); | ||
479 | xhr.send(); | ||
480 | // | ||
481 | if (xhr.readyState === 4) { | ||
482 | console.log(xhr); | ||
483 | } | ||
484 | //tag.innerHTML = xhr.responseText //xhr.response; | ||
485 | |||
486 | //Currently no external styles will load if unable to load via XHR request | ||
487 | |||
488 | //Disabling external style sheets | ||
489 | query = this._templateDocument.html.querySelectorAll(['link']); | ||
490 | for (var j in query) { | ||
491 | if (query[j].href === this._document.styleSheets[i].href) { | ||