aboutsummaryrefslogtreecommitdiff
path: root/js/document
diff options
context:
space:
mode:
Diffstat (limited to 'js/document')
-rwxr-xr-xjs/document/html-document.js221
-rwxr-xr-xjs/document/templates/montage-html/index.html1
-rwxr-xr-xjs/document/templates/montage-html/styles.css5
3 files changed, 207 insertions, 20 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) {