From 0d83ad4dc08448e016c79ae739e84c3d71552b56 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 27 Mar 2012 17:19:18 -0700 Subject: - Highlight Matching bracket - Highlight selection matched -Highlight current line Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'js') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index ad67cada..66a18964 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -93,23 +93,27 @@ exports.StageView = Montage.create(Component, { var documentController = this.application.ninja.documentController; doc.editor = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: 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() { - //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null); - //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline"); + 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); + doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); + } }); - //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline"); + 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); -- cgit v1.2.3 From 4b1b72971567ea569a10c740e26aee33421e7bd5 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 3 Apr 2012 15:07:33 -0700 Subject: adding basic autocomplete Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index bee12838..28a66396 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -109,7 +109,11 @@ exports.StageView = Montage.create(Component, { doc.editor.matchHighlight("CodeMirror-matchhighlight"); doc.editor.setLineClass(doc.editor.hline, null); doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); - } + }, + extraKeys: {"Ctrl-Space": function(cm) { + CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); + } + } }); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); -- cgit v1.2.3 From e5dc1a5f35c2c6f3273e89109f1be445471b2dec Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 4 Apr 2012 12:19:08 -0700 Subject: -styled the autocomplete dropdown - trigger autocomplete automatically Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 28a66396..43751559 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -110,10 +110,19 @@ exports.StageView = Montage.create(Component, { doc.editor.setLineClass(doc.editor.hline, null); doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); }, - extraKeys: {"Ctrl-Space": function(cm) { - CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); - } - } + //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 + ) + ){ + + CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); + } + } }); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); -- cgit v1.2.3 From bec4cde986975d1cc5f1d2791fdb18548fc2d72a Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 4 Apr 2012 13:17:45 -0700 Subject: - fix for current line highlighting for version 2.23 - changes to not show autocomplete dropdown for brackets Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 43751559..917cbeb5 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -107,8 +107,8 @@ exports.StageView = Montage.create(Component, { }, onCursorActivity: function() { doc.editor.matchHighlight("CodeMirror-matchhighlight"); - doc.editor.setLineClass(doc.editor.hline, null); - doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); + 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) { @@ -117,7 +117,14 @@ exports.StageView = Montage.create(Component, { || (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); -- cgit v1.2.3 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 --- .../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 +++------------------ 5 files changed, 122 insertions(+), 145 deletions(-) create mode 100644 js/controllers/code-editor-controller.js (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 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 -- cgit v1.2.3 From 6ffda1a7ebe18adb518eb24a612df22305b050a6 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 9 Apr 2012 17:15:41 -0700 Subject: - added configurability of code completion with the file type - added logic to toggle between automatic code completion and manually triggered code completion [ UI pending ] Signed-off-by: Ananya Sen --- js/controllers/code-editor-controller.js | 100 ++++++++++++++++++++++++------- js/stage/stage-view.reel/stage-view.css | 5 ++ 2 files changed, 82 insertions(+), 23 deletions(-) (limited to 'js') diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index 23bd9279..0c13958c 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -23,6 +23,18 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone set: function(value){this._codeEditor = value;} }, + codeCompletionSupport : {"javascript": true}, + + _automaticCodeComplete: { + value:true + }, + + automaticCodeComplete:{ + get: function(){return this._automaticCodeComplete;}, + set: function(value){this._automaticCodeComplete = value;} + }, + + deserializedFromTemplate: { value: function() { //TODO:add logic to check some configuration file to load the right code editor @@ -30,10 +42,15 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone } }, + /** + * Public method + * Creates an editor instance + */ createEditor : { value:function(doc, type){ - var self = this; - var editor = self.codeEditor.fromTextArea(doc.textArea, { + var self = this, editorOptions = null; + + editorOptions = { lineNumbers: true, matchBrackets:true, mode: type, @@ -49,31 +66,68 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone 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); - } } - }); + }; + //configure auto code completion if it is supported for that document type + if(true){ + editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)}; + } + + var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions); return editor; } + }, + + /** + * Private method + * key event handler for showing code completion dropdown + */ + _codeCompletionKeyEventHandler:{ + enumerable:false, + value: function(cm, keyEvent, type) { + //===manually triggered code completion + if((this.automaticCodeComplete === false)){ + if((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl-Space + this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint); + } + } + //===automatic auto complete [performance is slower] + else if(this._showAutoComplete(type, keyEvent)){ + this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint); + } + } + }, + + /** + * Private method + * checks for valid keyset to show code completion dropdown + */ + _showAutoComplete : { + enumerable:false, + value:function(type, keyEvent){ + switch(type){ + case "javascript": + 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.ctrlKey || keyEvent.metaKey)//ctrl + || (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 ) + || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 83)//ctrl+S + ) + ){return true;} + default : + return false; + } + } } }); \ No newline at end of file diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index 372af144..a7e255ae 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -37,3 +37,8 @@ /*}*/ +span.CodeMirror-matchhighlight { background: #e9e9e9 } +.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } +.activeline {background: #e8f2ff !important;} +div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} +.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);} \ No newline at end of file -- cgit v1.2.3 From c2ec390d42945d2df1aed3f2b7ff3d1aa722fce8 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 13 Apr 2012 16:51:50 -0700 Subject: - code editor view options bar - Checkbox for user to toggle between manually triggered autocomplete and automatic autocomplete - font zoom hottext Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 3 ++ .../code-editor-view-options.html | 56 ++++++++++++++++++++++ .../code-editor-view-options.js | 48 +++++++++++++++++++ js/controllers/code-editor-controller.js | 45 ++++++++++++++--- js/controllers/document-controller.js | 1 + js/ninja.reel/ninja.html | 13 ++++- js/stage/stage-view.reel/stage-view.js | 20 ++++++++ 7 files changed, 179 insertions(+), 7 deletions(-) create mode 100644 js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css create mode 100644 js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html create mode 100644 js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js (limited to 'js') diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css new file mode 100644 index 00000000..5aa66af2 --- /dev/null +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -0,0 +1,3 @@ +.viewOptions{ + color:#F7F7F7; +} \ No newline at end of file diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html new file mode 100644 index 00000000..c6d3da4e --- /dev/null +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -0,0 +1,56 @@ + + + + + + + + + +
+
+ +
+ Automatic Code completion + +
+
+
+ + \ No newline at end of file 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 new file mode 100644 index 00000000..a1ff8547 --- /dev/null +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js @@ -0,0 +1,48 @@ +/* +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 CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, { + hasReel: { + value: true + }, + + prepareForDraw: { + value: function() { + Object.defineBinding(this.codeCompleteCheck , "checked", { + boundObject: this.application.ninja.codeEditorController, + boundObjectPropertyPath: "automaticCodeComplete", + oneway : false + }); + + Object.defineBinding(this.zoomHottext , "value", { + boundObject: this.application.ninja.codeEditorController, + boundObjectPropertyPath: "editorFont", + oneway : false + }); + + } + }, + + willDraw: { + enumerable: false, + value: function() {} + }, + draw: { + enumerable: false, + value: function() {} + }, + didDraw: { + enumerable: false, + value: function() { + + } + } +}); \ No newline at end of file diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index 0c13958c..534d4645 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -23,17 +23,37 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone set: function(value){this._codeEditor = value;} }, - codeCompletionSupport : {"javascript": true}, + codeCompletionSupport : { + value: {"javascript": true} + }, _automaticCodeComplete: { value:true }, automaticCodeComplete:{ - get: function(){return this._automaticCodeComplete;}, - set: function(value){this._automaticCodeComplete = value;} - }, + get: function(){return this._automaticCodeComplete;}, + set: function(value){ + //console.log("$$$ automaticCodeComplete setter : "+value); + this._automaticCodeComplete = value;} + }, + + originalEditorFont:{ + value:"13"//px + }, + _editorFont:{ + value:null + }, + + editorFont:{ + get: function(){return this._editorFont;}, + set: function(value){//gets a zoom % + this._editorFont = (value/100) * CodeEditorController.originalEditorFont; + //set the font size + document.getElementsByClassName("codeViewContainer")[0].style.fontSize = ""+this._editorFont+"px"; + } + }, deserializedFromTemplate: { value: function() { @@ -70,11 +90,14 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone }; //configure auto code completion if it is supported for that document type - if(true){ + if(this.codeCompletionSupport[type] === true){ editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)}; } var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions); + + //editor.setOption("theme", "night"); + return editor; } }, @@ -128,6 +151,16 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone return false; } } - } + }, + handleCodeCompletionSupport:{ + value:function(fileType){ + var autoCodeCompleteElem = document.getElementsByClassName("autoCodeComplete")[0]; + if(autoCodeCompleteElem && (this.codeCompletionSupport[fileType] === true)){ + autoCodeCompleteElem.style.visibility = "visible"; + }else if(autoCodeCompleteElem && !this.codeCompletionSupport[fileType]){ + autoCodeCompleteElem.style.visibility = "hidden"; + } + } + } }); \ No newline at end of file diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index a308f191..9792c7f6 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -442,6 +442,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, NJevent("onOpenDocument", doc); // appDelegateModule.MyAppDelegate.onSetActiveDocument(); + this.application.ninja.stage.stageView.showCodeViewBar(false); } }, diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 5862cf61..8332e5f5 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -214,6 +214,15 @@ } }, + + "editorViewOptions": { + "module": "js/code-editor/ui/code-editor-view-options.reel", + "name": "CodeEditorViewOptions", + "properties": { + "element": {"#": "editorViewOptions"} + } + }, + "panelContainer": { "module": "js/panels/PanelContainer.reel", "name": "PanelContainer", @@ -379,6 +388,7 @@ "newFileController": {"@": "newFileController"}, "coreIoApi": {"@": "coreIoApi1"}, "documentBar": {"@": "documentBar"}, + "editorViewOptions": {"@": "editorViewOptions"}, "ioMediator": {"@": "ioMediator"}, "timeline": {"@": "timeline"}, "mainMenuController": {"@": "mainMenuController"}, @@ -443,7 +453,8 @@
- + +
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index bfbee2b6..c06ad988 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -94,6 +94,10 @@ exports.StageView = Montage.create(Component, { doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); + this.showCodeViewBar(true); + + this.application.ninja.codeEditorController.handleCodeCompletionSupport(type); + 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); @@ -112,6 +116,11 @@ exports.StageView = Montage.create(Component, { if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.currentDocument = this.application.ninja.documentController.activeDocument; + + this.showCodeViewBar(false); + }else{ + this.showCodeViewBar(true); + this.application.ninja.codeEditorController.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.editor.getOption("mode")); } this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe @@ -162,5 +171,16 @@ exports.StageView = Montage.create(Component, { this.application.ninja.rulerTop.style.display = "none"; this.application.ninja.rulerLeft.style.display = "none"; } + }, + showCodeViewBar:{ + value:function(isCodeView){ + if(isCodeView === true) { + this.application.ninja.editorViewOptions.element.style.display = "block"; + this.application.ninja.documentBar.element.style.display = "none"; + }else{ + this.application.ninja.documentBar.element.style.display = "block"; + this.application.ninja.editorViewOptions.element.style.display = "none"; + } + } } }); \ No newline at end of file -- cgit v1.2.3 From 2449fc403e8a8a22f092c87e3268a69a2be67e43 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 16 Apr 2012 18:19:17 -0700 Subject: Added comment and uncomment control in the editor view options Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 13 ++++++++++++- .../code-editor-view-options.html | 12 ++++++++++-- .../code-editor-view-options.js | 20 ++++++++++++++++++++ js/controllers/code-editor-controller.js | 21 +++++++++++++++++++++ 4 files changed, 63 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css index 5aa66af2..90cf88d3 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -1,3 +1,14 @@ .viewOptions{ color:#F7F7F7; -} \ No newline at end of file + font-size:12px; +} + +.viewOptions div{ + display:inline; +} + +.viewOptions .format{ + float:right; + font-size:9px; +} + diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index c6d3da4e..6698baa9 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -36,7 +36,10 @@ "properties": { "element": {"#": "viewOptions"}, "codeCompleteCheck":{"@": "codeCompleteCheck"}, - "zoomHottext":{"@":"zoomHottext"} + "zoomHottext":{"@":"zoomHottext"}, + "format":{"#": "format"}, + "comment":{"#":"comment"}, + "uncomment":{"#":"uncomment"} } } } @@ -47,8 +50,13 @@
- Automatic Code completion + Automatic Completion +
+
+ + +
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 a1ff8547..a381ae2a 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 @@ -42,7 +42,27 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo didDraw: { enumerable: false, value: function() { + this.format.addEventListener("click", this.handleFormat.bind(this), false); + this.comment.addEventListener("click", this.handleComment.bind(this), false); + this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); + } + }, + + handleFormat:{ + value: function(){ + this.application.ninja.codeEditorController.autoFormatSelection(); + } + }, + handleComment:{ + value: function(){ + this.application.ninja.codeEditorController.commentSelection(true); + } + }, + handleUncomment:{ + value: function(){ + this.application.ninja.codeEditorController.commentSelection(false); } } + }); \ No newline at end of file diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index 534d4645..52eb47eb 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -162,5 +162,26 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone autoCodeCompleteElem.style.visibility = "hidden"; } } + }, + + getSelectedRange:{ + value:function(editor){ + return { from: editor.getCursor(true), to: editor.getCursor(false) }; + } + }, + + autoFormatSelection:{ + value: function(){ + var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor); + this.application.ninja.documentController.activeDocument.editor.autoFormatRange(range.from, range.to); + } + }, + + commentSelection:{ + value: function(isComment){ + var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor); + this.application.ninja.documentController.activeDocument.editor.commentRange(isComment, range.from, range.to); + } } + }); \ No newline at end of file -- cgit v1.2.3 From 1f891c58bad0b7746659aa4138001b5ee76d9a0e Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 17 Apr 2012 18:10:39 -0700 Subject: added theme choices for editor Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 30 +++++++++++++++++++++- .../code-editor-view-options.html | 20 +++++++++++++-- .../code-editor-view-options.js | 14 +++++++--- js/controllers/code-editor-controller.js | 12 ++++++++- 4 files changed, 69 insertions(+), 7 deletions(-) (limited to 'js') diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css index 90cf88d3..91054fb9 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -7,8 +7,36 @@ display:inline; } +.viewOptions .autoCodeComplete{ + float:left; +} + +.viewOptions .floatButtons{ + float:left; + font-size:9px; + padding-left: 20px; +} + .viewOptions .format{ - float:right; + float:left; + margin-left:5px; +} + +.viewOptions .themeOptions{ + float: right; +} + +.viewOptions .themeOptions select{ + background-color: #616161; + color: white; font-size:9px; + margin-top:2px; + border-color: #616161; +} + +.viewOptions .themeOptions select option{ + background-color: #616161; + color: white; + border-color: #616161; } diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index 6698baa9..4a6cfa59 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -39,7 +39,8 @@ "zoomHottext":{"@":"zoomHottext"}, "format":{"#": "format"}, "comment":{"#":"comment"}, - "uncomment":{"#":"uncomment"} + "uncomment":{"#":"uncomment"}, + "themeSelect":{"#":"themeSelect"} } } } @@ -54,10 +55,25 @@ Automatic Completion
- +
+
+ Theme + +
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 a381ae2a..0625dad9 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 @@ -45,24 +45,32 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo this.format.addEventListener("click", this.handleFormat.bind(this), false); this.comment.addEventListener("click", this.handleComment.bind(this), false); this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); + this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); } }, handleFormat:{ - value: function(){ + value: function(evt){ this.application.ninja.codeEditorController.autoFormatSelection(); } }, handleComment:{ - value: function(){ + value: function(evt){ this.application.ninja.codeEditorController.commentSelection(true); } }, handleUncomment:{ - value: function(){ + value: function(evt){ this.application.ninja.codeEditorController.commentSelection(false); } + }, + + handleThemeSelection:{ + value: function(evt){ + var theme = this.themeSelect.options[this.themeSelect.selectedIndex].value; + this.application.ninja.codeEditorController.handleThemeSelection(theme); + } } }); \ No newline at end of file diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index 52eb47eb..cf0503a0 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -49,9 +49,13 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone editorFont:{ get: function(){return this._editorFont;}, set: function(value){//gets a zoom % + var codeLineElems = null, i=0; this._editorFont = (value/100) * CodeEditorController.originalEditorFont; //set the font size - document.getElementsByClassName("codeViewContainer")[0].style.fontSize = ""+this._editorFont+"px"; + codeLineElems = document.getElementsByClassName("CodeMirror-lines"); + for(i=0;i --- .../code-editor-view-options.css | 2 ++ .../code-editor-view-options.html | 2 +- .../code-editor-view-options.js | 4 +-- js/controllers/code-editor-controller.js | 18 +++++++---- js/controllers/document-controller.js | 1 + js/ninja.reel/ninja.html | 4 ++- js/panels/Splitter.js | 35 +++++++++++++++++++++- js/stage/stage-view.reel/stage-view.js | 21 +++++++++++++ 8 files changed, 76 insertions(+), 11 deletions(-) (limited to 'js') diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css index 91054fb9..79468768 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -20,10 +20,12 @@ .viewOptions .format{ float:left; margin-left:5px; + height: 20px; } .viewOptions .themeOptions{ float: right; + margin-right:5px; } .viewOptions .themeOptions select{ diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index 4a6cfa59..31e96adf 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -60,7 +60,7 @@
- Theme + Theme :