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 ++++++++++----------- 2 files changed, 113 insertions(+), 116 deletions(-) (limited to 'js/components') 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 -- cgit v1.2.3