diff options
author | Ananya Sen | 2012-04-13 16:51:50 -0700 |
---|---|---|
committer | Ananya Sen | 2012-04-13 16:51:50 -0700 |
commit | c2ec390d42945d2df1aed3f2b7ff3d1aa722fce8 (patch) | |
tree | caff16a00963bbaef55830b406d7da212f4f74d7 /js | |
parent | 6ffda1a7ebe18adb518eb24a612df22305b050a6 (diff) | |
download | ninja-c2ec390d42945d2df1aed3f2b7ff3d1aa722fce8.tar.gz |
- 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 <Ananya.Sen@motorola.com>
Diffstat (limited to 'js')
7 files changed, 179 insertions, 7 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 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 @@ | |||
1 | .viewOptions{ | ||
2 | color:#F7F7F7; | ||
3 | } \ 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 @@ | |||
1 | <!DOCTYPE HTML> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link rel="stylesheet" type="text/css" href="code-editor-view-options.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "codeCompleteCheck":{ | ||
14 | "prototype": "montage/ui/checkbox.reel", | ||
15 | "properties": { | ||
16 | "element": {"#": "codeComplete"} | ||
17 | } | ||
18 | }, | ||
19 | |||
20 | "zoomHottext": { | ||
21 | "module": "js/components/hottextunit.reel", | ||
22 | "name": "HotTextUnit", | ||
23 | "properties": { | ||
24 | "element": {"#": "zoomFont"}, | ||
25 | "minValue":100, | ||
26 | "maxValue" :200, | ||
27 | "stepSize" :10, | ||
28 | "acceptableUnits" : ["%"], | ||
29 | "units" : "%" | ||
30 | } | ||
31 | }, | ||
32 | |||
33 | "owner":{ | ||
34 | "module": "js/code-editor/ui/code-editor-view-options.reel", | ||
35 | "name": "CodeEditorViewOptions", | ||
36 | "properties": { | ||
37 | "element": {"#": "viewOptions"}, | ||
38 | "codeCompleteCheck":{"@": "codeCompleteCheck"}, | ||
39 | "zoomHottext":{"@":"zoomHottext"} | ||
40 | } | ||
41 | } | ||
42 | } | ||
43 | </script> | ||
44 | </head> | ||
45 | <body> | ||
46 | <div id="viewOptions" class="viewOptions"> | ||
47 | <div> | ||
48 | <input class="zoomFont" id="zoomFont"/> | ||
49 | <div class="autoCodeComplete" > | ||
50 | <span>Automatic Code completion</span> | ||
51 | <input type="checkbox" id="codeComplete" /> | ||
52 | </div> | ||
53 | </div> | ||
54 | </div> | ||
55 | </body> | ||
56 | </html> \ 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 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | //////////////////////////////////////////////////////////////////////// | ||
8 | // | ||
9 | var Montage = require("montage/core/core").Montage, | ||
10 | Component = require("montage/ui/component").Component; | ||
11 | |||
12 | var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, { | ||
13 | hasReel: { | ||
14 | value: true | ||
15 | }, | ||
16 | |||
17 | prepareForDraw: { | ||
18 | value: function() { | ||
19 | Object.defineBinding(this.codeCompleteCheck , "checked", { | ||
20 | boundObject: this.application.ninja.codeEditorController, | ||
21 | boundObjectPropertyPath: "automaticCodeComplete", | ||
22 | oneway : false | ||
23 | }); | ||
24 | |||
25 | Object.defineBinding(this.zoomHottext , "value", { | ||
26 | boundObject: this.application.ninja.codeEditorController, | ||
27 | boundObjectPropertyPath: "editorFont", | ||
28 | oneway : false | ||
29 | }); | ||
30 | |||
31 | } | ||
32 | }, | ||
33 | |||
34 | willDraw: { | ||
35 | enumerable: false, | ||
36 | value: function() {} | ||
37 | }, | ||
38 | draw: { | ||
39 | enumerable: false, | ||
40 | value: function() {} | ||
41 | }, | ||
42 | didDraw: { | ||
43 | enumerable: false, | ||
44 | value: function() { | ||
45 | |||
46 | } | ||
47 | } | ||
48 | }); \ 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 | |||
23 | set: function(value){this._codeEditor = value;} | 23 | set: function(value){this._codeEditor = value;} |
24 | }, | 24 | }, |
25 | 25 | ||
26 | codeCompletionSupport : {"javascript": true}, | 26 | codeCompletionSupport : { |
27 | value: {"javascript": true} | ||
28 | }, | ||
27 | 29 | ||
28 | _automaticCodeComplete: { | 30 | _automaticCodeComplete: { |
29 | value:true | 31 | value:true |
30 | }, | 32 | }, |
31 | 33 | ||
32 | automaticCodeComplete:{ | 34 | automaticCodeComplete:{ |
33 | get: function(){return this._automaticCodeComplete;}, | 35 | get: function(){return this._automaticCodeComplete;}, |
34 | set: function(value){this._automaticCodeComplete = value;} | 36 | set: function(value){ |
35 | }, | 37 | //console.log("$$$ automaticCodeComplete setter : "+value); |
38 | this._automaticCodeComplete = value;} | ||
39 | }, | ||
40 | |||
41 | originalEditorFont:{ | ||
42 | value:"13"//px | ||
43 | }, | ||
36 | 44 | ||
45 | _editorFont:{ | ||
46 | value:null | ||
47 | }, | ||
48 | |||
49 | editorFont:{ | ||
50 | get: function(){return this._editorFont;}, | ||
51 | set: function(value){//gets a zoom % | ||
52 | this._editorFont = (value/100) * CodeEditorController.originalEditorFont; | ||
53 | //set the font size | ||
54 | document.getElementsByClassName("codeViewContainer")[0].style.fontSize = ""+this._editorFont+"px"; | ||
55 | } | ||
56 | }, | ||
37 | 57 | ||
38 | deserializedFromTemplate: { | 58 | deserializedFromTemplate: { |
39 | value: function() { | 59 | value: function() { |
@@ -70,11 +90,14 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
70 | }; | 90 | }; |
71 | 91 | ||
72 | //configure auto code completion if it is supported for that document type | 92 | //configure auto code completion if it is supported for that document type |
73 | if(true){ | 93 | if(this.codeCompletionSupport[type] === true){ |
74 | editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)}; | 94 | editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)}; |
75 | } | 95 | } |
76 | 96 | ||
77 | var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions); | 97 | var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions); |
98 | |||
99 | //editor.setOption("theme", "night"); | ||
100 | |||
78 | return editor; | 101 | return editor; |
79 | } | 102 | } |
80 | }, | 103 | }, |
@@ -128,6 +151,16 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone | |||
128 | return false; | 151 | return false; |
129 | } | 152 | } |
130 | } | 153 | } |
131 | } | 154 | }, |
132 | 155 | ||
156 | handleCodeCompletionSupport:{ | ||
157 | value:function(fileType){ | ||
158 | var autoCodeCompleteElem = document.getElementsByClassName("autoCodeComplete")[0]; | ||
159 | if(autoCodeCompleteElem && (this.codeCompletionSupport[fileType] === true)){ | ||
160 | autoCodeCompleteElem.style.visibility = "visible"; | ||
161 | }else if(autoCodeCompleteElem && !this.codeCompletionSupport[fileType]){ | ||
162 | autoCodeCompleteElem.style.visibility = "hidden"; | ||
163 | } | ||
164 | } | ||
165 | } | ||
133 | }); \ No newline at end of file | 166 | }); \ No newline at end of file |