refactoring (rename modules, clean code, remove useless files, ...etc) + improve the inline editor module (locale picker + better ui workflow)

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

@@ -23,10 +23,12 @@
     return this.replace(/\s/g, sep).replace(alphaNumRegexp, '').replace(avoidDuplicateRegexp, sep).toLowerCase()
   }
 
-  window.addParameterToURL = function(key, value) { // code from http://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript
+  window.addParameterToURL = function(key, value, context) { // code from http://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript
+    if (typeof context == 'undefined') context = document;
+
     key = encodeURIComponent(key); value = encodeURIComponent(value);
 
-    var kvp = document.location.search.substr(1).split('&');
+    var kvp = context.location.search.substr(1).split('&');
 
     var i = kvp.length; var x; while(i--) {
       x = kvp[i].split('=');
@@ -41,7 +43,7 @@
     if (i < 0) { kvp[kvp.length] = [key,value].join('='); }
 
     //this will reload the page, it's likely better to store this until finished
-    document.location.search = kvp.join('&');
+    context.location.search = kvp.join('&');
   }
 
   window.addJavascript = function(doc, src, options) {

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

@@ -11,59 +11,24 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
 
     @iframe = @$('#page iframe')
 
+    _.bindAll(@, '_$')
+
     @toolbar_view = new Locomotive.Views.InlinEditor.ToolbarView(target: @iframe)
 
   render: ->
     super
 
-    @decorate_iframe()
+    @enable_iframe_autoheight()
 
-  set_page: (attributes) ->
+    @toolbar_view.render()
-    @page = new Locomotive.Models.Page(attributes)
 
-    window.foo = @page
+  enable_iframe_autoheight: ->
-
-    @toolbar_view.model = @page
-
-    if @$('#toolbar .inner .toolbar-view').size() == 0
-      @$('#toolbar .inner').html(@toolbar_view.render().el) # first time we render it
-    else
-      @toolbar_view.refresh()
-
-  decorate_iframe: ->
     iframe = @iframe
+
     iframe.load =>
-      # add js / css
+      console.log('iframe loading')
-      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'
-        onload: =>
-          console.log('loading target iframe')
-
-          # wake up the toolbar
-          @toolbar_view.enable()
-
-          # keep the user in the admin mode
-          _$ = iframe[0].contentWindow.Aloha.jQuery
-          _$('a').each ->
-            link  = _$(this)
-            url   = link.attr('href')
-            if url != '#' && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null
-              url = '/index' if url == '/'
-              if url.indexOf('?') > 0
-                link.attr('href', url.replace('?', '/_edit?'))
-              else
-                link.attr('href', "#{url}/_edit")
-
-              link.bind 'click', ->
-                window.history.pushState('Object', 'Title', link.attr('href').replace('_edit', '_admin'))
-
-          # notify the toolbar about changes
-          iframe[0].contentWindow.Aloha.bind 'aloha-editable-deactivated', (event, editable) =>
-            @toolbar_view.notify editable.editable
 
+      if @_$('meta[name=inline-editor]').size() > 0
         # bind the resize event. When the iFrame's size changes, update its height
         iframe_content = iframe.contents().find('body')
         iframe_content.resize ->
@@ -74,3 +39,56 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
 
         # Resize the iFrame immediately.
         iframe_content.resize()
+      else
+        @toolbar_view.show_status('disabled', true).hide_editing_mode_block()
+
+        # keep the user in the admin mode
+        @enhance_iframe_links()
+
+  set_page: (attributes) ->
+    console.log('set_page')
+
+    @page = new Locomotive.Models.Page(attributes)
+
+    @toolbar_view.model = @page
+
+    @enhance_iframe()
+
+    @toolbar_view.refresh()
+
+  enhance_iframe: ->
+    _window = @iframe[0].contentWindow
+    _window.Aloha.settings.locale = window.locale
+
+    # set main window title
+    window.document.title = _window.document.title
+
+    # keep the user in the admin mode
+    @enhance_iframe_links _window.Aloha.jQuery
+
+    # notify the toolbar about changes
+    _window.Aloha.bind 'aloha-editable-deactivated', (event, editable) =>
+      @toolbar_view.notify editable.editable
+
+  enhance_iframe_links: (_jQuery) ->
+
+    toolbar_view = @toolbar_view
+    _jQuery     ||= @_$
+
+    _jQuery('a').each ->
+      link  = _jQuery(this)
+      url   = link.attr('href')
+      if url? && url != '#' && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null
+        url = '/index' if url == '/'
+        if url.indexOf('?') > 0
+          link.attr('href', url.replace('?', '/_edit?'))
+        else
+          link.attr('href', "#{url}/_edit")
+
+        link.bind 'click', ->
+          toolbar_view.show_status 'loading'
+          window.history.pushState('Object', 'Title', link.attr('href').replace('_edit', '_admin'))
+
+  _$: (selector) ->
+    $(selector, @iframe[0].contentWindow.document)
+

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

@@ -2,25 +2,23 @@ Locomotive.Views.InlinEditor ||= {}
 
 class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
 
-  tagName: 'div'
+  el: '#toolbar .inner'
-
-  className: 'toolbar-view'
 
   events:
     'change .editing-mode input[type=checkbox]':  'toggle_editing_mode'
     'click  .back a':                             'back'
-    'click  .element-actions a.save':             'save_modifications'
+    'click  .element-actions a.save':             'save_changes'
-    'click  .element-actions a.cancel':           'cancel_modifications'
+    'click  .element-actions a.cancel':           'cancel_changes'
-
-  initialize: ->
-    super
 
   render: ->
     super
-    $(@el).html(ich.toolbar(@model.toJSON()))
+
+    console.log('render toolbar')
 
     @enable_editing_mode_checkbox()
 
+    @enable_content_locale_picker()
+
     @
 
   notify: (aloha_editable) ->
@@ -34,7 +32,19 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
 
     @$('.element-actions').show()
 
-  save_modifications: (event) ->
+    @hide_editing_mode_block()
+
+  show_status: (status, growl) ->
+    growl ||= false
+
+    message = @$('h1').attr("data-#{status}-status")
+    @$('h1').html(message).removeClass().addClass(status)
+
+    $.growl('error', message) if growl
+
+    @
+
+  save_changes: (event) ->
     event.stopPropagation() & event.preventDefault()
 
     previous_attributes = _.clone @model.attributes
@@ -43,10 +53,11 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
       success: (model, response, xhr) =>
         model.attributes = previous_attributes
         @$('.element-actions').hide()
+        @show_editing_mode_block()
       error: (model, xhr) =>
         @$('.element-actions').hide()
 
-  cancel_modifications: (event) ->
+  cancel_changes: (event) ->
     event.stopPropagation() & event.preventDefault()
     @options.target[0].contentWindow.location.href = @options.target[0].contentWindow.location.href
 
@@ -54,10 +65,12 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
     event.stopPropagation() & event.preventDefault()
     window.location.href = @model.get('edit_url')
 
-  enable: ->
+  show_editing_mode_block: ->
-    @options.target[0].contentWindow.Aloha.settings.locale = window.locale;
     @$('.editing-mode').show()
 
+  hide_editing_mode_block: ->
+    @$('.editing-mode').hide()
+
   toggle_editing_mode: (event) ->
     return if @editable_elements() == null
 
@@ -77,16 +90,43 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
       on_label_color:   '#fff'
       off_label_color:  '#bbb'
 
+  enable_content_locale_picker: ->
+    _window = @options.target[0].contentWindow
+    link    = @$('#content-locale-picker-link')
+    picker  = $('#content-locale-picker')
+
+    return if picker.size() == 0
+
+    link.bind 'click', (event) ->
+      event.stopPropagation() & event.preventDefault()
+      picker.toggle()
+
+    picker.find('li').bind 'click', (event) =>
+      current   = @get_locale_attributes(link)
+      selected  = @get_locale_attributes($(event.target).closest('li'))
+
+      @set_locale_attributes(link, selected)
+      @set_locale_attributes($(event.target).closest('li'), current)
+
+      picker.toggle()
+
+      window.addParameterToURL 'content_locale', selected[1], _window.document
+
+  get_locale_attributes: (context) ->
+    [context.find('img').attr('src'), context.find('span.text').html()]
+
+  set_locale_attributes: (context, values) ->
+    context.find('img').attr('src', values[0])
+    context.find('span.text').html(values[1])
+
   refresh: ->
     console.log('refreshing toolbar...')
 
-    @$('h1').html(@model.get('title'))
+    @$('h1').html(@model.get('title')).removeClass()
 
     if @$('.editing-mode input[type=checkbox]').is(':checked')
       @$('.editing-mode div.switchArea').trigger('click')
 
     @$('.element-actions').hide()
 
-
+    @show_editing_mode_block()
-  remove: ->
-    super

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

@@ -2,7 +2,7 @@
 @import "compass/css3/images";
 @import "compass/css3/border-radius";
 @import "compass/css3/text-shadow";
-@import "helpers";
+@import "locomotive/shared/helpers";
 @import "buttons";
 
 @mixin box-header {

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

@@ -2,7 +2,7 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/images";
 @import "compass/css3/text-shadow";
-@import "helpers";
+@import "locomotive/shared/helpers";
 @import "box";
 
 /* ___ boxes ___ */

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

@@ -1,4 +1,4 @@
-@import "helpers";
+@import "locomotive/shared/helpers";
 
 .CodeMirror {
   @include default-input-style;

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

@@ -2,7 +2,7 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/images";
 @import "compass/css3/text-shadow";
-@import "helpers";
+@import "locomotive/shared/helpers";
 
 ul.content-assets {
 

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

@@ -2,8 +2,8 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/images";
 @import "compass/css3/text-shadow";
+@import "locomotive/shared/helpers";
 @import "buttons";
-@import "helpers";
 
 .ui-widget-overlay {
   background: #000;

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

@@ -2,8 +2,8 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/text-shadow";
 @import "compass/css3/box-shadow";
+@import "locomotive/shared/helpers";
 @import "buttons";
-@import "helpers";
 @import "box";
 
 #editable-elements {

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

@@ -2,7 +2,7 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/images";
 @import "compass/css3/text-shadow";
-@import "helpers";
+@import "locomotive/shared/helpers";
 @import "buttons";
 
 form.formtastic {

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

@@ -2,7 +2,7 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/images";
 @import "compass/css3/text-shadow";
-@import "helpers";
+@import "locomotive/shared/helpers";
 
 #panel {
   .inner {

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

@@ -2,7 +2,7 @@
 @import "compass/css3/border-radius";
 @import "compass/css3/images";
 @import "compass/css3/text-shadow";
-@import "helpers";
+@import "locomotive/shared/helpers";
 @import "buttons";
 
 body {

app/assets/stylesheets/locomotive/backoffice/menu/_helpers.css.scss

@@ -4,204 +4,3 @@
   #{$vside}: $vvalue;
   #{$hside}: $hvalue;
 }
-
-/* ___ icons ___ */
-
-
-// @import "compass/css3";
-// @import "compass/css3/border-radius";
-// @import "compass/css3/images";
-// @import "compass/css3/text-shadow";
-//
-// @mixin clearfix {
-//   &:after {
-//     content: ".";
-//     display: block;
-//     height: 0;
-//     clear: both;
-//     visibility: hidden;
-//   };
-// }
-//
-// @mixin reset {
-//   padding: 0px;
-//   margin: 0px;
-//   list-style: none;
-//
-//   a {
-//     text-decoration: none;
-//   }
-// }
-//
-// @mixin absolute-position($vside, $vvalue, $hside, $hvalue, $display: block) {
-//   display: $display;
-//   position: absolute;
-//   #{$vside}: $vvalue;
-//   #{$hside}: $hvalue;
-// }
-//
-// /* ___ shadows ___ */
-//
-// @mixin box-shadow-with-inset($color_top, $color_bottom: $color_top) {
-//   $color_bottom: $color_top !default;
-//   @include box-shadow($color_top 0 1px 0 0 inset, $color_bottom 0 1px 0 0);
-// }
-//
-// @mixin no-box-shadow($important: false) {
-//   @if $important == true {
-//     $important: " !important"; }
-//   @else {
-//     $important: ""; }
-//
-//   box-shadow: none $important;
-//   -moz-box-shadow: none $important;
-//   -webkit-box-shadow: none $important;
-// }
-//
-// @mixin popup-box {
-//   @include border-radius(4px);
-//   @include box-shadow(rgba(255, 255, 255, 0.17) 0 1px 0 0 inset, rgba(0, 0, 0, 0.41) 3px 3px 5px 0);
-// }
-//
-// /* ___ icons ___ */
-//
-// @mixin icon($where, $width, $height, $enabled: false, $top: 0, $left: 0) {
-//   position: relative;
-//   width: $width;
-//   height: $height;
-//   line-height: $height + 1;
-//   @if $enabled == true {
-//     background-position: -#{$width} $where; }
-//   @else {
-//     background-position: 0 $where; }
-//   top: $top;
-//   left: $left;
-// }
-//
-// @mixin menu-contents-icon($enabled: false) {
-//   @include icon(-64px, 16px, 12px, $enabled, 10px);
-// }
-//
-// @mixin menu-assets-icon($enabled: false) {
-//   @include icon(-48px, 20px, 16px, $enabled, 11px);
-// }
-//
-// @mixin menu-settings-icon($enabled: false) {
-//   @include icon(-32px, 14px, 13px, $enabled, 11px);
-// }
-//
-// /* ___ colors ___ */
-//
-// @mixin menu-color($color) {
-//   $color-index: 1;
-//   @if $color == green { $color-index: 1; }
-//   @if $color == black {  $color-index: 2; }
-//   @if $color == blue {  $color-index: 3; }
-//   @if $color == orange {  $color-index: 4; }
-//   @if $color == red {  $color-index: 5; }
-//
-//   z-index: 999;
-//
-//   a {
-//     background-position: right -39px * $color-index;
-//
-//     span {
-//       color: #fff;
-//       text-shadow: none;
-//     }
-//   }
-//
-//   & > span { background-position: -40px * $color-index -39px; }
-//
-//   &.first > span { background-position: -18px * $color-index 0px; }
-// }
-//
-// @mixin black-submenu {
-//   & > ul {
-//     background: #23242b image-url("locomotive/menu/submenu/black-bg.png") repeat-x 0 0;
-//     border-color: rgba(255, 255, 255, 0.2);
-//   }
-//
-//   & > ul > li > a, & > .action a {
-//     border: 1px solid rgba(0, 0, 0, 0.2);
-//     border-top: 1px solid rgba(0, 0, 0, 0.1);
-//     border-bottom: 1px solid rgba(0, 0, 0, 0.6);
-//     @include box-shadow-with-inset(rgba(255, 255, 255, 0.1));
-//     @include background-image(linear-gradient(#303138, #1e1e24));
-//
-//     &.on, &:active {
-//       border: 1px solid rgba(0, 0, 0, 0.4);
-//       border-top: 1px solid rgba(0, 0, 0, 0.6);
-//       @include background-image(linear-gradient(#1e1e24, #212229));
-//       @include box-shadow-with-inset(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.2));
-//     }
-//   }
-//
-//   & > .action {
-//     background-image: image-url("locomotive/menu/submenu/black-action-border.png") !important;
-//
-//     a:hover {
-//       border: 1px solid rgba(255, 255, 255, 0.5);
-//     }
-//   }
-// }
-//
-// @mixin green-submenu {
-//   & > ul {
-//     background-color: #2e9a7d;
-//     & > li > a {
-//       @include background-image(linear-gradient(#258c70, #13604b));
-//
-//       &.on, &:active {
-//         @include background-image(linear-gradient(#195e4b, #166d55));
-//       }
-//     }
-//   }
-// }
-//
-// @mixin blue-submenu {
-//   & > ul {
-//     background-color: #2579ae;
-//     & > li > a {
-//       @include background-image(linear-gradient(#1f6ea1, #135179));
-//
-//       &.on, &:active {
-//         @include background-image(linear-gradient(#13496c, #175b88));
-//       }
-//     }
-//   }
-// }
-//
-// @mixin orange-submenu {
-//   & > ul {
-//     background-color: #ed8102;
-//     & > li > a {
-//       @include background-image(linear-gradient(#e07a02, #a25804));
-//
-//       &.on, &:active {
-//         @include background-image(linear-gradient(#965201, #9d5603));
-//       }
-//     }
-//   }
-// }
-//
-// @mixin red-submenu {
-//   & > ul {
-//     background-color: #d23c45;
-//     & > li > a {
-//       @include background-image(linear-gradient(#b63e45, #89272d));
-//
-//       &.on, &:active {
-//         @include background-image(linear-gradient(#7b292e, #972e35));
-//       }
-//     }
-//   }
-// }
-//
-// @mixin submenu-color($color) {
-//   @if $color == black { @include black-submenu; }
-//   @if $color == green { @include green-submenu; }
-//   @if $color == blue { @include blue-submenu; }
-//   @if $color == orange { @include orange-submenu; }
-//   @if $color == red { @include red-submenu; }
-// }

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

@@ -1,4 +1,4 @@
-@import "picker";
+@import "locomotive/shared/picker";
 
 #sites-picker {
 

app/assets/stylesheets/locomotive/inline_editor.css

@@ -4,6 +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 ./shared
  *= require_tree ./inline_editor
 */

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

@@ -0,0 +1,70 @@
+@import "compass/css3/images";
+@import "compass/css3/opacity";
+@import "compass/css3/box-shadow";
+@import "compass/css3/text-shadow";
+@import "compass/css3/border-radius";
+
+@mixin button {
+  display: inline-block;
+
+  height: 22px;
+  line-height: 22px;
+
+  margin: 0 5px;
+  padding: 0 14px;
+
+  @include border-radius(14px);
+  @include background-image(linear-gradient(#303138, #1e1e24));
+  @include box-shadow(rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
+
+  color: #fff;
+  font-size: 12px;
+  text-decoration: none;
+  @include single-text-shadow(rgba(0, 0, 0, 1), 1px, 1px, 1px);
+
+  em {
+    display: inline-block;
+    position: relative;
+    background: transparent image-url("locomotive/menu/icons.png") no-repeat 0 0px;
+    height: 11px;
+    width: 11px;
+    top: 2px;
+    left: -5px;
+  }
+
+  &:hover {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-top: 1px solid rgba(255, 255, 255, 0.4);
+  }
+
+  &.on, &:active {
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    border-top: 1px solid rgba(0, 0, 0, 0.6);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    @include background-image(linear-gradient(#1e1e24, #212229));
+    @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
+  }
+
+  &.blue {
+    @include single-text-shadow(rgba(0, 0, 0, 0.6), 1px, 1px, 1px);
+
+    @include background-image(linear-gradient(#2abaf1, #228dda));
+    @include box-shadow(rgba(255, 255, 255, 0.4) 0 1px 0 0 inset, rgba(127, 177, 211, 0.3) 0 1px 0 0);
+    border: 1px solid rgba(13, 56, 87, 1);
+    border-top: 1px solid rgba(13, 56, 87, 1);
+    border-bottom: 1px solid rgba(13, 56, 87, 1);
+
+    &.on, &:active {
+      @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
+      @include background-image(linear-gradient(#26a1e9, #26a1e9));
+    }
+
+    &:hover {
+      border: 1px solid rgba(255, 255, 255, 0.5);
+      border-top: 1px solid rgba(255, 255, 255, 0.4);
+    }
+  }
+}

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

@@ -1,7 +1,6 @@
 body {
   position: relative;
   background: transparent;
-  // overflow: hidden;
 }
 
 #page {
@@ -14,3 +13,9 @@ body {
     display: block;
   }
 }
+
+#content-locale-picker {
+  position: fixed;
+  top: 46px;
+  right: 70px;
+}

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

@@ -2,7 +2,7 @@
 @import "compass/css3/opacity";
 @import "compass/css3/box-shadow";
 @import "compass/css3/text-shadow";
-@import "compass/css3/border-radius";
+@import "buttons";
 
 #toolbar {
   position: fixed;
@@ -46,11 +46,22 @@
       font-weight: bold;
       color: #fff;
       @include single-text-shadow(#000, 0px, 1px, 0px);
+
+      &.disabled {
+        font-style: italic;
+        color: #999;
+      }
+
+      &.loading, &.disabled {
+        top: -1px;
+        font-size: 14px;
+      }
     }
 
     .col {
       float: right;
 
+      height: 50px;
       line-height: 50px;
 
       margin-right: 10px;
@@ -64,14 +75,18 @@
       }
     }
 
+    .lang {
+      #content-locale-picker-link {
+        @include button;
+
+        top: 7px;
+      }
+    }
+
     .back {
       a {
-        color: #1F82BC;
+        position: relative;
-        @include single-text-shadow(#000, 0px, 1px, 0px);
+        top: 9px;
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
-        }
       }
     }
 
@@ -90,70 +105,7 @@
 
     .element-actions {
       .button {
-        display: inline-block;
+        @include button;
-
-        height: 22px;
-        line-height: 22px;
-
-        margin: 0 5px;
-        padding: 0 14px;
-
-        @include border-radius(14px);
-        @include background-image(linear-gradient(#303138, #1e1e24));
-        @include box-shadow(rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.6);
-
-        text-decoration: none;
-        // font-size: 13px;
-
-        color: #fff;
-        font-size: 12px;
-        @include single-text-shadow(rgba(0, 0, 0, 1), 1px, 1px, 1px);
-
-        em {
-          display: inline-block;
-          position: relative;
-          background: transparent image-url("locomotive/menu/icons.png") no-repeat 0 0px;
-          height: 11px;
-          width: 11px;
-          top: 2px;
-          left: -5px;
-        }
-
-        &:hover {
-          border: 1px solid rgba(255, 255, 255, 0.5);
-          border-top: 1px solid rgba(255, 255, 255, 0.4);
-        }
-
-        &.on, &:active {
-          border: 1px solid rgba(0, 0, 0, 0.4);
-          border-top: 1px solid rgba(0, 0, 0, 0.6);
-          border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-          @include background-image(linear-gradient(#1e1e24, #212229));
-          @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
-        }
-
-        &.save {
-          @include single-text-shadow(rgba(0, 0, 0, 0.6), 1px, 1px, 1px);
-
-          @include background-image(linear-gradient(#2abaf1, #228dda));
-          @include box-shadow(rgba(255, 255, 255, 0.4) 0 1px 0 0 inset, rgba(127, 177, 211, 0.3) 0 1px 0 0);
-          border: 1px solid rgba(13, 56, 87, 1);
-          border-top: 1px solid rgba(13, 56, 87, 1);
-          border-bottom: 1px solid rgba(13, 56, 87, 1);
-
-          &.on, &:active {
-            @include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
-            @include background-image(linear-gradient(#26a1e9, #26a1e9));
-          }
-
-          &:hover {
-            border: 1px solid rgba(255, 255, 255, 0.5);
-            border-top: 1px solid rgba(255, 255, 255, 0.4);
-          }
-        }
       } // .button
     } // .element-actions
   }

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

@@ -36,6 +36,7 @@
   }
 
   ul {
+    list-style: none;
     margin: 1px 0 0 0;
 
     li {

app/controllers/locomotive/base_controller.rb

@@ -2,8 +2,9 @@ module Locomotive
   class BaseController < ApplicationController
 
     include Locomotive::Routing::SiteDispatcher
-
+    include Locomotive::ActionController::LocaleHelpers
-    include Locomotive::ActionController::Helpers
+    include Locomotive::ActionController::SectionHelpers
+    include Locomotive::ActionController::UrlHelpers
 
     layout '/locomotive/layouts/application'
 

app/controllers/locomotive/public/base_controller.rb

@@ -3,8 +3,9 @@ module Locomotive
     class BaseController < ApplicationController
 
       include Locomotive::Routing::SiteDispatcher
-
+      include Locomotive::ActionController::LocaleHelpers
-      include Locomotive::ActionController::Helpers
+      include Locomotive::ActionController::SectionHelpers
+      include Locomotive::ActionController::UrlHelpers
 
       before_filter :require_site
 

app/controllers/locomotive/public/pages_controller.rb

@@ -3,8 +3,8 @@ module Locomotive
     class PagesController < ApplicationController
 
       include Locomotive::Routing::SiteDispatcher
-
       include Locomotive::Render
+      include Locomotive::ActionController::LocaleHelpers
 
       before_filter :require_site
 
@@ -12,6 +12,10 @@ module Locomotive
 
       before_filter :validate_site_membership, :only => [:show_toolbar]
 
+      before_filter :set_ui_locale, :only => :show_toolbar
+
+      before_filter :set_locale, :only => [:show, :edit]
+
       def show_toolbar
         render :layout => false
       end
@@ -25,6 +29,17 @@ module Locomotive
         render_locomotive_page
       end
 
+      protected
+
+      def set_ui_locale
+        ::I18n.locale = current_locomotive_account.locale rescue Locomotive.config.default_locale
+      end
+
+      def set_locale
+        self.set_current_content_locale
+        ::I18n.locale = ::Mongoid::Fields::I18n.locale
+      end
+
     end
   end
 end

app/views/locomotive/pages/_form.html.haml

@@ -3,8 +3,7 @@
   = render '/locomotive/theme_assets/picker'
   = render 'editable_elements'
 
-- if @page.persisted?
+- content_for :backbone_view_data do
-  - content_for :backbone_view_data do
   :plain
     { page: #{@page.to_presenter.as_json_for_html_view.to_json} }
 

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

@@ -29,22 +29,6 @@
 
         });
 
-    %script{ :type => 'text/html', :id => 'toolbar' }
-
-      %h1 {{title}}
-
-      .back.col
-        = link_to t('.buttons.back'), '#', :class => 'button back'
-
-      .editing-mode.col{ :style => 'display: none' }
-        %label= t('.editing_mode')
-        = check_box_tag 'edit', '1', false
-
-      .element-actions.col{ :style => 'display: none' }
-        %label= t('.save_modifications')
-        = link_to t('.buttons.confirm'), '#', :class => 'button save'
-        = link_to t('.buttons.cancel'), '#', :class => 'button cancel'
-
   %body
     #page
       %iframe{ :src => request.fullpath.gsub('_admin', '_edit'), :scrolling => 'no', :frameborder => '0' }
@@ -52,5 +36,24 @@
     #toolbar
       .background
       .inner
+        %h1{ :class => 'loading', :'data-disabled-status' => t('.statuses.disabled'), :'data-loading-status' => t('.statuses.loading') }= t('.statuses.loading')
 
+        .back.col
+          = link_to image_tag('locomotive/inline_editor/back.png'), '#', :class => 'button back', :title => t('.buttons.back'), :alt => t('.buttons.back')
+
+        - if current_site.locales.size > 1
+          .lang.col
+            %label= t('.labels.lang')
+            = render '/locomotive/shared/locale_picker_link'
+
+        .editing-mode.col
+          %label= t('.labels.editing_mode')
+          = check_box_tag 'edit', '1', false
+
+        .element-actions.col{ :style => 'display: none' }
+          %label= t('.labels.save_changes')
+          = link_to t('.buttons.confirm'), '#', :class => 'button blue save'
+          = link_to t('.buttons.cancel'), '#', :class => 'button cancel'
+
+    = render_cell 'locomotive/content_locale_picker', :show, :site => current_site, :locale => current_content_locale
 

app/views/locomotive/shared/_locale_picker_link.html.haml

@@ -0,0 +1,7 @@
+= link_to '#', :id => 'content-locale-picker-link', :class => 'button' do
+  %span.hand
+     
+
+  = image_tag "locomotive/icons/flags/#{current_content_locale}.png", :class => 'flag'
+
+  %span.text= current_content_locale

app/views/locomotive/shared/actions/_contents.html.haml

@@ -4,10 +4,11 @@
 
 - if current_site.locales.size > 1
   .action
-    = link_to '#', :id => 'content-locale-picker-link', :class => 'button' do
+    = render 'locomotive/shared/locale_picker_link'
-      %span.hand
+    / = link_to '#', :id => 'content-locale-picker-link', :class => 'button' do
-         
+    /   %span.hand
-
+    /      
-      = image_tag "locomotive/icons/flags/#{current_content_locale}.png", :class => 'flag'
+    /
-
+    /   = image_tag "locomotive/icons/flags/#{current_content_locale}.png", :class => 'flag'
-      %span.text= current_content_locale
+    /
+    /   %span.text= current_content_locale

config/locales/admin_ui.en.yml

@@ -306,8 +306,13 @@ en:
     public:
       pages:
         show_toolbar:
-          save_modifications: "Save modifications: "
+          statuses:
+            loading: "Loading...."
+            disabled: "Inline Editor disabled"
+          labels:
+            save_changes: "Save changes: "
             editing_mode: "Editing mode: "
+            lang: "Lang: "
           buttons:
             back: Return to back-office
             confirm: Confirm

doc/TODO

@@ -75,14 +75,15 @@ x edit my site
   x rack
   x iframe
   (- remove inline-editor tag)
-  - save editable elements
+  x save editable elements
-  - notification (growl)
+  x notification (growl)
+  x change page
   - i18n
-  - change page
   - aloha:
+    x remove sidebar
     - i18n
     - insert image
-    - remove sidebar
+
 
 
 - bugs:

lib/locomotive/action_controller.rb

@@ -1,3 +1,5 @@
-require 'locomotive/action_controller/helpers'
+require 'locomotive/action_controller/locale_helpers'
+require 'locomotive/action_controller/section_helpers'
+require 'locomotive/action_controller/url_helpers'
 require 'locomotive/action_controller/responder'
 require 'locomotive/action_controller/public_responder'

lib/locomotive/action_controller/helpers.rb

@@ -1,89 +0,0 @@
-module Locomotive
-  module ActionController
-    module Helpers
-
-      extend ActiveSupport::Concern
-
-      included do
-        helper_method :current_site_public_url, :switch_to_site_url, :public_page_url, :current_content_locale
-      end
-
-      module InstanceMethods
-
-        # ___ locales ___
-
-        def current_content_locale
-          ::Mongoid::Fields::I18n.locale
-        end
-
-        def set_current_content_locale
-          if params[:content_locale].present?
-            session[:content_locale] = params[:content_locale]
-          end
-
-          unless current_site.locales.include?(session[:content_locale])
-            session[:content_locale] = current_site.default_locale
-          end
-
-          ::Mongoid::Fields::I18n.locale = session[:content_locale]
-          (current_site.locales || []).each do |locale|
-            ::Mongoid::Fields::I18n.fallbacks_for(locale, current_site.locale_fallbacks(locale))
-          end
-
-          logger.debug "*** content locale = #{session[:content_locale]} / #{::Mongoid::Fields::I18n.locale}"
-        end
-
-        def set_back_office_locale
-          ::I18n.locale = current_locomotive_account.locale rescue Locomotive.config.default_locale
-        end
-
-        def sections(key = nil)
-          if !key.nil? && key.to_sym == :sub
-            @locomotive_sections[:sub] || self.controller_name.dasherize
-          else
-            @locomotive_sections[:main]
-          end
-        end
-
-        # ___ site/page urls builder ___
-
-        def current_site_public_url
-          request.protocol + request.host_with_port
-        end
-
-        def switch_to_site_url(site, options = {})
-          options = { :fullpath => true, :protocol => true }.merge(options)
-
-          url = "#{site.subdomain}.#{Locomotive.config.domain}"
-          url += ":#{request.port}" if request.port != 80
-
-          url = File.join(url, request.fullpath) if options[:fullpath]
-          url = "http://#{url}" if options[:protocol]
-          url
-        end
-
-        def public_page_url(page, options = {})
-          if content = options.delete(:content)
-            File.join(current_site_public_url, page.fullpath.gsub('content_type_template', ''), content._slug)
-          else
-            File.join(current_site_public_url, page.fullpath)
-          end
-        end
-
-      end
-
-      module ClassMethods
-
-        def sections(main, sub = nil)
-          before_filter do |c|
-            sub = sub.call(c) if sub.respond_to?(:call)
-            sections = { :main => main, :sub => sub }
-            c.instance_variable_set(:@locomotive_sections, sections)
-          end
-        end
-
-      end
-
-    end
-  end
-end

lib/locomotive/action_controller/locale_helpers.rb

@@ -0,0 +1,42 @@
+module Locomotive
+  module ActionController
+    module LocaleHelpers
+
+      extend ActiveSupport::Concern
+
+      included do
+        helper_method :current_content_locale
+      end
+
+      module InstanceMethods
+
+        def current_content_locale
+          ::Mongoid::Fields::I18n.locale
+        end
+
+        def set_current_content_locale
+          if params[:content_locale].present?
+            session[:content_locale] = params[:content_locale]
+          end
+
+          unless current_site.locales.include?(session[:content_locale])
+            session[:content_locale] = current_site.default_locale
+          end
+
+          ::Mongoid::Fields::I18n.locale = session[:content_locale]
+          (current_site.locales || []).each do |locale|
+            ::Mongoid::Fields::I18n.fallbacks_for(locale, current_site.locale_fallbacks(locale))
+          end
+
+          logger.debug "*** content locale = #{session[:content_locale]} / #{::Mongoid::Fields::I18n.locale}"
+        end
+
+        def set_back_office_locale
+          ::I18n.locale = current_locomotive_account.locale rescue Locomotive.config.default_locale
+        end
+
+      end
+
+    end
+  end
+end

lib/locomotive/action_controller/section_helpers.rb

@@ -0,0 +1,33 @@
+module Locomotive
+  module ActionController
+    module SectionHelpers
+
+      extend ActiveSupport::Concern
+
+      module InstanceMethods
+
+        def sections(key = nil)
+          if !key.nil? && key.to_sym == :sub
+            @locomotive_sections[:sub] || self.controller_name.dasherize
+          else
+            @locomotive_sections[:main]
+          end
+        end
+
+      end
+
+      module ClassMethods
+
+        def sections(main, sub = nil)
+          before_filter do |c|
+            sub = sub.call(c) if sub.respond_to?(:call)
+            sections = { :main => main, :sub => sub }
+            c.instance_variable_set(:@locomotive_sections, sections)
+          end
+        end
+
+      end
+
+    end
+  end
+end

lib/locomotive/action_controller/url_helpers.rb

@@ -0,0 +1,40 @@
+module Locomotive
+  module ActionController
+    module UrlHelpers
+
+      extend ActiveSupport::Concern
+
+      included do
+        helper_method :current_site_public_url, :switch_to_site_url, :public_page_url
+      end
+
+      module InstanceMethods
+
+        def current_site_public_url
+          request.protocol + request.host_with_port
+        end
+
+        def switch_to_site_url(site, options = {})
+          options = { :fullpath => true, :protocol => true }.merge(options)
+
+          url = "#{site.subdomain}.#{Locomotive.config.domain}"
+          url += ":#{request.port}" if request.port != 80
+
+          url = File.join(url, request.fullpath) if options[:fullpath]
+          url = "http://#{url}" if options[:protocol]
+          url
+        end
+
+        def public_page_url(page, options = {})
+          if content = options.delete(:content)
+            File.join(current_site_public_url, page.fullpath.gsub('content_type_template', ''), content._slug)
+          else
+            File.join(current_site_public_url, page.fullpath)
+          end
+        end
+
+      end
+
+    end
+  end
+end

lib/locomotive/liquid/tags/inline_editor.rb

@@ -6,53 +6,20 @@ module Liquid
         def render(context)
           if context.registers[:current_locomotive_account] && context.registers[:inline_editor]
             %{
+              <meta content="true" name="inline-editor" />
+              <link href="/assets/locomotive/aloha/css/aloha.css" media="screen" rel="stylesheet" type="text/css" />
+              <script type="text/javascript" src="/assets/locomotive/utils/aloha_settings.js"></script>
+              <script type="text/javascript" src="/assets/locomotive/aloha/lib/aloha.js" data-aloha-plugins="common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste"></script>
+
               <script type="text/javascript">
+                Aloha.ready(function() \{
                   window.parent.application_view.set_page(#{context.registers[:page].to_presenter.as_json_for_html_view.to_json});
+                \});
               </script>
             }
           else
             ''
           end
-
-          # if context.registers[:current_locomotive_account]
-          #             output = %{
-          #               <meta name="locale" content="#{context.registers[:current_locomotive_account].locale}" />
-          #               <meta name="page-fullpath" content="/#{context.registers[:page].fullpath}" />
-          #               <meta name="edit-page-url" content="#{context.registers[:controller].send(:edit_page_url, context.registers[:page])}" />
-          #             }
-          #
-          #             if context.registers[:inline_editor]
-          #               controller = context.registers[:controller]
-          #
-          #               output << %{
-          #                 <meta name="page-url" content="#{context.registers[:controller].send(: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>
-          #                 <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>
-          #               }
-          #
-          #               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>
-          #                 <script src="/javascripts/admin/plugins/cookie.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_toolbar.js"></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" />
-          #             }
-          #           end
         end
       end
 

vendor/assets/javascripts/locomotive/toggle.js

@@ -30,10 +30,10 @@
 
     settings = $.extend({
       on_label  : 'Yes',
-      on_label_color : '#cccccc',
+      on_label_color : '#333333',
       on_bg_color : '#8FE38D',
       off_label : 'No',
-      off_label_color : '#333333',
+      off_label_color : '#cccccc',
       off_bg_color: '#F8837C',
       skin_dir  : "skin/",
       bypass_skin : false,