aboutsummaryrefslogtreecommitdiff
path: root/js/document
diff options
context:
space:
mode:
Diffstat (limited to 'js/document')
-rwxr-xr-xjs/document/html-document.js94
-rwxr-xr-xjs/document/templates/montage-html/index.html1
-rwxr-xr-xjs/document/templates/montage-html/styles.css5
3 files changed, 85 insertions, 15 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js
index ad0a7eb2..eaf56146 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -378,23 +378,29 @@ exports.HTMLDocument = Montage.create(TextDocument, {
378 value: function(event){ 378 value: function(event){
379 //TODO: Clean up, using for prototyping save 379 //TODO: Clean up, using for prototyping save
380 this._templateDocument = {}; 380 this._templateDocument = {};
381 this._templateDocument.html = this.iframe.contentWindow.document;
381 this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); 382 this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");
382 this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); 383 this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
383 //TODO: Remove, also for prototyping 384 //TODO: Remove, also for prototyping
384 this.application.ninja.documentController._hackRootFlag = true; 385 this.application.ninja.documentController._hackRootFlag = true;
385 // 386 //
386 //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
387 this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); 387 this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG");
388 this.stageBG.onclick = null; 388 this.stageBG.onclick = null;
389 this._document = this.iframe.contentWindow.document; 389 this._document = this.iframe.contentWindow.document;
390 this._window = this.iframe.contentWindow; 390 this._window = this.iframe.contentWindow;
391 // 391 //
392 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; 392 for (var k in this._document.styleSheets) {
393 if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) {
394 this._document.styleSheets[k].ownerNode.setAttribute('ninjatemplate', 'true');
395 }
396 }
393 // 397 //
398 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
399 //Inserting user's document into template
394 this._templateDocument.head.innerHTML = this._userDocument.content.head; 400 this._templateDocument.head.innerHTML = this._userDocument.content.head;
395 this._templateDocument.body.innerHTML = this._userDocument.content.body; 401 this._templateDocument.body.innerHTML = this._userDocument.content.body;
396 402
397 // Adding a handler for the main user document reel to finish loading. 403 //Adding a handler for the main user document reel to finish loading
398 this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); 404 this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
399 405
400 // Live node list of the current loaded document 406 // Live node list of the current loaded document
@@ -409,7 +415,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
409 415
410 /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once 416 /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once
411 417
412 //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified 418 //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified
413 setTimeout(function () { 419 setTimeout(function () {
414 420
415 421
@@ -418,8 +424,47 @@ exports.HTMLDocument = Montage.create(TextDocument, {
418 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 424 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
419 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 425 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
420 if(this._document.styleSheets.length > 1) { 426 if(this._document.styleSheets.length > 1) {
421 this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; 427 //Checking all styleSheets in document
422 this._stylesheets = this._document.styleSheets; // Entire stlyesheets array 428 for (var i in this._document.styleSheets) {
429 //If rules are null, assuming cross-origin issue
430 if(this._document.styleSheets[i].rules === null) {
431 //TODO: Revisit URLs and URI creation logic, very hack right now
432 var fileUri, cssUrl, cssData, tag, query;
433 if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) {
434 //Getting the url of the CSS file
435 cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1];
436 //Creating the URI of the file (this is wrong should not be splitting cssUrl)
437 fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1];
438 //Loading the data from the file
439 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
440 //Creating tag with file content
441 tag = this.iframe.contentWindow.document.createElement('style');
442 tag.setAttribute('type', 'text/css');
443 tag.setAttribute('ninjauri', fileUri);
444 tag.setAttribute('ninjafileurl', cssUrl);
445 tag.setAttribute('ninjafilename', cssUrl.split('/')[cssUrl.split('/').length-1]);
446 tag.innerHTML = cssData.content;
447 //Looping through DOM to insert style tag at location of link element
448 query = this._templateDocument.html.querySelectorAll(['link']);
449 for (var j in query) {
450 if (query[j].href === this._document.styleSheets[i].href) {
451 //Disabling style sheet to reload via inserting in style tag
452 query[j].setAttribute('disabled', 'true');
453 //Inserting tag
454 this._templateDocument.head.insertBefore(tag, query[j]);
455 }
456 }
457 }
458 }
459 }
460 ////////////////////////////////////////////////////////////////////////////
461 ////////////////////////////////////////////////////////////////////////////
462
463 //TODO: Check if this is needed
464 this._stylesheets = this._document.styleSheets;
465
466 ////////////////////////////////////////////////////////////////////////////
467 ////////////////////////////////////////////////////////////////////////////
423 468
424 //TODO Finish this implementation once we start caching Core Elements 469 //TODO Finish this implementation once we start caching Core Elements
425 // Assign a model to the UserContent and add the ViewPort reference to it. 470 // Assign a model to the UserContent and add the ViewPort reference to it.
@@ -523,7 +568,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
523 enumerable: false, 568 enumerable: false,
524 value: function () { 569 value: function () {
525 //TODO: Add logic to handle save before preview 570 //TODO: Add logic to handle save before preview
526 this.save(); 571 this.saveAll();
527 //Launching 'blank' tab for testing movie 572 //Launching 'blank' tab for testing movie
528 chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]}); 573 chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]});
529 } 574 }
@@ -535,7 +580,38 @@ exports.HTMLDocument = Montage.create(TextDocument, {
535 value: function () { 580 value: function () {
536 //TODO: Add code view logic and also styles for HTML 581 //TODO: Add code view logic and also styles for HTML
537 if (this.currentView === 'design') { 582 if (this.currentView === 'design') {
538 return {mode: 'html', document: this._userDocument, webgl: this.glData, style: this._styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; 583 var styles = [];
584 for (var k in this._document.styleSheets) {
585 if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.getAttribute) {
586 if (this._document.styleSheets[k].ownerNode.getAttribute('ninjatemplate') === null) {
587 styles.push(this._document.styleSheets[k]);
588 }
589 }
590 }
591 return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
592 } else if (this.currentView === "code"){
593 //TODO: Would this get call when we are in code of HTML?
594 } else {
595 //Error
596 }
597 }
598 },
599 ////////////////////////////////////////////////////////////////////
600 //
601 saveAll: {
602 enumerable: false,
603 value: function () {
604 //TODO: Add code view logic and also styles for HTML
605 if (this.currentView === 'design') {
606 var css = [];
607 for (var k in this._document.styleSheets) {
608 if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.getAttribute) {
609 if (this._document.styleSheets[k].ownerNode.getAttribute('ninjatemplate') === null) {
610 css.push(this._document.styleSheets[k]);
611 }
612 }
613 }
614 return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
539 } else if (this.currentView === "code"){ 615 } else if (this.currentView === "code"){
540 //TODO: Would this get call when we are in code of HTML? 616 //TODO: Would this get call when we are in code of HTML?
541 } else { 617 } else {
diff --git a/js/document/templates/montage-html/index.html b/js/document/templates/montage-html/index.html
index 8b3d73bb..edfab2b0 100755
--- a/js/document/templates/montage-html/index.html
+++ b/js/document/templates/montage-html/index.html
@@ -12,7 +12,6 @@
12 <title>Ninja Prototype</title> 12 <title>Ninja Prototype</title>
13 13
14 <link href="default_html.css" id="nj-stage-stylesheet" rel="stylesheet" type="text/css" media="screen"/> 14 <link href="default_html.css" id="nj-stage-stylesheet" rel="stylesheet" type="text/css" media="screen"/>
15 <link href="styles.css" id="nj-default-stylesheet" rel="stylesheet" type="text/css" media="screen"/>
16 15
17 <script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js"></script> 16 <script type="text/javascript" data-package="." src="../../../../node_modules/montage/montage.js"></script>
18 17
diff --git a/js/document/templates/montage-html/styles.css b/js/document/templates/montage-html/styles.css
deleted file mode 100755
index 0441c1cf..00000000
--- a/js/document/templates/montage-html/styles.css
+++ /dev/null
@@ -1,5 +0,0 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */ \ No newline at end of file