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.js222
1 files changed, 218 insertions, 4 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 2531465d..b79281e4 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -17,6 +17,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
17 17
18 _selectionExclude: { value: null, enumerable: false }, 18 _selectionExclude: { value: null, enumerable: false },
19 _htmlTemplateUrl: { value: "js/document/templates/montage-html/index.html", enumerable: false}, 19 _htmlTemplateUrl: { value: "js/document/templates/montage-html/index.html", enumerable: false},
20 _webTemplateUrl: { value: "js/document/templates/montage-web/index.html", enumerable: false},
20 _iframe: { value: null, enumerable: false }, 21 _iframe: { value: null, enumerable: false },
21 _server: { value: null, enumerable: false }, 22 _server: { value: null, enumerable: false },
22 _templateDocument: { value: null, enumerable: false }, 23 _templateDocument: { value: null, enumerable: false },
@@ -393,7 +394,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
393 //////////////////////////////////////////////////////////////////// 394 ////////////////////////////////////////////////////////////////////
394 // 395 //
395 initialize: { 396 initialize: {
396 value: function(file, uuid, iframe, callback) { 397 value: function(file, uuid, iframe, callback, webTemplate) {
397 this.application.ninja.documentController._hackRootFlag = false; 398 this.application.ninja.documentController._hackRootFlag = false;
398 // 399 //
399 this._userDocument = file; 400 this._userDocument = file;
@@ -404,8 +405,13 @@ exports.HTMLDocument = Montage.create(TextDocument, {
404 this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"]; 405 this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
405 this.currentView = "design"; 406 this.currentView = "design";
406 // 407 //
407 this.iframe.src = this._htmlTemplateUrl; 408 if(webTemplate) {
408 this.iframe.addEventListener("load", this, true); 409 this.iframe.src = this._webTemplateUrl;
410 this.iframe.addEventListener("load", this.handleWebTemplateLoad.bind(this), true);
411 } else {
412 this.iframe.src = this._htmlTemplateUrl;
413 this.iframe.addEventListener("load", this, true);
414 }
409 } 415 }
410 }, 416 },
411 //////////////////////////////////////////////////////////////////// 417 ////////////////////////////////////////////////////////////////////
@@ -528,7 +534,215 @@ exports.HTMLDocument = Montage.create(TextDocument, {
528 value: 0 534 value: 0
529 }, 535 },
530*/ 536*/
531 537 handleWebTemplateLoad: {
538 value: function(event) {
539 //TODO: Clean up, using for prototyping save
540 this._templateDocument = {};
541 this._templateDocument.html = this.iframe.contentWindow.document;
542// this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");
543 this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.body;
544 //TODO: Remove, also for prototyping
545 this.application.ninja.documentController._hackRootFlag = true;
546 //
547// this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG");
548 this._document = this.iframe.contentWindow.document;
549 this._window = this.iframe.contentWindow;
550
551 for (var k in this._document.styleSheets) {
552 if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) {
553 this._document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true');
554 }
555 }
556
557 //Adding a handler for the main user document reel to finish loading
558 this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
559
560 // Live node list of the current loaded document
561 this._liveNodeList = this.documentRoot.getElementsByTagName('*');
562
563 // TODO Move this to the appropriate location
564 var len = this._liveNodeList.length;
565
566 for(var i = 0; i < len; i++) {
567 NJUtils.makeModelFromElement(this._liveNodeList[i]);
568 }
569
570 setTimeout(function () {
571
572 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
573 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
574 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
575 if(this._document.styleSheets.length) {
576 //Checking all styleSheets in document
577 for (var i in this._document.styleSheets) {
578 //If rules are null, assuming cross-origin issue
579 if(this._document.styleSheets[i].rules === null) {
580 //TODO: Revisit URLs and URI creation logic, very hack right now
581 var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl;
582 //
583 docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
584 //TODO: Parse out relative URLs and map them to absolute
585 if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
586 //
587 cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1];
588 fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
589 //TODO: Add error handling for reading file
590 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
591 //
592 var tag = this.iframe.contentWindow.document.createElement('style');
593 tag.setAttribute('type', 'text/css');
594 tag.setAttribute('data-ninja-uri', fileUri);
595 tag.setAttribute('data-ninja-file-url', cssUrl);
596 tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
597 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
598 //Copying attributes to maintain same properties as the <link>
599 for (var n in this._document.styleSheets[i].ownerNode.attributes) {
600 if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') {
601 if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
602 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
603 } else {
604 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
605 }
606 }
607 }
608 //
609 fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0];
610
611 //TODO: Make public version of this.application.ninja.ioMediator.getNinjaPropUrlRedirect with dynamic ROOT
612 tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl);
613
614 function detectUrl (prop) {
615 return prop.replace(/[^()\\""\\'']+/g, prefixUrl);;
616 }
617
618 function prefixUrl (url) {
619 if (url !== 'url') {
620 if (!url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
621 url = fileCouldDirUrl+url;
622 }
623 }
624 return url;
625 }
626
627 //Looping through DOM to insert style tag at location of link element
628 query = this._templateDocument.html.querySelectorAll(['link']);
629 for (var j in query) {
630 if (query[j].href === this._document.styleSheets[i].href) {
631 //Disabling style sheet to reload via inserting in style tag
632 query[j].setAttribute('disabled', 'true');
633 //Inserting tag
634 this._templateDocument.head.insertBefore(tag, query[j]);
635 }
636 }
637 } else {
638 console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja');
639 //None local stylesheet, probably on a CDN (locked)
640 var tag = this.iframe.contentWindow.document.createElement('style');
641 tag.setAttribute('type', 'text/css');
642 tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href);
643 tag.setAttribute('data-ninja-file-read-only', "true");
644 tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]);
645 //Copying attributes to maintain same properties as the <link>
646 for (var n in this._document.styleSheets[i].ownerNode.attributes) {
647 if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') {
648 if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
649 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
650 } else {
651 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
652 }
653 }
654 }
655 /*
656
657 //TODO: Figure out cross-domain XHR issue, might need cloud to handle
658 var xhr = new XMLHttpRequest();
659 xhr.open("GET", this._document.styleSheets[i].href, true);
660 xhr.send();
661 //
662 if (xhr.readyState === 4) {
663 console.log(xhr);
664 }
665 //tag.innerHTML = xhr.responseText //xhr.response;
666 */
667 //Temp rule so it's registered in the array
668 tag.innerHTML = 'noRULEjustHACK{background: #000}';
669 //Disabling external style sheets
670 query = this._templateDocument.html.querySelectorAll(['link']);
671 for (var k in query) {
672 if (query[k].href === this._document.styleSheets[i].href) {
673
674 //TODO: Removed the temp insertion of the stylesheet
675 //because it wasn't the proper way to do it
676 //need to be handled via XHR with proxy in Cloud Sim
677
678 //Disabling style sheet to reload via inserting in style tag
679 //var tempCSS = query[k].cloneNode(true);
680 //tempCSS.setAttribute('data-ninja-template', 'true');
681 query[k].setAttribute('disabled', 'true');
682 //this.iframe.contentWindow.document.head.appendChild(tempCSS);
683 //Inserting tag
684 this._templateDocument.head.insertBefore(tag, query[k]);
685 }
686 }
687 }
688 }
689 }
690 ////////////////////////////////////////////////////////////////////////////
691 ////////////////////////////////////////////////////////////////////////////
692
693 //TODO: Check if this is needed
694 this._stylesheets = this._document.styleSheets;
695
696 ////////////////////////////////////////////////////////////////////////////