diff options
Diffstat (limited to 'js/document/views')
| -rwxr-xr-x | js/document/views/design.js | 90 |
1 files changed, 71 insertions, 19 deletions
diff --git a/js/document/views/design.js b/js/document/views/design.js index 321f93e8..e838dd49 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js | |||
| @@ -23,11 +23,21 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { | |||
| 23 | }, | 23 | }, |
| 24 | //////////////////////////////////////////////////////////////////// | 24 | //////////////////////////////////////////////////////////////////// |
| 25 | // | 25 | // |
| 26 | _template: { | ||
| 27 | value: null | ||
| 28 | }, | ||
| 29 | //////////////////////////////////////////////////////////////////// | ||
| 30 | // | ||
| 26 | _document: { | 31 | _document: { |
| 27 | value: null | 32 | value: null |
| 28 | }, | 33 | }, |
| 29 | //////////////////////////////////////////////////////////////////// | 34 | //////////////////////////////////////////////////////////////////// |
| 30 | // | 35 | // |
| 36 | _bodyFragment: { | ||
| 37 | value: null | ||
| 38 | }, | ||
| 39 | //////////////////////////////////////////////////////////////////// | ||
| 40 | // | ||
| 31 | _headFragment: { | 41 | _headFragment: { |
| 32 | value: null | 42 | value: null |
| 33 | }, | 43 | }, |
| @@ -70,14 +80,20 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { | |||
| 70 | //////////////////////////////////////////////////////////////////// | 80 | //////////////////////////////////////////////////////////////////// |
| 71 | // | 81 | // |
| 72 | render: { | 82 | render: { |
| 73 | value: function (callback, template) {//TODO: Add support for templates | 83 | value: function (callback, template) { |
| 84 | //TODO: Remove, this is a temp patch for webRequest API gate | ||
| 74 | this.application.ninja.documentController._hackRootFlag = false; | 85 | this.application.ninja.documentController._hackRootFlag = false; |
| 75 | //Storing callback for dispatch ready | 86 | //Storing callback for dispatch ready |
| 76 | this._callback = callback; | 87 | this._callback = callback; |
| 88 | this._template = template; | ||
| 77 | //Adding listener to know when template is loaded to then load user content | 89 | //Adding listener to know when template is loaded to then load user content |
| 78 | this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false); | 90 | this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false); |
| 79 | //TODO: Add source parameter and root (optional) | 91 | //TODO: Add source parameter and root (optional) |
| 80 | this.iframe.src = "js/document/templates/montage-web/index.html"; | 92 | if (template && template.type === 'banner' && template.size) { |
| 93 | this.iframe.src = "js/document/templates/banner/index.html"; | ||
| 94 | } else { | ||
| 95 | this.iframe.src = "js/document/templates/html/index.html"; | ||
| 96 | } | ||
| 81 | } | 97 | } |
| 82 | }, | 98 | }, |
| 83 | //////////////////////////////////////////////////////////////////// | 99 | //////////////////////////////////////////////////////////////////// |
| @@ -104,29 +120,65 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { | |||
| 104 | this.model.baseHref = basetag[basetag.length-1].getAttribute('href'); | 120 | this.model.baseHref = basetag[basetag.length-1].getAttribute('href'); |
| 105 | } | 121 | } |
| 106 | } | 122 | } |
| 107 | //Creating temp code fragement to load head | 123 | //Checking to content to be template |
| 108 | this._headFragment = this.document.createElement('head'); | 124 | if (this._template) { |
| 109 | //Adding event listener to know when head is ready, event only dispatched once when using innerHTML | 125 | if (this._template.type === 'banner') { |
| 110 | this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this)); | 126 | //Loading contents into a fragment |
| 111 | this._observer.head.observe(this._headFragment, {childList: true}); | 127 | this._bodyFragment = this.document.createElement('body'); |
| 112 | //Inserting <head> HTML and parsing URLs via mediator method | 128 | //Listening for content to be ready |
| 113 | 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)); | 129 | this._observer.body = new WebKitMutationObserver(this.insertBannerContent.bind(this)); |
| 114 | //Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events) | 130 | this._observer.body.observe(this._bodyFragment, {childList: true}); |
| 115 | this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this)); | 131 | //Inserting <body> HTML and parsing URLs via mediator method |
| 116 | this._observer.body.observe(this.document.body, {childList: true}); | 132 | this._bodyFragment.innerHTML = '<ninjaloadinghack></ninjaloadinghack>'+(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)); |
| 117 | //Inserting <body> HTML and parsing URLs via mediator method | 133 | } |
| 118 | this.document.body.innerHTML += '<ninjaloadinghack></ninjaloadinghack>'+(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)); | 134 | } else { |
| 119 | //Copying attributes to maintain same properties as the <body> | 135 | //Creating temp code fragement to load head |
| 120 | for (var n in this.content.document.body.attributes) { | 136 | this._headFragment = this.document.createElement('head'); |
| 121 | if (this.content.document.body.attributes[n].value) { | 137 | //Adding event listener to know when head is ready, event only dispatched once when using innerHTML |
| 122 | this.document.body.setAttribute(this.content.document.body.attributes[n].name, this.content.document.body.attributes[n].value); | 138 | this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this)); |
| 139 | this._observer.head.observe(this._headFragment, {childList: true}); | ||
| 140 | //Inserting <head> HTML and parsing URLs via mediator method | ||
| 141 | 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)); | ||
| 142 | //Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events) | ||
| 143 | this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this)); | ||
| 144 | this._observer.body.observe(this.document.body, {childList: true}); | ||
| 145 | //Inserting <body> HTML and parsing URLs via mediator method | ||
| 146 | this.document.body.innerHTML += '<ninjaloadinghack></ninjaloadinghack>'+(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)); | ||
| 147 | //Copying attributes to maintain same properties as the <body> | ||
| 148 | for (var n in this.content.document.body.attributes) { | ||
| 149 | if (this.content.document.body.attributes[n].value) { | ||
| 150 | this.document.body.setAttribute(this.content.document.body.attributes[n].name, this.content.document.body.attributes[n].value); | ||
| 151 | } | ||
| 123 | } | 152 | } |
| 153 | //TODO: Add attribute copying for <HEAD> and <HTML> | ||
| 124 | } | 154 | } |
| 125 | //TODO: Add attribute copying for <HEAD> and <HTML> | ||
| 126 | } | 155 | } |
| 127 | }, | 156 | }, |
| 128 | //////////////////////////////////////////////////////////////////// | 157 | //////////////////////////////////////////////////////////////////// |
| 129 | // | 158 | // |
| 159 | insertBannerContent: { | ||
| 160 | value: function (e) { | ||
| 161 | //Getting first element in DOM (assumes it's root) | ||
| 162 | var banner = this._bodyFragment.getElementsByTagName('*')[1], | ||
| 163 | ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0]; | ||
| 164 | //Copying attributes to maintain same properties as the banner root | ||
| 165 | for (var n in banner.attributes) { | ||
| 166 | if (banner.attributes[n].value) { | ||
| 167 | ninjaBanner.setAttribute(banner.attributes[n].name, banner.attributes[n].value); | ||
| 168 | } | ||
| 169 | } | ||
| 170 | //Adjusting margin per size of document | ||
| 171 | this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}'; | ||
| 172 | //Setting content in template | ||
| 173 | ninjaBanner.innerHTML = banner.innerHTML; | ||
| 174 | //Garbage collection | ||
| 175 | this._bodyFragment = null; | ||
| 176 | //Calling standard method to finish opening document | ||
| 177 | this.bodyContentLoaded(null); | ||
| 178 | } | ||
| 179 | }, | ||
| 180 | //////////////////////////////////////////////////////////////////// | ||
| 181 | // | ||
| 130 | insertHeadContent: { | 182 | insertHeadContent: { |
| 131 | value: function (e) { | 183 | value: function (e) { |
| 132 | //Removing event | 184 | //Removing event |