diff options
Diffstat (limited to 'js/document/document-html.js')
-rwxr-xr-x | js/document/document-html.js | 411 |
1 files changed, 88 insertions, 323 deletions
diff --git a/js/document/document-html.js b/js/document/document-html.js index 89717dd6..567e4455 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js | |||
@@ -7,360 +7,125 @@ 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 | 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 | // |
14 | exports.HtmlDocument = Montage.create(Component, { | 15 | exports.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: { |
29 | value: {callback: null, context: null} | ||
28 | }, | 30 | }, |
29 | 31 | //////////////////////////////////////////////////////////////////// | |
30 | delegateContext: { | 32 | // |
33 | _observer: { | ||
31 | value: null | 34 | value: null |
32 | }, | 35 | }, |
33 | 36 | //////////////////////////////////////////////////////////////////// | |
34 | exclusionList: { | 37 | // |
35 | value: ["HTML", "BODY"] | 38 | _document: { |
36 | }, | 39 | value: null //TODO: Figure out if this will be needed, probably not |
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 | }, | 40 | }, |
66 | 41 | //////////////////////////////////////////////////////////////////// | |
67 | // View Properties | 42 | // |
68 | // TODO: Move those into a view object - for now dump it here | 43 | exclusionList: { |
69 | iframe: { | 44 | value: ["HTML", "BODY"] //TODO: Update to correct list |
70 | value: null | ||
71 | }, | 45 | }, |
72 | 46 | //////////////////////////////////////////////////////////////////// | |
47 | // | ||
73 | uuid: { | 48 | uuid: { |
74 | get: function() { | 49 | get: function() { |
75 | return this._uuid; | 50 | return this._uuid; |
76 | } | 51 | } |
77 | }, | 52 | }, |
78 | 53 | //////////////////////////////////////////////////////////////////// | |
79 | currentView: { | 54 | // |
80 | value: "design" | ||
81 | }, | ||
82 | //////////////////////////////////////////////////////////////////// | ||
83 | //////////////////////////////////////////////////////////////////// | ||
84 | init: { | ||
85 | value:function(file, context, callback) { | ||
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 | } | ||