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/document/views/design.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/document/views/design.js')
| -rwxr-xr-x | js/document/views/design.js | 38 |
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 | } |