From 4ba680a7e9168d0f505a81e42a287dfbc54b4d7d Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 1 May 2012 15:26:37 -0700 Subject: Preliminary IO to new DOM view --- js/controllers/document-controller.js | 2 +- js/controllers/selection-controller.js | 1 - js/document/document-html.js | 191 ++++++++++----------------- js/document/helpers/url-parser.js | 23 +++- js/document/models/base.js | 55 ++++++-- js/document/models/html.js | 1 - js/document/templates/montage-web/index.html | 1 - js/document/views/base.js | 15 +-- js/document/views/design.js | 72 ++++++++-- js/stage/stage.reel/stage.js | 4 +- 10 files changed, 201 insertions(+), 164 deletions(-) diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 7795a74d..bb0f542f 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -366,7 +366,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, case 'html': //Open in designer view this._hackRootFlag = false; - Montage.create(Document).init(doc, this, this._onOpenDocument); + Montage.create(Document).init(doc, this, this._onOpenDocument, 'design'); break; default: //Open in code view diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 5665b09c..2bd774f5 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -152,7 +152,6 @@ exports.SelectionController = Montage.create(Component, { selectElement: { value: function(element) { - if(this.findSelectedElement(element) === -1) { if(this.application.ninja.currentDocument.inExclusion(element) !== -1){ diff --git a/js/document/document-html.js b/js/document/document-html.js index 28406ee8..ad82c371 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -7,117 +7,108 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; - HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel; + Component = require("montage/ui/component").Component, + HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, + DesignDocumentView = require("js/document/views/design").DesignDocumentView; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// // model: { - enumerable: false, value: null }, - //////////////////////////////////////////////////////////////////// - // - loadDelegate: { - enumerable: false, - value: null - }, - //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// // - delegateContext: { - enumerable: false, - value: null + _document: { + value: null //TODO: Figure out if this will be needed, probably not }, //////////////////////////////////////////////////////////////////// // exclusionList: { - enumerable: false, - value: ["HTML", "BODY"] + value: [] //TODO: Update to correct list }, //////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////// - //TODO: Remove these setters/getters, should call model directly - name: { - get: function() { - return this.model._name; - }, - set: function(value) { - this.model._name = value; - } - }, - // - isActive: { - get: function() { - return this.model._isActive; - }, - set: function(value) { - this.model._isActive = value; - } - }, - // - needsSave: { - get: function() { - return this.model._needsSave; - }, - set: function(value) { - this.model._needsSave = value; - } - }, - // + // uuid: { get: function() { return this._uuid; } }, - // - currentView: { - value: "design" - }, - //////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////// - // - iframe: { //MOVE TO: base.js in views - value: null - }, - // - createView: { //MOVE TO: design.js in views - value: function() { - var ifr = document.createElement("iframe"); - // - ifr.id = "document_" + this._uuid; - ifr.style.border = "none"; - ifr.style.background = "#FFF"; - ifr.style.height = "100%"; - ifr.style.width = "100%"; - // - ifr.src = "js/document/templates/montage-web/index.html"; - ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true); - // - return document.getElementById("iframeContainer").appendChild(ifr); + //////////////////////////////////////////////////////////////////// + // + inExclusion: { + value: function(element) { + if(this.exclusionList.indexOf(element.nodeName) === -1) { + return -1; + } + return 1; } }, - //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// // init: { - value:function(file, context, callback) { - this.model = Montage.create(HtmlDocumentModel, { - file: { - value: file - } + value:function(file, context, callback, view) { + //Creating instance of HTML Document Model + this.model = Montage.create(HtmlDocumentModel,{ + file: {value: file}, + views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic }); - this.name = file.name; - this.iframe = this.createView(); - this.delegateContext = context; - this.loadDelegate = callback; + //Initiliazing views and hiding + if (this.model.views.design.initiliaze(document.getElementById("iframeContainer"))) { + //Hiding iFrame, just initiliazing + this.model.views.design.hide(); + } else { + //ERROR: Design View not initilized + } + // + if (view === 'design') { + //Showing design iFrame + this.model.views.design.show(); + this.model.views.design.iframe.style.opacity = 0; + this.model.views.design.content = this.model.file.content; + // + this.model.views.design.render(function () { + //Setting opacity to be viewable after load + this.model.views.design.iframe.style.opacity = 1; + + + + + //TODO: Identify and remove usage of '_document' + this._document = this.model.views.design.document; + //TODO: Check for needed + this.documentRoot = this.model.views.design.document.body; + // + this._liveNodeList = this.documentRoot.getElementsByTagName('*'); + // + document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); + + + + + this.hack = {callback: callback, context: context}; + + setTimeout(function () { + //Making callback after view is loaded + this.hack.callback.call(this.hack.context, this); + }.bind(this), 1000); + + + + + + + + }.bind(this)); + } else { + //TODO: Identify default view (probably code) + } } }, //////////////////////////////////////////////////////////////////// @@ -137,21 +128,9 @@ exports.HtmlDocument = Montage.create(Component, { } } - // TODO: We don't need this anymore -> need to setup the main container still - //Adding a handler for the main user document reel to finish loading -// this.documentRoot.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); - // Live node list of the current loaded document this._liveNodeList = this.documentRoot.getElementsByTagName('*'); - - // TODO Move this to the appropriate location - /* - var len = this._liveNodeList.length; - - for(var i = 0; i < len; i++) { - NJUtils.makeModelFromElement(this._liveNodeList[i]); - } - */ + setTimeout(function () { @@ -322,32 +301,6 @@ exports.HtmlDocument = Montage.create(Component, { }.bind(this), 1000); } - }, - - GetElementFromPoint: { - value: function(x, y) { - return this._window.getElement(x,y); - } - }, - - inExclusion: { - value: function(element) { - if(this.exclusionList.indexOf(element.nodeName) === -1) { - return -1; - } - - return 1; - - } - }, - - // Handler for user content main reel. Gets called once the main reel of the template - // gets deserialized. - // Setting up the currentSelectedContainer to the document body. - userTemplateDidLoad: { - value: function(){ -// this.application.ninja.currentSelectedContainer = this.documentRoot; - } } }); //////////////////////////////////////////////////////////////////////// diff --git a/js/document/helpers/url-parser.js b/js/document/helpers/url-parser.js index 878c79e9..a1a7406a 100755 --- a/js/document/helpers/url-parser.js +++ b/js/document/helpers/url-parser.js @@ -14,8 +14,29 @@ exports.UrlParser = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false + }, + //////////////////////////////////////////////////////////////////// + // + parseStyles: { + value: function (styles) { + // + } + }, + //////////////////////////////////////////////////////////////////// + // + loadLocalStyleSheet: { + value: function (path) { + // + } + } + , + //////////////////////////////////////////////////////////////////// + // + loadExternalStyleSheet: { + value: function (path) { + // + } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/document/models/base.js b/js/document/models/base.js index f4dbbc0b..3bb69f6b 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -6,36 +6,49 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // -var Montage = require("montage/core/core").Montage; +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; //////////////////////////////////////////////////////////////////////// // -exports.BaseDocumentModel = Montage.create(Montage, { +exports.BaseDocumentModel = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// // - file: { + _file: { value: null }, - //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// // - _name: { - value: null + file: { + get: function() {return this._file;}, + set: function(value) {this._file = value;} }, //////////////////////////////////////////////////////////////////// // _isActive: { value: null + }, + //////////////////////////////////////////////////////////////////// + // + isActive: { + get: function() {return this._isActive;}, + set: function(value) {this._isActive = value;} }, //////////////////////////////////////////////////////////////////// // _needsSave: { value: null }, + //////////////////////////////////////////////////////////////////// + // + needsSave: { + get: function() {return this._needsSave;}, + set: function(value) {this._needsSave = value;} + }, //////////////////////////////////////////////////////////////////// // _currentView: { @@ -43,33 +56,49 @@ exports.BaseDocumentModel = Montage.create(Montage, { }, //////////////////////////////////////////////////////////////////// // - njdata: { - value: null + currentView: { + get: function() {return this._currentView;}, + set: function(value) {this._currentView = value;} }, //////////////////////////////////////////////////////////////////// // views: { value: null }, + //////////////////////////////////////////////////////////////////// + // + switchViewTo: { + value: function () { + // + } + }, //////////////////////////////////////////////////////////////////// // save: { - value: null + value: function () { + // + } }, //////////////////////////////////////////////////////////////////// // saveAs: { - value: null + value: function () { + // + } }, //////////////////////////////////////////////////////////////////// // saveAll: { - value: null + value: function () { + // + } }, //////////////////////////////////////////////////////////////////// // close: { - value: null + value: function () { + // + } } //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// diff --git a/js/document/models/html.js b/js/document/models/html.js index ff57454b..f45a0e21 100755 --- a/js/document/models/html.js +++ b/js/document/models/html.js @@ -14,7 +14,6 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false } //////////////////////////////////////////////////////////////////// diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html index caebc8d0..696904b4 100755 --- a/js/document/templates/montage-web/index.html +++ b/js/document/templates/montage-web/index.html @@ -32,7 +32,6 @@ - \ No newline at end of file diff --git a/js/document/views/base.js b/js/document/views/base.js index fc380027..d1c65b5e 100755 --- a/js/document/views/base.js +++ b/js/document/views/base.js @@ -15,35 +15,27 @@ exports.BaseDocumentView = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, //////////////////////////////////////////////////////////////////// // - parser: { - enumerable: false, + urlParser: { value: UrlParser }, //////////////////////////////////////////////////////////////////// // _iframe: { - enumerable: false, value: null }, //////////////////////////////////////////////////////////////////// // iframe: { - get: function() { - return this._iframe; - }, - set: function(value) { - this._iframe= value; - } + get: function() {return this._iframe;}, + set: function(value) {this._iframe= value;} }, //////////////////////////////////////////////////////////////////// // show: { - enumerable: false, value: function (callback) { if (this.iframe) { this.iframe.style.display = 'block'; @@ -57,7 +49,6 @@ exports.BaseDocumentView = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // hide: { - enumerable: false, value: function (callback) { if (this.iframe) { this.iframe.style.display = 'none'; diff --git a/js/document/views/design.js b/js/document/views/design.js index ecd2956c..10963cab 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -7,44 +7,85 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // var Montage = require("montage/core/core").Montage, - CodeDocumentView = require("js/document/views/code").CodeDocumentView; + BaseDocumentView = require("js/document/views/base").BaseDocumentView; //////////////////////////////////////////////////////////////////////// // -exports.DesignDocumentView = Montage.create(CodeDocumentView, { +exports.DesignDocumentView = Montage.create(BaseDocumentView, { //////////////////////////////////////////////////////////////////// // hasTemplate: { - enumerable: false, value: false }, + //////////////////////////////////////////////////////////////////// + // + _callback: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + _document: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + content: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + document: { + get: function() {return this._document;}, + set: function(value) {this._document = value;} + }, //////////////////////////////////////////////////////////////////// // initiliaze: { - enumerable: false, - value: function () { + value: function (parent) { + // + this.iframe = document.createElement("iframe"); // + this.iframe.style.border = "none"; + this.iframe.style.background = "#FFF"; + this.iframe.style.height = "100%"; + this.iframe.style.width = "100%"; + // + return parent.appendChild(this.iframe); } }, //////////////////////////////////////////////////////////////////// // render: { - enumerable: false, - value: function () { + value: function (callback) { // + this._callback = callback; + this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true); + this.iframe.src = "js/document/templates/montage-web/index.html"; } }, //////////////////////////////////////////////////////////////////// // onTemplateLoad: { - enumerable: false, - value: function () { + value: function (e) { + // + this.document = this.iframe.contentWindow.document; + // + + + + + //this.document.head.innerHTML += this.content.head; + this.document.body.innerHTML = this.content.head + this.content.body; + + + + // + if (this._callback) this._callback(); } }, //////////////////////////////////////////////////////////////////// // initCss: { - enumerable: false, value: function () { // } @@ -52,7 +93,6 @@ exports.DesignDocumentView = Montage.create(CodeDocumentView, { //////////////////////////////////////////////////////////////////// // initWebGl: { - enumerable: false, value: function () { // } @@ -60,11 +100,17 @@ exports.DesignDocumentView = Montage.create(CodeDocumentView, { //////////////////////////////////////////////////////////////////// // initMontage: { - enumerable: false, value: function () { // } - } + }, + //////////////////////////////////////////////////////////////////// + // + getElementFromPoint: { + value: function(x, y) { + return this.iframe.contentWindow.getElement(x,y); + } + }, //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// }); diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 515165bf..2e49fc04 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -264,7 +264,7 @@ exports.Stage = Montage.create(Component, { this._userContentLeft = 0; this._userContentTop = 0; - this.application.ninja.currentDocument._window.addEventListener("scroll", this, false); + //this.application.ninja.currentDocument._window.addEventListener("scroll", this, false); } @@ -543,7 +543,7 @@ exports.Stage = Montage.create(Component, { var point, element; point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY)); - element = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); + element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); // workaround Chrome 3d bug if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(element) !== -1) { -- cgit v1.2.3