diff options
author | Jose Antonio Marquez | 2012-05-02 11:53:56 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-05-02 11:53:56 -0700 |
commit | 0df733dd19dc009f3274269dff970e9130ab48b4 (patch) | |
tree | 38448e906ac0f0400a72c507473b9ac6e1089f6f /js | |
parent | ba7946e8b41430eda7e2956ee4c82fa1f1ee9507 (diff) | |
download | ninja-0df733dd19dc009f3274269dff970e9130ab48b4.tar.gz |
Partial URL parsing
Added temporary URL parsing to document assets. (head and body)
Diffstat (limited to 'js')
-rwxr-xr-x | js/document/document-html.js | 18 | ||||
-rwxr-xr-x | js/document/views/design.js | 38 |
2 files changed, 27 insertions, 29 deletions
diff --git a/js/document/document-html.js b/js/document/document-html.js index b169e046..ec59c3e2 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js | |||
@@ -59,7 +59,7 @@ exports.HtmlDocument = Montage.create(Component, { | |||
59 | // | 59 | // |
60 | init: { | 60 | init: { |
61 | value:function(file, context, callback, view) { | 61 | value:function(file, context, callback, view) { |
62 | // | 62 | //Storing callback data for loaded dispatch |
63 | this.loaded.callback = callback; | 63 | this.loaded.callback = callback; |
64 | this.loaded.context = context; | 64 | this.loaded.context = context; |
65 | //Creating instance of HTML Document Model | 65 | //Creating instance of HTML Document Model |
@@ -295,11 +295,6 @@ exports.HtmlDocument = Montage.create(Component, { | |||
295 | //////////////////////////////////////////////////////////////////////////// | 295 | //////////////////////////////////////////////////////////////////////////// |
296 | //////////////////////////////////////////////////////////////////////////// | 296 | //////////////////////////////////////////////////////////////////////////// |
297 | 297 | ||
298 | //TODO Finish this implementation once we start caching Core Elements | ||
299 | // Assign a model to the UserContent and add the ViewPort reference to it. | ||
300 | document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); | ||
301 | // this.documentRoot.elementModel.props3D.init(this.documentRoot, true); | ||
302 | |||
303 | for(i = 0; i < this._stylesheets.length; i++) { | 298 | for(i = 0; i < this._stylesheets.length; i++) { |
304 | if(this._stylesheets[i].ownerNode.id === "nj-stage-stylesheet") { | 299 | if(this._stylesheets[i].ownerNode.id === "nj-stage-stylesheet") { |
305 | this.documentRoot.elementModel.defaultRule = this._stylesheets[i]; | 300 | this.documentRoot.elementModel.defaultRule = this._stylesheets[i]; |
@@ -314,16 +309,7 @@ exports.HtmlDocument = Montage.create(Component, { | |||
314 | this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j]; | 309 | this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j]; |
315 | } | 310 | } |
316 | } | 311 | } |
317 | 312 | ||
318 | |||
319 | this.loadDelegate.call(this.delegateContext, this); | ||
320 | |||
321 | //Setting webGL data | ||
322 | /* | ||
323 | if (this._templateDocument.webgl) { | ||
324 | this.glData = this._templateDocument.webgl; | ||
325 | } | ||
326 | */ | ||
327 | } | 313 | } |
328 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 314 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
329 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | 315 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
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 | } |