From dece82791f43b5e8d278aba89cf8d6119af1478f Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 9 Apr 2012 13:11:40 -0700 Subject: - Decouple code editor from stage document switching logic - cleaning up Signed-off-by: Ananya Sen --- css/ninja.css | 2 +- index.html | 11 +- .../layout/document-bar.reel/document-bar.js | 2 +- js/controllers/code-editor-controller.js | 79 +++++++++++ js/ninja.reel/ninja.html | 6 + js/stage/stage-view.reel/stage-view.css | 24 ++-- js/stage/stage-view.reel/stage-view.js | 156 +++------------------ scss/imports/scss/_Stage.scss | 2 +- 8 files changed, 129 insertions(+), 153 deletions(-) create mode 100644 js/controllers/code-editor-controller.js diff --git a/css/ninja.css b/css/ninja.css index 650f3b08..6c198b8e 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -212,7 +212,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #mainContent .CodeMirror { width: 100%; height: 100%; background: white; } -#mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } +#mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: hidden; } .montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; } diff --git a/index.html b/index.html index 86348459..ed24ccce 100755 --- a/index.html +++ b/index.html @@ -207,12 +207,11 @@ diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 4dc39fd6..27402dff 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js @@ -100,7 +100,7 @@ exports.DocumentBar = Montage.create(Component, { if(event._event.target.id === this.currentView) return; this.currentView = event._event.target.id; - this.application.ninja.documentController.stage.stageView.switchViews(event._event.target.id);//switch between design view + this.application.ninja.documentController.stage.stageView.switchDesignDocViews(event._event.target.id);//switch between design view } }, diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js new file mode 100644 index 00000000..23bd9279 --- /dev/null +++ b/js/controllers/code-editor-controller.js @@ -0,0 +1,79 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//////////////////////////////////////////////////////////////////////// +// +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +var CodeEditorController = exports.CodeEditorController = Montage.create(Component, { + hasTemplate: { + value: false + }, + + _codeEditor : { + value:null + }, + + codeEditor:{ + get: function(){return this._codeEditor;}, + set: function(value){this._codeEditor = value;} + }, + + deserializedFromTemplate: { + value: function() { + //TODO:add logic to check some configuration file to load the right code editor + this.codeEditor = CodeMirror; + } + }, + + createEditor : { + value:function(doc, type){ + var self = this; + var editor = self.codeEditor.fromTextArea(doc.textArea, { + lineNumbers: true, + matchBrackets:true, + mode: type, + onChange: function(){ + var historySize = doc.editor.historySize(); + if(historySize.undo>0){ + doc.needsSave = true; + }else if(historySize.undo===0 && historySize.redo>0){ + doc.needsSave = false; + } + }, + onCursorActivity: function() { + doc.editor.matchHighlight("CodeMirror-matchhighlight"); + doc.editor.setLineClass(doc.editor.hline, null, null); + doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline"); + }, + //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}} + onKeyEvent: function(cm, keyEvent) { + if((keyEvent.type === "keyup")//need seperate keycode set per mode + && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers + || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters + || (keyEvent.keyCode === 190)//period + || (keyEvent.keyCode === 189)//underscore, dash + ) + && !( (keyEvent.keyCode === 219)//open bracket [ + || (keyEvent.keyCode === 221)//close bracket ] + || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket { + || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket } + || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket ( + || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket ) + ) + ){ + + self.codeEditor.simpleHint(cm, self.codeEditor.javascriptHint); + } + } + }); + + return editor; + } + } + +}); \ No newline at end of file diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index ead7f576..5862cf61 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -348,6 +348,11 @@ } }, + "codeEditorController": { + "module": "js/controllers/code-editor-controller", + "name": "CodeEditorController" + }, + "owner": { "module": "js/ninja.reel", "name": "Ninja", @@ -377,6 +382,7 @@ "ioMediator": {"@": "ioMediator"}, "timeline": {"@": "timeline"}, "mainMenuController": {"@": "mainMenuController"}, + "codeEditorController": {"@": "codeEditorController"}, "rightPanelContainer": {"#": "rightPanelContainer" }, "panelSplitter": {"@": "splitter3"}, "timelineSplitter": {"@": "splitter4"} diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index ce7072c7..372af144 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -23,15 +23,17 @@ } */ -.CodeMirror { - width: 100%; - height: 100%; - background: white; -} +/*.CodeMirror {*/ + /*width: 100%;*/ + /*height: 100%;*/ + /*background: white;*/ +/*}*/ + +/*.CodeMirror .CodeMirror-scroll {*/ + /*height: 100%;*/ + /*overflow: scroll;*/ + /*overflow-x: auto;*/ + /*overflow-y: auto;*/ +/*}*/ + -.CodeMirror .CodeMirror-scroll { - height: 100%; - overflow: scroll; - overflow-x: auto; - overflow-y: auto; -} diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 917cbeb5..bfbee2b6 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -52,12 +52,11 @@ exports.StageView = Montage.create(Component, { }, /** - * Creates a text area which will contain the content of the opened text document. + * Public method + * Creates a textarea element which will contain the content of the opened text document. */ createTextAreaElement: { value: function(uuid) { - - var codeMirrorDiv = document.createElement("div"); codeMirrorDiv.id = "codeMirror_" + uuid; codeMirrorDiv.style.display = "block"; @@ -66,19 +65,22 @@ exports.StageView = Montage.create(Component, { var textArea = document.createElement("textarea"); textArea.id = "code"; textArea.name = "code"; - codeMirrorDiv.appendChild(textArea); return textArea; } }, - // Temporary function to create a Codemirror text view + /** + * Public method + * Creates a new instance of a code editor + */ createTextView: { value: function(doc) { + var type; this.application.ninja.documentController._hideCurrentDocument(); this.hideOtherDocuments(doc.uuid); - var type; + switch(doc.documentType) { case "css" : type = "css"; @@ -87,66 +89,25 @@ exports.StageView = Montage.create(Component, { type = "javascript"; break; } - - //fix hack document.getElementById("codeMirror_"+doc.uuid).style.display="block"; - var documentController = this.application.ninja.documentController; - doc.editor = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: true, - lineWrapping: true, - matchBrackets:true, - mode: type, - onChange: function(){ - var historySize = doc.editor.historySize(); - if(historySize.undo>0){ - doc.needsSave = true; - }else if(historySize.undo===0 && historySize.redo>0){ - doc.needsSave = false; - } - }, - onCursorActivity: function() { - doc.editor.matchHighlight("CodeMirror-matchhighlight"); - doc.editor.setLineClass(doc.editor.hline, null, null); - doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline"); - }, - //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}} - onKeyEvent: function(cm, keyEvent) { - if((keyEvent.type === "keyup")//need seperate keycode set per mode - && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers - || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters - || (keyEvent.keyCode === 190)//period - || (keyEvent.keyCode === 189)//underscore, dash - ) - && !( (keyEvent.keyCode === 219)//open bracket [ - || (keyEvent.keyCode === 221)//close bracket ] - || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket { - || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket } - || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket ( - || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket ) - ) - ){ - - CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); - } - } - }); - + doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe this.application.ninja.documentController.activeDocument = doc; this.application.ninja.stage.hideCanvas(true); - document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view } }, - //called for switching between html documents + /** + * Public method + * Switches between documents. Document state data is saved and restored whereever applicable + */ switchDocument:{ value: function(doc){ this.application.ninja.documentController._hideCurrentDocument(); - this.application.ninja.documentController.activeDocument = doc; if(this.application.ninja.documentController.activeDocument.currentView === "design") { @@ -155,62 +116,30 @@ exports.StageView = Montage.create(Component, { this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe this.application.ninja.documentController._showCurrentDocument(); - - //focus current document + //focus editor if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){ - document.getElementById("codeMirror_"+this.application.ninja.documentController.activeDocument.uuid).getElementsByClassName("CodeMirror")[0].focus(); + this.application.ninja.documentController.activeDocument.editor.focus(); } if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe - - //reinitialize draw-util, snapmanager and view-util - this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument(); - - //this.application.ninja.stage.layout.reinitializeForSwitchDocument(); - - // TODO dispatch event here - // appDelegateModule.MyAppDelegate.onSetActiveDocument(); + this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util } NJevent("switchDocument"); - } }, - refreshCodeDocument:{ - value:function(doc){ - - } - }, - addCodeDocument:{ - value:function(doc){ - var type; - switch(doc.documentType) { - case "css" : - type = "css"; - break; - case "js" : - type = "javascript"; - break; - } - - var codeM = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: true, - mode: type, - onCursorActivity: function() { - //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null); - //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline"); - } - }); + /** + * Public method + * Switches between different views of a design document, like HTML design view, HTML code view + */ + switchDesignDocViews: { + value: function() { + //TODO } }, - hideCodeDocument:{ - value:function(docUuid){ - //hide the previous Codemirror div - } - }, hideOtherDocuments:{ value:function(docUuid){ this.application.ninja.documentController._documents.forEach(function(aDoc){ @@ -226,51 +155,12 @@ exports.StageView = Montage.create(Component, { value:function(){ this.application.ninja.rulerTop.style.display = "block"; this.application.ninja.rulerLeft.style.display = "block"; -// this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; -// this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; } }, hideRulers:{ value:function(){ this.application.ninja.rulerTop.style.display = "none"; this.application.ninja.rulerLeft.style.display = "none"; -// this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; -// this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; - } - }, - - switchViews: { - value: function() { - - //save file if dirty - - this.application.ninja.stage.saveStageScroll(); - this.application.ninja.documentController._hideCurrentDocument(); - - if(this.application.ninja.documentController.activeDocument.currentView === "design") { - this.application.ninja.documentController._textHolder.style.display = "none"; - this.application.ninja.documentController.activeDocument.container.style["display"] = "block"; - this.application.ninja.stage._scrollFlag = true; - //this._showCurrentDocument(); - this.application.ninja.stage.applySavedScroll(); - - } else { - this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe - - var codeview = this.application.ninja.documentController.activeDocument.container; - //this._textHolder.style.display = "block"; - //codeview.firstChild.innerHTML = this.activeDocument.iframe.contentWindow.document.body.parentNode.innerHTML; - -// this._codeEditor.editor = CodeMirror.fromTextArea(codeview.firstChild, { -// lineNumbers: true, -// mode: "htmlmixed", -// onCursorActivity: function() { -// DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.hline, null); -// DocumentController._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.editor.getCursor().line, "activeline"); -// } -// }); -// this._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(0, "activeline"); - } } } }); \ No newline at end of file diff --git a/scss/imports/scss/_Stage.scss b/scss/imports/scss/_Stage.scss index 587903d2..3a8c0997 100644 --- a/scss/imports/scss/_Stage.scss +++ b/scss/imports/scss/_Stage.scss @@ -190,7 +190,7 @@ height: 100%; overflow: scroll; overflow-x: auto; - overflow-y: auto; + overflow-y: hidden; } .montage-editor-frame { -- cgit v1.2.3