diff options
Diffstat (limited to 'js/document/views/design.js')
-rwxr-xr-x | js/document/views/design.js | 378 |
1 files changed, 374 insertions, 4 deletions
diff --git a/js/document/views/design.js b/js/document/views/design.js index 84871257..3b2eb11f 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js | |||
@@ -7,16 +7,386 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
7 | //////////////////////////////////////////////////////////////////////// | 7 | //////////////////////////////////////////////////////////////////////// |
8 | // | 8 | // |
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | Component = require("montage/ui/component").Component, | 10 | BaseDocumentView = require("js/document/views/base").BaseDocumentView; |
11 | CodeDocumentView = require("js/document/views/code").CodeDocumentView; | ||
12 | //////////////////////////////////////////////////////////////////////// | 11 | //////////////////////////////////////////////////////////////////////// |
13 | // | 12 | // |
14 | exports.DesignDocumentView = Montage.create(CodeDocumentView, { | 13 | exports.DesignDocumentView = Montage.create(BaseDocumentView, { |
15 | //////////////////////////////////////////////////////////////////// | 14 | //////////////////////////////////////////////////////////////////// |
16 | // | 15 | // |
17 | hasTemplate: { | 16 | hasTemplate: { |
18 | enumerable: false, | ||
19 | value: false | 17 | value: false |
18 | }, | ||
19 | //////////////////////////////////////////////////////////////////// | ||
20 | // | ||
21 | _callback: { | ||
22 | value: null | ||
23 | }, | ||
24 | //////////////////////////////////////////////////////////////////// | ||
25 | // | ||
26 | _template: { | ||
27 | value: null | ||
28 | }, | ||
29 | //////////////////////////////////////////////////////////////////// | ||
30 | // | ||
31 | _document: { | ||
32 | value: null | ||
33 | }, | ||
34 | //////////////////////////////////////////////////////////////////// | ||
35 | // | ||
36 | _bodyFragment: { | ||
37 | value: null | ||
38 | }, | ||
39 | //////////////////////////////////////////////////////////////////// | ||
40 | // | ||
41 | _headFragment: { | ||
42 | value: null | ||
43 | }, | ||
44 | //////////////////////////////////////////////////////////////////// | ||
45 | // | ||
46 | _observer: { | ||
47 | value: {head: null, body: null} | ||
48 | }, | ||
49 | //////////////////////////////////////////////////////////////////// | ||
50 | // | ||
51 | content: { | ||
52 | value: null | ||
53 | }, | ||
54 | //////////////////////////////////////////////////////////////////// | ||
55 | //TODO: Remove usage | ||
56 | model: { | ||
57 | value: null | ||
58 | }, | ||
59 | //////////////////////////////////////////////////////////////////// | ||
60 | // | ||
61 | document: { | ||
62 | get: function() {return this._document;}, | ||
63 | set: function(value) {this._document = value;} | ||
64 | }, | ||
65 | //////////////////////////////////////////////////////////////////// | ||
66 | // | ||
67 | initialize: { | ||
68 | value: function (parent) { | ||
69 | //Creating iFrame for view | ||
70 | this.iframe = document.createElement("iframe"); | ||
71 | //Setting default styles | ||
72 | this.iframe.style.border = "none"; | ||
73 | this.iframe.style.background = "#FFF"; | ||
74 | this.iframe.style.height = "100%"; | ||
75 | this.iframe.style.width = "100%"; | ||
76 | //Returning reference to iFrame created | ||
77 | return parent.appendChild(this.iframe); | ||
78 | } | ||
79 | }, | ||
80 | //////////////////////////////////////////////////////////////////// | ||
81 | // | ||
82 | render: { | ||
83 | value: function (callback, template) { | ||
84 | //TODO: Remove, this is a temp patch for webRequest API gate | ||
85 | this.application.ninja.documentController._hackRootFlag = false; | ||
86 | //Storing callback for dispatch ready | ||
87 | this._callback = callback; | ||
88 | this._template = template; | ||
89 | //Adding listener to know when template is loaded to then load user content | ||
90 | this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false); | ||
91 | //TODO: Add source parameter and root (optional) | ||
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 | } | ||
97 | } | ||
98 | }, | ||
99 | //////////////////////////////////////////////////////////////////// | ||
100 | // | ||
101 | onTemplateLoad: { | ||
102 | value: function (e) { | ||
103 | this.application.ninja.documentController._hackRootFlag = true; | ||
104 | //TODO: Add support to constructing URL with a base HREF | ||
105 | var basetag = this.content.document.getElementsByTagName('base'); | ||
106 | //Removing event | ||
107 | this.iframe.removeEventListener("load", this.onTemplateLoad.bind(this), false); | ||
108 | //TODO: Improve usage of this reference | ||
109 | this.document = this.iframe.contentWindow.document; | ||
110 | //Looping through template styles and marking them with ninja data attribute for I/O clean up | ||
111 | for (var k in this.document.styleSheets) { | ||
112 | if (this.document.styleSheets[k].ownerNode && this.document.styleSheets[k].ownerNode.setAttribute) { | ||
113 | this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true'); | ||
114 | } | ||
115 | } | ||
116 | //Checking for a base URL | ||
117 | if (basetag.length) { | ||
118 | if (basetag[basetag.length-1].getAttribute && basetag[basetag.length-1].getAttribute('href')) { | ||
119 | //Setting base HREF in model | ||
120 | this.model.baseHref = basetag[basetag.length-1].getAttribute('href'); | ||
121 | } | ||
122 | } | ||
123 | //Checking to content to be template | ||
124 | if (this._template) { | ||
125 | if (this._template.type === 'banner') { | ||
126 | //Loading contents into a fragment | ||
127 | this._bodyFragment = this.document.createElement('body'); | ||
128 | //Listening for content to be ready | ||
129 | this._observer.body = new WebKitMutationObserver(this.insertBannerContent.bind(this)); | ||
130 | this._observer.body.observe(this._bodyFragment, {childList: true}); | ||
131 | //Inserting <body> HTML and parsing URLs via mediator method | ||
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)); | ||
133 | } | ||
134 | } else { | ||
135 | //Creating temp code fragement to load head | ||
136 | this._headFragment = this.document.createElement('head'); | ||
137 | //Adding event listener to know when head is ready, event only dispatched once when using innerHTML | ||
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 | } | ||
152 | } | ||
153 | //TODO: Add attribute copying for <HEAD> and <HTML> | ||
154 | } | ||
155 | } | ||
156 | }, | ||
157 | //////////////////////////////////////////////////////////////////// | ||
158 | // | ||
159 | insertBannerContent: { | ||
160 | value: function (e) { | ||
161 | //Getting first element in DOM (assumes it's root) | ||
162 | //TODO: Ensure wrapper logic is proper | ||
163 | var wrapper = this._bodyFragment.getElementsByTagName('*')[1], | ||
164 | banner = this._bodyFragment.getElementsByTagName('*')[2], | ||
165 | ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0], | ||
166 | ninjaWrapper = this.document.body.getElementsByTagName('ninja-viewport')[0]; | ||
167 | //Copying attributes to maintain same properties as the banner wrapper | ||
168 | for (var n in wrapper.attributes) { | ||
169 | if (wrapper.attributes[n].value) { | ||
170 | ninjaWrapper.setAttribute(wrapper.attributes[n].name, wrapper.attributes[n].value); | ||
171 | } | ||
172 | } | ||
173 | //Copying attributes to maintain same properties as the banner content | ||
174 | for (var n in banner.attributes) { | ||
175 | if (banner.attributes[n].value) { | ||
176 | ninjaBanner.setAttribute(banner.attributes[n].name, banner.attributes[n].value); | ||
177 | } | ||
178 | } | ||
179 | //Adjusting margin per size of document | ||
180 | this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-viewport {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}'; | ||
181 | //Setting content in template | ||
182 | ninjaBanner.innerHTML = banner.innerHTML; | ||
183 | //Garbage collection | ||
184 | this._bodyFragment = null; | ||
185 | //Calling standard method to finish opening document | ||
186 | this.bodyContentLoaded(null); | ||
187 | } | ||
188 | }, | ||
189 | //////////////////////////////////////////////////////////////////// | ||
190 | // | ||
191 | insertHeadContent: { | ||
192 | value: function (e) { | ||
193 | //Removing event | ||
194 | this._observer.head.disconnect(); | ||
195 | this._observer.head = null; | ||
196 | //Adding the loaded nodes from code fragment into actual document head | ||
197 | for(var i in this._headFragment.childNodes) { | ||
198 | //Minor hack to know node is actual HTML node | ||
199 | if(this._headFragment.childNodes[i].outerHTML) { | ||
200 | this.document.head.appendChild(this._headFragment.childNodes[i]); | ||
201 | } | ||
202 | } | ||
203 | //Garbage collection | ||
204 | this._headFragment = null; | ||
205 | } | ||
206 | }, | ||
207 | //////////////////////////////////////////////////////////////////// | ||
208 | // | ||
209 | bodyContentLoaded: { | ||
210 | value: function (e) { | ||
211 | //Removing event, only needed on initial load | ||
212 | this._observer.body.disconnect(); | ||
213 | this._observer.body = null; | ||
214 | //Removing loading container (should be removed) | ||
215 | this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); | ||
216 | //Getting style and link tags in document | ||
217 | var stags = this.document.getElementsByTagName('style'), | ||
218 | ltags = this.document.getElementsByTagName('link'), i, | ||