saving editable text elements works

doc/TODO

@@ -13,6 +13,7 @@ BOARD:
   - 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
 - create a repo for a tool "a la" vision
 - write my first tutorial about locomotive

lib/locomotive/liquid/tags/inline_editor.rb

@@ -6,16 +6,17 @@ module Liquid
         def render(context)
           if context.registers[:current_admin]
             output = %{
+              <meta name="locale" content="#{I18n.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])}" />
-
-              <script src="/javascripts/admin/jquery.js" type="text/javascript"></script>
-              <script src="/javascripts/admin/rails.js" type="text/javascript"></script>
             }
 
             if context.registers[:inline_editor]
+              controller = context.registers[:controller]
+
               output << %{
-                <meta name="page-url" content="#{context.registers[:controller].send(:admin_page_url, context.registers[:page])}" />
+                <meta name="page-url" content="#{context.registers[:controller].send(:admin_page_url, context.registers[:page], :json)}" />
+                <meta name="page-elements-count" content="#{context.registers[:page].editable_elements.size}" />
 
                 <script type="text/javascript" src="/javascripts/admin/aloha/aloha.js"></script>
                 <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
@@ -24,9 +25,18 @@ module Liquid
                 <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Link/plugin.js"></script>
                 <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script>
               }
+
+              if controller.send(:protect_against_forgery?)
+                output << %(<meta name="csrf-param" content="#{Rack::Utils.escape_html(controller.send(:request_forgery_protection_token))}"/>\n<meta name="csrf-token" content="#{Rack::Utils.escape_html(controller.send(:form_authenticity_token))}"/>).html_safe
+              end
+            else
+              output << %{
+                <script src="/javascripts/admin/jquery.js" type="text/javascript"></script>
+              }
             end
 
             output << %{
+              <script src="/javascripts/admin/rails.js" type="text/javascript"></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" />
             }

lib/locomotive/mongoid/patches.rb

@@ -28,7 +28,6 @@ module Mongoid #:nodoc:
   end
 end
 
-
 # http://github.com/emk/mongoid/blob/503e346b1b7b250d682a12332ad9d5872f1575e6/lib/mongoid/atomicity.rb
 module Mongoid #:nodoc:
   module Atomicity #:nodoc:

public/javascripts/admin/inline_editor.js

@@ -1,8 +1,57 @@
+var foo = bar = null;
+// var foo = null;
+
+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());
+
+
+
+  // foo = $(this);
+
+  // $(foo.editable.obj[0])
+
+  // console.log($(this).attr('data-element-id'));
+
+  // bar = a;
+  // foo = ui;
+}
+
+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();
+}
+
 if (typeof GENTICS != 'undefined') {
   GENTICS.Aloha.settings = {
     errorhandling : false,
     ribbon: false,
-    "i18n": {"current": "en"},
     "plugins": {
       // "com.gentics.aloha.plugins.GCN": {
       //   "enabled": false
@@ -28,6 +77,8 @@ if (typeof GENTICS != 'undefined') {
       }
     }
   };
+
+  GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, "editableDeactivated", prepareForm);
 }
 
 var editingMode = false;
@@ -36,10 +87,16 @@ 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'));
 
   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>\
@@ -48,27 +105,55 @@ var buildPageToolbar = function() {
       <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='sep' style='display: none'><span>&nbsp;</span></li>\
       <li class='link back' style='" + (editingMode ? '' : 'display: none') + "'><a href='#'><span>back</span></a></li>\
     </ul>\
+    <form action='" + showPageUrl + "' accept-charset='UTF-8' method='post'>\
+      " + formContentHTML + "\
+    </form>\
   </div>");
 
-  // events
+  // 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: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';
     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').find('.drawer a').eq(0).click(function() {
     var self = $(this);
     var max = $('#page-toolbar').width() - 17;
@@ -89,11 +174,14 @@ jQuery(document).ready(function($) {
   buildPageToolbar();
 
   if (editingMode) {
+    // set locale
+    GENTICS.Aloha.settings['i18n'] = { 'current': $('meta[name=locale]').attr('content') };
+
     // add 'edit' at the end of each url of the page
     $('a').each(function() {
       var url = $(this).attr('href');
 
-      if (/^(www|http)/.exec(url) == null && /(\/edit)$/.exec(url) == null) {
+      if (url != '#' && /^(www|http)/.exec(url) == null && /(\/edit)$/.exec(url) == null) {
         if (url == '/') url = '/index';
         $(this).attr('href', url + '/edit');
       }
@@ -125,6 +213,5 @@ jQuery(document).ready(function($) {
 
       self.aloha();
     });
-
   }
 });

public/javascripts/admin/rails.js

@@ -23,18 +23,19 @@ jQuery(function ($) {
          */
         callRemote: function () {
             var el      = this,
-                data    = el.is('form') ? el.serializeArray() : [],
                 method  = el.attr('method') || el.attr('data-method') || 'GET',
-                url     = el.attr('action') || el.attr('href');
+                url     = el.attr('action') || el.attr('href'),
+                dataType  = el.attr('data-type')  || 'script';
 
             if (url === undefined) {
               throw "No URL specified for remote call (action or href must be present).";
             } else {
                 if (el.triggerAndReturn('ajax:before')) {
+                    var data = el.is('form') ? el.serializeArray() : [];
                     $.ajax({
                         url: url,
                         data: data,
-                        dataType: 'script',
+                        dataType: dataType,
                         type: method.toUpperCase(),
                         beforeSend: function (xhr) {
                             el.trigger('ajax:loading', xhr);
@@ -104,24 +105,28 @@ jQuery(function ($) {
     /**
      * disable-with handlers
      */
-    var disable_with_input_selector = 'input[data-disable-with]';
+    var disable_with_input_selector           = 'input[data-disable-with]';
-    var disable_with_form_selector = 'form[data-remote]:has(' + disable_with_input_selector + ')';
+    var disable_with_form_remote_selector     = 'form[data-remote]:has('       + disable_with_input_selector + ')';
+    var disable_with_form_not_remote_selector = 'form:not([data-remote]):has(' + disable_with_input_selector + ')';
 
-    $(disable_with_form_selector).live('ajax:before', function () {
+    var disable_with_input_function = function () {
         $(this).find(disable_with_input_selector).each(function () {
             var input = $(this);
             input.data('enable-with', input.val())
-                 .attr('value', input.attr('data-disable-with'))
+                .attr('value', input.attr('data-disable-with'))
-                 .attr('disabled', 'disabled');
+                .attr('disabled', 'disabled');
         });
-    });
+    };
 
-    $(disable_with_form_selector).live('ajax:after', function () {
+    $(disable_with_form_remote_selector).live('ajax:before', disable_with_input_function);
+    $(disable_with_form_not_remote_selector).live('submit', disable_with_input_function);
+
+    $(disable_with_form_remote_selector).live('ajax:complete', function () {
         $(this).find(disable_with_input_selector).each(function () {
             var input = $(this);
             input.removeAttr('disabled')
                  .val(input.data('enable-with'));
         });
     });
-});
 
+});