diff options
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-x | js/document/html-document.js | 222 |
1 files changed, 112 insertions, 110 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index 77cc711d..28818774 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js | |||
@@ -358,22 +358,40 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
358 | 358 | ||
359 | 359 | ||
360 | 360 | ||
361 | 361 | ||
362 | |||
363 | |||
364 | /* | ||
365 | DOM Mutation Events: | ||
366 | |||
367 | DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, | ||
368 | DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, | ||
369 | DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded | ||
370 | |||
371 | */ | ||
372 | |||
373 | |||
374 | |||
375 | /* | ||
376 | //TODO: Remove and clean up event listener (DOMSubtreeModified) | ||
377 | _hackCount: { | ||
378 | value: 0 | ||
379 | }, | ||
380 | */ | ||
381 | |||
382 | |||
362 | //////////////////////////////////////////////////////////////////// | 383 | //////////////////////////////////////////////////////////////////// |
363 | // | 384 | // |
364 | handleEvent: { | 385 | handleEvent: { |
365 | value: function(event){ | 386 | value: function(event){ |
366 | //TODO: Remove | ||
367 | window.hackPreview = this.livePreview.bind(this); | ||
368 | |||
369 | this.application.ninja.documentController._hackRootFlag = true; | ||
370 | //console.log(this._userDocument.root, this); | ||
371 | //TODO: Clean up, using for prototyping save | 387 | //TODO: Clean up, using for prototyping save |
372 | this._templateDocument = {}; | 388 | this._templateDocument = {}; |
373 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");; | 389 | this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead"); |
374 | this._templateDocument.body = this.iframe.contentWindow.document.getElementById("UserContent");; | 390 | this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); |
391 | //TODO: Remove, also for prototyping | ||
392 | this.application.ninja.documentController._hackRootFlag = true; | ||
375 | // | 393 | // |
376 | this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); | 394 | //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent"); |
377 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); | 395 | this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG"); |
378 | this.stageBG.onclick = null; | 396 | this.stageBG.onclick = null; |
379 | this._document = this.iframe.contentWindow.document; | 397 | this._document = this.iframe.contentWindow.document; |
@@ -381,82 +399,93 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
381 | // | 399 | // |
382 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; | 400 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; |
383 | // | 401 | // |
402 | this._templateDocument.head.innerHTML = this._userDocument.content.head; | ||
403 | this._templateDocument.body.innerHTML = this._userDocument.content.body; | ||
404 | |||
405 | |||
406 | |||
407 | |||
408 | /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once | ||
384 | 409 | ||
385 | this.documentRoot.innerHTML = this._userDocument.content.body; | 410 | //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified |
386 | this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._userDocument.content.head; | 411 | setTimeout(function () { |
387 | 412 | ||
388 | |||
389 | //TODO: Look at code below and clean up | ||
390 | 413 | ||
391 | 414 | ||
415 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
416 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
417 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
418 | if(this._document.styleSheets.length > 1) { | ||
419 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | ||
420 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array | ||
421 | |||
422 | //TODO Finish this implementation once we start caching Core Elements | ||
423 | // Assign a model to the UserContent and add the ViewPort reference to it. | ||
424 | NJUtils.makeElementModel(this.documentRoot, "Stage", "stage"); | ||
425 | //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport"); | ||
426 | NJUtils.makeElementModel(this.stageBG, "Stage", "stage"); | ||
427 | NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage"); | ||
428 | |||
429 | for(i = 0; i < this._stylesheets.length; i++) { | ||
430 | if(this._stylesheets[i].ownerNode.id === this._stageStyleSheetId) { | ||
431 | this.documentRoot.elementModel.defaultRule = this._stylesheets[i]; | ||
432 | break; | ||
433 | } | ||
434 | } | ||
435 | |||
436 | //Temporary create properties for each rule we need to save the index of the rule | ||
437 | var len = this.documentRoot.elementModel.defaultRule.cssRules.length; | ||
438 | for(var j = 0; j < len; j++) { | ||
439 | //console.log(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText); | ||
440 | if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "*") { | ||
441 | |||
442 | this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
443 | |||
444 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "body") { | ||
445 | |||
446 | this.documentRoot.elementModel.body = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
447 | |||
448 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#Viewport") { | ||
449 | |||
450 | this.documentRoot.elementModel.viewPort = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
451 | |||
452 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageDimension") { | ||
453 | |||
454 | this.documentRoot.elementModel.stageDimension = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
455 | |||
456 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageView") { | ||
457 | |||
458 | this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
459 | |||
460 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") { | ||
461 | |||
462 | this.documentRoot.elementModel.stageBackground = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
463 | } | ||
464 | } | ||
465 | |||
466 | this.callback(this); | ||
467 | |||
468 | } | ||
469 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
470 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
471 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
472 | |||
473 | |||
474 | |||
475 | |||
476 | |||
477 | }.bind(this), 1000); | ||
478 | |||
479 | |||
392 | 480 | ||
393 | |||
394 | this.cssLoadInterval = setInterval(function() { | ||
395 | if(this._document.styleSheets.length > 1) { | ||
396 | clearInterval(this.cssLoadInterval); | ||
397 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | ||
398 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array | ||
399 | |||
400 | this.callback(this); | ||
401 | |||
402 | //console.log('file content end'); | ||
403 | } | ||
404 | }.bind(this), 50); | ||
405 | 481 | ||
406 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | 482 | } |
407 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array | ||
408 | |||
409 | /* TODO Finish this implementation once we start caching Core Elements */ | ||
410 | // Assign a model to the UserContent and add the ViewPort reference to it. | ||
411 | NJUtils.makeElementModel(this.documentRoot, "Stage", "stage"); | ||
412 | //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport"); | ||
413 | NJUtils.makeElementModel(this.stageBG, "Stage", "stage"); | ||
414 | NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage"); | ||
415 | |||
416 | for(i = 0; i < this._stylesheets.length; i++) { | ||
417 | if(this._stylesheets[i].ownerNode.id === this._stageStyleSheetId) { | ||
418 | this.documentRoot.elementModel.defaultRule = this._stylesheets[i]; | ||
419 | break; | ||
420 | } | ||
421 | } | ||
422 | |||
423 | // Temporary create properties for each rule we need to save the index of the rule. | ||
424 | var len = this.documentRoot.elementModel.defaultRule.cssRules.length; | ||
425 | for(var j = 0; j < len; j++) { | ||
426 | // console.log(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText); | ||
427 | if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "*") { | ||
428 | |||
429 | this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
430 | |||
431 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "body") { | ||
432 | |||
433 | this.documentRoot.elementModel.body = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
434 | |||
435 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#Viewport") { | ||
436 | |||
437 | this.documentRoot.elementModel.viewPort = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
438 | |||
439 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageDimension") { | ||
440 | |||
441 | this.documentRoot.elementModel.stageDimension = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
442 | |||
443 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageView") { | ||
444 | |||
445 | this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
446 | |||
447 | } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") { | ||
448 | |||
449 | this.documentRoot.elementModel.stageBackground = this.documentRoot.elementModel.defaultRule.cssRules[j]; | ||
450 | } | ||
451 | } | ||
452 | |||
453 | // Remving this callback and using the callback from the css load | ||
454 | //this.callback(this); | ||
455 | |||
456 | |||
457 | |||
458 | } | ||
459 | }, | 483 | }, |
484 | //////////////////////////////////////////////////////////////////// | ||
485 |