diff options
author | Valerio Virgillito | 2012-05-11 14:46:51 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-05-11 14:46:51 -0700 |
commit | 1fb663b5f348fe2ff5ce86a80e8a61be289eba70 (patch) | |
tree | 7ccb54a07eb4adf793bae3f1a4ddd622bd4f9a0c /js/document/views | |
parent | 647a7cf0697debe7b3d6fa0d68cd6b37996d6b59 (diff) | |
parent | d2e1d4eeba4439ed26f2adf1c34991caf44a591f (diff) | |
download | ninja-1fb663b5f348fe2ff5ce86a80e8a61be289eba70.tar.gz |
Merge pull request #222 from joseeight/Document
Adding partial support for templates
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 |