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, {
        //
        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 <head> 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 <body> 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]);
                        }