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.js | 221 ++++++++++----------- 1 file changed, 108 insertions(+), 113 deletions(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') 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 From 17d464e5bd224cdd8940855409359b411325f1df Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 17 Jul 2012 11:25:41 -0700 Subject: New: Adding re-render method to switching view This now re-renders the design view when switching from code view. There are many outstanding issues, the Time-Line completely breaks and blocks Ninja, it is unknown why, there are too many dependencies. To make it work, we disabled that feature, although this check in does not include that, so it can be fixed proper. Also, the document controller creates a new tab per switch as it does not check that it is the same document. That bug must also be fixed. Finally, we need to hook up a new code view to the document, the current code view will not work as desired, so a new code view must be built and implemented. --- js/components/layout/document-bar.reel/document-bar.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 1a580284..dbb4fcad 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -171,6 +171,14 @@ exports.DocumentBar = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + renderDesignView: { + value: function () { + //Reloading in design view (with updates from other view) + this.reloadView('design', this.fileTemplate); + } + }, + //////////////////////////////////////////////////////////////////// + // showViewDesign: { value: function () { // @@ -179,11 +187,14 @@ exports.DocumentBar = Montage.create(Component, { this._currentDocument.model.switchViewTo('design'); this.btnCode.setAttribute('class', 'inactive'); this.btnDesign.removeAttribute('class'); + //this._currentDocument.model.file.content.body = '
hello
hello
'; + var render = this.renderDesignView.bind(this._currentDocument); + render(); } } }, //////////////////////////////////////////////////////////////////// - // + //TODO: Implement code with that updates the file template through the ninja document parser showViewCode: { value: function () { // -- cgit v1.2.3 From 84a7674e4f6556b8663f94a5360c29a5a276f2c8 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 18 Jul 2012 23:04:37 -0700 Subject: Preview button: enabling the entire button to handle a mouse click - Then entire button area (button and icon) is not click enabled to launch a Chrome Preview instead of only the actual button. Signed-off-by: Valerio Virgillito --- js/components/layout/document-bar.reel/document-bar.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index a9c98507..5623f825 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -65,6 +65,17 @@ exports.DocumentBar = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + btnCode: { + value: null + }, + btnDesign: { + value: null + }, + btnPreview: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // _visible: { value: false }, @@ -113,6 +124,7 @@ exports.DocumentBar = Montage.create(Component, { // this.btnCode.addEventListener('click', this.showViewCode.bind(this), false); this.btnDesign.addEventListener('click', this.showViewDesign.bind(this), false); + this.btnPreview.addEventListener('click', this, false); } }, //////////////////////////////////////////////////////////////////// @@ -207,8 +219,8 @@ exports.DocumentBar = Montage.create(Component, { } }, - handlePreviewAction: { - value: function(event) { + handleClick: { + value: function(evt) { NJevent("executePreview"); } } -- cgit v1.2.3 From c07a7a9d11bc8299fa9686544b18840cc8e640c2 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 23 Jul 2012 16:59:56 -0700 Subject: show design code editor - first cut Signed-off-by: Ananya Sen --- .../layout/document-bar.reel/document-bar.js | 38 +++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index dbb4fcad..194b9b23 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -61,6 +61,27 @@ exports.DocumentBar = Montage.create(Component, { } // this.visible = true; + + //TODO: check if the code's options bar can be unified + if(this._currentDocument && this._currentDocument.model && (this._currentDocument.model.views.design === null) && (this._currentDocument.model.views.code !== null)){ + this.visible = false; + } + } + }, + //////////////////////////////////////////////////////////////////// + // + _codeEditorWrapper:{ + value: null + }, + + codeEditorWrapper:{ + get : function() { + return this._codeEditorWrapper; + }, + set : function(value) { + if(this._codeEditorWrapper !== value){ + this._codeEditorWrapper = value; + } } }, //////////////////////////////////////////////////////////////////// @@ -101,7 +122,12 @@ exports.DocumentBar = Montage.create(Component, { this._zoomFactor = value; // if (!this._firstDraw) { - this.application.ninja.stage.setZoom(value); + if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design){ + this.application.ninja.stage.setZoom(value); + }else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code){ + this._zoomFactor = value; + if(this.codeEditorWrapper){this.codeEditorWrapper.handleZoom(value)}; + } } } } @@ -179,6 +205,14 @@ exports.DocumentBar = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // + renderCodeView: { + value: function () { + //Reloading in code view (with updates from other view) + this.reloadView('code', this.fileTemplate); + } + }, + //////////////////////////////////////////////////////////////////// + // showViewDesign: { value: function () { // @@ -203,6 +237,8 @@ exports.DocumentBar = Montage.create(Component, { this._currentDocument.model.switchViewTo('code'); this.btnDesign.setAttribute('class', 'inactive'); this.btnCode.removeAttribute('class'); + var render = this.renderCodeView.bind(this._currentDocument); + render(); } } } -- cgit v1.2.3 From 5946ec8651547f846520add097850470a09df635 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Russo Date: Mon, 23 Jul 2012 19:07:11 -0700 Subject: In Progress: Cleaning up merge Cleaned up new updates. Still pending is adding functionality to parse the document when toggling views and fix Timeline errors. Code view also has some rending issues that will be fixed, this is just a clean up. --- .../layout/document-bar.reel/document-bar.js | 63 +++++++++------------- 1 file changed, 26 insertions(+), 37 deletions(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 803d2c3a..f5e61a18 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -73,12 +73,12 @@ exports.DocumentBar = Montage.create(Component, { _codeEditorWrapper:{ value: null }, - + //////////////////////////////////////////////////////////////////// + // codeEditorWrapper:{ - get : function() { - return this._codeEditorWrapper; - }, - set : function(value) { + get: function() {return this._codeEditorWrapper;}, + set: function(value) { + // if(this._codeEditorWrapper !== value){ this._codeEditorWrapper = value; } @@ -89,9 +89,13 @@ exports.DocumentBar = Montage.create(Component, { btnCode: { value: null }, + //////////////////////////////////////////////////////////////////// + // btnDesign: { value: null }, + //////////////////////////////////////////////////////////////////// + // btnPreview: { value: null }, @@ -209,52 +213,37 @@ exports.DocumentBar = Montage.create(Component, { }, //////////////////////////////////////////////////////////////////// // - renderDesignView: { + showViewDesign: { value: function () { - //Reloading in design view (with updates from other view) - this.reloadView('design', this.fileTemplate); + // + this.showView('design', this.renderDesignView, this.btnDesign, this.btnCode); } }, //////////////////////////////////////////////////////////////////// // - renderCodeView: { + showViewCode: { value: function () { - //Reloading in code view (with updates from other view) - this.reloadView('code', this.fileTemplate); + // + this.showView('code', this.renderCodeView, this.btnCode, this.btnDesign); } }, //////////////////////////////////////////////////////////////////// // - showViewDesign: { - value: function () { - // - if (this._currentDocument.model.currentView !== 'design') { + showView: { + value: function (view, render, aBtn, iBtn) { + //TODO: Remove reference to string view + if (this._currentDocument.model.currentView !== view) { // - this._currentDocument.model.switchViewTo('design'); - this.btnCode.setAttribute('class', 'inactive'); - this.btnDesign.removeAttribute('class'); - //this._currentDocument.model.file.content.body = '
hello
hello
'; - var render = this.renderDesignView.bind(this._currentDocument); - render(); + this._currentDocument.model.switchViewTo(view); + iBtn.setAttribute('class', 'inactive'); + aBtn.removeAttribute('class'); + //TODO: Add document parsing to reload view + this._currentDocument.reloadView(view, this.fileTemplate); } - } + } }, //////////////////////////////////////////////////////////////////// - //TODO: Implement code with that updates the file template through the ninja document parser - showViewCode: { - value: function () { - // - if (this._currentDocument.model.currentView !== 'code') { - // - this._currentDocument.model.switchViewTo('code'); - this.btnDesign.setAttribute('class', 'inactive'); - this.btnCode.removeAttribute('class'); - var render = this.renderCodeView.bind(this._currentDocument); - render(); - } - } - }, - + // handleClick: { value: function(evt) { NJevent("executePreview"); -- cgit v1.2.3 From 2952c2465b9a66076344087f899c5c836ad15ad6 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Russo Date: Mon, 23 Jul 2012 23:05:06 -0700 Subject: New: Adding method to display document in code view Added method to parse in memory document in code view. This allows users to view current in memory document in code view while not saving the document or external files. Still need to handle naming of paths for files that require saving but are not saved (webGL and Montage libraries). Also, need to implement method to switch back from code view to design view, but will need Timeline fixes. --- js/components/layout/document-bar.reel/document-bar.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index f5e61a18..77f05bc1 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -238,7 +238,18 @@ exports.DocumentBar = Montage.create(Component, { iBtn.setAttribute('class', 'inactive'); aBtn.removeAttribute('class'); //TODO: Add document parsing to reload view - this._currentDocument.reloadView(view, this.fileTemplate); + this._currentDocument.reloadView(view, this.fileTemplate, { + mode: 'html', + libs: this._currentDocument.model.libs, + file: this._currentDocument.model.file, + webgl: this._currentDocument.model.webGlHelper.glData, + styles: this._currentDocument.model.getStyleSheets(), + template: this._currentDocument.fileTemplate, + document: this._currentDocument.model.views.design.iframe.contentWindow.document, + head: this._currentDocument.model.views.design.iframe.contentWindow.document.head, + body: this._currentDocument.model.views.design.iframe.contentWindow.document.body, + mjsTemplateCreator: this._currentDocument.model.views.design.iframe.contentWindow.mjsTemplateCreator + }); } } }, -- cgit v1.2.3 From 5454cc462903c83a8c3651065b03cc1855db125e Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 24 Jul 2012 12:11:53 -0700 Subject: New: Adding method to switch from code to design view Added functionality to parse the code view string back into a Ninja template object to redraw design view. Only outstanding bugs are timeline errors and code view layout issues. --- .../layout/document-bar.reel/document-bar.js | 35 +++++++++++++--------- 1 file changed, 21 insertions(+), 14 deletions(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 77f05bc1..bf84c652 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -233,23 +233,30 @@ exports.DocumentBar = Montage.create(Component, { value: function (view, render, aBtn, iBtn) { //TODO: Remove reference to string view if (this._currentDocument.model.currentView !== view) { - // + var doc; + //Switching view and changing button modes this._currentDocument.model.switchViewTo(view); iBtn.setAttribute('class', 'inactive'); aBtn.removeAttribute('class'); - //TODO: Add document parsing to reload view - this._currentDocument.reloadView(view, this.fileTemplate, { - mode: 'html', - libs: this._currentDocument.model.libs, - file: this._currentDocument.model.file, - webgl: this._currentDocument.model.webGlHelper.glData, - styles: this._currentDocument.model.getStyleSheets(), - template: this._currentDocument.fileTemplate, - document: this._currentDocument.model.views.design.iframe.contentWindow.document, - head: this._currentDocument.model.views.design.iframe.contentWindow.document.head, - body: this._currentDocument.model.views.design.iframe.contentWindow.document.body, - mjsTemplateCreator: this._currentDocument.model.views.design.iframe.contentWindow.mjsTemplateCreator - }); + //Checking for view to get other view document (object to code and string to design) + if (view === 'code') { + doc = { + mode: 'html', + libs: this._currentDocument.model.libs, + file: this._currentDocument.model.file, + webgl: this._currentDocument.model.webGlHelper.glData, + styles: this._currentDocument.model.getStyleSheets(), + template: this._currentDocument.fileTemplate, + document: this._currentDocument.model.views.design.iframe.contentWindow.document, + head: this._currentDocument.model.views.design.iframe.contentWindow.document.head, + body: this._currentDocument.model.views.design.iframe.contentWindow.document.body, + mjsTemplateCreator: this._currentDocument.model.views.design.iframe.contentWindow.mjsTemplateCreator + } + } else if (view === 'design') { + doc = this._currentDocument.model.views.code.textArea.value; + } + //Reloading the document from changes made + this._currentDocument.reloadView(view, this.fileTemplate, doc); } } }, -- cgit v1.2.3 From b391dde5f319bf4c534e9fce523c22be3bb16ace Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 31 Jul 2012 13:35:17 -0700 Subject: Fix: Making correct check, was checking wrong object Prevents re-rendering the same view if selected. --- js/components/layout/document-bar.reel/document-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/components/layout/document-bar.reel/document-bar.js') diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index bf84c652..098e9e68 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -232,7 +232,7 @@ exports.DocumentBar = Montage.create(Component, { showView: { value: function (view, render, aBtn, iBtn) { //TODO: Remove reference to string view - if (this._currentDocument.model.currentView !== view) { + if (this._currentDocument.currentView !== view) { var doc; //Switching view and changing button modes this._currentDocument.model.switchViewTo(view); -- cgit v1.2.3