aboutsummaryrefslogtreecommitdiff
path: root/js/code-editor/ui
diff options
context:
space:
mode:
Diffstat (limited to 'js/code-editor/ui')
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css2
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html6
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js106
3 files changed, 98 insertions, 16 deletions
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 6130382b..aeaf604c 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
@@ -18,7 +18,7 @@
18 height: 20px; 18 height: 20px;
19} 19}
20 20
21.viewOptions .autoCodeComplete span{ 21.viewOptions .autoCodeComplete label{
22 vertical-align: middle; 22 vertical-align: middle;
23} 23}
24 24
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 14d6cb55..2c91ca13 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
@@ -14,6 +14,9 @@
14 "prototype": "montage/ui/checkbox.reel", 14 "prototype": "montage/ui/checkbox.reel",
15 "properties": { 15 "properties": {
16 "element": {"#": "codeComplete"} 16 "element": {"#": "codeComplete"}
17 },
18 "bindings": {
19 "disabled": {"<-": "@owner.autocomplete"}
17 } 20 }
18 }, 21 },
19 22
@@ -33,6 +36,7 @@
33 "prototype": "js/code-editor/ui/code-editor-view-options.reel[CodeEditorViewOptions]", 36 "prototype": "js/code-editor/ui/code-editor-view-options.reel[CodeEditorViewOptions]",
34 "properties": { 37 "properties": {
35 "element": {"#": "viewOptions"}, 38 "element": {"#": "viewOptions"},
39 "autoCompleteLabel": {"#": "autoCompleteLabel"},
36 "codeCompleteCheck":{"@": "codeCompleteCheck"}, 40 "codeCompleteCheck":{"@": "codeCompleteCheck"},
37 "zoomHottext":{"@":"zoomHottext"}, 41 "zoomHottext":{"@":"zoomHottext"},
38 "comment":{"#":"comment"}, 42 "comment":{"#":"comment"},
@@ -50,7 +54,7 @@
50 <input class="zoomFont" data-montage-id="zoomFont"/> 54 <input class="zoomFont" data-montage-id="zoomFont"/>
51 <div class="autoCodeComplete" > 55 <div class="autoCodeComplete" >
52 <input type="checkbox" data-montage-id="codeComplete" /> 56 <input type="checkbox" data-montage-id="codeComplete" />
53 <span>Automatic Completion</span> 57 <label data-montage-id="autoCompleteLabel">Automatic Completion</label>
54 </div> 58 </div>
55 <div class="floatButtons"> 59 <div class="floatButtons">
56 <!--<button disabled="disabled" id="format" value="format" class="nj-skinned format">Format</button>--> 60 <!--<button disabled="disabled" id="format" value="format" class="nj-skinned format">Format</button>-->
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
9var Montage = require("montage/core/core").Montage, 9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component; 10 Component = require("montage/ui/component").Component;
11 11
12var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, { 12exports.CodeEditorViewOptions = Montage.create(Component, {
13
14 _currentDocument: {
15 value : null
16 },
17
18 currentDocument : {
19 get : function() {
20 return this._currentDocument;
21 },
22 set : function(value) {
23 if (value === this._currentDocument) {
24 return;
25 }
26
27 this._currentDocument = value;
28
29 if(!value || this._currentDocument.currentView === "design") {
30 this.visible = false;
31 } else {
32 this.visible = true;
33 this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];
34 }
35
36 }
37 },
38
39 _visible: {
40 value: false
41 },
42
43 visible: {
44 get: function() {
45 return this._visible;
46 },
47 set: function(value) {
48 if(this._visible !== value) {
49 this._visible = value;
50 this.needsDraw = true;
51 }
52 }
53 },
54
55 _autocomplete: {
56 value: false
57 },
58
59 autocomplete: {
60 get: function() {
61 return this._autocomplete;
62 },
63 set: function(value) {
64 if(this._autocomplete !== value) {
65 this._autocomplete = value;
66 this.needsDraw = true;
67 }
68 }
69 },
70
71 codeCompletionSupport : {
72 value: {"js": true}
73 },
74
75 codeCompleteCheck: {
76 value: null
77 },
13 78
14 prepareForDraw: { 79 prepareForDraw: {
15 value: function() { 80 value: function() {
16 Object.defineBinding(this.codeCompleteCheck , "checked", { 81 //this.format.addEventListener("click", this.handleFormat.bind(this), false);
17 boundObject: this.application.ninja.codeEditorController, 82 this.comment.addEventListener("click", this.handleComment.bind(this), false);
18 boundObjectPropertyPath: "automaticCodeComplete", 83 this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false);
19 oneway : false 84 this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
20 }); 85 this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false);
21 86
22 Object.defineBinding(this.zoomHottext , "value", { 87 Object.defineBinding(this.zoomHottext , "value", {
23 boundObject: this.application.ninja.codeEditorController, 88 boundObject: this.application.ninja.codeEditorController,
@@ -28,22 +93,35 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
28 } 93 }
29 }, 94 },
30 95
31 didDraw: { 96 draw: {
32 enumerable: false,
33 value: function() { 97 value: function() {
34 //this.format.addEventListener("click", this.handleFormat.bind(this), false); 98 if(this.visible) {
35 this.comment.addEventListener("click", this.handleComment.bind(this), false); 99 this.element.style.display = "block";
36 this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); 100 } else {
37 this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); 101 this.element.style.display = "none";
38 this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); 102 }
103
104 if(this.autocomplete) {
105 this.autoCompleteLabel.classList.add("disabled");
106 } else {
107 this.autoCompleteLabel.classList.remove("disabled");
108 }
109 }
110 },
111
112 getSelectedRange:{
113 value:function(editor){
114 return { from: editor.getCursor(true), to: editor.getCursor(false) };
39 } 115 }
40 }, 116 },
41 117
42 handleFormat:{ 118 handleFormat:{
43 value: function(evt){ 119 value: function(evt){
44 this.application.ninja.codeEditorController.autoFormatSelection(); 120 var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);
121 this.currentDocument.model.views.code.editor.autoFormatRange(range.from, range.to);
45 } 122 }
46 }, 123 },
124
47 handleComment:{ 125 handleComment:{
48 value: function(evt){