- added configurability of code completion with the file type

- added logic to toggle between automatic code completion and manually triggered code completion [ UI pending ] Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
author: Ananya Sen 2012-04-09 17:15:41 -0700
committer: Ananya Sen 2012-04-09 17:15:41 -0700
commit: 6ffda1a7ebe18adb518eb24a612df22305b050a6 (patch)
tree: 6cd281687837f702ef34445e8660e767d448f2f4
parent: dece82791f43b5e8d278aba89cf8d6119af1478f (diff)
download: ninja-6ffda1a7ebe18adb518eb24a612df22305b050a6.tar.gz
3 files changed, 82 insertions, 31 deletions
diff --git a/index.html b/index.html
index ed24ccce..0663fe16 100755
--- a/index.html
+++ b/index.html
@@ -206,14 +206,6 @@
                }
        </script>
-        <style type="text/css">
-            span.CodeMirror-matchhighlight { background: #e9e9e9 }
-            .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
-            .activeline {background: #e8f2ff !important;}
-            div.CodeMirror span.CodeMirror-matchingbracket {color: #000;background-color: #ffd500;}
-            .CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
-        </style>
-        
        </head>
        <body>
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
index 23bd9279..0c13958c 100644
--- a/js/controllers/code-editor-controller.js
+++ b/js/controllers/code-editor-controller.js
@@ -23,6 +23,18 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
        set: function(value){this._codeEditor = value;}
    },
+    codeCompletionSupport : {"javascript": true},
+    _automaticCodeComplete: {
+        value:true
+    },
+    automaticCodeComplete:{
+            get: function(){return this._automaticCodeComplete;},
+            set: function(value){this._automaticCodeComplete = value;}
+        },
    deserializedFromTemplate: {
        value: function() {
            //TODO:add logic to check some configuration file to load the right code editor
@@ -30,10 +42,15 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
        }
    },
+    /**
+     * Public method
+     * Creates an editor instance
+     */
    createEditor : {
        value:function(doc, type){
-            var self = this;
+            var self = this, editorOptions = null;
-            var editor = self.codeEditor.fromTextArea(doc.textArea, {
+            editorOptions = {
                               lineNumbers: true,
                               matchBrackets:true,
                               mode: type,
@@ -49,31 +66,68 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
                                   doc.editor.matchHighlight("CodeMirror-matchhighlight");
                                   doc.editor.setLineClass(doc.editor.hline, null, null);
                                   doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline");
-                               },
-                               //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}
-                               onKeyEvent: function(cm, keyEvent) {
-                                    if((keyEvent.type === "keyup")//need seperate keycode set per mode
-                                        && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
-                                            || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
-                                            || (keyEvent.keyCode === 190)//period
-                                            || (keyEvent.keyCode === 189)//underscore, dash
-                                           )
-                                        && !( (keyEvent.keyCode === 219)//open bracket [
-                                                || (keyEvent.keyCode === 221)//close bracket ]
-                                                || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
-                                                || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
-                                                || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
-                                                || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
-                                           )
-                                    ){
-                                        self.codeEditor.simpleHint(cm, self.codeEditor.javascriptHint);
-                                    }
                               }
-                       });
+                           };
+            //configure auto code completion if it is supported for that document type
+            if(true){
+                editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)};
+            }
+            var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions);
            return editor;
        }
+    },
+    /**
+     * Private method
+     * key event handler for showing code completion dropdown
+     */
+    _codeCompletionKeyEventHandler:{
+        enumerable:false,
+        value: function(cm, keyEvent, type) {
+            //===manually triggered code completion
+            if((this.automaticCodeComplete === false)){
+                if((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl-Space
+                    this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
+                }
+            }
+            //===automatic auto complete [performance is slower]
+            else if(this._showAutoComplete(type, keyEvent)){
+                this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
+            }
+       }
+    },
+    /**
+     * Private method
+     * checks for valid keyset to show code completion dropdown
+     */
+    _showAutoComplete : {
+        enumerable:false,
+        value:function(type, keyEvent){
+            switch(type){
+                case "javascript":
+                    if((keyEvent.type === "keyup")//need seperate keycode set per mode
+                        && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
+                            || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
+                            || (keyEvent.keyCode === 190)//period
+                            || (keyEvent.keyCode === 189)//underscore, dash
+                           )
+                        && !( (keyEvent.keyCode === 219)//open bracket [
+                            || (keyEvent.ctrlKey || keyEvent.metaKey)//ctrl
+                            || (keyEvent.keyCode === 221)//close bracket ]
+                            || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
+                            || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
+                            || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
+                            || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
+                            || ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === 83)//ctrl+S
+                           )
+                    ){return true;}
+                default :
+                    return false;
+            }
+        }
    }
 });
 \ No newline at end of file
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index 372af144..a7e255ae 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -37,3 +37,8 @@
 /*}*/
