initial import for tabs in the online editor

applications/admin/controllers/default.py

@@ -586,6 +586,24 @@ def edit():
     """ File edit handler """
     # Load json only if it is ajax edited...
     app = get_app(request.vars.app)
+
+    if not(request.ajax):	
+        # return the scaffolding, the rest will be through ajax requests
+        response.title = T('Editing %s' % app)
+        editarea_preferences = {}
+       	editarea_preferences['FONT_SIZE'] = '10'
+        editarea_preferences['FULL_SCREEN'] = 'false'
+        editarea_preferences['ALLOW_TOGGLE'] = 'true'
+        editarea_preferences['REPLACE_TAB_BY_SPACES'] = '4'
+        editarea_preferences['DISPLAY'] = 'onload'
+        for key in editarea_preferences:
+            if key in globals():
+                editarea_preferences[key] = globals()[key]
+        return response.render ('default/edit.html', dict(app=request.args[0], editarea_preferences=editarea_preferences))
+	
+    """ File edit handler """
+    # Load json only if it is ajax edited...
+    app = get_app(request.vars.app)
     filename = '/'.join(request.args)
     response.title = request.args[-1]
     if request.vars.app:
@@ -708,7 +726,7 @@ def edit():
         cfilename = os.path.join(request.args[0], 'controllers',
                                  request.args[2] + '.py')
         if os.path.exists(apath(cfilename, r=request)):
-            edit_controller = URL('edit',args=[cfilename.replace(os.sep, "/")])
+            edit_controller = URL('edit', args=[cfilename.replace(os.sep, "/")])
             view = request.args[3].replace('.html', '')
             view_link = URL(request.args[0], request.args[2], view)
     elif filetype == 'python' and request.args[1] == 'controllers':
@@ -730,6 +748,7 @@ def edit():
                 vf = os.path.split(v)[-1]
                 vargs = "/".join([viewpath.replace(os.sep, "/"), vf])
                 editviewlinks.append(A(vf.split(".")[0],
+                                       _class="editor_filelink",	
                                        _href=URL('edit', args=[vargs])))
 
     if len(request.args) > 2 and request.args[1] == 'controllers':
@@ -741,17 +760,7 @@ def edit():
     if 'from_ajax' in request.vars:
         return response.json({'file_hash': file_hash, 'saved_on': saved_on, 'functions': functions, 'controller': controller, 'application': request.args[0], 'highlight': highlight})
     else:
