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 --- js/code-editor/code-editor-wrapper.js | 6 + .../code-editor-view-options.js | 2 +- .../layout/document-bar.reel/document-bar.js | 38 +++++- js/document/document-html.js | 27 ++++- js/document/views/design-code.js | 130 +++++++++++++++++++++ 5 files changed, 198 insertions(+), 5 deletions(-) create mode 100644 js/document/views/design-code.js diff --git a/js/code-editor/code-editor-wrapper.js b/js/code-editor/code-editor-wrapper.js index 57fe4d3a..65f42db2 100644 --- a/js/code-editor/code-editor-wrapper.js +++ b/js/code-editor/code-editor-wrapper.js @@ -131,6 +131,12 @@ exports.CodeEditorWrapper = Montage.create(Component, { this.application.ninja.editorViewOptions.codeEditorWrapper = this; } + //TODO:add codeEditorWrapper + if(!this.application.ninja.documentBar.codeEditorWrapper){ + this.application.ninja.documentBar.codeEditorWrapper = this; + } + + editorOptions = { lineNumbers: true, matchBrackets:true, diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js index 9344d34c..e2632d35 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js @@ -51,7 +51,7 @@ exports.CodeEditorViewOptions = Montage.create(Component, { this._currentDocument = value; - if(!value || this._currentDocument.currentView === "design") { + if(!value || (this._currentDocument.currentView === "design") || ((this._currentDocument.model.views.design !== null))) { this.visible = false; } else { this.visible = true; 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(); } } } diff --git a/js/document/document-html.js b/js/document/document-html.js index b7dacf6a..76157a07 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -34,7 +34,8 @@ POSSIBILITY OF SUCH DAMAGE. var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, - DesignDocumentView = require("js/document/views/design").DesignDocumentView; + DesignDocumentView = require("js/document/views/design").DesignDocumentView, + DesignCodeView = require("js/document/views/design-code").DesignCodeView; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocument = Montage.create(Component, { @@ -77,6 +78,7 @@ exports.HtmlDocument = Montage.create(Component, { // init: { value: function(file, context, callback, view, template) { + var designCodeView = DesignCodeView.create(); //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; @@ -85,7 +87,7 @@ exports.HtmlDocument = Montage.create(Component, { file: {value: file}, fileTemplate: {value: template}, parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach - views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic + views: {value: {'design': DesignDocumentView.create(), 'code': designCodeView}} //TODO: Add code view logic }); //Calling the any init routines in the model this.model.init(); @@ -98,6 +100,14 @@ exports.HtmlDocument = Montage.create(Component, { } else { //ERROR: Design View not initialized } + + + //initialize the code view for the html document and hide it since design is the default view + this.model.views.code.initialize(this.model.parentContainer); + + this.model.views.code.hide(); + + // if (view === 'design') { //TODO: Remove reference and use as part of model @@ -125,6 +135,7 @@ exports.HtmlDocument = Montage.create(Component, { //TODO: Make into one method to use here and one init reloadView: { value: function (view, template) { + var content; // this.model.parentContainer.removeChild(this.model.views.design.iframe); //Initiliazing views and hiding @@ -154,8 +165,18 @@ exports.HtmlDocument = Montage.create(Component, { 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}); - } else { + } else if(view === 'code'){ //TODO: Identify default view (probably code) + + //TODO:get the html content from the document + content = ''+this.model.file.content.head+''+this.model.file.content.body+'';//dummy + + this.model.views.code.load(content); + + //Setting current view object to code + this.currentView = 'code'; + this.model.currentView = this.model.views.code; + } } }, diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js new file mode 100644 index 00000000..25073833 --- /dev/null +++ b/js/document/views/design-code.js @@ -0,0 +1,130 @@ +/* +Copyright (c) 2012, Motorola Mobility LLC. +All Rights Reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE +LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR +CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF +SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS +INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN +CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) +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, + Component = require("montage/ui/component").Component, + CodeDocumentView = require("js/document/views/code").CodeDocumentView; +//////////////////////////////////////////////////////////////////////// +//Code View for the HTML file +// +exports.DesignCodeView = Montage.create(CodeDocumentView, { + //////////////////////////////////////////////////////////////////// + // + hasTemplate: { + value: false + }, + //////////////////////////////////////////////////////////////////// + // + init:{ + value: function (content) { + + } + }, + //////////////////////////////////////////////////////////////////// + // + load:{ + value:function(content){ + //initialize the editor if not yet created + if(this.editor === null){ + //todo: get the proper content + this.textArea.value = content; + this.initializeTextView(this.application.ninja.currentDocument.model.file, this.application.ninja.currentDocument); + return true; + }else{//reload the editor + this.editor.setValue(content); + this.editor.focus(); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + show: { + value: function (callback) { + + this.textViewContainer.style.display = "block"; + 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 + + // + if (callback) callback(); + } + }, + //////////////////////////////////////////////////////////////////// + // + hide: { + value: function (callback) { + if(this.editor){ + this.editor.save();//save to textarea + } + 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 + + // + if (callback) callback(); + } + }, + //////////////////////////////////////////////////////////////////// + // + applyTheme:{ + value:function(themeClass){ + //Todo: change for bucket structure of documents + this.textViewContainer.className = "codeViewContainer "+themeClass; + } + } +}); \ No newline at end of file -- cgit v1.2.3