tiny patch for aloah-editor (span behaves like b tags) + enhance inline editor js (locale, spinner when saving, better ui, ...etc)

doc/TODO

@@ -1,20 +1,23 @@
 BOARD:
 
 - inline editing (http://www.aloha-editor.com/wiki/index.php/Aloha_PHP_Example)
-  - editable elements should wrap a tag: div, h1, ...etc (default span)
-  - save automatically (callback) => store modifications
-  - admin buttons
-    - edit page
-    - save / cancel
-    - back to back-office => admin settings of the page
-    - duplicate page ?
+  x spinner
+  x save automatically (callback) => store modifications
+  x admin buttons
+    x edit page
+    x save / cancel
+    x back to back-office => admin settings of the page
+    (- duplicate page ?)
     (- super bonus statistics)
+  x locale
+  x store page toolbar status in cookie
+  x trim short text content
+  - namespace js functions
+  - editable elements should wrap a tag: div, h1, ...etc (default span)
   - also save contents ?
   - edit images (upload new ones, ...etc)
   - google analytics tags (only visible in non edit mode)
-  - locale
-  - trim short text content
-- global regions: keyword in editable element
+- global regions: keyword in editable element (http://www.mongodb.org/display/DOCS/Updating)
 - create a repo for a tool "a la" vision
 - write my first tutorial about locomotive
 - add images / files inside long text element (back-office side at first ?)

lib/locomotive/liquid/tags/inline_editor.rb

@@ -6,7 +6,7 @@ module Liquid
         def render(context)
           if context.registers[:current_admin]
             output = %{
-              <meta name="locale" content="#{I18n.locale}" />
+              <meta name="locale" content="#{context.registers[:current_admin].locale}" />
               <meta name="page-fullpath" content="/#{context.registers[:page].fullpath}" />
               <meta name="edit-page-url" content="#{context.registers[:controller].send(:edit_admin_page_url, context.registers[:page])}" />
             }
@@ -32,6 +32,7 @@ module Liquid
             else
               output << %{
                 <script src="/javascripts/admin/jquery.js" type="text/javascript"></script>
+                <script src="/javascripts/admin/plugins/cookie.js" type="text/javascript"></script>
               }
             end
 

public/javascripts/admin/aloha/VERSION.txt

@@ -1,2 +1,2 @@
 nightly
-2010-09-03 00:03:33
+2010-09-05 15:50:06

public/javascripts/admin/inline_editor.js

@@ -1,6 +1,28 @@
 var foo = bar = null;
+
+var locale = 'en';
+
 // var foo = null;
 
+var allTranslations = {
+  'en': {
+    'home': 'admin',
+    'edit': 'edit',
+    'save': 'save',
+    'cancel': 'cancel',
+    'back': 'edition done',
+    'saving': 'saving'
+  },
+  'fr': {
+    'home': 'admin',
+    'edit': 'editer',
+    'save': 'sauver',
+    'cancel': 'annuler',
+    'back': 'fin mode edition',
+    'saving': 'sauvegarde en cours'
+  }
+}
+
 var prepareForm = function(jEvent, aEvent) {
   // console.log('foo !!!');
   // console.log(ui.editable.getContents());
@@ -25,9 +47,10 @@ var prepareForm = function(jEvent, aEvent) {
   var input = $('#page-toolbar form #editable-' + index);
 
   input.attr('name', input.attr('name').replace('_index', 'content'));
-  input.val(aEvent.editable.getContents());
-
+  input.val(aEvent.editable.getContents().replace(/^\s*/, "").replace(/\s*$/, ""));
 
+  $('#page-toolbar').css('right', 0);
+  $('#page-toolbar .drawer a').removeClass('off');
 
   // foo = $(this);
 
@@ -39,13 +62,18 @@ var prepareForm = function(jEvent, aEvent) {
   // foo = ui;
 }
 
+var displaySpinner = function() {
+  $('#page-toolbar li.save, #page-toolbar li.cancel, #page-toolbar li.sep:eq(1)').hide();
+  $('#page-toolbar .spinner').show();
+};
+
 var resetForm = function() {
   $('#page-toolbar form input.auto').each(function() {
     $(this).attr('name', $(this).attr('name').replace('content', '_index'));
     $(this).val('');
   });
 
-  $('#page-toolbar li.save, #page-toolbar li.cancel, #page-toolbar li.sep:eq(1)').hide();
+  $('#page-toolbar li.save, #page-toolbar li.cancel, #page-toolbar li.sep:eq(1), #page-toolbar li.spinner').hide();
 }
 
 if (typeof GENTICS != 'undefined') {
@@ -88,6 +116,7 @@ var buildPageToolbar = function() {
   var showPageUrl = $('meta[name=page-url]').attr('content');
   var editPageUrl = $('meta[name=edit-page-url]').attr('content');
   var nbElements = parseInt($('meta[name=page-elements-count]').attr('content'));
+  var translations = allTranslations[locale];
 
   editingMode = typeof showPageUrl != 'undefined';
   var style = editingMode ? '' : "style='display: none'"
@@ -100,13 +129,14 @@ var buildPageToolbar = function() {
   $('body').prepend("<div id='page-toolbar'>\
     <ul>\
       <li class='drawer'><a href='#'><span>&nbsp;</span></a></li>\
-      <li class='link home'><a href='" + editPageUrl + "'><span>admin</span></a></li>\
+      <li class='link home'><a href='" + editPageUrl + "'><span>" + translations['home'] + "</span></a></li>\
       <li class='sep'><span>&nbsp;</span></li>\
-      <li class='link edit' style='" + (editingMode ? 'display: none' : '') + "'><a href='#'><span>edit</span></a></li>\
-      <li class='link save' style='display: none'><a href='#'><span>save</span></a></li>\
-      <li class='link cancel' style='display: none'><a href='#'><span>cancel</span></a></li>\
+      <li class='link edit' style='" + (editingMode ? 'display: none' : '') + "'><a href='#'><span>" + translations['edit'] + "</span></a></li>\
+      <li class='link save' style='display: none'><a href='#'><span>" + translations['save'] + "</span></a></li>\
+      <li class='link cancel' style='display: none'><a href='#'><span>" + translations['cancel'] + "</span></a></li>\
+      <li class='link spinner' style='display: none'><a href='#'><span><img src='/images/admin/form/spinner.gif' /><em>" + translations['saving'] + "</em></span></a></li>\
       <li class='sep' style='display: none'><span>&nbsp;</span></li>\
-      <li class='link back' style='" + (editingMode ? '' : 'display: none') + "'><a href='#'><span>back</span></a></li>\
+      <li class='link back' style='" + (editingMode ? '' : 'display: none') + "'><a href='#'><span>" + translations['back'] + "</span></a></li>\
     </ul>\
     <form action='" + showPageUrl + "' accept-charset='UTF-8' method='post'>\
       " + formContentHTML + "\
@@ -119,15 +149,16 @@ var buildPageToolbar = function() {
     e.stopPropagation();
     e.preventDefault();
   }).bind('ajax:complete', function() {
-    console.log('ajax:complete');
+    // console.log('ajax:complete');
     resetForm();
+  }).bind('ajax:loading', function() {
+    // console.log('ajax:failure');
+    displaySpinner();
   }).bind('ajax:failure', function() {
-    console.log('ajax:failure');
+    // console.log('ajax:failure');
     resetForm();
   });
 
-
-
   // events: save
   $('#page-toolbar').find('.save').click(function(e) {
     $('#page-toolbar form').submit();
@@ -138,6 +169,7 @@ var buildPageToolbar = function() {
   $('#page-toolbar').find('.edit').click(function() {
     url = window.location.href;
     if (url.charAt(url.length - 1) == '/') url += 'index';
+    url = url.replace('#', '');
     window.location.href =  url + '/edit';
   });
 
@@ -154,28 +186,40 @@ var buildPageToolbar = function() {
   });
 
   // drawer
-  $('#page-toolbar').find('.drawer a').eq(0).click(function() {
+  $('#page-toolbar .drawer a').eq(0).click(function(e) {
     var self = $(this);
     var max = $('#page-toolbar').width() - 17;
 
     if ($(this).hasClass('off'))
       $('#page-toolbar').animate({ 'right': 0 }, 300, function() {
         self.removeClass('off');
+        $.cookie('inline_editor_off', '0');
       });
     else
       $('#page-toolbar').animate({ 'right': -max }, 300, function() {
         self.addClass('off');
+        $.cookie('inline_editor_off', '1');
       });
+
+    e.stopPropagation(); e.preventDefault();
   });
 }
 
 jQuery(document).ready(function($) {
 
+  locale = $('meta[name=locale]').attr('content');
+
   buildPageToolbar();
 
+  if ($.cookie('inline_editor_off') == '1') {
+    var max = $('#page-toolbar').width() - 17;
+    $('#page-toolbar').css('right', -max);
+    $('#page-toolbar .drawer a').addClass('off');
+  }
+
   if (editingMode) {
     // set locale
-    GENTICS.Aloha.settings['i18n'] = { 'current': $('meta[name=locale]').attr('content') };
+    GENTICS.Aloha.settings['i18n'] = { 'current': locale };
 
     // add 'edit' at the end of each url of the page
     $('a').each(function() {

public/stylesheets/admin/formtastic_changes.css

@@ -401,7 +401,7 @@ form.formtastic fieldset ol li.file p.remove a:hover { text-decoration: underlin
 
 form.formtastic fieldset.language li.full span {
   margin: 0 20px;
-  font-size: 0.8em;
+  font-size: 1em;
   font-weight: bold;
 }
 

public/stylesheets/admin/inline_editor.css

@@ -35,12 +35,13 @@
 #page-toolbar ul li.copy a { background-position: 0 -63px; }
 #page-toolbar ul li.edit a { background-position: 0 -84px; }
 #page-toolbar ul li.back a { background-position: 0 -105px; }
+#page-toolbar ul li.spinner a { background-position: 0 -126px; }
 
 #page-toolbar ul li.link a span {
   display: block;
   background: transparent url('/images/admin/inline_editor/action-right.png') no-repeat right 0;
   height: 20px;
-  padding: 1px 14px 0 2px;
+  padding: 1px 10px 0 2px;
   text-shadow: 1px 1px 1px #000;
 }
 
@@ -63,6 +64,17 @@
   background-position: 0 -10px;
 }
 
+#page-toolbar ul li.spinner a {
+  padding-left: 24px;
+  position: relative;
+}
+
+#page-toolbar ul li.spinner a img {
+  position: absolute;
+  top: 3px;
+  left: 7px;
+}
+
 #page-toolbar ul li.sep { float: left; margin: 0 15px 0 10px; }
 
 #page-toolbar ul li.sep span {