got a working version of the inline editor

app/assets/javascripts/locomotive/inline_editor.js.coffee

@@ -3,6 +3,7 @@
 #= require jquery_ujs
 #= require underscore
 #= require backbone
+#= require locomotive/backbone.sync
 #= require locomotive/growl
 #= require locomotive/handlebars
 #= require locomotive/ICanHandlebarz

app/assets/javascripts/locomotive/utils/aloha_settings.js.coffee

@@ -0,0 +1,27 @@
+unless window.Aloha?
+  window.Aloha = {}
+
+window.Aloha.settings =
+  logLevels: { 'error': true, 'warn': true, 'info': false, 'debug': false }
+  errorhandling: true
+  plugins:
+    format:
+      config: [ 'b', 'i', 'u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']
+      editables:
+        '.editable-short-text' : [ 'b', 'i', 'u' ]
+
+    link:
+      config: [ 'a' ]
+      editables:
+        '.editable-short-text': [ ]
+
+    list:
+      config: [ 'ul' ]
+      editables:
+        '.editable-short-text': [ ]
+
+  i18n:
+    available: ['en', 'fr', 'pt-BR', 'es', 'de', 'no', 'ru', 'nl']
+
+  sidebar:
+    disabled: true

app/assets/javascripts/locomotive/utils/core_ext.js

@@ -48,6 +48,10 @@
     var script = doc.createElement('script');
     script.type = 'text/javascript';
     script.src = src;
+    if (options && options.onload) {
+      script.onload = options.onload;
+      delete(options.onload);
+    }
     for (var key in options) {
       script.setAttribute(key, options[key]);
     }

app/assets/javascripts/locomotive/utils/growl.js

@@ -9,4 +9,6 @@ $.growl.settings.dockCss = {
   left: '0px',
   width: '100%',
   zIndex: 50000
-};
+};
+
+// $.growl.settings.displayTimeout = 500;

app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee

@@ -27,15 +27,18 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
     @$('#toolbar .inner').html(@toolbar_view.refresh().render().el)
 
   decorate_iframe: ->
-    console.log('decorating iframe')
-
     iframe = @iframe
     iframe.load =>
       # add js / css
       doc = iframe[0].contentWindow.document
+      window.addStylesheet doc, '/assets/locomotive/aloha/css/aloha.css'
+      window.addJavascript doc, '/assets/locomotive/utils/aloha_settings.js'
       window.addJavascript doc, '/assets/locomotive/aloha/lib/aloha.js',
         'data-aloha-plugins': 'common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste'
-      window.addStylesheet doc, '/assets/locomotive/aloha/css/aloha.css'
+        onload: =>
+          @toolbar_view.enable()
+          iframe[0].contentWindow.Aloha.bind 'aloha-editable-deactivated', (event, editable) =>
+            @toolbar_view.change_editable_element editable.editable
 
       # bind the resize event. When the iFrame's size changes, update its height
       iframe_content = iframe.contents().find('body')
@@ -46,88 +49,4 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
           iframe.css height: elem.outerHeight(true)
 
       # Resize the iFrame immediately.
