aboutsummaryrefslogtreecommitdiff
path: root/js/document/views/design.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/document/views/design.js')
-rwxr-xr-xjs/document/views/design.js38
1 files changed, 25 insertions, 13 deletions
diff --git a/js/document/views/design.js b/js/document/views/design.js
index a2bf965a..9fafc42f 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -46,14 +46,14 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
46 // 46 //
47 initiliaze: { 47 initiliaze: {
48 value: function (parent) { 48 value: function (parent) {
49 // 49 //Creating iFrame for view
50 this.iframe = document.createElement("iframe"); 50 this.iframe = document.createElement("iframe");
51 // 51 //Setting default styles
52 this.iframe.style.border = "none"; 52 this.iframe.style.border = "none";
53 this.iframe.style.background = "#FFF"; 53 this.iframe.style.background = "#FFF";
54 this.iframe.style.height = "100%"; 54 this.iframe.style.height = "100%";
55 this.iframe.style.width = "100%"; 55 this.iframe.style.width = "100%";
56 // 56 //Returning reference to iFrame created
57 return parent.appendChild(this.iframe); 57 return parent.appendChild(this.iframe);
58 } 58 }
59 }, 59 },
@@ -61,9 +61,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
61 // 61 //
62 render: { 62 render: {
63 value: function (callback) { 63 value: function (callback) {
64 // 64 //Storing callback for dispatch ready
65 this._callback = callback; 65 this._callback = callback;
66 //Adding listener to know when template is loaded to then load user content
66 this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true); 67 this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true);
68 //TODO: Add source parameter and root (optional)
67 this.iframe.src = "js/document/templates/montage-web/index.html"; 69 this.iframe.src = "js/document/templates/montage-web/index.html";
68 } 70 }
69 }, 71 },
@@ -71,24 +73,33 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
71 // 73 //
72 onTemplateLoad: { 74 onTemplateLoad: {
73 value: function (e) { 75 value: function (e) {
74 // 76 //TODO: Improve usage of this reference
75 this.document = this.iframe.contentWindow.document; 77 this.document = this.iframe.contentWindow.document;
76 // 78 //Looping through template styles and marking them with ninja data attribute for I/O clean up
79 for (var k in this.document.styleSheets) {
80 if (this.document.styleSheets[k].ownerNode && this.document.styleSheets[k].ownerNode.setAttribute) {
81 this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true');
82 }
83 }
84 //Creating temp code fragement to load head
77 this._headFragment = this.document.createElement('head'); 85 this._headFragment = this.document.createElement('head');
86 //Adding event listener to know when head is ready, event only dispatched once when using innerHTML
78 this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false); 87 this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false);
79 this._headFragment.innerHTML = this.content.head; 88 //Inserting <head> HTML and parsing URLs via mediator method
80 // 89 this._headFragment.innerHTML = (this.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
90 //Adding event listener to know when the body is ready and make callback
81 this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); 91 this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false);
82 this.document.body.innerHTML += this.content.body; 92 //Inserting <body> HTML and parsing URLs via mediator method
93 this.document.body.innerHTML += (this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
83 } 94 }
84 }, 95 },
85 //////////////////////////////////////////////////////////////////// 96 ////////////////////////////////////////////////////////////////////
86 // 97 //
87 bodyContentLoaded: { 98 bodyContentLoaded: {
88 value: function (e) { 99 value: function (e) {
89 // 100 //Removing event, only needed on initial load
90 this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); 101 this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false);
91 // 102 //Makign callback if specified
92 if (this._callback) this._callback(); 103 if (this._callback) this._callback();
93 } 104 }
94 }, 105 },
@@ -96,10 +107,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
96 // 107 //
97 insertHeadContent: { 108 insertHeadContent: {
98 value: function (e) { 109 value: function (e) {
99 // 110 //Removing event
100 this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false); 111 this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false);
101 // 112 //Adding the loaded nodes from code fragment into actual document head
102 for(var i in this._headFragment.childNodes) { 113 for(var i in this._headFragment.childNodes) {
114 //Minor hack to know node is actual HTML node
103 if(this._headFragment.childNodes[i].outerHTML) { 115 if(this._headFragment.childNodes[i].outerHTML) {
104 this.document.head.appendChild(this._headFragment.childNodes[i]); 116 this.document.head.appendChild(this._headFragment.childNodes[i]);
105 } 117 }