aboutsummaryrefslogtreecommitdiff
path: root/js/document/html-document.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-xjs/document/html-document.js147
1 files changed, 104 insertions, 43 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 9a7755e6..6394e3ce 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,13 +153,13 @@ 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
@@ -166,37 +167,12 @@ exports.HTMLDocument = Montage.create(TextDocument, {
166 167
167 set: function(value) 168 set: function(value)
168 { 169 {
169 var nWorlds = value.length; 170 var elt = this.iframe.contentWindow.document.getElementById("UserContent");
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,44 @@ 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
396 // Adding a handler for the main user document reel to finish loading. 378 //Adding a handler for the main user document reel to finish loading
397 this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); 379 this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
398 380
399 381 // Live node list of the current loaded document
382 this._liveNodeList = this.documentRoot.getElementsByTagName('*');
383
384 // TODO Move this to the appropriate location
385 var len = this._liveNodeList.length;
386
387 for(var i = 0; i < len; i++) {
388 NJUtils.makeModelFromElement(this._liveNodeList[i]);
389 }
390
400 /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once 391 /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once
401 392
402 //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified 393 //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified
403 setTimeout(function () { 394 setTimeout(function () {
404 395
405 396
@@ -408,8 +399,47 @@ exports.HTMLDocument = Montage.create(TextDocument, {
408 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 399 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
409 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 400 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
410 if(this._document.styleSheets.length > 1) { 401 if(this._document.styleSheets.length > 1) {
411 this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; 402 //Checking all styleSheets in document
412 this._stylesheets = this._document.styleSheets; // Entire stlyesheets array 403 for (var i in this._document.styleSheets) {
404 //If rules are null, assuming cross-origin issue
405 if(this._document.styleSheets[i].rules === null) {
406 //TODO: Revisit URLs and URI creation logic, very hack right now
407 var fileUri, cssUrl, cssData, tag, query;
408 if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) {
409 //Getting the url of the CSS file
410 cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1];
411 //Creating the URI of the file (this is wrong should not be splitting cssUrl)
412 fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1];
413 //Loading the data from the file
414 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
415 //Creating tag with file content
416 tag = this.iframe.contentWindow.document.createElement('style');
417 tag.setAttribute('type', 'text/css');
418 tag.setAttribute('ninjauri', fileUri);
419 tag.setAttribute('ninjafileurl', cssUrl);
420 tag.setAttribute('ninjafilename', cssUrl.split('/')[cssUrl.split('/').length-1]);
421 tag.innerHTML = cssData.content;
422 //Looping through DOM to insert style tag at location of link element
423 query = this._templateDocument.html.querySelectorAll(['link']);
424 for (var j in query) {
425 if (query[j].href === this._document.styleSheets[i].href) {
426 //Disabling style sheet to reload via inserting in style tag
427 query[j].setAttribute('disabled', 'true');
428 //Inserting tag
429 this._templateDocument.head.insertBefore(tag, query[j]);
430 }
431 }
432 }
433 }
434 }
435 ////////////////////////////////////////////////////////////////////////////
436 ////////////////////////////////////////////////////////////////////////////
437
438 //TODO: Check if this is needed
439 this._stylesheets = this._document.styleSheets;
440
441 ////////////////////////////////////////////////////////////////////////////
442 ////////////////////////////////////////////////////////////////////////////
413 443
414 //TODO Finish this implementation once we start caching Core Elements 444 //TODO Finish this implementation once we start caching Core Elements
415 // Assign a model to the UserContent and add the ViewPort reference to it. 445 // Assign a model to the UserContent and add the ViewPort reference to it.
@@ -513,7 +543,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
513 enumerable: false, 543 enumerable: false,
514 value: function () { 544 value: function () {
515 //TODO: Add logic to handle save before preview 545 //TODO: Add logic to handle save before preview
516 this.save(); 546 this.saveAll();
517 //Launching 'blank' tab for testing movie 547 //Launching 'blank' tab for testing movie
518 chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]}); 548 chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]});
519 } 549 }
@@ -525,7 +555,38 @@ exports.HTMLDocument = Montage.create(TextDocument, {
525 value: function () { 555 value: function () {
526 //TODO: Add code view logic and also styles for HTML 556 //TODO: Add code view logic and also styles for HTML
527 if (this.currentView === 'design') { 557