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/document/document-html.js | 27 +++++++- js/document/views/design-code.js | 130 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 js/document/views/design-code.js (limited to 'js/document') 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