page toolbar for live editing

doc/TODO

@@ -12,6 +12,8 @@ BOARD:
   - also save contents ?
   - edit images (upload new ones, ...etc)
   - google analytics tags (only visible in non edit mode)
+  - locale
+- global regions: keyword in editable element
 - 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/editable/long_text.rb

@@ -9,7 +9,7 @@ module Locomotive
           def render_element(context, element)
             if context.registers[:inline_editor]
               %{
-                <div class='editable-long-text' data-page-id='#{element.page.id}' data-element-id='#{element.id}'>
+                <div class='editable-long-text' data-element-id='#{element.id}' data-element-index='#{element._index}'>
                   #{element.content}
                 </div>
               }

lib/locomotive/liquid/tags/editable/short_text.rb

@@ -13,7 +13,7 @@ module Locomotive
           def render_element(context, element)
             if context.registers[:inline_editor]
               %{
-                <span class='editable-short-text' data-page-id='#{element.page.id}' data-element-id='#{element.id}'>
+                <span class='editable-short-text' data-element-id='#{element.id}' data-element-index='#{element._index}'>
                   #{element.content}
                 </span>
               }

lib/locomotive/liquid/tags/inline_editor.rb

@@ -4,19 +4,31 @@ module Liquid
       class InlineEditor < ::Liquid::Tag
 
         def render(context)