+span.CodeMirror-matchhighlight { background: #e9e9e9 }
+.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
+.activeline {background: #e8f2ff !important;}
+div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
+.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
+\ No newline at end of file
author	Ananya Sen	2012-04-09 17:15:41 -0700
committer	Ananya Sen	2012-04-09 17:15:41 -0700
commit	6ffda1a7ebe18adb518eb24a612df22305b050a6 (patch)
tree	6cd281687837f702ef34445e8660e767d448f2f4
parent	dece82791f43b5e8d278aba89cf8d6119af1478f (diff)
download	ninja-6ffda1a7ebe18adb518eb24a612df22305b050a6.tar.gz

diff --git a/index.html b/index.html index ed24ccce..0663fe16 100755 --- a/index.html +++ b/index.html
@@ -206,14 +206,6 @@
206	}	206	}
207	</script>	207	</script>
208		208
209	<style type="text/css">
210	span.CodeMirror-matchhighlight { background: #e9e9e9 }
211	.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
212	.activeline {background: #e8f2ff !important;}
213	div.CodeMirror span.CodeMirror-matchingbracket {color: #000;background-color: #ffd500;}
214	.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
215	</style>
216
217	</head>	209	</head>
218		210
219	<body>	211	<body>


diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index 23bd9279..0c13958c 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js
@@ -23,6 +23,18 @@ 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},
		27
		28	_automaticCodeComplete: {
		29	value:true
		30	},
		31
		32	automaticCodeComplete:{
		33	get: function(){return this._automaticCodeComplete;},
		34	set: function(value){this._automaticCodeComplete = value;}
		35	},
		36
		37
26	deserializedFromTemplate: {	38	deserializedFromTemplate: {
27	value: function() {	39	value: function() {
28	//TODO:add logic to check some configuration file to load the right code editor	40	//TODO:add logic to check some configuration file to load the right code editor
@@ -30,10 +42,15 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
30	}	42	}
31	},	43	},
32		44
		45	/**
		46	* Public method
		47	* Creates an editor instance
		48	*/
33	createEditor : {	49	createEditor : {
34	value:function(doc, type){	50	value:function(doc, type){
35	var self = this;	51	var self = this, editorOptions = null;
36	var editor = self.codeEditor.fromTextArea(doc.textArea, {	52
		53	editorOptions = {
37	lineNumbers: true,	54	lineNumbers: true,
38	matchBrackets:true,	55	matchBrackets:true,
39	mode: type,	56	mode: type,
@@ -49,31 +66,68 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
49	doc.editor.matchHighlight("CodeMirror-matchhighlight");	66	doc.editor.matchHighlight("CodeMirror-matchhighlight");
50	doc.editor.setLineClass(doc.editor.hline, null, null);	67	doc.editor.setLineClass(doc.editor.hline, null, null);
51	doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline");	68	doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline");
52	},
53	//extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}
54	onKeyEvent: function(cm, keyEvent) {
55	if((keyEvent.type === "keyup")//need seperate keycode set per mode
56	&& ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
57	\|\| (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
58	\|\| (keyEvent.keyCode === 190)//period
59	\|\| (keyEvent.keyCode === 189)//underscore, dash
60	)
61	&& !( (keyEvent.keyCode === 219)//open bracket [
62	\|\| (keyEvent.keyCode === 221)//close bracket ]
63	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
64	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
65	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
66	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
67	)
68	){
69
70	self.codeEditor.simpleHint(cm, self.codeEditor.javascriptHint);
71	}
72	}	69	}
73	});	70	};
74		71
		72	//configure auto code completion if it is supported for that document type
		73	if(true){
		74	editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, type)};
		75	}
		76
		77	var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions);
75	return editor;	78	return editor;
76	}	79	}
		80	},
		81
		82	/**
		83	* Private method
		84	* key event handler for showing code completion dropdown
		85	*/
		86	_codeCompletionKeyEventHandler:{
		87	enumerable:false,
		88	value: function(cm, keyEvent, type) {
		89	//===manually triggered code completion
		90	if((this.automaticCodeComplete === false)){
		91	if((keyEvent.ctrlKey \|\| keyEvent.metaKey) && keyEvent.keyCode === 32){//Ctrl-Space
		92	this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
		93	}
		94	}
		95	//===automatic auto complete [performance is slower]
		96	else if(this._showAutoComplete(type, keyEvent)){
		97	this.codeEditor.simpleHint(cm, this.codeEditor.javascriptHint);
		98	}
		99	}
		100	},
		101
		102	/**
		103	* Private method
		104	* checks for valid keyset to show code completion dropdown
		105	*/
		106	_showAutoComplete : {
		107	enumerable:false,
		108	value:function(type, keyEvent){
		109	switch(type){
		110	case "javascript":
		111	if((keyEvent.type === "keyup")//need seperate keycode set per mode
		112	&& ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
		113	\|\| (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
		114	\|\| (keyEvent.keyCode === 190)//period
		115	\|\| (keyEvent.keyCode === 189)//underscore, dash
		116	)
		117	&& !( (keyEvent.keyCode === 219)//open bracket [
		118	\|\| (keyEvent.ctrlKey \|\| keyEvent.metaKey)//ctrl
		119	\|\| (keyEvent.keyCode === 221)//close bracket ]
		120	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
		121	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
		122	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
		123	\|\| (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
		124	\|\| ((keyEvent.ctrlKey \|\| keyEvent.metaKey) && keyEvent.keyCode === 83)//ctrl+S
		125	)
		126	){return true;}
		127	default :
		128	return false;
		129	}
		130	}
77	}	131	}
78		132
79	}); \ No newline at end of file	133	}); \ No newline at end of file


diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index 372af144..a7e255ae 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css
@@ -37,3 +37,8 @@
37	/}/	37	/}/
38		38
39		39
		40	span.CodeMirror-matchhighlight { background: #e9e9e9 }
		41	.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
		42	.activeline {background: #e8f2ff !important;}
		43	div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
		44	.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);} \ No newline at end of file