aboutsummaryrefslogtreecommitdiff
path: root/js/code-editor/ui/code-editor-view-options.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/code-editor/ui/code-editor-view-options.reel')
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css5
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html8
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js69
3 files changed, 56 insertions, 26 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 68d77f90..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
@@ -22,11 +22,6 @@
22 vertical-align: middle; 22 vertical-align: middle;
23} 23}
24 24
25.viewOptions .autoCodeComplete input{
26 width: 1em;
27 height: 1em;
28}
29
30.viewOptions .autoCodeComplete .disabled{ 25.viewOptions .autoCodeComplete .disabled{
31 color:#515151; 26 color:#515151;
32} 27}
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 3d5df256..9871525b 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
@@ -11,12 +11,13 @@
11 <script type="text/montage-serialization"> 11 <script type="text/montage-serialization">
12 { 12 {
13 "codeCompleteCheck":{ 13 "codeCompleteCheck":{
14 "prototype": "montage/ui/input-checkbox.reel", 14 "prototype": "montage/ui/native/input-checkbox.reel",
15 "properties": { 15 "properties": {
16 "element": {"#": "codeComplete"} 16 "element": {"#": "codeComplete"}
17 }, 17 },
18 "bindings": { 18 "bindings": {
19 "disabled": {"<-": "@owner.autocomplete"} 19 "disabled": {"<-": "@owner.autocomplete"},
20 "checked": {"<->": "@owner.automaticCodeHint"}
20 } 21 }
21 }, 22 },
22 23
@@ -29,6 +30,9 @@
29 "stepSize" :10, 30 "stepSize" :10,
30 "acceptableUnits" : ["%"], 31 "acceptableUnits" : ["%"],
31 "units" : "%" 32 "units" : "%"
33 },
34 "bindings": {
35 "value": {"<->": "@owner.zoomFactor"}
32 } 36 }
33 }, 37 },
34 38
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 04b509a6..6c983867 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
@@ -36,6 +36,21 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
36 } 36 }
37 }, 37 },
38 38
39 _codeEditorWrapper:{
40 value: null
41 },
42
43 codeEditorWrapper:{
44 get : function() {
45 return this._codeEditorWrapper;
46 },
47 set : function(value) {
48 if(this._codeEditorWrapper !== value){
49 this._codeEditorWrapper = value;
50 }
51 }
52 },
53
39 _visible: { 54 _visible: {
40 value: false 55 value: false
41 }, 56 },
@@ -97,6 +112,35 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
97 serializable: true 112 serializable: true
98 }, 113 },
99 114
115 _zoomFactor:{
116 value: 100
117 },
118
119 zoomFactor:{
120 get: function(){
121 return this._zoomFactor;
122 },
123 set: function(value){
124 this._zoomFactor = value;
125 if(this.codeEditorWrapper){this.codeEditorWrapper.handleZoom(value)};
126 }
127 },
128
129 _automaticCodeHint:{
130 value: false
131 },
132
133 automaticCodeHint:{
134 get: function(){
135 return this._automaticCodeHint;
136 },
137 set: function(value){
138 this._automaticCodeHint = value;
139 //additing additional meta properties on the editor
140 this._currentDocument.model.views.code.editor.automaticCodeHint = value;
141 }
142 },
143
100 themeSelect: { 144 themeSelect: {
101 value: null, 145 value: null,
102 serializable: true 146 serializable: true
@@ -114,19 +158,6 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
114 this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); 158 this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false);
115 this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); 159 this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
116 this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); 160 this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false);
117
118 Object.defineBinding(this.zoomHottext , "value", {
119 boundObject: this.application.ninja.codeEditorController,
120 boundObjectPropertyPath: "zoomFactor",
121 oneway : false
122 });
123
124 Object.defineBinding(this.codeCompleteCheck , "checked", {
125 boundObject: this.application.ninja.codeEditorController,
126 boundObjectPropertyPath: "automaticCodeComplete",
127 oneway : false
128 });
129
130 } 161 }
131 }, 162 },
132 163
@@ -143,8 +174,6 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
143 } else { 174 } else {
144 this.autoCompleteLabel.classList.remove("disabled"); 175 this.autoCompleteLabel.classList.remove("disabled");
145 } 176 }
146
147 this.codeCompleteCheck.checked = false;
148 } 177 }
149 }, 178 },
150 179
@@ -163,20 +192,22 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
163 192
164 handleComment:{ 193 handleComment:{
165 value: function(evt){ 194 value: function(evt){
166 this.application.ninja.codeEditorController.commentSelection(true); 195 if(this.codeEditorWrapper){this.codeEditorWrapper.commentSelection(true)};
167 } 196 }
168 }, 197 },
169 198
170 handleUncomment:{ 199 handleUncomment:{
171 value: function(evt){ 200 value: function(evt){
172 this.application.ninja.codeEditorController.commentSelection(false); 201 if(this.codeEditorWrapper){this.codeEditorWrapper.commentSelection(false)};
173 } 202 }
174 }, 203 },
175 204
176 handleThemeSelection:{ 205 handleThemeSelection:{
177 value: function(evt){ 206 value: function(evt){
178 this.application.ninja.codeEditorController.editorTheme = this.themeSelect.options[this.themeSelect.selectedIndex].value; 207 if(this.codeEditorWrapper){
179 this.application.ninja.codeEditorController.handleThemeSelection(); 208 this.codeEditorWrapper.editorTheme = this.themeSelect.options[this.themeSelect.selectedIndex].value;
209 this.codeEditorWrapper.handleThemeSelection();
210 }
180 } 211 }
181 }, 212 },
182 213