-          if context.registers[:inline_editor]
+          if context.registers[:current_admin]
-            %{
+            output = %{
+              <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>
+            }
 
-              <script type="text/javascript" src="/javascripts/admin/aloha/aloha.js"></script>
+            if context.registers[:inline_editor]
-              <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
+              output << %{
-              <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
+                <meta name="page-url" content="#{context.registers[:controller].send(:admin_page_url, context.registers[:page])}" />
-              <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
-              <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>
 
+                <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>
+                <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
+                <script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
+                <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>
+              }
+            end
+
+            output << %{
               <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" />
             }
           end
         end

lib/locomotive/render.rb

@@ -66,7 +66,13 @@ module Locomotive
           assigns[@page.content_type.slug.singularize] = @content_instance # just here to help to write readable liquid code
         end
 
-        registers = { :controller => self, :site => current_site, :page => @page, :inline_editor => self.editing_page? }
+        registers = {
+          :controller     => self,
+          :site           => current_site,
+          :page           => @page,
+          :inline_editor  => self.editing_page?,
+          :current_admin  => current_admin
+        }
 
         ::Liquid::Context.new({}, assigns, registers)
       end
@@ -86,7 +92,7 @@ module Locomotive
       end
 
       def editing_page?
-        self.params[:editing] == true
+        self.params[:editing] == true && current_admin
       end
 
     end

public/javascripts/admin/inline_editor.js

@@ -1,70 +1,130 @@
-GENTICS.Aloha.settings = {
+if (typeof GENTICS != 'undefined') {
-  errorhandling : false,
+  GENTICS.Aloha.settings = {
-  ribbon: false,
+    errorhandling : false,
-  "i18n": {"current": "en"},
+    ribbon: false,
-  "plugins": {
+    "i18n": {"current": "en"},
-    // "com.gentics.aloha.plugins.GCN": {
+    "plugins": {
-    //   "enabled": false
+      // "com.gentics.aloha.plugins.GCN": {
-    // },
+      //   "enabled": false
-    "com.gentics.aloha.plugins.Format": {
+      // },
-      config : [ 'b', 'i', 'u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'],
+      "com.gentics.aloha.plugins.Format": {
-      editables : {
+        config : [ 'b', 'i', 'u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'],
-        '.editable-short-text' : [ 'b', 'i', 'u' ]
+        editables : {
-      }
+          '.editable-short-text' : [ 'b', 'i', 'u' ]
-    },
+        }
-    "com.gentics.aloha.plugins.Link": {
+      },
-      // all elements with no specific configuration may insert links
+      "com.gentics.aloha.plugins.Link": {
-      config : [ 'a' ],
+        // all elements with no specific configuration may insert links
-      editables : {
+        config : [ 'a' ],
-        '.editable-short-text' : [ ]
+        editables : {
-      }
+          '.editable-short-text' : [ ]
-    },
+        }
-    "com.gentics.aloha.plugins.List": {
+      },
-      config : [ 'ul' ],
+      "com.gentics.aloha.plugins.List": {
-      editables : {
+        config : [ 'ul' ],
-        '.editable-short-text' : [ ]
+        editables : {
+          '.editable-short-text' : [ ]
+        }
       }
     }
-  }
+  };
-};
+}
+
+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');
+
+  editingMode = typeof showPageUrl != 'undefined';
+  var style = editingMode ? '' : "style='display: none'"
+
+  $('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='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 back' style='" + (editingMode ? '' : 'display: none') + "'><a href='#'><span>back</span></a></li>\
+    </ul>\
+  </div>");
+
+  // events
+  $('#page-toolbar').find('.edit').click(function() {
+    url = window.location.href;
+    if (url.charAt(url.length - 1) == '/') url += 'index';
+    window.location.href =  url + '/edit';
+  });
+
+  $('#page-toolbar').find('.cancel').click(function(e) {
+    e.preventDefault(); e.stopPropagation();
+    window.location.href = window.location.href;
+  });
+
+  $('#page-toolbar').find('.back').click(function(e) {
+    e.preventDefault(); e.stopPropagation();
+    window.location.href = fullpath;
+  });
+
+  $('#page-toolbar').find('.drawer a').eq(0).click(function() {
+    var self = $(this);
+    var max = $('#page-toolbar').width() - 17;
+
+    if ($(this).hasClass('off'))
+      $('#page-toolbar').animate({ 'right': 0 }, 300, function() {
+        self.removeClass('off');
+      });
+    else
+      $('#page-toolbar').animate({ 'right': -max }, 300, function() {
+        self.addClass('off');
+      });
+  });
+}
 
 jQuery(document).ready(function($) {
 
-  // add 'edit' at the end of each url of the page
+  buildPageToolbar();
-  $('a').each(function() {
-    var url = $(this).attr('href');
 
-    if (/^(www|http)/.exec(url) == null) {
+  if (editingMode) {
-      if (url == '/') url = '/index';
+    // add 'edit' at the end of each url of the page
-      $(this).attr('href', url + '/edit');
+    $('a').each(function() {
-    }
+      var url = $(this).attr('href');
-  });
 
-  // handle editable long text
+      if (/^(www|http)/.exec(url) == null && /(\/edit)$/.exec(url) == null) {
-  $('.editable-long-text').each(function(index) {
+        if (url == '/') url = '/index';
+        $(this).attr('href', url + '/edit');
+      }
+    });
 
-    var self = $(this);
+    // handle editable long text
-    // var postId = self.attr("data-id");
+    $('.editable-long-text').each(function(index) {
-    // var postField = self.attr("data-field");
 
-    // add callbacks to update post data fields:
+      var self = $(this);
-    self.aloha();
+      // var postId = self.attr("data-id");
-  });
+      // var postField = self.attr("data-field");
 
-  // handle editable short text
+      // add callbacks to update post data fields:
-  $('.editable-short-text').each(function() {
+      self.aloha();
-    var self = $(this);
+    });
 
-    var link = self.parents('a');
+    // handle editable short text
-    if (link.size() == 1) {
+    $('.editable-short-text').each(function() {
-      link = link.eq(0);
+      var self = $(this);
 
-      // disable click event and replace it by double click instead
+      var link = self.parents('a');
-      link.click(function(e) { e.stopPropagation(); e.preventDefault(); });
+      if (link.size() == 1) {
-      link.dblclick(function(e) { window.location.href = link.attr('href'); });
+        link = link.eq(0);
-    }
 
-    self.aloha();
+        // 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'); });
+      }
 
+      self.aloha();
+    });
+
+  }
 });

public/stylesheets/admin/inline_editor.css

@@ -0,0 +1,76 @@
+#page-toolbar {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  height: 28px;
+  background: transparent url('/images/admin/inline_editor/bg.png') repeat-x 0 0;
+  padding: 0 10px;
+  font-family: Helvetica;
+  -webkit-box-shadow: -3px 3px 12px #818181;
+}
+
+#page-toolbar ul {
+  margin-top: 3px;
+  list-style: none;
+}
+
+#page-toolbar ul li.link {
+  float: left;
+  margin-right: 5px;
+}
+
+#page-toolbar ul li.link a {
+  display: block;
+  background: transparent url('/images/admin/inline_editor/action-left.png') no-repeat 0 0;
+  height: 21px;
+  padding-left: 24px;
+  text-decoration: none;
+  color: #fff;
+}
+
+#page-toolbar ul li.link a:hover span { text-decoration: underline; }
+
+#page-toolbar ul li.save a { background-position: 0 -21px; }
+#page-toolbar ul li.cancel a { background-position: 0 -42px; }
+#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.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;
+  text-shadow: 1px 1px 1px #000;
+}
+
+#page-toolbar ul li.drawer {
+  float: left;
+  margin: 0 10px 0 5px;
+}
+
+#page-toolbar ul li.drawer a {
+  display: block;
+  position: relative;
+  top: 6px;
+  width: 10px;
+  height: 10px;
+  background: transparent url('/images/admin/inline_editor/drawer.png') no-repeat 0 0;
+  text-decoration: none;
+}
+
+#page-toolbar ul li.drawer a.off {
+  background-position: 0 -10px;
+}
+
+#page-toolbar ul li.sep { float: left; margin: 0 15px 0 10px; }
+
+#page-toolbar ul li.sep span {
+  display: block;
+  height: 21px;
+  width: 1px;
+  background: #3a3b40;
+  border-left: 1px solid #56575e;
+}
+
+#page-toolbar ul li.clear { clear: both; }