From db4f235dc9fd6f2242dee481d2f377005cf23596 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 24 Jul 2012 16:56:52 -0700 Subject: adding a viewIdentifier to the model to enable design/code switch Todo: - Cleanup and remove listeners - Finish stage reload - Add remaining bindings. Signed-off-by: Valerio Virgillito --- js/controllers/document-controller.js | 18 ++++++++++++++++ js/controllers/styles-controller.js | 34 ++++++++++++++++++++++++++++++ js/document/document-html.js | 15 ++++++++++++- js/document/models/base.js | 15 +++++++++++++ js/document/views/code.js | 4 ++-- js/document/views/design-code.js | 27 ++---------------------- js/document/views/design.js | 4 ++-- js/stage/binding-view.reel/binding-view.js | 24 ++++++++++++++++----- js/stage/stage.reel/stage.js | 20 ++++++++++++++++-- 9 files changed, 124 insertions(+), 37 deletions(-) (limited to 'js') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index ee7ca82c..83c1f58c 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -80,6 +80,7 @@ exports.DocumentController = Montage.create(Component, { } else if(this._currentDocument.currentView === "design") { document.getElementById("codeViewContainer").style.display = "none"; document.getElementById("iframeContainer").style.display = "block"; + this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false); if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show(); this._currentDocument.model.views.design._liveNodeList = this._currentDocument.model.documentRoot.getElementsByTagName('*'); } else { @@ -91,6 +92,23 @@ exports.DocumentController = Montage.create(Component, { } }, + handleChange: { + value: function(notification) { + if(notification.currentPropertyPath === "model.currentViewIdentifier") { + if(this.currentDocument.model.currentView.identifier === "design-code") { +// document.getElementById("iframeContainer").style.display = "none"; +// this._currentDocument.model.parentContainer.style["display"] = "block"; +// if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show(); + } else { + document.getElementById("codeViewContainer").style.display = "none"; + document.getElementById("iframeContainer").style.display = "block"; + if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show(); + this._currentDocument.model.views.design._liveNodeList = this._currentDocument.model.documentRoot.getElementsByTagName('*'); + } + } + } + }, + deserializedFromTemplate: { value: function() { //TODO: Add event naming consistency (save, fileOpen and newFile should be consistent, all file events should be executeFile[operation name]) this.eventManager.addEventListener("appLoaded", this, false); diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 21321f6d..0e1df1e9 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -99,6 +99,8 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// setting document via binding this._currentDocument = document; + this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false); + ///// Stage stylesheet should always be found this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); // Returns null if sheet not found (as in non-ninja projects) @@ -126,6 +128,38 @@ var stylesController = exports.StylesController = Montage.create(Component, { enumerable : false }, + handleChange: { + value: function(notification) { + if(notification.currentPropertyPath === "model.currentViewIdentifier") { + if(this.currentDocument.model.currentView.identifier === "design") { + ///// Stage stylesheet should always be found + this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); + // Returns null if sheet not found (as in non-ninja projects) + // Setter will handle null case + this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); + + this.userStyleSheets = nj.toArray(this.currentDocument.model.views.design.document.styleSheets).filter(function(sheet) { + if(sheet === this._stageStylesheet) { return false; } + + var media = sheet.ownerNode.getAttribute('media'); + + ///// If the media attribute contains a query, we'll watch for changes in media + if(/\([0-9A-Za-z-: ]+\)/.test(media)) { + this.watchMedia(media); + } + + return true; + + }, this); + + this.initializeRootStyles(); + + NJevent('styleSheetsReady', this); + } + } + } + }, + _mediaList : { value: [] }, diff --git a/js/document/document-html.js b/js/document/document-html.js index a59f5848..f3163339 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -164,7 +164,7 @@ exports.HtmlDocument = Montage.create(Component, { //Adding observer to know when template is ready this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); this._observer.observe(this.model.views.design.document.head, {childList: true}); - }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); + }.bind(this), template, {viewCallback: this.handleReloadViewReady, context: this}); } else if(view === 'code'){ //TODO: Add logic to handle external changed files //Checking for template type and not saving external data @@ -176,6 +176,7 @@ exports.HtmlDocument = Montage.create(Component, { //Setting current view object to code this.currentView = 'code'; this.model.currentView = this.model.views.code; + this.model.currentViewIdentifier = this.model.currentView.identifier; } else { //TODO: Identify default view (probably code) - Error handling } @@ -200,10 +201,22 @@ exports.HtmlDocument = Montage.create(Component, { if(typeof this.model.domContainer !== "undefined") { this.model.domContainer = this.model.documentRoot; } + this.model.currentViewIdentifier = this.model.currentView.identifier; //Making callback after view is loaded this.loaded.callback.call(this.loaded.context, this); } }, + handleReloadViewReady: { + value: function(mObjects) { + this.model.mObjects = mObjects; + // TODO: Find a better way to initialize this property + // Assign the domContainer to be the document root on open + if(typeof this.model.domContainer !== "undefined") { + this.model.domContainer = this.model.documentRoot; + } + this.model.currentViewIdentifier = this.model.currentView.identifier; + } + }, //////////////////////////////////////////////////////////////////// // closeDocument: { diff --git a/js/document/models/base.js b/js/document/models/base.js index 85a0414f..c44123c3 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -88,6 +88,21 @@ exports.BaseDocumentModel = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + _currentViewIdentifier: { + value: "" + }, + //////////////////////////////////////////////////////////////////// + // + currentViewIdentifier: { + get: function() { + return this._currentViewIdentifier; + }, + set: function(value) { + this._currentViewIdentifier = value; + } + }, + //////////////////////////////////////////////////////////////////// + // _selection: { value: [] }, diff --git a/js/document/views/code.js b/js/document/views/code.js index 05f671b2..0ca87fa9 100755 --- a/js/document/views/code.js +++ b/js/document/views/code.js @@ -39,8 +39,8 @@ var Montage = require("montage/core/core").Montage, exports.CodeDocumentView = Montage.create(BaseDocumentView, { //////////////////////////////////////////////////////////////////// // - hasTemplate: { - value: false + identifier: { + value: "code" }, //////////////////////////////////////////////////////////////////// // diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js index 25073833..44d12549 100644 --- a/js/document/views/design-code.js +++ b/js/document/views/design-code.js @@ -40,8 +40,8 @@ var Montage = require("montage/core/core").Montage, exports.DesignCodeView = Montage.create(CodeDocumentView, { //////////////////////////////////////////////////////////////////// // - hasTemplate: { - value: false + identifier: { + value: "design-code" }, //////////////////////////////////////////////////////////////////// // @@ -75,22 +75,6 @@ exports.DesignCodeView = Montage.create(CodeDocumentView, { this.textViewContainer.style.background = "white"; this.textViewContainer.style.height = "100%"; - - ///todo-remove after the switch view logic is added in all the components - this.application.ninja.stage.collapseAllPanels(); - this.application.ninja.stage.hideCanvas(true); - this.application.ninja.stage.hideRulers(); - - document.getElementsByClassName("bindingView")[0].style.display = "none"; - - //bindingView div needs to be display noned - //timeline error on switching back to design view - - ///-end todo-remove - - - - //todo : update options bar // @@ -106,13 +90,6 @@ exports.DesignCodeView = Montage.create(CodeDocumentView, { } this.textViewContainer.style.display = "none"; - ///todo-remove after the switch view logic is added in all the components - this.application.ninja.stage.restoreAllPanels(false); - this.application.ninja.stage.hideCanvas(false); - this.application.ninja.stage.showRulers(); - ///-end todo-remove - - //todo : update options bar // diff --git a/js/document/views/design.js b/js/document/views/design.js index 548e45e9..97558408 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js @@ -39,8 +39,8 @@ var Montage = require("montage/core/core").Montage, exports.DesignDocumentView = Montage.create(BaseDocumentView, { //////////////////////////////////////////////////////////////////// // - hasTemplate: { - value: false + identifier: { + value: "design" }, //////////////////////////////////////////////////////////////////// // diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index b207cc3d..5ad2d364 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js @@ -207,22 +207,36 @@ exports.BindingView = Montage.create(Component, { } }, - _currentDocument : { value: null }, - currentDocument : { - get : function() { return this._currentDocument; }, - set : function(value) { - if(value === this._currentDocument) { return; } + _currentDocument: { + value: null + }, + currentDocument: { + get: function() { + return this._currentDocument; + }, + set: function(value) { + if(value === this._currentDocument) { + return; + } this._currentDocument = value; + if(value) { this.hide = (value.currentView === 'code'); + this.currentDocument.addPropertyChangeListener("model.currentView", this, false); } this.needsDraw = true; } }, + handleChange: { + value: function() { + this.hide = this.currentDocument.model.currentView.identifier === "design-code"; + } + }, + _hide : { value: true }, hide : { get : function() { return this._hide; }, diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 817220d4..39336b57 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -368,6 +368,8 @@ exports.Stage = Montage.create(Component, { this.clearAllCanvas(); this.initWithDocument(); + + this._currentDocument.addPropertyChangeListener("model.currentView", this, false); } else { this.collapseAllPanels(); this.hideCanvas(true); @@ -376,6 +378,20 @@ exports.Stage = Montage.create(Component, { } }, + handleDocumentViewChange: { + value: function() { + if(this.currentDocument.model.currentView.identifier === "design-code") { + this.collapseAllPanels(); + this.hideRulers(); + this.hideCanvas(true); + } else { + this.restoreAllPanels(true); + this.hideCanvas(false); + this.showRulers(); + } + } + }, + _userPaddingLeft: { value: 0 }, _userPaddingTop: { value: 0 }, @@ -492,8 +508,6 @@ exports.Stage = Montage.create(Component, { this.eventManager.addEventListener( "elementChange", this, false); this.addPropertyChangeListener("currentDocument.model.domContainer", this, true); -// this.addPropertyChangeListener("currentDocument.model.domContainer", this); - } }, @@ -586,6 +600,8 @@ exports.Stage = Montage.create(Component, { drawUtils.drawXZ = false; this.updatedStage = true; } + } else if(notification.currentPropertyPath === "model.currentView") { + this.handleDocumentViewChange(); } /* else if(notification.currentPropertyPath === "currentDocument.model.domContainer") { -- cgit v1.2.3