From 0df733dd19dc009f3274269dff970e9130ab48b4 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Wed, 2 May 2012 11:53:56 -0700 Subject: Partial URL parsing Added temporary URL parsing to document assets. (head and body) --- js/document/views/design.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) (limited to 'js/document/views/design.js') 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, { // initiliaze: { value: function (parent) { - // + //Creating iFrame for view this.iframe = document.createElement("iframe"); - // + //Setting default styles this.iframe.style.border = "none"; this.iframe.style.background = "#FFF"; this.iframe.style.height = "100%"; this.iframe.style.width = "100%"; - // + //Returning reference to iFrame created return parent.appendChild(this.iframe); } }, @@ -61,9 +61,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // render: { value: function (callback) { - // + //Storing callback for dispatch ready this._callback = callback; + //Adding listener to know when template is loaded to then load user content this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true); + //TODO: Add source parameter and root (optional) this.iframe.src = "js/document/templates/montage-web/index.html"; } }, @@ -71,24 +73,33 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // onTemplateLoad: { value: function (e) { - // + //TODO: Improve usage of this reference this.document = this.iframe.contentWindow.document; - // + //Looping through template styles and marking them with ninja data attribute for I/O clean up + for (var k in this.document.styleSheets) { + if (this.document.styleSheets[k].ownerNode && this.document.styleSheets[k].ownerNode.setAttribute) { + this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true'); + } + } + //Creating temp code fragement to load head this._headFragment = this.document.createElement('head'); + //Adding event listener to know when head is ready, event only dispatched once when using innerHTML this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false); - this._headFragment.innerHTML = this.content.head; - // + //Inserting HTML and parsing URLs via mediator method + 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)); + //Adding event listener to know when the body is ready and make callback this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); - this.document.body.innerHTML += this.content.body; + //Inserting HTML and parsing URLs via mediator method + 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)); } }, //////////////////////////////////////////////////////////////////// // bodyContentLoaded: { value: function (e) { - // + //Removing event, only needed on initial load this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); - // + //Makign callback if specified if (this._callback) this._callback(); } }, @@ -96,10 +107,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { // insertHeadContent: { value: function (e) { - // + //Removing event this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false); - // + //Adding the loaded nodes from code fragment into actual document head for(var i in this._headFragment.childNodes) { + //Minor hack to know node is actual HTML node if(this._headFragment.childNodes[i].outerHTML) { this.document.head.appendChild(this._headFragment.childNodes[i]); } -- cgit v1.2.3