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,10 +4,18 @@ 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>
+            }
+
+            if context.registers[:inline_editor]
+              output << %{
+                <meta name="page-url" content="#{context.registers[:controller].send(:admin_page_url, context.registers[:page])}" />
 
                 <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>
@@ -15,8 +23,12 @@ module Liquid
                 <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,3 +1,4 @@
+if (typeof GENTICS != 'undefined') {
   GENTICS.Aloha.settings = {
     errorhandling : false,
     ribbon: false,
@@ -27,14 +28,72 @@ GENTICS.Aloha.settings = {
       }
     }
   };
+}
+
+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($) {
 
+  buildPageToolbar();
+
+  if (editingMode) {
     // 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) {
+      if (/^(www|http)/.exec(url) == null && /(\/edit)$/.exec(url) == null) {
         if (url == '/') url = '/index';
         $(this).attr('href', url + '/edit');
       }
@@ -67,4 +126,5 @@ jQuery(document).ready(function($) {
       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; }