aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnanya Sen2012-04-13 16:51:50 -0700
committerAnanya Sen2012-04-13 16:51:50 -0700
commitc2ec390d42945d2df1aed3f2b7ff3d1aa722fce8 (patch)
treecaff16a00963bbaef55830b406d7da212f4f74d7
parent6ffda1a7ebe18adb518eb24a612df22305b050a6 (diff)
downloadninja-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
-rwxr-xr-xindex.html10
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css3
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html56
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js48
-rw-r--r--js/controllers/code-editor-controller.js45
-rwxr-xr-xjs/controllers/document-controller.js1
-rwxr-xr-xjs/ninja.reel/ninja.html13
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.js20
8 files changed, 189 insertions, 7 deletions
diff --git a/index.html b/index.html
index 0663fe16..eb76abed 100755
--- a/index.html
+++ b/index.html
@@ -22,6 +22,16 @@
22 <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Sans+Mono' rel='stylesheet' type='text/css'> 22 <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Sans+Mono' rel='stylesheet' type='text/css'>
23 <link href="imports/codemirror/lib/codemirror.css" rel="stylesheet" type="text/css"/> 23 <link href="imports/codemirror/lib/codemirror.css" rel="stylesheet" type="text/css"/>
24 <link rel="stylesheet" href="imports/codemirror/lib/util/simple-hint.css"> 24 <link rel="stylesheet" href="imports/codemirror/lib/util/simple-hint.css">
25 <link rel="stylesheet" href="imports/codemirror/theme/neat.css">
26 <link rel="stylesheet" href="imports/codemirror/theme/elegant.css">
27 <link rel="stylesheet" href="imports/codemirror/theme/night.css">
28 <link rel="stylesheet" href="imports/codemirror/theme/monokai.css">
29 <link rel="stylesheet" href="imports/codemirror/theme/cobalt.css">
30 <link rel="stylesheet" href="imports/codemirror/theme/eclipse.css">
31 <link rel="stylesheet" href="imports/codemirror/theme/rubyblue.css">
32 <link rel="stylesheet" href="imports/codemirror/theme/lesser-dark.css">
33 <link rel="stylesheet" href="imports/codemirror/theme/xq-dark.css">
34
25 35
26 <style type="text/css"> 36 <style type="text/css">
27 html, body 37 html, body
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>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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//
9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component;
11
12var 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