aboutsummaryrefslogtreecommitdiff
path: root/js/document/document-html.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/document/document-html.js')
-rwxr-xr-xjs/document/document-html.js469
1 files changed, 140 insertions, 329 deletions
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 89717dd6..c60a12a2 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -6,361 +6,172 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
6 6
7//////////////////////////////////////////////////////////////////////// 7////////////////////////////////////////////////////////////////////////
8// 8//
9var Montage = require("montage/core/core").Montage, 9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component; 10 Component = require("montage/ui/component").Component,
11 HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel; 11 HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel,
12 DesignDocumentView = require("js/document/views/design").DesignDocumentView;
12//////////////////////////////////////////////////////////////////////// 13////////////////////////////////////////////////////////////////////////
13// 14//
14exports.HtmlDocument = Montage.create(Component, { 15exports.HtmlDocument = Montage.create(Component, {
15 //////////////////////////////////////////////////////////////////// 16 ////////////////////////////////////////////////////////////////////
16 // 17 //
17 hasTemplate: { 18 hasTemplate: {
18 enumerable: false,
19 value: false 19 value: false
20 }, 20 },
21 21 ////////////////////////////////////////////////////////////////////
22 //
22 model: { 23 model: {
23 value: null 24 value: null
24 }, 25 },
25 26 ////////////////////////////////////////////////////////////////////
26 loadDelegate: { 27 //
27 value: null 28 loaded: {
28 }, 29 value: {callback: null, context: null}
29
30 delegateContext: {
31 value: null
32 },
33
34 exclusionList: {
35 value: ["HTML", "BODY"]
36 },
37
38 // Getters for the model.
39 // TODO: Change how these properties are accessed through Ninja
40 name: {
41 get: function() {
42 return this.model._name;
43 },
44 set: function(value) {
45 this.model._name = value;
46 }
47 },
48
49 isActive: {
50 get: function() {
51 return this.model._isActive;
52 },
53 set: function(value) {
54 this.model._isActive = value;
55 }
56 },
57
58 needsSave: {
59 get: function() {
60 return this.model._needsSave;
61 },
62 set: function(value) {
63 this.model._needsSave = value;
64 }
65 }, 30 },
66 31 ////////////////////////////////////////////////////////////////////
67 // View Properties 32 //
68 // TODO: Move those into a view object - for now dump it here 33 _observer: {
69 iframe: {
70 value: null 34 value: null
71 }, 35 },
72
73 uuid: {
74 get: function() {
75 return this._uuid;
76 }
77 },
78
79 currentView: {
80 value: "design"
81 },
82 //////////////////////////////////////////////////////////////////// 36 ////////////////////////////////////////////////////////////////////
83 //////////////////////////////////////////////////////////////////// 37 //
84 init: { 38 exclusionList: {
85 value:function(file, context, callback) { 39 value: ["HTML", "BODY", "NINJA-CONTENT"]
86 this.model = Montage.create(HtmlDocumentModel, {
87 file: {
88 value: file
89 }
90 });
91
92 this.name = file.name;
93
94 // this.init(file.name, file.uri, file.extension, iframe, uuid, callback);
95
96
97 this.iframe = this.createView();
98
99 //this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
100 //this.currentView = "design";
101 //
102
103 this.delegateContext = context;
104 this.loadDelegate = callback;
105 }
106 },
107
108 // Create View
109 // Move this into a base view object
110 createView: {
111 value: function() {
112 var ifr = document.createElement("iframe");
113 ifr.id = "document_" + this._uuid;
114
115
116 ifr.style.border = "none";
117 ifr.style.background = "#FFF";
118 ifr.style.height = "100%";
119 ifr.style.width = "100%";
120
121 // TODO: Reable opacity to display only when done loading
122// ifr.style.opacity = 0;
123
124 ifr.src = "js/document/templates/montage-web/index.html";
125 ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true);
126
127 return document.getElementById("iframeContainer").appendChild(ifr);
128 }
129 },
130
131 handleWebTemplateLoad: {
132 value: function(event) {
133 //TODO: Remove, also for prototyping
134 this.application.ninja.documentController._hackRootFlag = true;
135
136
137 //TODO: Clean up, using for prototyping save
138// this._templateDocument = {};
139// this._templateDocument.html = this.iframe.contentWindow.document;
140// this._templateDocument.body =
141
142 this._window = this.iframe.contentWindow;
143 this._document = this.iframe.contentWindow.document;
144 this.documentRoot = this.iframe.contentWindow.document.body;
145
146 for (var k in this._document.styleSheets) {
147 if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) {
148 this._document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true');
149 }
150 }
151
152 // TODO: We don't need this anymore -> need to setup the main container still
153 //Adding a handler for the main user document reel to finish loading
154// this.documentRoot.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
155
156 // Live node list of the current loaded document
157 this._liveNodeList = this.documentRoot.getElementsByTagName('*');
158
159 // TODO Move this to the appropriate location
160 /*
161 var len = this._liveNodeList.length;
162
163 for(var i = 0; i < len; i++) {
164 NJUtils.makeModelFromElement(this._liveNodeList[i]);
165 }
166 */
167
168 setTimeout(function () {
169
170 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
171 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
172 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
173 if(this._document.styleSheets.length) {
174 //Checking all styleSheets in document
175 for (var i in this._document.styleSheets) {
176 //If rules are null, assuming cross-origin issue
177 if(this._document.styleSheets[i].rules === null) {
178 //TODO: Revisit URLs and URI creation logic, very hack right now
179 var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl;
180 //
181 docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
182 //TODO: Parse out relative URLs and map them to absolute
183 if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
184 //
185 cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1];
186 fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
187 //TODO: Add error handling for reading file
188 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
189 //
190 var tag = this.iframe.contentWindow.document.createElement('style');
191 tag.setAttribute('type', 'text/css');
192 tag.setAttribute('data-ninja-uri', fileUri);
193 tag.setAttribute('data-ninja-file-url', cssUrl);
194 tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
195 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
196 //Copying attributes to maintain same properties as the <link>
197 for (var n in this._document.styleSheets[i].ownerNode.attributes) {
198 if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') {
199 if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
200 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
201 } else {
202 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
203 }
204 }
205 }
206 //
207 fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0];
208
209 //TODO: Make public version of this.application.ninja.ioMediator.getNinjaPropUrlRedirect with dynamic ROOT
210 tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl);
211
212 function detectUrl (prop) {
213 return prop.replace(/[^()\\""\\'']+/g, prefixUrl);;
214 }
215