aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-05-03 11:43:46 -0700
committerJose Antonio Marquez2012-05-03 11:43:46 -0700
commitc4114992337ec8b3c37c66ab17d0a45d033993f2 (patch)
tree56b33ca746e3e2ea70119e7775b9c8c16646e01b
parent45197b65041a83634307cbc4a9e4e30c0fb5ea65 (diff)
downloadninja-c4114992337ec8b3c37c66ab17d0a45d033993f2.tar.gz
Reloading local stylesheets
Added the reload method of local linked styles, still need to parse style contents for URLs and also add cross-domain stylesheet support.
-rwxr-xr-xjs/document/views/design.js133
1 files changed, 89 insertions, 44 deletions
diff --git a/js/document/views/design.js b/js/document/views/design.js
index fa9d412e..e5213761 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -88,7 +88,6 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
88 this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true'); 88 this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true');
89 } 89 }
90 } 90 }
91
92 //Creating temp code fragement to load head 91 //Creating temp code fragement to load head
93 this._headFragment = this.document.createElement('head'); 92 this._headFragment = this.document.createElement('head');
94 //Adding event listener to know when head is ready, event only dispatched once when using innerHTML 93 //Adding event listener to know when head is ready, event only dispatched once when using innerHTML
@@ -105,10 +104,27 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
105 }, 104 },
106 //////////////////////////////////////////////////////////////////// 105 ////////////////////////////////////////////////////////////////////
107 // 106 //
107 insertHeadContent: {
108 value: function (e) {
109 //Removing event
110 this._observer.head.disconnect();
111 this._observer.head = null;
112 //Adding the loaded nodes from code fragment into actual document head
113 for(var i in this._headFragment.childNodes) {
114 //Minor hack to know node is actual HTML node
115 if(this._headFragment.childNodes[i].outerHTML) {
116 this.document.head.appendChild(this._headFragment.childNodes[i]);
117 }
118 }
119 }
120 },
121 ////////////////////////////////////////////////////////////////////
122 //
108 bodyContentLoaded: { 123 bodyContentLoaded: {
109 value: function (e) { 124 value: function (e) {
110 //Removing event, only needed on initial load 125 //Removing event, only needed on initial load
111 this._observer.body.disconnect(); 126 this._observer.body.disconnect();
127 this._observer.body = null;
112 //Removing loading container 128 //Removing loading container
113 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); 129 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
114 130
@@ -116,34 +132,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
116 132
117 133
118 134
119 135 //
120
121
122 //Temporarily checking for disabled special case
123 var stags = this.document.getElementsByTagName('style'), 136 var stags = this.document.getElementsByTagName('style'),
124 ltags = this.document.getElementsByTagName('link'); 137 ltags = this.document.getElementsByTagName('link');
125 // 138 //Temporarily checking for disabled special case (we must enabled for Ninja to access styles)
126 for (var m = 0; m < ltags.length; m++) { 139 this.ninjaDisableAttribute(stags);
127 if (ltags[m].getAttribute('data-ninja-template') === null) { 140 this.ninjaDisableAttribute(ltags);
128 if (ltags[m].getAttribute('disabled')) { 141
129 ltags[m].removeAttribute('disabled'); 142
130 ltags[m].setAttribute('data-ninja-disabled', 'true'); 143
131 } 144
132 } 145 //Looping through all link tags to reload into style tags
133 } 146 if(ltags.length > 0) {
134 // 147 for (var i = 0; i < ltags.length; i++) {
135 for (var n = 0; n < stags.length; n++) {
136 if (stags[n].getAttribute('data-ninja-template') === null) {
137 if (stags[n].getAttribute('disabled')) {
138 stags[n].removeAttribute('disabled');
139 stags[n].setAttribute('data-ninja-disabled', 'true');
140 }
141 }
142 }
143 //
144 if(this.document.styleSheets.length > 0) {
145 for (var i = 0; i < this.document.styleSheets.length; i++) {
146 // 148 //
149 if (ltags[i].href) {
150 //TODO: Verify this works for tags in body as well (working in head)
151 this.document.head.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]) || this.document.body.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]);
152 //Disabling tag once it has been reloaded
153 ltags[i].setAttribute('disabled', 'true');
154 } else {
155 //Error: broken?
156 }
147 } 157 }
148 } 158 }
149 159
@@ -151,33 +161,68 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
151 161
152 162
153 163
154
155
156
157 //Makign callback if specified 164 //Makign callback if specified
158 if (this._callback) this._callback(); 165 if (this._callback) this._callback();
159 } 166 }
160 }, 167 },
161 //////////////////////////////////////////////////////////////////// 168 ////////////////////////////////////////////////////////////////////
162 // 169 //
163 insertHeadContent: { 170 ninjaDisableAttribute: {
164 value: function (e) { 171 value: function (tags) {
165 //Removing event 172 //Looping through tags
166 this._observer.head.disconnect(); 173 for (var i = 0; i < tags.length; i++) {
167 //Adding the loaded nodes from code fragment into actual document head 174 if (tags[i].getAttribute('data-ninja-template') === null) {
168 for(var i in this._headFragment.childNodes) { 175 if (tags[i].getAttribute('disabled')) {
169 //Minor hack to know node is actual HTML node 176 tags[i].removeAttribute('disabled');
170 if(this._headFragment.childNodes[i].outerHTML) { 177 tags[i].setAttribute('data-ninja-disabled', 'true');
171 this.document.head.appendChild(this._headFragment.childNodes[i]); 178 }
172 } 179 }
173 } 180 }
174 } 181 }
175 }, 182 },
176 //////////////////////////////////////////////////////////////////// 183 ////////////////////////////////////////////////////////////////////
177 // 184 //
178 initCss: { 185 getStyleTagFromCssFile: {
179 value: function () { 186 value: function (linktag) {
180 // 187 //
188 var tag, cssUrl, fileUri, cssData, docRootUrl;
189 //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, '/'));
191 //Checking for location of href to load (special case for cross-domain)
192 if (linktag.href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
193 //Getting file URI (not URL since we must load through I/O API)
194 cssUrl = linktag.href.split(this.application.ninja.coreIoApi.rootUrl)[1];
195 fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
196 //Loading data from CSS file
197 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
198 //
199 } else {
200 //Cross-domain resource
201 }
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>
212 for (var n in linktag.attributes) {
213 if (linktag.attributes[n].value && linktag.attributes[n].name !== 'disabled') {
214 if (linktag.attributes[n].value.indexOf(docRootUrl) !== -1) {
215 tag.setAttribute(linktag.attributes[n].name, linktag.attributes[n].value.split(docRootUrl)[1]);
216 } else {
217 tag.setAttribute(linktag.attributes[n].name, linktag.attributes[n].value);
218 }
219 }
220 }
221 //
222 //tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl);
223 tag.innerHTML = cssData.content;
224 //
225 return tag;
181 } 226 }
182 }, 227 },
183 //////////////////////////////////////////////////////////////////// 228 ////////////////////////////////////////////////////////////////////