diff options
Diffstat (limited to 'js/io/document/html-document.js')
-rwxr-xr-x[-rw-r--r--] | js/io/document/html-document.js | 149 |
1 files changed, 107 insertions, 42 deletions
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js index dd3507c2..ac556c2d 100644..100755 --- a/js/io/document/html-document.js +++ b/js/io/document/html-document.js | |||
@@ -4,16 +4,20 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | //////////////////////////////////////////////////////////////////////// |
8 | baseDocumentModule = require("js/io/document/base-document"), | 8 | // |
9 | NJUtils = require("js/lib/NJUtils").NJUtils; | 9 | var Montage = require("montage/core/core").Montage, |
10 | 10 | BaseDocument = require("js/io/document/base-document").BaseDocument, | |
11 | var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.BaseDocument, { | 11 | NJUtils = require("js/lib/NJUtils").NJUtils; |
12 | //////////////////////////////////////////////////////////////////////// | ||
13 | // | ||
14 | exports.HTMLDocument = Montage.create(BaseDocument, { | ||
12 | // PRIVATE MEMBERS | 15 | // PRIVATE MEMBERS |
13 | _selectionExclude: { value: null, enumerable: false }, | 16 | _selectionExclude: { value: null, enumerable: false }, |
14 | _cloudTemplateUri: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false}, | 17 | _htmlTemplateUrl: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false}, |
15 | _iframe: { value: null, enumerable: false }, | 18 | _iframe: { value: null, enumerable: false }, |
16 | _server: { value: null, enumerable: false }, | 19 | _server: { value: null, enumerable: false }, |
20 | _templateDocument: { value: null, enumerable: false }, | ||
17 | _selectionModel: { value: [], enumerable: false }, | 21 | _selectionModel: { value: [], enumerable: false }, |
18 | _undoModel: { value: { "queue" : [], "position" : 0 }, enumerable: false}, | 22 | _undoModel: { value: { "queue" : [], "position" : 0 }, enumerable: false}, |
19 | 23 | ||
@@ -24,7 +28,7 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
24 | _styles: { value: null, enumerable: false }, | 28 | _styles: { value: null, enumerable: false }, |
25 | _stylesheets: { value: null, enumerable: false }, | 29 | _stylesheets: { value: null, enumerable: false }, |
26 | _stageStyleSheetId : { value: 'nj-stage-stylesheet', enumerable: false }, | 30 | _stageStyleSheetId : { value: 'nj-stage-stylesheet', enumerable: false }, |
27 | _initialUserDocument: { value: null, enumerable: false }, | 31 | _userDocument: { value: null, enumerable: false }, |
28 | _htmlSource: {value: "<html></html>", enumerable: false}, | 32 | _htmlSource: {value: "<html></html>", enumerable: false}, |
29 | _glData: {value: null, enumerable: false }, | 33 | _glData: {value: null, enumerable: false }, |
30 | 34 | ||
@@ -39,11 +43,36 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
39 | // PUBLIC MEMBERS | 43 | // PUBLIC MEMBERS |
40 | cssLoadInterval: { value: null, enumerable: false }, | 44 | cssLoadInterval: { value: null, enumerable: false }, |
41 | 45 | ||
46 | _savedLeftScroll: {value:null}, | ||
47 | _savedTopScroll: {value:null}, | ||
48 | |||
49 | _codeViewDocument:{ | ||
50 | writable: true, | ||
51 | enumerable: true, | ||
52 | value:null | ||
53 | }, | ||
54 | |||
42 | /* | 55 | /* |
43 | * PUBLIC API | 56 | * PUBLIC API |
44 | */ | 57 | */ |
45 | 58 | ||
46 | // GETTERS / SETTERS | 59 | // GETTERS / SETTERS |
60 | |||
61 | codeViewDocument:{ | ||
62 | get: function() { return this._codeViewDocument; }, | ||
63 | set: function(value) { this._codeViewDocument = value} | ||
64 | }, | ||
65 | |||
66 | savedLeftScroll:{ | ||
67 | get: function() { return this._savedLeftScroll; }, | ||
68 | set: function(value) { this._savedLeftScroll = value} | ||
69 | }, | ||
70 | |||
71 | savedTopScroll:{ | ||
72 | get: function() { return this._savedTopScroll; }, | ||
73 | set: function(value) { this._savedTopScroll = value} | ||
74 | }, | ||
75 | |||
47 | selectionExclude: { | 76 | selectionExclude: { |
48 | get: function() { return this._selectionExclude; }, | 77 | get: function() { return this._selectionExclude; }, |
49 | set: function(value) { this._selectionExclude = value; } | 78 | set: function(value) { this._selectionExclude = value; } |
@@ -193,28 +222,27 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
193 | 222 | ||
194 | //****************************************// | 223 | //****************************************// |
195 | // PUBLIC METHODS | 224 | // PUBLIC METHODS |
196 | initialize: { | 225 | |
197 | value: function(doc, uuid, iframe, callback) { | 226 | |
198 | // Shell mode is not used anymore | 227 | //////////////////////////////////////////////////////////////////// |
199 | //if(!window.IsInShellMode()) { | 228 | // |
200 | 229 | initialize: { | |
201 | this.init("index-cloud", this._cloudTemplateUri, doc.type, iframe, uuid, callback); | 230 | value: function(file, uuid, iframe, callback) { |
202 | /* | 231 | // |
203 | } else { | 232 | this._userDocument = file; |
204 | var tmpurl = doc.uri.split('\\'); | 233 | // |
205 | var fileUrl = doc.server.url + "/" + tmpurl[tmpurl.length -1] + "?fileio=true&template=/user-document-templates/montage-application/index.html"; | 234 | this.init(file.name, file.uri, file.extension, iframe, uuid, callback); |
206 | this.init(name, fileUrl, doc.type, iframe, uuid, callback); | 235 | // |
207 | this.server = doc.server; | 236 | this.iframe = iframe; |
208 | this._initialUserDocument = doc; | 237 | this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"]; |
209 | } | 238 | this.currentView = "design"; |
210 | */ | 239 | // |
211 | this.iframe = iframe; | 240 | this.iframe.src = this._htmlTemplateUrl; |
212 | this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"]; | 241 | this.iframe.addEventListener("load", this, true); |
213 | this.currentView = "design"; | ||
214 | |||
215 | this._loadDocument(this.uri); | ||
216 | } | 242 | } |
217 | }, | 243 | }, |
244 | //////////////////////////////////////////////////////////////////// | ||
245 | |||
218 | 246 | ||
219 | collectGLData: { | 247 | collectGLData: { |
220 | value: function( elt, dataArray ) | 248 | value: function( elt, dataArray ) |
@@ -318,7 +346,8 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
318 | } | 346 | } |
319 | }, | 347 | }, |
320 | 348 | ||
321 | // Private | 349 | /* |
350 | // Private | ||
322 | _loadDocument: { | 351 | _loadDocument: { |
323 | value: function(uri) { | 352 | value: function(uri) { |
324 | // Load the document into the Iframe | 353 | // Load the document into the Iframe |
@@ -326,23 +355,36 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
326 | this.iframe.addEventListener("load", this, true); | 355 | this.iframe.addEventListener("load", this, true); |
327 | } | 356 | } |
328 | }, | 357 | }, |
329 | 358 | */ | |
359 | |||
360 | |||
361 | |||
362 | //////////////////////////////////////////////////////////////////// | ||
363 | // | ||
330 | handleEvent: { | 364 | handleEvent: { |
331 | value: function(event){ | 365 | value: function(event){ |
332 | this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | 366 | //TODO: Clean up, using for prototyping save |
367 | this._templateDocument = {}; | ||
368 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");; | ||
369 | this._templateDocument.body = this.iframe.contentWindow.document.getElementById("UserContent");; | ||
370 | // | ||
371 | this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | ||
333 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); | 372 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); |
334 | this.stageBG.onclick = null; | 373 | this.stageBG.onclick = null; |
335 | this._document = this.iframe.contentWindow.document; | 374 | this._document = this.iframe.contentWindow.document; |
336 | this._window = this.iframe.contentWindow; | 375 | this._window = this.iframe.contentWindow; |
337 | if(!this.documentRoot.Ninja) | 376 | // |
338 | { | 377 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; |
339 | this.documentRoot.Ninja = {}; | 378 | // |
340 | } | 379 | |
341 | 380 | this.documentRoot.innerHTML = this._userDocument.content.body; | |
342 | if(this._initialUserDocument) { | 381 | this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._userDocument.content.head; |
343 | // Now load the user content | 382 | |
344 | this.documentRoot.innerHTML = this._initialUserDocument.body; | 383 | |
345 | this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._initialUserDocument.head; | 384 | //TODO: Look at code below and clean up |
385 | |||
386 | |||
387 | |||
346 | 388 | ||
347 | this.cssLoadInterval = setInterval(function() { | 389 | this.cssLoadInterval = setInterval(function() { |
348 | if(this._document.styleSheets.length > 1) { | 390 | if(this._document.styleSheets.length > 1) { |
@@ -356,7 +398,8 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
356 | 398 | ||
357 | // TODO - Not sure where this goes | 399 | // TODO - Not sure where this goes |
358 | this._userComponentSet = {}; | 400 | this._userComponentSet = {}; |
359 | } else { | 401 | |
402 | |||
360 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | 403 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; |
361 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array | 404 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array |
362 | 405 | ||
@@ -405,7 +448,7 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
405 | } | 448 | } |
406 | 449 | ||
407 | this.callback(this); | 450 | this.callback(this); |
408 | } | 451 | |
409 | } | 452 | } |
410 | }, | 453 | }, |
411 | 454 | ||
@@ -423,5 +466,27 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
423 | */ | 466 | */ |
424 | } | 467 | } |
425 | } | 468 | } |
426 | } | 469 | }, |
470 | |||
471 | /** | ||
472 | * public method | ||
473 | * | ||
474 | */ | ||
475 | //////////////////////////////////////////////////////////////////// | ||
476 | // | ||
477 | save: { | ||
478 | enumerable: false, | ||
479 | value: function () { | ||
480 | //TODO: Add code view logic and also styles for HTML | ||
481 | if (this.currentView === 'design') { | ||
482 | return {mode: 'html', document: this._userDocument, style: this._styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML}; | ||
483 | } else if (this.currentView === "code"){ |