line highlight and fullscreen in codemirror, thanks lightdot

VERSION

@@ -1 +1 @@
-Version 2.0.8 (2012-09-09 14:58:46) stable
+Version 2.0.8 (2012-09-09 16:57:02) stable

applications/admin/languages/default.py

@@ -152,6 +152,7 @@
 'to  previous version.': 'to  previous version.',
 'To create a plugin, name a file/folder plugin_[name]': 'To create a plugin, name a file/folder plugin_[name]',
 'toggle breakpoint': 'toggle breakpoint',
+'Toggle Fullscreen': 'Toggle Fullscreen',
 'Traceback': 'Traceback',
 'Translation strings for the application': 'Translation strings for the application',
 'try view': 'try view',

applications/admin/models/0.py

@@ -18,10 +18,11 @@ TEXT_EDITOR_THEME = (
     "solarized_dark", "solarized_light", "textmate", "tomorrow",
     "tomorrow_night", "tomorrow_night_blue", "tomorrow_night_bright",
     "tomorrow_night_eighties", "twilight", "vibrant_ink")[0]
-## Editor Keyboard bindings (only for ace)
-TEXT_EDITOR_KEYBINDING = '' #'emacs' or 'vi'
-    
-### edit_area
+
+## Editor Keyboard bindings (only for ace and codemirror)
+TEXT_EDITOR_KEYBINDING = '' # 'emacs' or 'vi'
+
+### edit_area only
 # The default font size, measured in 'points'. The value must be an integer > 0
 FONT_SIZE = 10
 

applications/admin/static/codemirror/theme/web2py.css

@@ -29,4 +29,17 @@
 .cm-s-web2py {
   line-height: 1.40em;
   font-family: Monaco, Menlo,"Andale Mono","lucida console","Courier New",monospace !important;
-}
+}
+
+/* Fullscreen mode and active line highlight */
+
+.cm-s-web2py .CodeMirror-fullscreen {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+}
+
+.cm-s-web2py .activeline {background: #e8f2ff !important;}

applications/admin/views/default/edit.html

@@ -12,7 +12,8 @@
 <link rel="stylesheet" href="{{=cm}}/theme/web2py.css">
 <script src="{{=cm}}/lib/codemirror.js"></script>
 <script src="{{=cm}}/mode/clike/clike.js"></script>
-<script src="{{=cm}}/keymap/emacs.js"></script>
+{{if TEXT_EDITOR_KEYBINDING == 'emacs':}}<script src="{{=cm}}/keymap/emacs.js"></script>{{pass}}
+{{if TEXT_EDITOR_KEYBINDING == 'vi':}}<script src="{{=cm}}/keymap/vim.js"></script>{{pass}}
 <script src="{{=cm}}/mode/python/python.js"></script>
 <script src="{{=cm}}/mode/xml/xml.js"></script>
 <script src="{{=cm}}/mode/css/css.js"></script>
@@ -131,6 +132,30 @@ jQuery(document).ready(function(){
     <textarea style="width: auto; height:400px;direction:ltr;" id="body" name="data">{{=data}}</textarea>
     {{cm_mode = {'html':'htmlmixed'}.get(filetype,filetype)}}
     <script>
+      function isFullScreen(instance) {
+          return /\bCodeMirror-fullscreen\b/.test(instance.getWrapperElement().className);
+      }
+      function winHeight() {
+          return window.innerHeight || (document.documentElement || document.body).clientHeight;
+      }
+      function setFullScreen(instance, full) {
+          var wrap = instance.getWrapperElement(), scroll = instance.getScrollerElement();
+          if (full) {
+              wrap.className += " CodeMirror-fullscreen";
+              scroll.style.height = winHeight() + "px";
+              document.documentElement.style.overflow = "hidden";
+          } else {
+              wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
+              scroll.style.height = "";
+              document.documentElement.style.overflow = "";
+          }
+          instance.refresh();
+      }
+      CodeMirror.connect(window, "resize", function() {
+          var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
+          if (!showing) return;
+          showing.CodeMirror.getScrollerElement().style.height = winHeight() + "px";
+      });
       var editor = CodeMirror.fromTextArea(document.getElementById("body"),
       { mode: {name: '{{=cm_mode}}'{{if cm_mode=='python':}},version: 2,singleLineStringErrors: false{{pass}} },
         lineNumbers: true,
@@ -139,10 +164,18 @@ jQuery(document).ready(function(){
         tabMode: "shift",
         lineWrapping: true,
         extraKeys: { "Ctrl-S": function(instance) {doClickSave();},
-                     "Tab": "indentMore"},
+                     "Tab": "indentMore",
+                     "Ctrl-F11": function(instance) {setFullScreen(instance, !isFullScreen(instance));},
+                     "Esc": function(instance) {if (isFullScreen(instance)) setFullScreen(instance, false);}},
         {{if TEXT_EDITOR_KEYBINDING == 'emacs':}}keyMap: "emacs",{{pass}}
-        matchBrackets: true
+        {{if TEXT_EDITOR_KEYBINDING == 'vi':}}keyMap: "vim",{{pass}}
+        matchBrackets: true,
+        autofocus: true,
+        onCursorActivity: function() {
+            editor.setLineClass(hlLine, null, null);
+            hlLine = editor.setLineClass(editor.getCursor().line, null, "activeline");}
       });
+      var hlLine = editor.setLineClass(0, "activeline");
       window.mirror = editor;
     </script>
     {{elif TEXT_EDITOR == 'ace':}}
@@ -193,6 +226,14 @@ window.onload = function() {
     {{=shortcut('Ctrl+Shift+↑', T('Go to Matching Pair'))}}
   </ul>
 </div>
+{{elif TEXT_EDITOR == 'codemirror':}}
+<div class="help">
+  <h3>{{=T("Key bindings")}}</h3>
+  <ul>
+    {{=shortcut('Ctrl+S', T('Save via Ajax'))}}
+    {{=shortcut('Ctrl+F11', T('Toggle Fullscreen'))}}
+  </ul>
+</div>
 {{else:}}
 <div class="help">
   <h3>{{=T("Key bindings")}}</h3>
@@ -201,4 +242,3 @@ window.onload = function() {
   </ul>
 </div>
 {{pass}}
-