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 @@

HTML

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