clean the inline editor js code (namespace toolbar functions, ...etc)

doc/TODO

@@ -12,10 +12,10 @@ BOARD:
   x locale
   x store page toolbar status in cookie
   x trim short text content
-  - namespace js functions
+  x namespace js functions
   - editable elements should wrap a tag: div, h1, ...etc (default span)
   - also save contents ?
-  - edit images (upload new ones, ...etc)
+  - edit images (upload new ones, ...etc) => wait for aloha or send them an email ?
   - google analytics tags (only visible in non edit mode)
 - global regions: keyword in editable element (http://www.mongodb.org/display/DOCS/Updating)
 - create a repo for a tool "a la" vision

lib/locomotive/liquid/tags/inline_editor.rb

@@ -38,6 +38,7 @@ module Liquid
 
             output << %{
               <script src="/javascripts/admin/rails.js" type="text/javascript"></script>
+              <script type="text/javascript" src="/javascripts/admin/inline_editor_toolbar.js"></script>
               <script type="text/javascript" src="/javascripts/admin/inline_editor.js"></script>
               <link href="/stylesheets/admin/inline_editor.css" media="screen" rel="stylesheet" type="text/css" />
             }

public/javascripts/admin/inline_editor.js

@@ -1,81 +1,3 @@
-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());
-  $('#page-toolbar li.save, #page-toolbar li.cancel, #page-toolbar li.sep:eq(1)').show();
-
-  var element = $(aEvent.editable.obj[0]);
-  // var id = element.attr('data-element-id');
-  var index = element.attr('data-element-index');
-
-  // console.log('id = ' + id + ', index = ' + index);
-
-  // if ($('#page-toolbar form editable-' + index).length > 0) return;
-  //
-  // $('#page-toolbar form').append("\
-  //   <input id='editable-" + index +"' class='auto' type='hidden' name='page[editable_elements_attributes][" + index + "][id]' value='" + id + "' />\
-  //   <input class='auto' type='hidden' name='page[editable_elements_attributes][" + index + "][_index]' value='" + index + "' />\
-  //   <input class='auto' type='hidden' name='page[editable_elements_attributes][" + index + "][content]' />\
-  // ");
-
-  // $('#page-toolbar form input:last').val(aEvent.editable.getContents());
-
-  var input = $('#page-toolbar form #editable-' + index);
-
-  input.attr('name', input.attr('name').replace('_index', 'content'));
-  input.val(aEvent.editable.getContents().replace(/^\s*/, "").replace(/\s*$/, ""));
-
-  $('#page-toolbar').css('right', 0);
-  $('#page-toolbar .drawer a').removeClass('off');
-
-  // foo = $(this);
-
-  // $(foo.editable.obj[0])
-
-  // console.log($(this).attr('data-element-id'));
-
-  // bar = a;
-  // 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), #page-toolbar li.spinner').hide();
-}
-
 if (typeof GENTICS != 'undefined') {
   GENTICS.Aloha.settings = {
     errorhandling : false,
@@ -106,120 +28,15 @@ if (typeof GENTICS != 'undefined') {
     }
   };
 
-  GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, "editableDeactivated", prepareForm);
+  GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableDeactivated', InlineEditorToolbar.updateForm);
-}
-
-var editingMode = false;
-
-var buildPageToolbar = function() {
-  var fullpath = $('meta[name=page-fullpath]').attr('content');
-  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'"
-
-  var formContentHTML = "<input type='hidden' name='_method' value='put' />";
-  for (var i = 0; i < nbElements; i++) {
-    formContentHTML += "<input class='auto' id='editable-" + i + "' type='hidden' name='page[editable_elements_attributes][" + i + "][_index]' value='' />";
-  }
-
-  $('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>" + translations['home'] + "</span></a></li>\
-      <li class='sep'><span>&nbsp;</span></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>" + translations['back'] + "</span></a></li>\
-    </ul>\
-    <form action='" + showPageUrl + "' accept-charset='UTF-8' method='post'>\
-      " + formContentHTML + "\
-    </form>\
-  </div>");
-
-  // build the form
-  $('#page-toolbar form').live('submit', function (e) {
-    $(this).callRemote();
-    e.stopPropagation();
-    e.preventDefault();
-  }).bind('ajax:complete', function() {
-    // console.log('ajax:complete');
-    resetForm();
-  }).bind('ajax:loading', function() {
-    // console.log('ajax:failure');
-    displaySpinner();
-  }).bind('ajax:failure', function() {
-    // console.log('ajax:failure');
-    resetForm();
-  });
-
-  // events: save
-  $('#page-toolbar').find('.save').click(function(e) {
-    $('#page-toolbar form').submit();
-    e.preventDefault();
-  });
-
-  // events: edit
-  $('#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';
-  });
-
-  // events: cancel
-  $('#page-toolbar').find('.cancel').click(function(e) {
-    e.preventDefault(); e.stopPropagation();
-    window.location.href = window.location.href;
-  });
-
-  // events: back
-  $('#page-toolbar').find('.back').click(function(e) {
-    e.preventDefault(); e.stopPropagation();
-    window.location.href = fullpath;
-  });
-
-  // drawer
-  $('#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');
+  InlineEditorToolbar.initialize();
 
-  buildPageToolbar();
+  if (InlineEditorToolbar.editingMode) {
-
+    GENTICS.Aloha.settings['i18n'] = { 'current': InlineEditorToolbar.locale };
-  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': locale };
 
     // add 'edit' at the end of each url of the page
     $('a').each(function() {
@@ -232,30 +49,16 @@ jQuery(document).ready(function($) {
     });
 
     // handle editable long text
-    $('.editable-long-text').each(function(index) {
+    $('.editable-long-text').aloha();
-
-      var self = $(this);
-      // var postId = self.attr("data-id");
-      // var postField = self.attr("data-field");
-
-      // add callbacks to update post data fields:
-      self.aloha();
-    });
 
     // handle editable short text
     $('.editable-short-text').each(function() {
-      var self = $(this);
+      var link = $(this).parents('a').eq(0);
-
+      if (link.size() == 1) { // disable click event and replace it by double click instead
-      var link = self.parents('a');
-      if (link.size() == 1) {
-        link = link.eq(0);
-
-        // disable click event and replace it by double click instead
         link.click(function(e) { e.stopPropagation(); e.preventDefault(); });
         link.dblclick(function(e) { window.location.href = link.attr('href'); });
       }
-
+      $(this).aloha();
-      self.aloha();
     });
   }
 });

public/javascripts/admin/inline_editor_toolbar.js

@@ -0,0 +1,167 @@
+var InlineEditorToolbar = {
+
+  element: null, // reference to the toolbar element
+
+  form: null, // reference to the form used to post changes
+
+  editingMode: false, // true means that Aloha should be enabled
+
+  drawerButton: null,
+
+  locale: 'en', // default locale
+
+  initialize: function() {
+    this.editingMode = window.location.href.match(/\/edit$/) != null;
+    this.locale = $('meta[name=locale]').attr('content');
+
+    this._buildHTML();
+
+    this.element = $('#page-toolbar');
+    this.form = this.element.find('form');
+    this.drawerButton = this.element.find('.drawer a');
+
+    this._bindEvents();
+
+    if ($.cookie('ie_toolbar_off') == '1') this.hide(0, false);
+  },
+
+  toggle: function(animate) {
+    var duration = (typeof animate == 'undefined') || animate == true ? 300 : 0;
+
+    if (this.drawerButton.hasClass('off')) this.show(duration); else this.hide(duration);
+  },
+
+  show: function(duration, withCookie) {
+    var self = this;
+
+    this.element.animate({ 'right': 0 }, duration, function() {
+      self.drawerButton.removeClass('off');
+      if ((typeof withCookie == 'undefined') || withCookie == true)
+        $.cookie('ie_toolbar_off', '0');
+    });
+  },
+
+  hide: function(duration, withCookie) {
+    var self = this;
+    var max = this.element.width() - 17;
+
+    this.element.animate({ 'right': -max }, duration, function() {
+      self.drawerButton.addClass('off');
+      if ((typeof withCookie == 'undefined') || withCookie == true)
+        $.cookie('ie_toolbar_off', '1');
+    });
+  },
+
+  updateForm: function(jEvent, aEvent) {
+    InlineEditorToolbar.element.find('li.save, li.cancel, li.sep:eq(1)').show();
+    InlineEditorToolbar.element.find('')
+
+    var editableObj = $(aEvent.editable.obj[0]);
+    var index = editableObj.attr('data-element-index');
+    var input = InlineEditorToolbar.form.find('#editable-' + index);
+
+    input.attr('name', input.attr('name').replace('_index', 'content'));
+    input.val(aEvent.editable.getContents().replace(/^\s*/, "").replace(/\s*$/, ""));
+
+    InlineEditorToolbar.show(true, false);
+  },
+
+  displaySpinner: function() {
+    this.element.find('li.save, li.cancel, li.sep:eq(1)').hide();
+    this.element.find('.spinner').show();
+  },
+
+  resetForm: function() {
+    this.form.find('input.auto').each(function() {
+      $(this).attr('name', $(this).attr('name').replace('content', '_index'));
+      $(this).val('');
+    });
+
+    this.element.find('li.save, li.cancel, li.sep:eq(1), li.spinner').hide();
+  },
+
+  /* ___ internal methods ___ */
+
+  _buildHTML: function() {
+    var labels = this._translations[this.locale];
+
+    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 formContentHTML = "<input type='hidden' name='_method' value='put' />";
+    for (var i = 0; i < nbElements; i++) {
+      formContentHTML += "<input class='auto' id='editable-" + i + "' type='hidden' name='page[editable_elements_attributes][" + i + "][_index]' value='' />";
+    }
+
+    $('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>" + labels['home'] + "</span></a></li>\
+        <li class='sep'><span>&nbsp;</span></li>\
+        <li class='link edit' style='" + (this.editingMode ? 'display: none' : '') + "'><a href='#'><span>" + labels['edit'] + "</span></a></li>\
+        <li class='link save' style='display: none'><a href='#'><span>" + labels['save'] + "</span></a></li>\
+        <li class='link cancel' style='display: none'><a href='#'><span>" + labels['cancel'] + "</span></a></li>\
+        <li class='link spinner' style='display: none'><a href='#'><span><img src='/images/admin/form/spinner.gif' /><em>" + labels['saving'] + "</em></span></a></li>\
+        <li class='sep' style='display: none'><span>&nbsp;</span></li>\
+        <li class='link back' style='" + (this.editingMode ? '' : 'display: none') + "'><a href='#'><span>" + labels['back'] + "</span></a></li>\
+      </ul>\
+      <form action='" + showPageUrl + "' accept-charset='UTF-8' method='post'>\
+        " + formContentHTML + "\
+      </form>\
+    </div>");
+  },
+
+  _bindEvents: function() {
+    var self = this;
+    var fullpath = $('meta[name=page-fullpath]').attr('content');
+
+    this.form.live('submit', function (e) { $(this).callRemote(); e.stopPropagation(); e.preventDefault();
+    }).bind('ajax:complete', function() { self.resetForm();
+    }).bind('ajax:loading', function() { self.displaySpinner();
+    }).bind('ajax:failure', function() { self.resetForm();
+    });
+
+    this.element.find('ul li a').click(function(e) {
+      var classArray = $(this).parent().attr('class').split(' ');
+      switch(classArray[1] || classArray[0]) {
+        case 'edit': // passing in editing mode
+          var url = window.location.href.replace(/\/$/, '/index').replace('#', '');
+          window.location.href = url + '/edit'; break;
+
+        case 'save': // saving changes
+          self.form.submit(); break;
+
+        case 'cancel': // reload the page
+          window.location.href = window.location.href; break;
+
+        case 'back': // back to the non edition mode
+          window.location.href = fullpath; break;
+
+        case 'drawer': // expand / shrink toolbar
+          self.toggle(); break;
+      }
+
+      e.preventDefault(); e.stopPropagation();
+    });
+  },
+
+  _translations: {
+    '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'
+    }
+  }
+};