From a402ae19732f7aeb53de27e3f25f72e9c42a453c Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 16 Jul 2012 14:50:50 -0700 Subject: New: Added switching view functionality to document UI This now let's you switch between code and design views in all documents opened that support design view. Code view for these documents is currently unsupported, so this is just to hook up the UI to the new methods. Code view will be added next. --- .../layout/document-bar.reel/document-bar.html | 8 +- .../layout/document-bar.reel/document-bar.js | 221 ++++++++++----------- js/controllers/document-controller.js | 6 +- js/document/document-html.js | 2 + 4 files changed, 118 insertions(+), 119 deletions(-) (limited to 'js') diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 69f8107f..fbd03221 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html @@ -73,7 +73,9 @@ POSSIBILITY OF SUCH DAMAGE. "prototype": "js/components/layout/document-bar.reel", "properties": { "element": {"#": "documentBar"}, - "zoomControl": {"@": "hottext1"} + "zoomControl": {"@": "hottext1"}, + "btnDesign": {"#": "buttonDesign"}, + "btnCode": {"#": "buttonCode"} } } } @@ -93,7 +95,7 @@ POSSIBILITY OF SUCH DAMAGE. -
+
@@ -101,7 +103,7 @@ POSSIBILITY OF SUCH DAMAGE.
-
+
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 248bc8c4..1a580284 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -29,140 +29,115 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -var Montage = require("montage/core/core").Montage; -var Component = require("montage/ui/component").Component; - +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; +//////////////////////////////////////////////////////////////////////// +// exports.DocumentBar = Montage.create(Component, { - - _currentDocument: { - enumerable: false, - value: null - }, - + //////////////////////////////////////////////////////////////////// + // + _currentDocument: {value: null}, + //////////////////////////////////////////////////////////////////// + // currentDocument: { - enumerable: false, - get: function() { - return this._currentDocument; - }, + get: function() {return this._currentDocument;}, set: function(value) { + // if (value === this._currentDocument) { return; } - + // this._currentDocument = value; - this.disabled = !this._currentDocument; - - if(this._currentDocument && this._currentDocument.currentView === "design") { - this.visible = true; - } else if(this._currentDocument && this._currentDocument.currentView === "code") { - this.visible = false; + // + if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design) { + this.btnCode.setAttribute('class', 'inactive'); + this.btnDesign.removeAttribute('class'); + } else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code) { + this.btnDesign.setAttribute('class', 'inactive'); + this.btnCode.removeAttribute('class'); } + // + this.visible = true; } }, - + //////////////////////////////////////////////////////////////////// + // _visible: { value: false }, - + //////////////////////////////////////////////////////////////////// + // visible: { - get: function() { - return this._visible; - }, + get: function() {return this._visible;}, set: function(value) { + // if(this._visible !== value) { this._visible = value; this.needsDraw = true; } } }, - - designView: { - value: null - }, - - codeView: { - value: null - }, - + //////////////////////////////////////////////////////////////////// + // zoomControl: { value: null, serializable: true }, - - _type: { - value: null - }, - - type: { - enumerable: false, - get: function() { return this._type; }, - set: function(value) { - if (this._type === value) { - return; - } - - this._type = value; - this.needsDraw = true; - - } - }, - - _currentView: { - value: null - }, - - currentView: { - get: function() { return this._currentView}, - set: function(value) { - if (this._currentView === value) { - return; - } - - this._currentView = value; - this.needsDraw = true; - } - }, - + //////////////////////////////////////////////////////////////////// + // _zoomFactor: { value: 100 }, - + //////////////////////////////////////////////////////////////////// + // zoomFactor: { - get: function() { return this._zoomFactor; }, - - set: function(value) - { - if(value !== this._zoomFactor) - { + get: function() {return this._zoomFactor;}, + set: function(value) { + if(value !== this._zoomFactor) { + // this._zoomFactor = value; - if (!this._firstDraw) - { + // + if (!this._firstDraw) { this.application.ninja.stage.setZoom(value); } } } }, - - draw: { + //////////////////////////////////////////////////////////////////// + // + prepareForDraw: { value: function() { - /* - if(this.type === "htm" || this.type === "html") { - this.designView.classList.add("active"); - this.codeView.classList.add("active"); - - if(this.currentView === "design") { - this.designView.classList.add("selected"); - if(this.codeView.classList.contains("selected")) this.codeView.classList.toggle("selected"); - } else { - this.codeView.classList.add("selected"); - if(this.designView.classList.contains("selected")) this.designView.classList.toggle("selected"); + // + this.btnCode.addEventListener('click', this.showViewCode.bind(this), false); + this.btnDesign.addEventListener('click', this.showViewDesign.bind(this), false); + } + }, + //////////////////////////////////////////////////////////////////// + // + willDraw: { + value: function() { + // + this.btnCode.setAttribute('class', 'inactive'); + this.btnDesign.setAttribute('class', 'inactive'); + // + if (this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView) { + // + if (this._currentDocument.model.currentView === this._currentDocument.model.views.design) { + this.btnDesign.removeAttribute('class'); + } else if (this._currentDocument.model.currentView === this._currentDocument.model.views.code) { + this.btnCode.removeAttribute('class'); } - - } else if(this.type) { - this.designView.classList.remove("active"); } - */ + } + }, + //////////////////////////////////////////////////////////////////// + // + draw: { + value: function() { + // if(this.visible) { this.element.style.display = "block"; } else { @@ -171,37 +146,57 @@ exports.DocumentBar = Montage.create(Component, { } }, - - prepareForDraw: { + //////////////////////////////////////////////////////////////////// + // + didDraw: { value: function() { -// this.designView.addEventListener("click", this, false); -// this.codeView.addEventListener("click", this, false); - + // } }, - + //////////////////////////////////////////////////////////////////// + // _disabled: { value: true }, - + //////////////////////////////////////////////////////////////////// + // disabled: { - get: function() { - return this._disabled; - }, + get: function() {return this._disabled;}, set: function(value) { + // if(value !== this._disabled) { this._disabled = value; } } }, - - - handleClick: { - value: function(event) { - if(event._event.target.id === this.currentView) return; - - this.currentView = event._event.target.id; - this.application.ninja.documentController.stage.stageView.switchDesignDocViews(event._event.target.id);//switch between design view + //////////////////////////////////////////////////////////////////// + // + showViewDesign: { + value: function () { + // + if (this._currentDocument.model.currentView !== 'design') { + // + this._currentDocument.model.switchViewTo('design'); + this.btnCode.setAttribute('class', 'inactive'); + this.btnDesign.removeAttribute('class'); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + showViewCode: { + value: function () { + // + if (this._currentDocument.model.currentView !== 'code') { + // + this._currentDocument.model.switchViewTo('code'); + this.btnDesign.setAttribute('class', 'inactive'); + this.btnCode.removeAttribute('class'); + } } } + //////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////// }); +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 588481bb..5020e27d 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -68,7 +68,7 @@ exports.DocumentController = Montage.create(Component, { return; } - if(this._currentDocument) { + if(this._currentDocument && this._currentDocument.model.currentView) { this._currentDocument.model.currentView.hide(); } @@ -80,12 +80,12 @@ 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.model.currentView.show(); + if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show(); this._currentDocument.model.views.design._liveNodeList = this._currentDocument.model.documentRoot.getElementsByTagName('*'); } else { document.getElementById("iframeContainer").style.display = "none"; this._currentDocument.model.parentContainer.style["display"] = "block"; - this._currentDocument.model.currentView.show(); + if (this._currentDocument.model.currentView) this._currentDocument.model.currentView.show(); } } diff --git a/js/document/document-html.js b/js/document/document-html.js index 142ffe4a..5079cfca 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -130,6 +130,8 @@ exports.HtmlDocument = Montage.create(Component, { this._observer = null; } }, + //////////////////////////////////////////////////////////////////// + // handleViewReady: { value: function(mObjects) { this.model.mObjects = mObjects; -- cgit v1.2.3