-      iframe_content.resize()
+      iframe_content.resize()
-
-  # render: ->
-  #   super
-  #
-  #   console.log('rendering')
-  #
-  #   @enable_iframe_auto_height()
-  #
-  #   @foo()
-  #
-  #   @toolbar_view = new Locomotive.Views.
-  #
-  # set_page: (attributes) ->
-  #   @page = new Locomotive.Models.Page(attributes)
-  #
-  #   window.foo = @page
-  #
-  #   @$('#toolbar .inner').html(ich.toolbar(@page.toJSON()))
-  #
-  # enable_iframe_auto_height: ->
-  #   console.log('decorating iframe')
-  #
-  #   console.log(@$('#page iframe html'))
-  #
-  #   # @$('#page iframe').iframeAutoHeight
-  #   #   debug: true
-  #   #   callback: (callbackObject) =>
-  #   #     $('body').css('overflow': 'visible')
-  #
-  #   iframe = @$('#page iframe')
-  #   iframe.load =>
-  #     iframe_content = iframe.contents().find('body')
-  #
-  #     # Bind the resize event. When the iframe's size changes, update its height as
-  #     # well as the corresponding info div.
-  #     iframe_content.resize ->
-  #       elem = $(this)
-  #
-  #       # Resize the IFrame.
-  #       if elem.outerHeight(true) > $('body').outerHeight(true)
-  #         iframe.css height: elem.outerHeight(true)
-  #
-  #       # Update the info div width and height.
-  #       # $('#iframe-info').text( 'IFRAME width: ' + elem.width() + ', height: ' + elem.height() );
-  #
-  #     # Resize the Iframe and update the info div immediately.
-  #     iframe_content.resize()
-  #
-  # foo: ->
-  #   @$('#page iframe').load =>
-  #     # console.log 'iframe loaded'
-  #     doc = @$('#page iframe')[0].contentWindow.document
-  #
-  #     script = doc.createElement('script')
-  #     script.type = 'text/javascript'
-  #     script.src = '/assets/locomotive/aloha/lib/aloha.js'
-  #     script.setAttribute('data-aloha-plugins', 'common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste')
-  #     doc.body.appendChild(script)
-  #
-  #     stylesheet = doc.createElement('link')
-  #     stylesheet.style = 'text/css'
-  #     stylesheet.href = '/assets/locomotive/aloha/css/aloha.css'
-  #     stylesheet.media = 'screen'
-  #     stylesheet.rel = 'stylesheet'
-  #     doc.head.appendChild(stylesheet)
-  #
-  #     # <link href="/assets/locomotive/aloha/css/aloha.css" media="screen" rel="stylesheet" type="text/css" />
-  #     # {{ '/assets/locomotive/aloha/css/aloha.css' | stylesheet_tag }}
-  #
-  #     # $("body", doc).append(script)
-  #
-  #     # $('body', doc).append('<script src="assets/locomotive/aloha/lib/aloha.js" data-aloha-plugins="common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste,common/block"></script>')
-  #
-  #     # <script src="/assets/locomotive/aloha/lib/aloha.js" data-aloha-plugins="common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste,common/block"></script>
-  #     # $('body', doc).append('<p>Hello world</p>');
-  #
-  #
-  # # register_page_content: (iframe) ->
-  # #
-  # #
-  # #   console.log 'he he'
-  #
-  #
-  #

app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee

@@ -7,7 +7,9 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
   className: 'toolbar-view'
 
   events:
-    'change .edit input[type=checkbox]': 'toggle_inline_editing'
+    'change .editing-mode input[type=checkbox]':  'toggle_editing_mode'
+    'click  .element-actions a.save':             'save_modifications'
+    'click  .element-actions a.cancel':           'cancel_modifications'
 
   initialize: ->
     super
@@ -16,12 +18,42 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
     super
     $(@el).html(ich.toolbar(@model.toJSON()))
 
-    @enable_edit_checkbox()
+    @enable_editing_mode_checkbox()
 
     @
 
-  toggle_inline_editing: (event) ->
+  change_editable_element: (aloha_editable) ->
-    console.log('toggle_inline_editing !!!')
+    console.log('changing editable_element...')
+
+    window.bar = aloha_editable
+
+    element_id  = aloha_editable.obj.attr('data-element-id')
+    @model.get('editable_elements').get(element_id).set
+      content: aloha_editable.getContents()
+
+    @$('.element-actions').show()
+
+  save_modifications: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    previous_attributes = _.clone @model.attributes
+
+    @model.save {},
+      success: (model, response, xhr) =>
+        model.attributes = previous_attributes
+        @$('.element-actions').hide()
+      error: (model, xhr) =>
+        @$('.element-actions').hide()
+
+  cancel_modifications: (event) ->
+    event.stopPropagation() & event.preventDefault()
+    @options.target[0].contentWindow.location.href = @options.target[0].contentWindow.location.href;
+
+  enable: ->
+    @options.target[0].contentWindow.Aloha.settings.locale = window.locale;
+    @$('.editing-mode').show()
+
+  toggle_editing_mode: (event) ->
     if $(event.target).is(':checked')
       @editable_elements().aloha()
     else
@@ -30,8 +62,8 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
   editable_elements: ->
     @options.target[0].contentWindow.Aloha.jQuery('.editable-long-text, .editable-short-text')
 
-  enable_edit_checkbox: ->
+  enable_editing_mode_checkbox: ->
-    @$('.edit input[type=checkbox]').checkToggle
+    @$('.editing-mode input[type=checkbox]').checkToggle
       on_label_color:   '#fff'
       off_label_color:  '#bbb'
 

app/assets/stylesheets/locomotive.css

@@ -10,5 +10,6 @@
  *= require codemirror/themes/default
  *= require locomotive/toggle.css
  *= require locomotive/liquid_mode.css
+ *= require_tree ./locomotive/shared
  *= require_tree ./locomotive/backoffice
 */

app/assets/stylesheets/locomotive/backoffice/application.css.scss

