aboutsummaryrefslogtreecommitdiff
path: root/js/document/views/design.js
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-05-03 15:28:38 -0700
committerJose Antonio Marquez2012-05-03 15:28:38 -0700
commit6356edefaea3fe78969c53fec2d371cb8f42d820 (patch)
treeb959107a78671ecea7cd2a1c0e4880772aba3e00 /js/document/views/design.js
parentc4114992337ec8b3c37c66ab17d0a45d033993f2 (diff)
downloadninja-6356edefaea3fe78969c53fec2d371cb8f42d820.tar.gz
Full CSS support on open
Add full CSS for files on open (including loading cross-domain). This is only for files that are opened.
Diffstat (limited to 'js/document/views/design.js')
-rwxr-xr-xjs/document/views/design.js87
1 files changed, 61 insertions, 26 deletions
diff --git a/js/document/views/design.js b/js/document/views/design.js
index e5213761..4f598305 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -127,21 +127,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
127 this._observer.body = null; 127 this._observer.body = null;
128 //Removing loading container 128 //Removing loading container
129 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); 129 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
130 130 //Getting style and link tags in document
131
132
133
134
135 //
136 var stags = this.document.getElementsByTagName('style'), 131 var stags = this.document.getElementsByTagName('style'),
137 ltags = this.document.getElementsByTagName('link'); 132 ltags = this.document.getElementsByTagName('link');
138 //Temporarily checking for disabled special case (we must enabled for Ninja to access styles) 133 //Temporarily checking for disabled special case (we must enabled for Ninja to access styles)
139 this.ninjaDisableAttribute(stags); 134 this.ninjaDisableAttribute(stags);
140 this.ninjaDisableAttribute(ltags); 135 this.ninjaDisableAttribute(ltags);
141
142
143
144
145 //Looping through all link tags to reload into style tags 136 //Looping through all link tags to reload into style tags
146 if(ltags.length > 0) { 137 if(ltags.length > 0) {
147 for (var i = 0; i < ltags.length; i++) { 138 for (var i = 0; i < ltags.length; i++) {
@@ -152,14 +143,15 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
152 //Disabling tag once it has been reloaded 143 //Disabling tag once it has been reloaded
153 ltags[i].setAttribute('disabled', 'true'); 144 ltags[i].setAttribute('disabled', 'true');
154 } else { 145 } else {
155 //Error: broken? 146 //Error: TBD
147 //TODO: Determine what link tags would not have href data and error
156 } 148 }
157 } 149 }
158 } 150 }
159 151
152 //TODO: Load webGL (blocking)
160 153
161 154 //TODO: Load Montage Components (blocking)
162
163 155
164 //Makign callback if specified 156 //Makign callback if specified
165 if (this._callback) this._callback(); 157 if (this._callback) this._callback();
@@ -186,6 +178,9 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
186 value: function (linktag) { 178 value: function (linktag) {
187 // 179 //
188 var tag, cssUrl, fileUri, cssData, docRootUrl; 180 var tag, cssUrl, fileUri, cssData, docRootUrl;
181 //Creating style tag to load CSS content into
182 tag = this.document.createElement('style');
183 tag.setAttribute('type', 'text/css');
189 //TODO: Remove usage of hack reference of URL 184 //TODO: Remove usage of hack reference of URL
190 docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); 185 docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
191 //Checking for location of href to load (special case for cross-domain) 186 //Checking for location of href to load (special case for cross-domain)
@@ -195,19 +190,19 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
195 fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; 190 fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
196 //Loading data from CSS file 191 //Loading data from CSS file
197 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); 192 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
198 // 193 //Setting properties of locally loaded styles
194 tag.setAttribute('data-ninja-uri', fileUri);
195 tag.setAttribute('data-ninja-file-url', cssUrl);
196 tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
197 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
199 } else { 198 } else {
200 //Cross-domain resource 199 //Cross-domain content
200 cssData = this.application.ninja.coreIoApi.readExternalFile({url: linktag.href, binary: false});
201 //Setting properties of externally loaded styles
202 tag.setAttribute('data-ninja-external-url', linktag.href);
203 tag.setAttribute('data-ninja-file-read-only', "true");
204 tag.setAttribute('data-ninja-file-name', linktag.href.split('/')[linktag.href.split('/').length-1]);
201 } 205 }
202 //TODO: Improve into single method
203 fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0];
204 //Creating style tag to load CSS content into
205 tag = this.document.createElement('style');
206 tag.setAttribute('type', 'text/css');
207 tag.setAttribute('data-ninja-uri', fileUri);
208 tag.setAttribute('data-ninja-file-url', cssUrl);
209 tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
210 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
211 //Copying attributes to maintain same properties as the <link> 206 //Copying attributes to maintain same properties as the <link>
212 for (var n in linktag.attributes) { 207 for (var n in linktag.attributes) {
213 if (linktag.attributes[n].value && linktag.attributes[n].name !== 'disabled') { 208 if (linktag.attributes[n].value && linktag.attributes[n].name !== 'disabled') {
@@ -218,9 +213,49 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
218 } 213 }
219 } 214 }
220 } 215 }
216
217
218
219
220
221
222
223
224
225
226
227 ////////////////////////////////////////////////////////
228 ////////////////////////////////////////////////////////
229 //TODO: Clean up and make proper method
230 fileCouldDirUrl = linktag.href.split(linktag.href.split('/')[linktag.href.split('/').length-1])[0];
231 //
232 if (cssData && cssData.content) {
233 tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, parseToNinjaUrl.bind(this));
234 } else {
235 //Error: no data was loaded
236 }
237 //
238 function parseToNinjaUrl (prop) {
239 //
240 return prop.replace(/[^()\\""\\'']+/g, prefixWithNinjaUrl.bind(this));
241 }
221 // 242 //
222 //tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl); 243 function prefixWithNinjaUrl (url) {
223 tag.innerHTML = cssData.content; 244 //
245 if (url !== 'url' && !url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
246 url = fileCouldDirUrl+url;
247 }
248 //
249 return url;
250 }
251 ////////////////////////////////////////////////////////
252 ////////////////////////////////////////////////////////
253
254
255
256
257
258
224 // 259 //
225 return tag; 260 return tag;
226 } 261 }