first attempt to build the inline editor module

config/routes.rb

@@ -53,5 +53,6 @@ Rails.application.routes.draw do
 
   # magic urls
   match '/' => 'admin/rendering#show'
+  match '*path/edit' => 'admin/rendering#show', :defaults => { :editing => true }
   match '*path' => 'admin/rendering#show'
 end

doc/TODO

@@ -1,5 +1,21 @@
 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 ?
+    (- super bonus statistics)
+  - also save contents ?
+  - edit images (upload new ones, ...etc)
+  - google analytics tags (only visible in non edit mode)
+- 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 ?)
+
 - refactor slugify method (use parameterize + create a module)
 - [content types] the "display column" selector should not include file types
 

lib/locomotive/configuration.rb

@@ -6,7 +6,7 @@ module Locomotive
       :default_domain   => 'example.com',
       :reserved_subdomains => %w{www admin email blog webmail mail support help site sites},
       # :forbidden_paths  => %w{layouts snippets stylesheets javascripts assets admin system api},
-      :reserved_slugs   => %w{stylesheets javascripts assets admin images api pages},
+      :reserved_slugs   => %w{stylesheets javascripts assets admin images api pages edit},
       :locales          => %w{en fr},
       :cookie_key       => '_locomotive_session',
       :enable_logs      => false,

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

@@ -35,7 +35,7 @@ module Locomotive
             element = current_page.find_editable_element(context['block'].try(:name), @slug)
 
             if element
-              render_element(element)
+              render_element(context, element)
             else
               Locomotive.logger "[editable element] missing element #{context[:block].name} / #{@slug}"
               ''

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

@@ -6,7 +6,7 @@ module Locomotive
 
           protected
 
-          def render_element(element)
+          def render_element(context, element)
             element.source? ? element.source.url : element.default_content
           end
 

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

@@ -6,6 +6,18 @@ module Locomotive
 
           protected
 
+          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}'>
+                  #{element.content}
+                </div>
+              }
+            else
+              element.content
+            end
+          end
+
           def document_type
             EditableLongText
           end

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

@@ -6,9 +6,21 @@ module Locomotive
 
           protected
 
-          def render_element(element)
+          # def render_element(context, element)
+          #   element.content
+          # end
+
+          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}'>
+                  #{element.content}
+                </span>
+              }
+            else
               element.content
             end
+          end
 
           def document_type
             EditableShortText

lib/locomotive/liquid/tags/inline_editor.rb

@@ -0,0 +1,28 @@
+module Liquid
+  module Locomotive
+    module Tags
+      class InlineEditor < ::Liquid::Tag
+
+        def render(context)
+          if context.registers[:inline_editor]
+            %{
+              <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>
+              <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>
+
+              <script type="text/javascript" src="/javascripts/admin/inline_editor.js"></script>
+            }
+          end
+        end
+      end
+
+      ::Liquid::Template.register_tag('inline_editor', InlineEditor)
+    end
+  end
+end

lib/locomotive/render.rb

@@ -17,12 +17,12 @@ module Locomotive
 
           output = @page.render(locomotive_context)
 
-          prepare_and_set_response(output)
+          self.prepare_and_set_response(output)
         end
       end
 
       def locomotive_page
-        path = request.fullpath.clone
+        path = (params[:path] || request.fullpath).clone
         path.gsub!(/\.[a-zA-Z][a-zA-Z0-9]{2,}$/, '')
         path.gsub!(/^\//, '')
         path = 'index' if path.blank?
@@ -66,7 +66,7 @@ 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 }
+        registers = { :controller => self, :site => current_site, :page => @page, :inline_editor => self.editing_page? }
 
         ::Liquid::Context.new({}, assigns, registers)
       end
@@ -85,6 +85,10 @@ module Locomotive
         render :text => output, :layout => false, :status => :ok
       end
 
+      def editing_page?
+        self.params[:editing] == true
+      end
+
     end
 
   end

public/javascripts/admin/aloha/VERSION.txt

@@ -0,0 +1,2 @@
+nightly
+2010-09-03 00:03:33

public/javascripts/admin/aloha/css/aloha.css