@@ -5,30 +5,6 @@
 @import "helpers";
 @import "box";
 
-div.notice {
-  position: relative;
-  width: 100%;
-  height: 90px;
-
-  background: transparent image-url("locomotive/form/growl-notice.png") repeat-x 0 0;
-
-  &.error, &.alert {
-    background-image: image-url("locomotive/form/growl-error.png");
-  }
-
-  p {
-    position: relative;
-    top: 35px;
-
-    margin: 0px;
-
-    color: #fff;
-    text-align: center;
-    font-size: 20px;
-    @include single-text-shadow(#333, 1px, 1px, 1px);
-  }
-}
-
 /* ___ boxes ___ */
 
 #wrapper #content > div.inner .box {

app/assets/stylesheets/locomotive/inline_editor.css

@@ -4,5 +4,6 @@
  * the top of the compiled file, but it's generally better to create a new file per style scope.
  *= require locomotive/blueprint/screen.css
  *= require locomotive/toggle.css
+ *= require locomotive/shared/growl.css
  *= require_tree ./inline_editor
 */

app/assets/stylesheets/locomotive/inline_editor/toolbar.css.scss

@@ -47,7 +47,7 @@
       @include single-text-shadow(#000, 0px, 1px, 0px);
     }
 
-    .edit {
+    .editing-mode {
       float: right;
       margin-right: 10px;
       line-height: 50px;
@@ -63,5 +63,15 @@
         }
       }
     }
+
+    .element-actions {
+      float: right;
+      margin-right: 10px;
+      line-height: 50px;
+
+      a {
+        margin: 0 10px;
+      }
+    }
   }
 }

app/assets/stylesheets/locomotive/shared/growl.css.scss

