code folding in editor settings

applications/admin/controllers/default.py

@@ -563,7 +563,7 @@ def edit():
     # Load json only if it is ajax edited...
     app = get_app(request.vars.app)
     app_path = apath(app, r=request)
-    editor_defaults={'theme':'web2py', 'editor': 'default', 'closetag': 'true'}
+    editor_defaults={'theme':'web2py', 'editor': 'default', 'closetag': 'true', 'codefolding': 'false'}
     config = Config(os.path.join(request.folder, 'settings.cfg'),
                     section='editor', default_values=editor_defaults)
     preferences = config.read()
@@ -580,7 +580,7 @@ def edit():
                 response.headers["web2py-component-flash"] = T('Preferences saved correctly')
             else:
                 response.headers["web2py-component-flash"] = T('Preferences saved on session only')
-            response.headers["web2py-component-command"] = "update_editor('%s', '%s', '%s');jQuery('a[href=#editor_settings] button.close').click();" % (config.read()['theme'], config.read()['editor'], config.read()['closetag'])
+            response.headers["web2py-component-command"] = "update_editor('%(theme)s', '%(editor)s', %(closetag)s, %(codefolding)s);jQuery('a[href=#editor_settings] button.close').click();" % (config.read())
             return
         else:
             details = {'filename':'settings', 'id':'editor_settings', 'force': False}

applications/admin/static/codemirror/addon/fold/indent-fold.js

@@ -1,12 +1,26 @@
 CodeMirror.registerHelper("fold", "indent", function(cm, start) {
-  var tabSize = cm.getOption("tabSize"), firstLine = cm.getLine(start.line);
-  var myIndent = CodeMirror.countColumn(firstLine, null, tabSize);
-  for (var i = start.line + 1, end = cm.lineCount(); i < end; ++i) {
-    var curLine = cm.getLine(i);
-    if (CodeMirror.countColumn(curLine, null, tabSize) < myIndent &&
-        CodeMirror.countColumn(cm.getLine(i-1), null, tabSize) > myIndent)
+  var lastLine = cm.lastLine(),
+      tabSize = cm.getOption("tabSize"),
+      firstLine = cm.getLine(start.line),
+      myIndent = CodeMirror.countColumn(firstLine, null, tabSize);
+
+  function foldEnded(curColumn, prevColumn) {
+    return curColumn < myIndent ||
+      (curColumn == myIndent && prevColumn >= myIndent) ||
+      (curColumn > myIndent && i == lastLine);
+  }
+
+  for (var i = start.line + 1; i <= lastLine; i++) {
+    var curColumn = CodeMirror.countColumn(cm.getLine(i), null, tabSize);
+    var prevColumn = CodeMirror.countColumn(cm.getLine(i-1), null, tabSize);
+
+    if (foldEnded(curColumn, prevColumn)) {
+      var lastFoldLineNumber = curColumn > myIndent && i == lastLine ? i : i-1;
+      var lastFoldLine = cm.getLine(lastFoldLineNumber);
       return {from: CodeMirror.Pos(start.line, firstLine.length),
-              to: CodeMirror.Pos(i, curLine.length)};
+              to: CodeMirror.Pos(lastFoldLineNumber, lastFoldLine.length)};
+    }
   }
 });
+
 CodeMirror.indentRangeFinder = CodeMirror.fold.indent; // deprecated

applications/admin/views/default/edit.html

@@ -37,6 +37,13 @@
 <script src="{{=cm}}/addon/selection/active-line.js"></script>
 <script src="{{=cm}}/addon/display/fullscreen.js"></script>
 <link rel="stylesheet" href="{{=cm}}/addon/display/fullscreen.css">
+<script src="{{=cm}}/addon/fold/brace-fold.js"></script>
+<script src="{{=cm}}/addon/fold/comment-fold.js"></script>
+<script src="{{=cm}}/addon/fold/foldcode.js"></script>
+<script src="{{=cm}}/addon/fold/foldgutter.js"></script>
+<script src="{{=cm}}/addon/fold/indent-fold.js"></script>
+<script src="{{=cm}}/addon/fold/xml-fold.js"></script>
+<link rel="stylesheet" href="{{=cm}}/addon/fold/foldgutter.css">
 <script src="{{=cm}}/emmet.min.js"></script>
 <script src="{{=URL('static','js/ajax_editor.js')}}"></script>
 <link rel="stylesheet" href="{{=URL('static/css','typeahead.js-bootstrap.css')}}">