@@ -0,0 +1,408 @@
+/*!
+* Aloha Editor
+* Author & Copyright (c) 2010 Gentics Software GmbH
+* aloha-sales@gentics.com
+* Licensed unter the terms of http://www.aloha-editor.com/license.html
+*/
+.GENTICS_editable {}
+
+.GENTICS_editable_active .GENTICS_block {
+	background-color: #B7D6FA !important;
+}
+
+.GENTICS_editable_zerowidthfix {
+	padding: 0px 5px 0px 5px !important;
+}
+
+.GENTICS_editicon {
+	position: absolute;
+	margin-left: -34px;
+	display: none;
+}
+
+/*
+ * Ext JS fixes
+ */
+.GENTICS_floatingmenu table, .GENTICS_floatingmenu tr, .GENTICS_floatingmenu td, .ext-root table, .ext-root tr, .ext-root td {
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+.GENTICS_floatingmenu table, .GENTICS_floatingmenu tr, .GENTICS_floatingmenu td {
+	width: 0;
+	height: 0;
+}
+
+/* 
+ * Floating Menu 
+ */
+.GENTICS_floatingmenu .x-tab-panel-header {
+	border-width: 0px 0px 1px 0px;
+	background: none;
+}
+
+.GENTICS_floatingmenu .x-tab-panel-header .x-tab-strip-wrap, .GENTICS_floatingmenu ul.x-tab-strip-top {
+	background: none;
+}
+
+.GENTICS_floatingmenu .x-tab-panel-header {
+	padding-bottom: 0px;
+}
+
+.GENTICS_floatingmenu:hover {
+	background-color: #E0E0E0;
+	-moz-border-radius-topleft: 3px;
+	-moz-border-radius-topright: 3px;
+	-webkit-border-top-left-radius: 3px;
+	-webkit-border-top-right-radius: 3px;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	background: url(../images/grabhandle.png) no-repeat scroll center 5px rgba(0, 0, 0, 0.4);
+}
+
+.GENTICS_floatingmenu:hover .GENTICS_floatingmenu_pin {
+	display: block;
+}
+
+.GENTICS_floatingmenu_pin {
+	background: url("../images/pin.png") no-repeat scroll 0 6px transparent;
+	cursor: pointer;
+	margin-left: 5px !important;
+	width: 16px;
+	position: absolute !important;
+	right: 10px;
+	display: none;
+}
+
+.GENTICS_floatingmenu_pinned {
+	background-position: -16px 6px;
+}
+
+#GENTICS_floatingmenu_shadow {
+	position: absolute;
+	top: -1000;
+	left: -1000;
+	display: none;
+	z-index: 8800;
+}
+
+/*hide dotted browser border on focus*/
+.GENTICS_button a:focus {
+	outline: none;
+}
+
+button.GENTICS_button {
+	background: url(../images/base.png) no-repeat !important;
+}
+
+/*buttons for format plugin*/
+button.GENTICS_button_b {
+	background-position: 0px 0px;
+}
+
+button.GENTICS_button_i {
+	background-position: -16px 0px !important;
+}
+
+button.GENTICS_button_u {
+	background-position: -32px 0px !important;
+}
+
+button.GENTICS_button_del {
+	background-position: -48px 0px !important;
+}
+
+button.GENTICS_button_sub {
+	background-position: -64px 0px !important;
+}
+
+button.GENTICS_button_sup {
+	background-position: -80px 0px !important;
+}
+
+button.GENTICS_button_ul {
+	background-position: -256px 0px !important;
+}
+
+button.GENTICS_button_ol {
+	background-position: -272px 0px !important;
+}
+
+button.GENTICS_button_a {
+	background-position: -288px 0px !important;
+}
+
+button.GENTICS_button_a_remove {
+	background-position: -304px 0px !important;
+}
+
+/**
+ * multisplit buttons
+ */
+button.GENTICS_button_p {
+	background-position: 0px 0 !important;
+}
+
+button.GENTICS_button_p_de {
+	background-position: 0px -42px !important;
+}
+
+button.GENTICS_button_h1 {
+	background-position: -52px 0 !important;
+}
+
+button.GENTICS_button_h1_de {
+	background-position: -52px -42px !important;
+}
+
+button.GENTICS_button_h2 {
+	background-position: -104px 0 !important;
+}
+
+button.GENTICS_button_h2_de {
+	background-position: -104px -42px !important;
+}
+
+button.GENTICS_button_h3 {
+	background-position: -156px 0 !important;
+}
+
+button.GENTICS_button_h3_de {
+	background-position: -156px -42px !important;
+}
+
+button.GENTICS_button_h4 {
+	background-position: -208px 0 !important;
+}
+
+button.GENTICS_button_h4_de {
+	background-position: -208px -42px !important;
+}
+
+button.GENTICS_button_h5 {
+	background-position: -260px 0 !important;
+}
+
+button.GENTICS_button_h5_de {
+	background-position: -260px -42px !important;
+}
+
+button.GENTICS_button_h6 {
+	background-position: -312px 0 !important;
+}
+
+button.GENTICS_button_h6_de {
+	background-position: -312px -42px !important;
+}
+
+button.GENTICS_button_pre {
+	background-position: -364px 0 !important;
+}
+
+button.GENTICS_button_pre_de {
+	background-position: -364px -42px !important;
+}
+
+button.GENTICS_button_title {
+	background-position: -416px 0 !important;
+}
+
+button.GENTICS_button_title_de {
+	background-position: -416px -42px !important;
+}
+
+/*buttons of the table plugin*/
+button.GENTICS_button_table {
+	background-position: -96px 0 !important;
+}
+
+button.GENTICS_button_addColumnLeft {
+	background-position: -112px 0 !important;
+}
+
+button.GENTICS_button_addColumnRight {
+	background-position: -128px 0 !important;
+}
+
+button.GENTICS_button_addRowBefore {
+	background-position: -144px 0 !important;
+}
+
+button.GENTICS_button_addRowAfter {
+	background-position: -160px 0 !important;
+}
+
+button.GENTICS_button_deleteRows {
+	background-position: -176px 0 !important;
+}
+
+button.GENTICS_button_deleteColumns {
+	background-position: -192px 0 !important;
+}
+
+button.GENTICS_button_addPerson {
+	background-position: -224px 0 !important;
+}
+
+button.GENTICS_button_addEvent {
+	background-position: -208px 0 !important;
+}
+
+/*button status hover of format plugin*/
+div.GENTICS_button a:hover {
+	border: 1px solid #b2cbff;
+}
+
+.GENTICS_floatingmenu {
+	display: none;	
+}
+
+/*button status active of format plugin*/
+.GENTICS_floatingmenu .pressed a {
+	border:1px solid #ccc;
+}
+
+.GENTICS_logo {
+	width:37px !important;
+	height:25px !important;
+	background-image: url('../images/gentics_logo.png') !important;
+}
+
+.GENTICS_maximize {
+	background-image: url('../images/gentics_logo.png') !important;
+}
+
+.GENTICS_fade_out {
+	background-image: url('../images/fade_out.png') !important;
+	width:20px !important;
+	height:20px !important;
+}
+
+.GENTICS_fade_in {
+	background-image: url('../images/fade_in.png') !important;
+	width:20px !important;
+	height:20px !important;
+}
+
+.GENTICS_maximize {
+	width:20px !important;
+	height:20px !important;
+	background-image: url('../images/maximize.png') !important;
+}
+
+html body .GENTICS_ribbon {
+	z-index:90000;
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	padding-left:0;
+	padding-right:0;
+	display: none;
+}
+
+.x-menu-list-item {
+	text-align:left;
+}
+
+.GENTICS_shadow {
+	-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+}
+
+/*
+ * extJs GENTICS Multisplit Button
+ */
+ul.GENTICS_multisplit button.GENTICS_button {
+	background-image: url(../images/base_multi.png) !important;
+	background-repeat: no-repeat;
+	background-position: 0 0;
+	/*
+	 * WARNING do not change the button size for multisplit buttons
+	 */
+	width: 54px !important;
+	height: 44px !important;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+.GENTICS_multisplit {
+	float: left;
+	list-style: none;
+}
+ul.GENTICS_multisplit, div.GENTICS_multisplit-wrapper {
+	width: 232px;
+	height: 46px;
+	overflow: hidden;
+	margin: 0px;
+	padding: 0px;
+}
+div.GENTICS_multisplit-wrapper {
+	width: 248px;
+}
+ul.GENTICS_multisplit li {
+	float: left;
+	padding: 0px 1px;
+	margin: 0px;
+}
+ul.GENTICS_multisplit button.GENTICS_multisplit-wide {
+	font: 11px tahoma,arial,helvetica;
+	height: 18px !important;
+	width: 234px !important;
+	border: 0;
+	border-top: 1px solid #cccccc;
+	cursor: pointer;
+	background-color: white;
+	background-repeat: no-repeat;
+	background-position: 6px 1px !important;
+	text-align: left;
+	margin-left: -2px;
+	padding-left: 26px;
+}
+button.GENTICS_multisplit_toggle {
+	float: right;
+	margin: 0;
+	padding: 0;
+	width: 15px;
+	height: 12px;
+	margin-top: 32px;
+	cursor: pointer;
+	border: 0;
+}
+button.GENTICS_multisplit_toggle_open {
+	background-image: url(../images/multisplit-open.gif);
+}
+button.GENTICS_multisplit_toggle_close {
+	background-image: url(../images/multisplit-close.gif);
+}
+ul.GENTICS_multisplit button {
+	border: 1px solid #cccccc;
+	margin: 1px;
+	cursor: pointer;
+}
+ul.GENTICS_multisplit button:hover {
+	border: 1px solid #666666;
+}
+ul.GENTICS_multisplit button.GENTICS_multisplit-wide:hover {
+	border: 0;
+	border-top: 1px solid #cccccc;
+}
+ul.GENTICS_multisplit button.GENTICS_multisplit-activeitem {
+	border: 2px solid #3B73D7;
+}
+ul.GENTICS_multisplit-expanded {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 20000;
+	background-color: white;
+	border: 1px solid #afafaf;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+ul.GENTICS_multisplit button.GENTICS_button_removeFormat {
+	background-image: url(../images/removeformat.png) !important;
+}

public/javascripts/admin/aloha/deps/MIT-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2010 John Resig, http://jquery.com/
+ 
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+ 
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.