@@ -0,0 +1,29 @@
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+
+div.notice {
+  position: relative;
+  width: 100%;
+  height: 80px;
+
+  margin-top: 10px;
+
+  @include background-image(linear-gradient(rgba(102, 176, 71, 0.9), rgba(111, 191, 77, 0.9) 80%, rgba(104, 180, 72, 0.9)));
+  border-bottom: 2px solid rgba(88, 153, 62, 0.9);
+
+  &.error, &.alert {
+    @include background-image(linear-gradient(rgba(212, 64, 64, 0.9), rgba(230, 69, 69, 0.9) 70%, rgba(216, 65, 65, 0.9)));
+    border-bottom: 2px solid rgba(192, 57, 57, 0.9);
+  }
+
+  p {
+    line-height: 80px;
+
+    margin: 0px;
+
+    color: #fff;
+    text-align: center;
+    font-size: 20px;
+    @include single-text-shadow(#333, 1px, 1px, 1px);
+  }
+}

app/controllers/locomotive/public/pages_controller.rb

@@ -8,21 +8,21 @@ module Locomotive
 
       before_filter :require_site
 
-      before_filter :authenticate_locomotive_account!, :only => [:edit]
+      before_filter :authenticate_locomotive_account!, :only => [:show_toolbar]
 
-      before_filter :validate_site_membership, :only => [:edit]
+      before_filter :validate_site_membership, :only => [:show_toolbar]
+
+      def show_toolbar
+        render :layout => false
+      end
 
       def show
         render_locomotive_page
       end
 
       def edit
-        if params[:noiframe]
+        @editing = true
-          @editing = true
+        render_locomotive_page
-          render_locomotive_page
-        else
-          render :layout => false
-        end
       end
 
     end

app/middlewares/locomotive/inline_editor_middleware.rb

@@ -8,18 +8,11 @@ module Locomotive
     def call(env)
       response = @app.call(env)
 
-      # if env['warden'].authenticated?(:locomotive_account) &&
-      #    !env['PATH_INFO'].starts_with?("/assets") &&
-      #    !env['PATH_INFO'].starts_with?("/#{Locomotive.mounted_on}/") &&
-      #    !env['PATH_INFO'].ends_with?("/edit")
-
-      Rails.logger.debug "headers = #{response[1].inspect}"
-
       unless response[1]['Editable'].blank?
          Rails.logger.debug "==> #{ENV['PATH_INFO'].inspect}, warden ? #{env['warden'].inspect} /#{env['warden'].user} / #{env['warden'].authenticated?(:locomotive_account)}"
 
          html = response.last.body.to_s.gsub '</body>', %(
-          <a href="_edit">Edit</a>
+          <a href="_admin">Admin</a>
           </body>
          )
 

app/views/locomotive/public/pages/show_toolbar.html.haml

@@ -24,9 +24,7 @@
 
         $(document).ready(function() {
 
-          window.application_view = new Locomotive.Views.InlinEditor.ApplicationView({
+          window.application_view = new Locomotive.Views.InlinEditor.ApplicationView();
-            flash:      #{flash.to_json}
-          });
           window.application_view.render();
 
         });
@@ -35,13 +33,17 @@
 
       %h1 {{title}}
 
-      .edit
+      .editing-mode{ :style => 'display: none' }
         %label Editing mode:
         = check_box_tag 'edit', '1', false
 
+      .element-actions{ :style => 'display: none' }
+        = link_to t('.save'), '#', :class => 'button save'
+        = link_to t('.cancel'), '#', :class => 'button cancel'
+
   %body
     #page
-      %iframe{ :src => %(#{request.fullpath}?noiframe=true') , :scrolling => 'no', :frameborder => '0' }
+      %iframe{ :src => request.fullpath.gsub('_admin', '_edit'), :scrolling => 'no', :frameborder => '0' }
 
     #toolbar
       .background

config/routes.rb

@@ -65,10 +65,12 @@ Rails.application.routes.draw do
   resources :locomotive_entry_submissions, :controller => 'locomotive/public/content_entries', :path => 'entry_submissions/:slug'
 
   # magic urls
-  # match '/editable'         => 'locomotive/public/rendering#edit', :path => '/'
+  match '/_admin'       => 'locomotive/public/pages#show_toolbar'
+  match '*path/_admin'  => 'locomotive/public/pages#show_toolbar'
+
+  match '/_edit'        => 'locomotive/public/pages#edit'
+  match '*path/_edit'   => 'locomotive/public/pages#edit'
+
   match '/'             => 'locomotive/public/pages#show'
-  match '/edit'         => 'locomotive/public/pages#edit'
-  match '*path/edit'    => 'locomotive/public/pages#edit'
-  # match '_/*path'       => 'locomotive/public/rendering#show'
   match '*path'         => 'locomotive/public/pages#show'
 end

doc/TODO

@@ -72,9 +72,19 @@ x edit my site
   - back to default locale (if changed in settings)
   - front
 - inline editor
-  - remove inline-editor tag
+  x rack
-  - rack
+  x iframe
-  - iframe
+  (- remove inline-editor tag)
+  - save editable elements
+  - notification (growl)
+  - i18n
+  - change page
+  - aloha:
+    - i18n
+    - insert image
+    - remove sidebar
+
+
 - bugs:
   - unable to toggle the "required" check_boxes for content types
 

vendor/assets/javascripts/locomotive/aloha/lib/aloha/nls/fr/i18n.js

@@ -0,0 +1,10 @@
+define( {
+  'floatingmenu.tab.format': 'Mise en page',
+  'floatingmenu.tab.insert': 'Insertion',
+  'yes': 'Oui',
+  'no': 'Non',
+  'cancel': 'Annuel',
+  'repository.no_item_found': 'Aucun élément trouvé.',
+  'repository.loading': 'Chargement',
+  'repository.no_items_found_yet': 'Aucun élément trouvé...'
+} );

vendor/assets/javascripts/locomotive/aloha/lib/aloha/nls/i18n.js

@@ -1,20 +1,21 @@
 define( {
-	'root':  {
+  'root':  {
-		'plugin.abbr.floatingmenu.tab.abbr': 'Abbreviation',
+    'plugin.abbr.floatingmenu.tab.abbr': 'Abbreviation',
-		'floatingmenu.tab.format': 'Format',
+    'floatingmenu.tab.format': 'Format',
-		'floatingmenu.tab.insert': 'Insert',
+    'floatingmenu.tab.insert': 'Insert',
-		'yes': 'Yes',
+    'yes': 'Yes',
-		'no': 'No',
+    'no': 'No',
-		'cancel': 'Cancel',
+    'cancel': 'Cancel',
-		'repository.no_item_found': 'No item found.',
+    'repository.no_item_found': 'No item found.',
-		'repository.loading': 'Loading',
+    'repository.loading': 'Loading',
-		'repository.no_items_found_yet': 'No items found yet...'
+    'repository.no_items_found_yet': 'No items found yet...'
-	},
+  },
-	'de':  true
+  'de':  true,
-/*	'eo':  true,
+  'fr':  true
-	'fi':  true,
+/*  'eo':  true,
-	'fr':  true,
+  'fi':  true,
-	'it':  true,
+
-	'pl':  true,
+  'it':  true,
-	'ru':  true*/
+  'pl':  true,
+  'ru':  true*/
 } );