1 files changed, 92 insertions, 14 deletions

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 a27d4450..dabce6e0 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
@@ -9,15 +9,80 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage =           require("montage/core/core").Montage,
     Component =         require("montage/ui/component").Component;
 
-var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, {
+exports.CodeEditorViewOptions = Montage.create(Component, {
+
+    _currentDocument: {
+        value : null
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(!value || this._currentDocument.currentView === "design") {
+                this.visible = false;
+            } else {
+                this.visible = true;
+                this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];
+            }
+
+        }
+    },
+
+    _visible: {
+        value: false
+    },
+
+    visible: {
+        get: function() {
+            return this._visible;
+        },
+        set: function(value) {
+            if(this._visible !== value) {
+                this._visible = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _autocomplete: {
+        value: false
+    },
+
+    autocomplete: {
+        get: function() {
+            return this._autocomplete;
+        },
+        set: function(value) {
+            if(this._autocomplete !== value) {
+                this._autocomplete = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    codeCompletionSupport : {
+        value: {"js": true}
+    },
+
+    codeCompleteCheck: {
+        value: null
+    },
 
     prepareForDraw: {
         value: function() {
-            Object.defineBinding(this.codeCompleteCheck , "checked", {
-              boundObject: this.application.ninja.codeEditorController,
-              boundObjectPropertyPath: "automaticCodeComplete",
-              oneway : false
-            });
+            //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);
+            this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false);
 
             Object.defineBinding(this.zoomHottext , "value", {
               boundObject: this.application.ninja.codeEditorController,
@@ -28,22 +93,35 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
         }
     },
 
-    didDraw: {
-        enumerable: false,
+    draw: {
         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);
-            this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
-            this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false);
+            if(this.visible) {
+                this.element.style.display = "block";
+            } else {
+                this.element.style.display = "none";
+            }
+
+            if(this.autocomplete) {
+                this.autoCompleteLabel.classList.add("disabled");
+            } else {
+                this.autoCompleteLabel.classList.remove("disabled");
+            }
+        }
+    },
+
+    getSelectedRange:{
+        value:function(editor){
+            return { from: editor.getCursor(true), to: editor.getCursor(false) };
         }
     },
 
     handleFormat:{
         value: function(evt){
-            this.application.ninja.codeEditorController.autoFormatSelection();
+            var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);
+            this.currentDocument.model.views.code.editor.autoFormatRange(range.from, range.to);
         }
     },
+
     handleComment:{
         value: function(evt){
             this.application.ninja.codeEditorController.commentSelection(true);