aboutsummaryrefslogtreecommitdiff
path: root/js/document
diff options
context:
space:
mode:
Diffstat (limited to 'js/document')
-rwxr-xr-xjs/document/html-document.js213
-rwxr-xr-xjs/document/templates/montage-html/default_html.css75
-rwxr-xr-xjs/document/templates/montage-html/index.html50
-rw-r--r--js/document/templates/montage-html/main.reel/main.js54
-rwxr-xr-xjs/document/templates/montage-html/package.json8
-rwxr-xr-xjs/document/templates/montage-html/styles.css5
-rwxr-xr-xjs/document/text-document.js31
7 files changed, 343 insertions, 93 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 0c8695fb..9a7755e6 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -14,7 +14,7 @@ var Montage = require("montage/core/core").Montage,
14exports.HTMLDocument = Montage.create(TextDocument, { 14exports.HTMLDocument = Montage.create(TextDocument, {
15 15
16 _selectionExclude: { value: null, enumerable: false }, 16 _selectionExclude: { value: null, enumerable: false },
17 _htmlTemplateUrl: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false}, 17 _htmlTemplateUrl: { value: "js/document/templates/montage-html/index.html", enumerable: false},
18 _iframe: { value: null, enumerable: false }, 18 _iframe: { value: null, enumerable: false },
19 _server: { value: null, enumerable: false }, 19 _server: { value: null, enumerable: false },
20 _templateDocument: { value: null, enumerable: false }, 20 _templateDocument: { value: null, enumerable: false },
@@ -235,6 +235,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
235 // 235 //
236 initialize: { 236 initialize: {
237 value: function(file, uuid, iframe, callback) { 237 value: function(file, uuid, iframe, callback) {
238 this.application.ninja.documentController._hackRootFlag = false;
238 // 239 //
239 this._userDocument = file; 240 this._userDocument = file;
240 // 241 //
@@ -289,15 +290,6 @@ exports.HTMLDocument = Montage.create(TextDocument, {
289 } 290 }
290 }, 291 },
291 292
292
293
294 AppendElement: {
295 value: function(element, parent) {
296 this.dirtyFlag = true;
297 }
298 },
299
300
301 /** 293 /**
302 * Return the specified inline attribute from the element. 294 * Return the specified inline attribute from the element.
303 */ 295 */
@@ -354,17 +346,43 @@ exports.HTMLDocument = Montage.create(TextDocument, {
354 }, 346 },
355 347
356 348
357 349
350
351
352
353
354
355 /*
356 DOM Mutation Events:
357
358 DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified,
359 DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument,
360 DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded
361
362 */
363
364
365
366 /*
367//TODO: Remove and clean up event listener (DOMSubtreeModified)
368 _hackCount: {
369 value: 0
370 },
371*/
372
373
358 //////////////////////////////////////////////////////////////////// 374 ////////////////////////////////////////////////////////////////////
359 // 375 //
360 handleEvent: { 376 handleEvent: {
361 value: function(event){ 377 value: function(event){
362 //TODO: Clean up, using for prototyping save 378 //TODO: Clean up, using for prototyping save
363 this._templateDocument = {}; 379 this._templateDocument = {};
364 this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");; 380 this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");
365 this._templateDocument.body = this.iframe.contentWindow.document.getElementById("UserContent");; 381 this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
382 //TODO: Remove, also for prototyping
383 this.application.ninja.documentController._hackRootFlag = true;
366 // 384 //
367 this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); 385 //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
368 this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); 386 this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG");
369 this.stageBG.onclick = null; 387 this.stageBG.onclick = null;
370 this._document = this.iframe.contentWindow.document; 388 this._document = this.iframe.contentWindow.document;
@@ -372,79 +390,103 @@ exports.HTMLDocument = Montage.create(TextDocument, {
372 // 390 //
373 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; 391 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
374 // 392 //
393 this._templateDocument.head.innerHTML = this._userDocument.content.head;
394 this._templateDocument.body.innerHTML = this._userDocument.content.body;
395
396 // Adding a handler for the main user document reel to finish loading.
397 this._document.body.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false);
375 398
376 this.documentRoot.innerHTML = this._userDocument.content.body; 399
377 this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._userDocument.content.head; 400 /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once
378 401
379 402 //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified
380 //TODO: Look at code below and clean up 403 setTimeout(function () {
381 404
382 405
406
407 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
408 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
409 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
410 if(this._document.styleSheets.length > 1) {
411 this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
412 this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
413
414 //TODO Finish this implementation once we start caching Core Elements
415 // Assign a model to the UserContent and add the ViewPort reference to it.
416 NJUtils.makeElementModel(this.documentRoot, "Stage", "stage");
417 //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport");
418 NJUtils.makeElementModel(this.stageBG, "Stage", "stage");
419 NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage");
420
421 for(i = 0; i < this._stylesheets.length; i++) {
422 if(this._stylesheets[i].ownerNode.id === this._stageStyleSheetId) {
423 this.documentRoot.elementModel.defaultRule = this._stylesheets[i];
424 break;
425 }
426 }
427
428 //Temporary create properties for each rule we need to save the index of the rule
429 var len = this.documentRoot.elementModel.defaultRule.cssRules.length;
430 for(var j = 0; j < len; j++) {
431 //console.log(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText);
432 if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "*") {
433
434 this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j];
435
436 } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "body") {
437
438 this.documentRoot.elementModel.body = this.documentRoot.elementModel.defaultRule.cssRules[j];
439
440 } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#Viewport") {
441
442 this.documentRoot.elementModel.viewPort = this.documentRoot.elementModel.defaultRule.cssRules[j];
443
444 } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageDimension") {
445
446 this.documentRoot.elementModel.stageDimension = this.documentRoot.elementModel.defaultRule.cssRules[j];
447
448 } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageView") {
449
450 this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j];
451
452 } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") {
453
454 this.documentRoot.elementModel.stageBackground = this.documentRoot.elementModel.defaultRule.cssRules[j];
455 }
456 }
457
458 this.callback(this);
459
460 }
461 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
462 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
463 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
464
465
466
467
468
469 }.bind(this), 1000);
470
471
383 472
384
385 this.cssLoadInterval = setInterval(function() {
386 if(this._document.styleSheets.length > 1) {
387 clearInterval(this.cssLoadInterval);
388 this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
389 this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
390
391 this.callback(this);
392 }
393 }.bind(this), 50);
394 473
395 this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; 474 }
396 this._stylesheets = this._document.styleSheets; // Entire stlyesheets array 475 },
397
398 /* TODO Finish this implementation once we start caching Core Elements */
399 // Assign a model to the UserContent and add the ViewPort reference to it.
400 NJUtils.makeElementModel(this.documentRoot, "Stage", "stage");
401 //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport");
402 NJUtils.makeElementModel(this.stageBG, "Stage", "stage");
403 NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage");
404