@@ -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 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. --- .../layout/document-bar.reel/document-bar.js | 13 ++++++- js/document/document-html.js | 41 ++++++++++++++++++++-- 2 files changed, 51 insertions(+), 3 deletions(-) (limited to '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

'; + 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 () { // diff --git a/js/document/document-html.js b/js/document/document-html.js index 5079cfca..b7dacf6a 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -76,7 +76,7 @@ exports.HtmlDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // init: { - value:function(file, context, callback, view, template) { + value: function(file, context, callback, view, template) { //Storing callback data for loaded dispatch this.loaded.callback = callback; this.loaded.context = context; @@ -122,6 +122,44 @@ exports.HtmlDocument = Montage.create(Component, { } }, //////////////////////////////////////////////////////////////////// + //TODO: Make into one method to use here and one init + reloadView: { + value: function (view, template) { + // + this.model.parentContainer.removeChild(this.model.views.design.iframe); + //Initiliazing views and hiding + if (this.model.views.design.initialize(this.model.parentContainer)) { + //Hiding iFrame, just initiliazing + this.model.views.design.hide(); + //Setting the iFrame property for reference in helper class + this.model.webGlHelper.iframe = this.model.views.design.iframe; + } else { + //ERROR: Design View not initialized + } + // + if (view === 'design') { + //TODO: Remove reference and use as part of model + this.currentView = 'design'; + //Setting current view object to design + this.model.currentView = this.model.views.design; + //Showing design iFrame + this.model.views.design.show(); + this.model.views.design.iframe.style.opacity = 0; + this.model.views.design.content = this.model.file.content; + //TODO: Improve reference (probably through binding values) + this.model.views.design._webGlHelper = this.model.webGlHelper; + //Rendering design view, using observers to know when template is ready + this.model.views.design.render(function () { + //Adding observer to know when template is ready + 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 { + //TODO: Identify default view (probably code) + } + } + }, + //////////////////////////////////////////////////////////////////// // handleTemplateReady: { value: function (e) { @@ -140,7 +178,6 @@ exports.HtmlDocument = Montage.create(Component, { if(typeof this.model.domContainer !== "undefined") { this.model.domContainer = this.model.documentRoot; } - //Making callback after view is loaded this.loaded.callback.call(this.loaded.context, this); } -- cgit v1.2.3 From d799a03a52fbf4eaad4e469fabbf84c9bf2cb41d Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 18 Jul 2012 12:26:08 -0700 Subject: parameterize the parentContainer for text document Signed-off-by: Ananya Sen --- js/controllers/document-controller.js | 2 +- js/document/document-text.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 5020e27d..ee7ca82c 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -356,7 +356,7 @@ exports.DocumentController = Montage.create(Component, { break; default: //Open in code view - Montage.create(TextDocument).init(file, this.application.ninja, this.application.ninja.openDocument, 'code'); + Montage.create(TextDocument).init(file, this.application.ninja, this.application.ninja.openDocument, 'code', document.getElementById("codeViewContainer")); break; } } diff --git a/js/document/document-text.js b/js/document/document-text.js index 1fe43494..d06bdefb 100755 --- a/js/document/document-text.js +++ b/js/document/document-text.js @@ -51,13 +51,13 @@ exports.TextDocument = Montage.create(Component, { //////////////////////////////////////////////////////////////////// // init:{ - value: function(file, context, callback, view){ + value: function(file, context, callback, view, parentContainer){ // var codeDocumentView = CodeDocumentView.create(), container = null; //TODO: Why is this initilzied to null? //Creating instance of Text Document Model this.model = Montage.create(TextDocumentModel,{ file: {value: file}, - parentContainer: {value: document.getElementById("codeViewContainer")}, //TODO: Remove reference to this element, should be dynamic + parentContainer: {value: parentContainer}, //TODO: Remove reference to this element, should be dynamic views: {value: {'code': codeDocumentView, 'design': null}} //TODO: Add check if file might have design view, if so, then create it }); //TODO: Add design view logic -- 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.html | 13 ++++--------- js/components/layout/document-bar.reel/document-bar.js | 16 ++++++++++++++-- 2 files changed, 18 insertions(+), 11 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 ccf759ef..3e3ac936 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html @@ -75,13 +75,7 @@ POSSIBILITY OF SUCH DAMAGE. "element": {"#": "previewButton"}, "identifier": "preview", "label": "Preview" - }, - "listeners": [ - { - "type": "action", - "listener": {"@": "owner"} - } - ] + } }, "owner": { @@ -90,7 +84,8 @@ POSSIBILITY OF SUCH DAMAGE. "element": {"#": "documentBar"}, "zoomControl": {"@": "hottext1"}, "btnDesign": {"#": "buttonDesign"}, - "btnCode": {"#": "buttonCode"} + "btnCode": {"#": "buttonCode"}, + "btnPreview": {"#": "buttonPreview"} } } } @@ -126,7 +121,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 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 --- 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 (limited to '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 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 +++++++++------------- js/document/document-html.js | 27 +++++----- 2 files changed, 41 insertions(+), 49 deletions(-) (limited to '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

'; - 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"); diff --git a/js/document/document-html.js b/js/document/document-html.js index 76157a07..569b6d8b 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -35,7 +35,7 @@ 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, - DesignCodeView = require("js/document/views/design-code").DesignCodeView; + CodeDocumentView = require("js/document/views/design-code").DesignCodeView; //////////////////////////////////////////////////////////////////////// // exports.HtmlDocument = Montage.create(Component, { @@ -78,7 +78,6 @@ 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; @@ -87,7 +86,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': designCodeView}} //TODO: Add code view logic + views: {value: {'design': DesignDocumentView.create(), 'code': CodeDocumentView.create()}} //TODO: Add code view logic }); //Calling the any init routines in the model this.model.init(); @@ -101,10 +100,10 @@ exports.HtmlDocument = Montage.create(Component, { //ERROR: Design View not initialized } - + + //TODO: Make sure you have a boolean to indicate if view was initilize and handle errors (just like design view above) //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(); @@ -126,8 +125,10 @@ 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 if (view === 'code'){ + //TODO: Add logic to open document in code view since it's now available } else { - //TODO: Identify default view (probably code) + //TODO: Add error handling } } }, @@ -166,17 +167,19 @@ exports.HtmlDocument = Montage.create(Component, { this._observer.observe(this.model.views.design.document.head, {childList: true}); }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); } else if(view === 'code'){ - //TODO: Identify default view (probably code) - - //TODO:get the html content from the document + + + //TODO: Parse in memory document through template to get current 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; - + } else { + //TODO: Identify default view (probably code) - Error handling } } }, -- 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 ++++++++++++- js/document/document-html.js | 18 ++++++++---------- js/document/mediators/template.js | 12 ++++++------ 3 files changed, 26 insertions(+), 17 deletions(-) (limited to '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 + }); } } }, diff --git a/js/document/document-html.js b/js/document/document-html.js index 569b6d8b..81a8912b 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -135,8 +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; + value: function (view, template, doc) { // this.model.parentContainer.removeChild(this.model.views.design.iframe); //Initiliazing views and hiding @@ -167,14 +166,13 @@ exports.HtmlDocument = Montage.create(Component, { this._observer.observe(this.model.views.design.document.head, {childList: true}); }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); } else if(view === 'code'){ - - - //TODO: Parse in memory document through template to get current document - content = ''+this.model.file.content.head+''+this.model.file.content.body+'';//dummy - - - // - this.model.views.code.load(content); + //TODO: Add logic to handle external changed files + //Checking for template type and not saving external data + if (doc.template && (doc.template.type === 'banner' || doc.template.type === 'animation')) { + this.model.views.code.load(this.application.ninja.ioMediator.tmplt.parseNinjaTemplateToHtml(false, doc, true, null).content); + } else { + this.model.views.code.load(this.application.ninja.ioMediator.tmplt.parseNinjaTemplateToHtml(false, doc, false, null).content); + } //Setting current view object to code this.currentView = 'code'; this.model.currentView = this.model.views.code; diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js index 4065f471..c68cfe72 100755 --- a/js/document/mediators/template.js +++ b/js/document/mediators/template.js @@ -47,7 +47,7 @@ exports.TemplateDocumentMediator = Montage.create(Component, { // getAppTemplatesUrlRegEx: { value: function () { - var regex = new RegExp(chrome.extension.getURL(this.application.ninja.currentDocument.model.views.design.iframe.src.split(chrome.extension.getURL('/'))[1]).replace(/\//gi, '\\\/'), 'gi'); + var regex = new RegExp(chrome.extension.getURL(this.application.ninja.currentDocument.model.views.design.document.baseURI.split(chrome.extension.getURL('/'))[1]).replace(/\//gi, '\\\/'), 'gi'); return regex; } }, @@ -326,7 +326,7 @@ exports.TemplateDocumentMediator = Montage.create(Component, { } } } - } else if (template.css) { + } else if (template.css && saveExternalData) { //Getting all style and link tags var styleCounter = 0, docStyles = template.file.content.document.getElementsByTagName('style'), @@ -480,7 +480,7 @@ exports.TemplateDocumentMediator = Montage.create(Component, { //Copy webGL library if needed for (var i in this.application.ninja.coreIoApi.ninjaLibrary.libs) { //Checking for RDGE library to be available - if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'RDGE') { + if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'RDGE' && saveExternalData) { rdgeDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase(); rdgeVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version; this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, rdgeDirName, function(result) {libsobserver.canvasCopied = result; this.libCopied(libsobserver);}.bind(this)); @@ -564,7 +564,7 @@ exports.TemplateDocumentMediator = Montage.create(Component, { webgllibtag.setAttribute('data-ninja-canvas-json', this.application.ninja.coreIoApi.rootUrl+'/'+cvsDataFileUrl); webgllibtag.setAttribute('data-ninja-canvas-libpath', rdgeDirName); // - if (cvsDataFileCheck.status === 404 || cvsDataFileCheck.status === 204) { + if (saveExternalData && (cvsDataFileCheck.status === 404 || cvsDataFileCheck.status === 204)) { //Saving file cvsDataFileOperation = this.application.ninja.ioMediator.fio.saveFile({uri: cvsDataFilePath, contents: json}); } else { @@ -592,13 +592,13 @@ exports.TemplateDocumentMediator = Montage.create(Component, { //TODO: Make proper Montage method - + var mjsDirName, mjsVersion; //Checking for Montage if (mJsSerialization) { //Copy Montage library if needed for (var i in this.application.ninja.coreIoApi.ninjaLibrary.libs) { //Checking for Montage library to be available - if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'Montage') { + if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'Montage' && saveExternalData) { mjsDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase(); mjsVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version; this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, mjsDirName, function(result) {libsobserver.montageCopied = result; this.libCopied(libsobserver);}.bind(this)); -- 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 +++++++++++++--------- js/document/document-html.js | 2 +- 2 files changed, 22 insertions(+), 15 deletions(-) (limited to '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); } } }, diff --git a/js/document/document-html.js b/js/document/document-html.js index 81a8912b..a59f5848 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js @@ -156,7 +156,7 @@ exports.HtmlDocument = Montage.create(Component, { //Showing design iFrame this.model.views.design.show(); this.model.views.design.iframe.style.opacity = 0; - this.model.views.design.content = this.model.file.content; + this.model.views.design.content = this.application.ninja.ioMediator.tmplt.parseHtmlToNinjaTemplate(doc); //TODO: Improve reference (probably through binding values) this.model.views.design._webGlHelper = this.model.webGlHelper; //Rendering design view, using observers to know when template is ready -- cgit v1.2.3 From 791e1633e2c08543e236b0d25b5edd9aec2a003b Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Tue, 24 Jul 2012 14:42:04 -0700 Subject: New: Adding logic to insert code view save method(s) --- js/document/models/base.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'js') diff --git a/js/document/models/base.js b/js/document/models/base.js index a9bbd6db..85a0414f 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js @@ -253,8 +253,10 @@ exports.BaseDocumentModel = Montage.create(Component, { this.libs.canvas = true; } } + } else if (this.currentView === this.views.code) { + //TODO: Add save logic for code view } else { - //TODO: Add logic to save code view data + //TODO: Error handle } } }, @@ -294,8 +296,10 @@ exports.BaseDocumentModel = Montage.create(Component, { this.libs.canvas = true; } } + } else if (this.currentView === this.views.code) { + //TODO: Add save logic for code view } else { - //TODO: Add logic to save code view data +