-
+        file_details = dict(app=request.args[0],
-        editarea_preferences = {}
-        editarea_preferences['FONT_SIZE'] = '10'
-        editarea_preferences['FULL_SCREEN'] = 'false'
-        editarea_preferences['ALLOW_TOGGLE'] = 'true'
-        editarea_preferences['REPLACE_TAB_BY_SPACES'] = '4'
-        editarea_preferences['DISPLAY'] = 'onload'
-        for key in editarea_preferences:
-            if key in globals():
-                editarea_preferences[key] = globals()[key]
-        return dict(app=request.args[0],
                     filename=filename,
                     filetype=filetype,
                     data=data,
@@ -761,9 +770,13 @@ def edit():
                     controller=controller,
                     functions=functions,
                     view_link=view_link,
-                    editarea_preferences=editarea_preferences,
+                    editviewlinks=editviewlinks,
-                    editviewlinks=editviewlinks)
+                    id=IS_SLUG()(filename)[0],
-
+					force= True if (request.vars.restore or request.vars.revert) else False)
+        plain_html = response.render('default/edit_js.html', file_details)
+        file_details['plain_html'] = plain_html
+        return response.json(file_details)
+		
 
 def resolve():
     """

applications/admin/static/js/ajax_editor.js

@@ -54,25 +54,28 @@ function doHighlight(highlight) {
 }
 
 function doClickSave() {
-    var data = getData();
+	var currentTabID = '#' + jQuery('#edit_placeholder div.tab-pane.active').attr('id');
+	var editor = jQuery (currentTabID + ' textarea').data('editor');
+   var data = editor.getValue();
     var dataForPost = prepareMultiPartPOST(new Array(
 	prepareDataForSave('data', data),
 	prepareDataForSave('file_hash',
-			   jQuery("input[name='file_hash']").val()),
+			   jQuery(currentTabID + " input[name='file_hash']").val()),
 	prepareDataForSave('saved_on',
-			   jQuery("input[name='saved_on']").val()),
+			   jQuery(currentTabID + " input[name='saved_on']").val()),
 	prepareDataForSave('saved_on',
-			   jQuery("input[name='saved_on']").val()),
+			   jQuery(currentTabID + " input[name='saved_on']").val()),
 	prepareDataForSave('from_ajax','true')));
         // console.info(area.textarea.value);
-        jQuery("input[name='saved_on']").attr('style',
+        jQuery(currentTabID + " input[name='saved_on']").attr('style',
 					      'background-color:yellow');
-	jQuery("input[name='saved_on']").val('saving now...')
+	jQuery(currentTabID + " input[name='saved_on']").val('saving now...')
+	currentUrl =  jQuery(currentTabID + ' form').attr('action');
 	jQuery.ajax({
 	  type: "POST",
 	  contentType: 'multipart/form-data;boundary="'
 		    + dataForPost[1] + '"',
-	  url: self.location.href,
+	  url: currentUrl,
 	  dataType: "json",
 	  data: dataForPost[0],
 	  timeout: 5000,
@@ -100,12 +103,12 @@ function doClickSave() {
 		    window.location.href=json.redirect;
 		} else {
 		    // console.info( json.file_hash );
-		    jQuery("input[name='file_hash']").val(json.file_hash);
+		    jQuery(currentTabID + " input[name='file_hash']").val(json.file_hash);
-		    jQuery("input[name='saved_on']").val(json.saved_on);
+		    jQuery(currentTabID + " input[name='saved_on']").val(json.saved_on);
 		    if (json.highlight) {
 			doHighlight(json.highlight);
 		    } else {
-			jQuery("input[name='saved_on']").attr('style','background-color:#99FF99');
+			jQuery(currentTabID + " input[name='saved_on']").attr('style','background-color:#99FF99');
 			//jQuery(".flash").delay(1000).fadeOut('slow');
 		    }
 		    // console.info(jQuery("input[name='file_hash']").val());
@@ -134,10 +137,12 @@ function getSelectionRange() {
         sel['end'] = range.end.row;
         sel['data'] = '';
     } else if (window.mirror) {
-	sel = {};
+		var currentTabID = '#' + jQuery('#edit_placeholder div.tab-pane.active').attr('id');
-	sel['start'] = window.mirror.getCursor(true).line;
+		var editor = jQuery (currentTabID + ' textarea').data('editor');
-	sel['end'] = window.mirror.getCursor(false).line;
+		sel = {};
-	sel['data'] = '';
+		sel['start'] = editor.getCursor(true).line;
+		sel['end'] = editor.getCursor(false).line;
+		sel['data'] = '';
     } else if (window.eamy) {
 	sel = {};
 	// not implemented
@@ -150,6 +155,9 @@ function getSelectionRange() {
 }
 
 function doToggleBreakpoint(filename, url, sel) {
+	var currentTabID = '#' + jQuery('#edit_placeholder div.tab-pane.active').attr('id');
+	var editor = jQuery (currentTabID + ' textarea').data('editor');
+
     if (sel==null) {
         // use cursor position to determine the breakpoint line
         // (gutter already tell us the selected line)
@@ -222,16 +230,17 @@ function doListBreakpoints(filename, url) {
 	  xhr.setRequestHeader('web2py-component-element',
 			       'doListBreakpoints');},
 	  success: function(json,text,xhr){
-	     try {
+		try {
-		     if (json.error) {
+			if (json.error) {
-		         window.location.href=json.redirect;
+				window.location.href=json.redirect;
-		     } else {
+			} else {
-                 if (window.mirror) {
+				var currentTabID = '#' + jQuery('#edit_placeholder div.tab-pane.active').attr('id');
+				var editor = jQuery (currentTabID + ' textarea').data('editor');
+				if (window.mirror) {
                      for (i in json.breakpoints) {
                          lineno = json.breakpoints[i];
             		     // mark the breakpoint if ok=True
-         		         editor.setMarker(lineno-1,
+         		         editor.setMarker(lineno-1, "<span style='color: red'>●</span> %N%");
-         		                         "<span style='color: red'>●</span> %N%");
          		     }
         		 }
 		     }
@@ -250,3 +259,29 @@ function keepalive(url) {
 	  success: function(){},
 	  error: function(x) { on_error(); } });
 }
+
+function load_file (url) {
+	jQuery.ajax({
+		type: "GET",
+		dataType: 'json',
+		url: url,
+		timeout: 1000,
+		success: function(json){
+			if (typeof(json['plain_html']) !== undefined) {
+				if (jQuery('#' + json['id']).length === 0 || json['force'] === true) {			
+					// Create a tab and put the code in it
+					var tab_header = '<li><a href="#idDefault" data-toggle="tab">filenameDefault<button type="button" class="close">&times;</button></a></li>'.replace(/idDefault/, json['id']).replace(/filenameDefault/, json['filename'] );
+					var tab_body = '<div id="idDefault" class="tab-pane fade in " >htmlDefault</div>'.replace(/htmlDefault/, json['plain_html']).replace(/idDefault/, json['id']);
+					if (json['force'] === false) {
+						jQuery('#filesTab').append(jQuery(tab_header));
+						jQuery('#myTabContent').append(jQuery(tab_body));
+					} else {
+						jQuery('#' + json['id']).html(jQuery(tab_body));										
+					}
+				}
+				jQuery("a[href='#" + json['id'] + "']" ).click();
+			}
+		},
+		error: function(x) { on_error(); }
+	});
+}

applications/admin/views/default/edit.html

@@ -10,13 +10,10 @@
       return files
 
   def editfile(path,file,vars={}):
-    args=(path,file) if 'app' in vars else (app,path,file)
+	args=(path,file) if 'app' in vars else (app,path,file)
-    return A(file, _class='', _href=URL('edit', args=args, vars=vars), _style='word-wrap: break-word;')
+	url = URL('edit', args=args, vars=vars)
-
+    return A(file, _class='editor_filelink', _href=url, _style='word-wrap: break-word;')
 }}
-{{if TEXT_EDITOR == 'amy':}}
-{{include 'default/amy_ajax.html'}}
-{{elif TEXT_EDITOR == 'codemirror':}}
 {{cm=URL('static','codemirror')}}
 <link rel="stylesheet" href="{{=cm}}/lib/codemirror.css">
 <link rel="stylesheet" href="{{=cm}}/theme/web2py.css">
@@ -37,306 +34,132 @@
 <script language="Javascript" type="text/javascript" src="{{=URL('static','js/ajax_editor.js')}}"></script>
 <script language="Javascript" type="text/javascript">
 jQuery(document).ready(function(){
-     doListBreakpoints({{=XML("'%s','%s://%s%s'" % (filename, 
+     doListBreakpoints({{=XML("'%s','%s://%s%s'" % ('currentFilenameJS', 
                 request.env['wsgi_url_scheme'], request.env['http_host'],
                 URL(c='debug', f='list_breakpoints')))}});
 });
-</script>
+
-{{elif TEXT_EDITOR == 'ace':}}
+jQuery(document).on('shown click', 'a[data-toggle="tab"]', function (e) {
-<script src="{{=URL(r=request,c='static',f='ace/src/ace.js')}}" type="text/javascript" charset="utf-8"></script>
+	var tab_id = jQuery(this).attr('href');
-<script src="{{=URL(r=request,c='static',f='ace/src/theme-%s.js' % TEXT_EDITOR_THEME)}}" type="text/javascript" charset="utf-8"></script>
+	var editor = jQuery(tab_id + " textarea").data('editor');
-<script>var theme = "ace/theme/{{=TEXT_EDITOR_THEME}}";</script>
+	editor.setSize(jQuery(tab_id).width(),  jQuery(tab_id).height());
-    {{if filetype == 'python':}}
+	editor.refresh();
-        <script src="{{=URL(r=request,c='static',f='ace/src/mode-python.js')}}" type="text/javascript" charset="utf-8"></script>
+	//jQuery(function(){jQuery('.CodeMirror-scroll').css("height","auto").css("overflow-x","auto");});
-        <script>
-            var mode = require("ace/mode/python").Mode;
-        </script>
-    {{elif filetype in ('html', 'load'):}}
-        <script src="{{=URL(r=request,c='static',f='ace/src/mode-html.js')}}" type="text/javascript" charset="utf-8"></script>
-        <script>
-            var mode = require("ace/mode/html").Mode;
-        </script>
-    {{elif filetype == 'js':}}
-        <script src="{{=URL(r=request,c='static',f='ace/src/mode-javascript.js')}}" type="text/javascript" charset="utf-8"></script>
-        <script>
-            var mode = require("ace/mode/javascript").Mode;
-        </script>
-    {{elif filetype == 'css':}}
-        <script src="{{=URL(r=request,c='static',f='ace/src/mode-css.js')}}" type="text/javascript" charset="utf-8"></script>
-        <script>
-            var mode = require("ace/mode/css").Mode;
-        </script>
-    {{else:}}
-        <script src="{{=URL(r=request,c='static',f='ace/src/mode-text.js')}}" type="text/javascript" charset="utf-8"></script>
-        <script>
-            var mode = require("ace/mode/text").Mode;
-        </script>
-    {{pass}}
-    {{if TEXT_EDITOR_KEYBINDING == 'emacs':}}
-        <script src="{{=URL(r=request,c='static',f='ace/src/keybinding-emacs.js')}}" type="text/javascript" charset="utf-8"></script>
-        <script>
-            var keybinding = require("ace/keyboard/keybinding/emacs").Emacs;
-        </script>
-    {{elif TEXT_EDITOR_KEYBINDING == 'vi':}}
-        <script src="{{=URL(r=request,c='static',f='ace/src/keybinding-vi.js')}}" type="text/javascript" charset="utf-8"></script>
-        <script>
-            var keybinding = require("ace/keyboard/keybinding/vim").Vim;
-        </script>
-    {{else:}}
-        <script>
-            var keybinding = null;
-        </script>
-    {{pass}}
-<script language="Javascript" type="text/javascript" src="{{=URL('static','js/ajax_editor.js')}}"></script>
-{{else:}}
-<script language="Javascript" type="text/javascript" src="{{=URL(r=request,c='static',f='edit_area/edit_area_full.js')}}"></script><script language="Javascript" type="text/javascript">
-editAreaLoader.init({id: "body",start_highlight: true,allow_resize: "both",allow_toggle: {{=editarea_preferences['ALLOW_TOGGLE']}},language: "en",syntax: "{{=filetype}}",replace_tab_by_spaces: {{=editarea_preferences['REPLACE_TAB_BY_SPACES']}}, font_size: {{=editarea_preferences['FONT_SIZE']}}, fullscreen: {{=editarea_preferences['FULL_SCREEN']}}, display: "{{=editarea_preferences['DISPLAY']}}", show_line_colors: true, word_wrap: true, save_callback: "doClickSave" {{if filetype=='html':}},plugins: "zencoding"{{pass}} });
-</script>
-<script language="Javascript" type="text/javascript" src="{{=URL('static','js/ajax_editor.js')}}"></script>
-<script language="Javascript" type="text/javascript">
-jQuery(document).ready(function(){
-     setTimeout("keepalive('{{=URL('keepalive')}}')",10000);
 });
+
+// Close the selected tab
+jQuery(document).on('click', '#filesTab button[class="close"]', function (e) {
+	var tab_body   = jQuery(jQuery(this).parent().attr("href"));  // it should be a div
+	var tab_header = jQuery(this).parent().parent();              // it should be a li
+
+	if (tab_header.hasClass('active') === true) { 	//Set active an other tab
+		jQuery(tab_header).prev().children('a[data-toggle="tab"]').tab('show'); // Select first tab		
+	}
+	tab_header.remove(); //remove li of tab
+	tab_body.remove();   //remove li of tab
+});
+
+// Revert current file
+jQuery(document).on('click', '#revert', function (e) {
+	e.preventDefault();
+	load_file(jQuery(this).attr("href"));
+});
+// Restore current file
+jQuery(document).on('click', '#restore', function (e) {
+	e.preventDefault();
+	load_file(jQuery(this).attr("href"));
+});
+
+
+// open the selected file
+jQuery(document).on('click', 'a.editor_filelink', function (e) {
+	e.preventDefault();
+	var url = jQuery(this).attr("href");
+	load_file(url);
+});
+
+	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;
+		console.log('CodeMirror.connect()',winHeight() );
+		showing.CodeMirror.getScrollerElement().style.height = winHeight() + "px";
+	});
+	// must be here or break emmet/zencoding
+	CodeMirror.defaults.extraKeys["Ctrl-S"] = 
+		function(instance) {
+			doClickSave();};
+	CodeMirror.defaults.extraKeys["Ctrl-F11"]= 
+		function(instance) {
+			setFullScreen(instance, !isFullScreen(instance));};
+	CodeMirror.defaults.extraKeys["Tab"] = "indentMore";
+	CodeMirror.defaults.extraKeys["Esc"]=
+		function(instance) {
+			if (isFullScreen(instance)) {
+				setFullScreen(instance, false);};}
+
+	{{if len(request.args) > 1:}}
+		load_file('{{=URL(f='edit', args=request.args, vars=request.get_vars)}}');
+	{{pass}}
 </script>
-{{pass}}
 
 {{block sectionclass}}edit{{end}}
 
-<h2>{{=T('Editing file "%s"',filename)}}</h2>
 
-{{if functions:}}
-  <p class="formfield well well-small">
-<span style="text-align:left;" id="exposed">
-  {{=B(T('exposes:'))}} {{=XML(', '.join([A(f,_href=URL(a=app,c=controller,f=f)).xml() for f in functions]))}}
-</span>
-  {{if editviewlinks:}}<br/>
-  {{=B(T('edit views:'))}}
-  {{=XML(', '.join([v.xml() for v in editviewlinks]))}}
-  {{pass}}
-  </p>
-{{pass}}
 <div class='row-fluid'>
 <p class="right controls pull-right">
-  {{if filetype=='python':}}
-      {{=A(SPAN(T('toggle breakpoint')),
-           _value="breakpoint", _name="breakpoint",
-           _onclick="return doToggleBreakpoint('%s','%s://%s%s',null);" % (filename, 
-                request.env['wsgi_url_scheme'], request.env['http_host'],
-                URL(c='debug', f='toggle_breakpoint')),
-           _class="button special btn btn-inverse")}}
-  {{pass}}  
   {{=button(URL('design',args=request.vars.app if request.vars.app else request.args[0], anchor=request.vars.id), T('back'))}}
-  {{if edit_controller:}}
+  {{#if request.args[1]=='models':}}
-  {{=button(edit_controller, T('edit controller'))}}
-  {{pass}}
-  {{if view_link:}}
-  {{=button(view_link, T('try view'))}}
-  {{pass}}
-  {{if request.args[1]=='models':}}
   <a class="button btn" href="http://www.web2py.com/sqldesigner" target="_blank"><span>{{=T('online designer')}}</span></a>
-  {{pass}}
+  {{#pass}}
   <a class="button btn" href="http://www.web2py.com/examples/static/epydoc/index.html" target="_blank"><span>{{=T('docs')}}</span></a>
 </p>
 </div>
 <div id="editor_area" class="row-fluid">
-
+	<ul class="nav nav-list span2 well" rel="pagebookmark" id="filelist">
-<ul class="nav nav-list span2 well" rel="pagebookmark">
+	{{dirs=[{'name':'models', 'reg':'.*\.py$'}, 
-{{dirs=[{'name':'models', 'reg':'.*\.py$'}, 
+		{'name':'controllers', 'reg':'.*\.py$'},
-	{'name':'controllers', 'reg':'.*\.py$'},
+		{'name':'views', 'reg':'[\w/\-]+(\.\w+)+$'},
-	{'name':'views', 'reg':'[\w/\-]+(\.\w+)+$'},
+		{'name':'modules', 'reg':'.*\.py$'},
-	{'name':'modules', 'reg':'.*\.py$'},
+		{'name':'private', 'reg': '[^\.#].*'}]}}
-	{'name':'private', 'reg': '[^\.#].*'}]}}
+	{{for dir in dirs:}}
-{{for dir in dirs:}}
+	<li class="nav-header component" onclick="collapse('{{="%s_files" % dir['name']}}');">{{=dir['name']}}</li>
-<li class="nav-header component" onclick="collapse('{{="%s_files" % dir['name']}}');">{{=dir['name']}}</li>
+	<li id="{{="%s_files" % dir['name']}}">
-<li id="{{="%s_files" % dir['name']}}">
+		<ul class="nav nav-list">	
-	<ul class="nav nav-list">	
+		{{for f in listfiles(app, dir['name'], regexp=dir['reg'] ):}}
-	{{for f in listfiles(app, dir['name'], regexp=dir['reg'] ):}}
+		{{id="%s__" % dir['name'] + f.replace('.','__')}}
-	{{id="%s__" % dir['name'] + f.replace('.','__')}}
+		{{current_file = request.args(len(request.args) - 1)}} 
-	{{current_file = request.args(len(request.args) - 1)}} 
+		<li class="{{#='active' if current_file==f else ''}}">
-	<li class="{{='active' if current_file==f else ''}}">
+		{{=editfile(dir['name'], f, dict(id=id))}}	
-	{{=editfile(dir['name'], f, dict(id=id))}}	
+		</li>
-	</li>
-	{{pass}}
-	</ul>
-</li>
-{{pass}}	
-</ul>
-
-  <form action="{{=URL('edit',args=filename)}}" method="post" name="editform" id="editform" class="span10">
-	<div class="editor-bar-column">
-		<label>{{=T('Save file:')}}</label>
-		<a value="save" name="save" onclick="return doClickSave();" class="icon saveicon" style="background-image: -webkit-linear-gradient(top,white,#E6E6E6);">
-		{{=IMG(_src=URL('static', 'images/save_icon.png'), _alt=T('Save'))}}
-		</a>
-	</div>
-	<div class="editor-bar-column">
-		<div class="row-fluid">
-			<div class="span7">
-				<label>{{=T('Saved file hash:')}}</label>
-				<input type="input" name="file_hash" value="{{=file_hash}}" class="input-long uneditable-input" readonly="readonly"/>
-			</div>
-			<div class="span5">
-				<label>{{=T('Last saved on:')}}</label>
-				<input type="input" name="saved_on" value="{{=saved_on}}" class="input-normal uneditable-input" readonly="readonly"/>
-			</div>
-		</div>
-	</div>
-    {{if TEXT_EDITOR == 'amy':}}
-    <textarea style="width: auto; height:400px;direction:ltr;" rows="58" cols="100" -amy-enabled="true" id="body" name="data">{{=data}}</textarea>
-    <script>window.eamy = eamy;</script>
-    {{elif TEXT_EDITOR == 'codemirror':}}
-    <textarea style="width: auto; height:auto; direction:ltr;" id="body" name="data">{{=data}}</textarea>
-    <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";
-      });
-      // must be here or break emmet/zencoding
-      CodeMirror.defaults.extraKeys["Ctrl-S"] = 
-        function(instance) {doClickSave();};
-      CodeMirror.defaults.extraKeys["Ctrl-F11"]= 
-        function(instance) {
-          setFullScreen(instance, !isFullScreen(instance));};
-      {{if filetype=='python':}}      
-      CodeMirror.defaults.extraKeys["Tab"] = "indentMore";
-      {{pass}}
-      CodeMirror.defaults.extraKeys["Esc"]=
-        function(instance) {
-          if (isFullScreen(instance)) 
-             setFullScreen(instance, false);};
-      var cm_opts = {
-        {{if filetype=='html':}}
-          mode : "text/html", lineNumbers : true, 
-          profile: 'xhtml',
-        {{else:}}
-          mode: { name: '{{=filetype}}'{{if filetype=='python':}},version: 2,singleLineStringErrors: false{{pass}} },
-        {{pass}}
-        lineNumbers: true,
-        indentUnit: 4,
-        theme: "web2py",
-        tabMode: "shift",
-        lineWrapping: true,
-        {{if TEXT_EDITOR_KEYBINDING == 'emacs':}}keyMap: "emacs",{{pass}}
-        {{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");},
-        onGutterClick: function(cm, n) {
-            sel = {start: n, end: n, data: ''};
-            doToggleBreakpoint({{=XML("'%s','%s://%s%s',sel" % (filename, 
-                request.env['wsgi_url_scheme'], request.env['http_host'],
-                URL(c='debug', f='toggle_breakpoint')))}});
-          }
-      };
-      var editor = CodeMirror.fromTextArea(
-         document.getElementById("body"),cm_opts);
-      var hlLine = editor.setLineClass(0, "activeline");
-      window.mirror = editor;
-      jQuery(function(){jQuery('.CodeMirror-scroll').css("height","auto").css("overflow-x","auto");});
-    </script>
-    {{elif TEXT_EDITOR == 'ace':}}
-    <div id="editor" style="height: 500px; width: auto; position: relative">{{=data}}</div>
-<script>
-window.onload = function() {
-    var editor = ace.edit("editor");
-    editor.setTheme(theme);
-    editor.getSession().setMode(new mode());
-    if (keybinding) {
-        editor.setKeyboardHandler(keybinding);
-    }
-	editor.commands.addCommand({
-		name: 'saveFile',
-		bindKey: {
-			win: 'Ctrl-S',
-			mac: 'Ctrl-S',
-			sender: 'editor|cli'
-		},
-		exec: function(env, args, request) {
-			doClickSave();
-		}
-	});
-    window.ace_editor = editor;
-};
-</script>
-    {{else:}}
-    <textarea cols="80" rows="25" id="body" style="direction:ltr;" name="data">{{=data}}</textarea>
-    <script>window.textarea = area.textarea;</script>
-    {{pass}}
-	<div class="editor-bar-bottom" style="margin-top:9px;">
-		<button class="editbutton btn" onclick="window.location.reload(); return false">{{=T('restore')}}</button>
-		{{=T('currently saved or')}}
-		<button class="editbutton btn" type="submit" name="revert">{{=T('revert')}}</button>
-		{{=T('to  previous version.')}}
-	</div>
-    <br/>
-  </form>
-</div>
-
-<div class="row-fluid">
-	<div class="help span4 alert alert-block alert-info">
-		{{if TEXT_EDITOR=='edit_area' and filetype=='html':}}
-		<h3>{{=T('Key bindings for ZenCoding Plugin')}}</h3>
-		<ul class="keybindings unstyled">
-			{{=shortcut('Ctrl+S', T('Save via Ajax'))}}
-			{{=shortcut('Ctrl+,', T('Expand Abbreviation'))}}
-			{{=shortcut('Ctrl+M', T('Match Pair'))}}
-			{{=shortcut('Ctrl+H', T('Wrap with Abbreviation'))}}
-			{{=shortcut('Shift+Ctrl+M', T('Merge Lines'))}}
-			{{=shortcut('Ctrl+Shift+←', T('Previous Edit Point'))}}
-			{{=shortcut('Ctrl+Shift+→', T('Next Edit Point'))}}
-			{{=shortcut('Ctrl+Shift+↑', T('Go to Matching Pair'))}}
-		</ul>
-		{{elif TEXT_EDITOR == 'codemirror' and filetype=='html':}}
-		<h3>{{=T('Key bindings for ZenCoding Plugin')}}</h3>
-		<ul class="keybindings unstyled">
-			{{=shortcut('Ctrl+S', T('Save via Ajax'))}}
-			{{=shortcut('Ctrl+F11', T('Toggle Fullscreen'))}}
-			{{=shortcut('Ctrl-F / Cmd-F', T('Start searching'))}}
-			{{=shortcut('Ctrl-G / Cmd-G', T('Find Next'))}}
-			{{=shortcut('Shift-Ctrl-G / Shift-Cmd-G', T('Find Previous'))}}
-			{{=shortcut('Shift-Ctrl-F / Cmd-Option-F', T('Replace'))}}
-			{{=shortcut('Shift-Ctrl-R / Shift-Cmd-Option-F', T('Replace All'))}}
-			{{=shortcut('Tab', T('Expand Abbreviation'))}}
-		</ul>
-		{{elif TEXT_EDITOR == 'codemirror':}}
-		<h3>{{=T("Key bindings")}}</h3>
-		<ul class="keybindings unstyled">
-			{{=shortcut('Ctrl+S', T('Save via Ajax'))}}
-			{{=shortcut('Ctrl+F11', T('Toggle Fullscreen'))}}
-			{{=shortcut('Ctrl-F / Cmd-F', T('Start searching'))}}
-			{{=shortcut('Ctrl-G / Cmd-G', T('Find Next'))}}
-			{{=shortcut('Shift-Ctrl-G / Shift-Cmd-G', T('Find Previous'))}}
-			{{=shortcut('Shift-Ctrl-F / Cmd-Option-F', T('Replace'))}}
-			{{=shortcut('Shift-Ctrl-R / Shift-Cmd-Option-F', T('Replace All'))}}
-		</ul>
-		{{else:}}
-		<h3>{{=T("Key bindings")}}</h3>
-		<ul class="keybindings unstyled">
-			{{=shortcut('Ctrl+S', T('Save via Ajax'))}}
-		</ul>
 		{{pass}}
+		</ul>
+	</li>
+	{{pass}}	
+	</ul>
+	<div class="span10" id="edit_placeholder">
+		<ul class="nav nav-tabs " id="filesTab">
+		</ul>
+		<div id="myTabContent" class="tab-content">
+		</div>
 	</div>
 </div>
 <!-- end "edit" block -->

applications/admin/views/default/edit_js.html

@@ -0,0 +1,116 @@
+{{def shortcut(combo, description):
+    return XML('<li><span class="teletype-text">%s</span><span>%s</span></li>' % (combo, description))
+
+##TODO
+#eseguire dolistbreakpoint ogni volta che si fa una load
+}}
+
+<form action="{{=URL('edit', args=filename)}}" method="post" name="editform" id="editform" class="form-inline">
+<div class="span12 well well-small">
+	<label class="">{{=T('Save file:')}}</label>
+	<a value="save" title="{{=T('Save file: %s', filename)}}" href="#" name="save" onclick="return doClickSave();" class="icon saveicon" style="background-image: -webkit-linear-gradient(top,white,#E6E6E6);">{{=IMG(_src=URL('static', 'images/save_icon.png'), _alt=T('Save'))}}</a>
+	<label class="">{{=T('Saved file hash:')}}</label>
+	<input type="input" name="file_hash" value="{{=file_hash}}" class="input-long uneditable-input" readonly="readonly"/>
+	<label>{{=T('Last saved on:')}}</label>
+	<input type="input" name="saved_on" value="{{=saved_on}}" class="input-normal uneditable-input" readonly="readonly"/>
+{{if filetype=='python':}}
+      {{=A(SPAN(T('toggle breakpoint')),
+           _value="breakpoint", _name="breakpoint",
+           _onclick="return doToggleBreakpoint('%s','%s://%s%s',null);" % (filename, 
+                request.env['wsgi_url_scheme'], request.env['http_host'],
+                URL(c='debug', f='toggle_breakpoint')),
+           _class="button special btn btn-inverse")}}
+{{pass}} 
+{{if view_link:}}
+	{{=button(view_link, T('try view'))}}
+{{pass}}
+<p class="formfield">
+{{if functions:}}
+	<span style="text-align:left;" id="exposed">
+	{{=B(T('exposes:'))}} {{=XML(', '.join([A(f,_target="_blank", _href=URL(a=app,c=controller,f=f)).xml() for f in functions]))}}
+	</span>
+{{if editviewlinks:}}<br/>
+	{{=B(T('edit views:'))}}
+	{{=XML(', '.join([v.xml() for v in editviewlinks]))}}
+{{pass}}
+{{pass}}
+{{if edit_controller:}}
+	{{=B(T('edit controller:'))}}
+	{{=A(request.args[2]+'.py', _class="editor_filelink", _target="_blank", _href=edit_controller)}}
+{{pass}}
+</p>
+</div>
+
+    <textarea style=" height:100%; direction:ltr;" id="textarea_{{=id}}" class="input-block-level" name="data" >{{=data}}</textarea>
+    <script>
+	var cm_opts = {
+	{{if filetype=='html':}}
+		mode : "text/html", lineNumbers : true, 
+		profile: 'xhtml',
+	{{else:}}
+		mode: { name: '{{=filetype}}'{{if filetype=='python':}},version: 2,singleLineStringErrors: false{{pass}} },
+	{{pass}}
+		lineNumbers: true,
+        indentUnit: 4,
+        theme: "web2py",
+        tabMode: "shift",
+        lineWrapping: true,
+        {{if TEXT_EDITOR_KEYBINDING == 'emacs':}}keyMap: "emacs",{{pass}}
+        {{if TEXT_EDITOR_KEYBINDING == 'vi':}}keyMap: "vim",{{pass}}
+        matchBrackets: true,
+        autofocus: false,
+		height: "350px",
+        onCursorActivity: function() {
+            editor.setLineClass(hlLine, null, null);
+            hlLine = editor.setLineClass(editor.getCursor().line, null, "activeline");},
+        onGutterClick: function(cm, n) {
+            sel = {start: n, end: n, data: ''};
+            doToggleBreakpoint({{=XML("'%s','%s://%s%s',sel" % (filename, 
+                request.env['wsgi_url_scheme'], request.env['http_host'],
+                URL(c='debug', f='toggle_breakpoint')))}});
+		}
+      };
+		var editor = CodeMirror.fromTextArea(document.getElementById("textarea_{{=id}}"),cm_opts);
+		// save the editor as textarea data attribute	
+		jQuery("#{{=id}} textarea").data('editor', editor);
+		var hlLine = editor.setLineClass(0, "activeline");
+		window.mirror = editor; 	//backward compatibility
+	</script>
+    
+	<div class="editor-bar-bottom" style="margin-top:9px;">
+		<a class="editbutton btn" href="{{=URL('edit', args=request.args, vars={'restore':True})}}" id="restore">{{=T('restore')}}</a>
+		{{=T('currently saved or')}}
+		<a class="editbutton btn" href="{{=URL('edit', args=request.args, vars={'revert':True})}}" id="revert">{{=T('revert')}}</a>
+		{{=T('to  previous version.')}}
+	</div>
+    <br/>
+  </form>
+
+<div class="span10 row-fluid">
+	<div class="help span4 alert alert-block alert-info">
+		{{if TEXT_EDITOR == 'codemirror' and filetype=='html':}}
+		<h3>{{=T('Key bindings for ZenCoding Plugin')}}</h3>
+		<ul class="keybindings unstyled">
+			{{=shortcut('Ctrl+S', T('Save via Ajax'))}}
+			{{=shortcut('Ctrl+F11', T('Toggle Fullscreen'))}}
+			{{=shortcut('Ctrl-F / Cmd-F', T('Start searching'))}}
+			{{=shortcut('Ctrl-G / Cmd-G', T('Find Next'))}}
+			{{=shortcut('Shift-Ctrl-G / Shift-Cmd-G', T('Find Previous'))}}
+			{{=shortcut('Shift-Ctrl-F / Cmd-Option-F', T('Replace'))}}
+			{{=shortcut('Shift-Ctrl-R / Shift-Cmd-Option-F', T('Replace All'))}}
+			{{=shortcut('Tab', T('Expand Abbreviation'))}}
+		</ul>
+		{{elif TEXT_EDITOR == 'codemirror':}}
+		<h3>{{=T("Key bindings")}}</h3>
+		<ul class="keybindings unstyled">
+			{{=shortcut('Ctrl+S', T('Save via Ajax'))}}
+			{{=shortcut('Ctrl+F11', T('Toggle Fullscreen'))}}
+			{{=shortcut('Ctrl-F / Cmd-F', T('Start searching'))}}
+			{{=shortcut('Ctrl-G / Cmd-G', T('Find Next'))}}
+			{{=shortcut('Shift-Ctrl-G / Shift-Cmd-G', T('Find Previous'))}}
+			{{=shortcut('Shift-Ctrl-F / Cmd-Option-F', T('Replace'))}}
+			{{=shortcut('Shift-Ctrl-R / Shift-Cmd-Option-F', T('Replace All'))}}
+		</ul>
+		{{pass}}
+	</div>
+</div>