@@ -49,6 +56,7 @@ var current_editor = "{{=editor_settings['editor']}}";  //Default editor
 {{else:}}
     var current_closetag = false;  //Default closetag
 {{pass}}
+var current_codefolding = {{=editor_settings['codefolding']}};  //Default codefolding
 
 var current_font_incr = 0; // Default font-size, 0 means don't set
 jQuery(document).on('shown click', 'a[data-toggle="tab"]', function (e) {
@@ -102,7 +110,7 @@ jQuery(document).on('click', 'a.editor_filelink, a#editor_settingslink', functio
     load_file(url);
 });
 
-function update_editor(editor_theme, editor_name, editor_closetag) {
+function update_editor(editor_theme, editor_name, editor_closetag, editor_codefolding) {
     var href = "{{="%s/theme/" % cm}}" + editor_theme + ".css";
     var link = jQuery("<link>");
     link.attr({
@@ -122,15 +130,14 @@ function update_editor(editor_theme, editor_name, editor_closetag) {
     }
     current_theme = editor_theme;
     current_editor = editor_name;
-    switch (editor_closetag){
-        case 'true': current_closetag = true; break;
-        case 'false': current_closetag = false;
-    }
+    current_codefolding = editor_codefolding;
+    current_closetag = editor_closetag;
     jQuery('textarea[name="data"]') .each(function(id, ta) {
         editor = jQuery(ta).data('editor');
         editor.setOption("theme", current_theme);
         editor.setOption("keyMap", current_editor);
         editor.setOption("autoCloseTags", current_closetag);
+        editor.setOption("foldGutter", current_codefolding);
     });
 }
 

applications/admin/views/default/edit_js.html

@@ -54,15 +54,18 @@
         theme: current_theme,
         tabMode: "shift",
         lineWrapping: true,
-        gutters: ["CodeMirror-linenumbers", "breakpoints"],
+        foldGutter: current_codefolding,
+        gutters: ["CodeMirror-linenumbers", "breakpoints", "CodeMirror-foldgutter"],
         keyMap: current_editor,
         matchBrackets: true,
         autofocus: false,
         height: "350px",
         showTrailingSpace: true
     });
+    editor.foldCode(CodeMirror.Pos(8, 0));
 
-    editor.on("gutterClick", function(cm, n) {
+    editor.on("gutterClick", function(cm, n, gutter) {
+        if (gutter !== "breakpoints" ) return;
         var info = cm.lineInfo(n);
         cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
         sel = {start: n, end: n, data: ''};

applications/admin/views/default/editor_settings.html

@@ -7,7 +7,8 @@
 }}
 {{themes = [f[:-4] for f in listfiles('admin', "static/codemirror/theme", regexp='.*\.css$' )]}}
 {{editors = ['default', 'vim', 'emacs']}}
-{{closetag = ['true', 'false']}}
+{{booleanOptions = ['true', 'false']}}
+
 <form id="editor_settings_form" class="form-horizontal">
 	<div class="control-group">
 		<label class="control-label" for="selectTheme">{{=T('Theme')}}</label>
@@ -19,7 +20,11 @@
 	</div>
 	<div class="control-group">
 		<label class="control-label" for="closeTag">{{=T('Enable Close-Tag')}}</label>
-		<div class="controls">{{=SELECT(closetag, value=editor_settings['closetag'], _name="closetag" )}}</div>
+		<div class="controls">{{=SELECT(booleanOptions, value=editor_settings['closetag'], _name="closetag" )}}</div>
+	</div>
+	<div class="control-group">
+		<label class="control-label" for="codefolding">{{=T('Enable Code Folding')}}</label>
+		<div class="controls">{{=SELECT(booleanOptions, value=editor_settings['codefolding'], _name="codefolding" )}}</div>
 	</div>
 	<div class="control-group">
 		<div class="controls"><button type="submit" class="disabled btn btn-primary">{{=T('Save')}}</button></div>