add UI notifications when a form is submitted + disable the form when it is being submitted + pass the current ability to the presenter + remove debug statements

app/assets/javascripts/locomotive/views/content_types/edit_view.coffee

@@ -11,5 +11,4 @@ class Locomotive.Views.ContentTypes.EditView extends Locomotive.Views.ContentTyp
 
         if custom_field.isNew() # assign an id for each new custom field
           custom_field.set id: data._id, _id: data._id
-          console.log(custom_field)
 

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

@@ -26,8 +26,6 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
     iframe = @iframe
 
     iframe.load =>
-      console.log('iframe loading')
-
       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')
@@ -46,8 +44,6 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
         @enhance_iframe_links()
 
   set_page: (attributes) ->
-    console.log('set_page')
-
     @page = new Locomotive.Models.Page(attributes)
 
     @toolbar_view.model = @page

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

@@ -13,8 +13,6 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
   render: ->
     super
 
-    console.log('render toolbar')
-
     @enable_editing_mode_checkbox()
 
     @enable_content_locale_picker()
@@ -22,8 +20,6 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
     @
 
   notify: (aloha_editable) ->
-    console.log('editable_element has been modified...')
-
     window.bar = aloha_editable
 
     element_id  = aloha_editable.obj.attr('data-element-id')
@@ -125,8 +121,6 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
     context.find('span.text').html(values[1])
 
   refresh: ->
-    console.log('refreshing toolbar...')
-
     @$('h1').html(@model.get('title')).removeClass()
 
     if @$('.editing-mode input[type=checkbox]').is(':checked')

app/assets/javascripts/locomotive/views/pages/edit_view.js.coffee

@@ -5,10 +5,14 @@ class Locomotive.Views.Pages.EditView extends Locomotive.Views.Pages.FormView
   save: (event) ->
     event.stopPropagation() & event.preventDefault()
 
+    form = $(event.target).trigger('ajax:beforeSend')
+
     @clear_errors()
 
     @model.save {},
       success: (model, response, xhr) =>
+        form.trigger('ajax:complete')
+
         model._normalize()
 
         if model.get('template_changed') == true
@@ -17,9 +21,8 @@ class Locomotive.Views.Pages.EditView extends Locomotive.Views.Pages.FormView
           @refresh_editable_elements()
 
       error: (model, xhr) =>
+        form.trigger('ajax:complete')
+
         errors = JSON.parse(xhr.responseText)
 
         @show_errors errors
-
-
-

app/assets/javascripts/locomotive/views/shared/form_view.js.coffee

@@ -16,6 +16,9 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
     # allow users to save with CTRL+S or CMD+s
     @enable_save_with_keys_combination()
 
+    # enable form notifications
+    @enable_form_notifications()
+
     return @
 
   save: (event) ->
@@ -24,6 +27,8 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
   save_in_ajax: (event, options) ->
     event.stopPropagation() & event.preventDefault()
 
+    form = $(event.target).trigger('ajax:beforeSend')
+
     @clear_errors()
 
     options ||= { headers: {}, on_success: null, on_error: null }
@@ -33,11 +38,15 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
     @model.save {},
       headers: options.headers
       success: (model, response, xhr) =>
+        form.trigger('ajax:complete')
+
         model.attributes = previous_attributes
 
         options.on_success(response, xhr) if options.on_success
 
       error: (model, xhr) =>
+        form.trigger('ajax:complete')
+
         errors = JSON.parse(xhr.responseText)
 
         @show_errors errors
@@ -72,7 +81,10 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
         content.slideUp 100, -> parent.addClass('folded')
 
   enable_save_with_keys_combination: ->
-    $.cmd 'S', (() => @$('form').trigger('submit')), [], ignoreCase: true
+    $.cmd 'S', (() => @$('form input[type=submit]').trigger('click')), [], ignoreCase: true
+
+  enable_form_notifications: ->
+    @$('form').formSubmitNotification()
 
   after_inputs_fold: ->
     # overide this method if necessary

app/assets/javascripts/locomotive/views/theme_assets/index_view.js.coffee

@@ -7,7 +7,7 @@ class Locomotive.Views.ThemeAssets.IndexView extends Backbone.View
   _lists_views: []
 
   initialize: ->
-    _.bindAll(@, 'add_asset')
+    _.bindAll(@, 'insert_asset')
 
   render: ->
     @build_uploader()
@@ -29,16 +29,24 @@ class Locomotive.Views.ThemeAssets.IndexView extends Backbone.View
     input = form.find('input[type=file]')
     link  = form.find('a.new')
 
+    form.formSubmitNotification()
+
     link.bind 'click', (event) ->
       event.stopPropagation() & event.preventDefault()
       input.click()
 
     input.bind 'change', (event) =>
+      form.trigger('ajax:beforeSend')
       _.each event.target.files, (file) =>
         asset = new Locomotive.Models.ThemeAsset(source: file)
-        asset.save {}, success: @add_asset, headers: { 'X-Flash': true }
+        asset.save {},
+          success:  (model, response, xhr) =>
+            form.trigger('ajax:complete')
+            @insert_asset(model)
+          error:    (() => form.trigger('ajax:complete'))
+          headers:  { 'X-Flash': true }
 
-  add_asset: (model) ->
+  insert_asset: (model) ->
     list_view = @pick_list_view(model.get('content_type'))
     list_view.collection.add(model)
 

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

@@ -314,6 +314,29 @@ ul.list {
   }
 }
 
+/* ___ form notification ___ */
+
+#form-submit-notification {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  z-index: 9999;
+
+  > div {
+    padding: 5px 10px;
+
+    background-color: #fffbe5;
+    border-left: 4px solid #efe4a5;
+    border-bottom: 4px solid #efe4a5;
+
+    text-align: center;
+    @include single-text-shadow(rgba(255, 255, 255, 1), 0px, 1px, 0px);
+    font-weight: bold;
+    font-size: 12px;
+    color: #aa9a79;
+  }
+}
+
 /* ___ paragraph (for help for example) ___ */
 
 p span.code {

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

@@ -176,7 +176,7 @@ body {
         }
       }
 
-      input[type=submit] {
+      input[type=submit], button[type=submit] {
         @include light-button;
       }
 

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

@@ -9,6 +9,6 @@
 
   .span-12.last
     %p
-      = submit_tag button_label.is_a?(Symbol) ? t(".#{button_label}") : button_label
+      = submit_tag button_label.is_a?(Symbol) ? t(".#{button_label}") : button_label, :disable_with => t('.disable_with'), :'data-sending-form-message' => t('locomotive.messages.sending_form')
 
   .clear

app/views/locomotive/theme_assets/index.html.haml

@@ -27,7 +27,7 @@
 
 - content_for :buttons do
   - if can?(:manage, Locomotive::ThemeAsset)
-    = form_tag theme_assets_url(:json), :id => 'theme-assets-quick-upload', :class => 'quick-upload' do
+    = form_tag theme_assets_url(:json), :id => 'theme-assets-quick-upload', :class => 'quick-upload', :'data-sending-form-message' => t('locomotive.messages.sending_form')  do
       = file_field_tag 'theme_asset[source]', :multiple => 'multiple'
       = local_action_button :quick_upload, '#', :class => 'new'
 

config/locales/admin_ui.de.yml

@@ -48,6 +48,7 @@ de:
         create: Neu
         update: Speichern
         send: Senden
+        disable_with: "locomotive.disable_with.form_actions"
       footer:
         who_is_behind: "Dienst entwickelt von %{development} und entworfen von <a href=\"http://www.sachagreif.com\">Sacha Greif</a> &mdash; <small>version</small> %{version}"
 

config/locales/admin_ui.en.yml

@@ -22,6 +22,7 @@ en:
 
     messages:
       confirm: Are you sure ?
+      sending_form: Your form is being submitted
 
     shared:
       header:
@@ -48,6 +49,7 @@ en:
         create: Create
         update: Save
         send: Send
+        disable_with: Pending...
       list:
         untranslated: untranslated
       footer:
@@ -193,6 +195,7 @@ en:
       index:
         title: Listing theme files
         help: "The theme files section is the place where you manage the files needed by your layout, snippets...etc. If you need to manage an image gallery, create a new content type instead.<br/><b>Warning:</b> you may not see all the assets depending on your rights."
+        quick_upload: Quick upload
         new: new file
         snippets: Snippets
         css_and_js: Style and javascript

config/locales/admin_ui.es.yml

@@ -37,6 +37,7 @@ es:
         account: Mi Cuenta
         site: Sitio
         theme_assets: Ficheros del Tema
+        disable_with: "locomotive.disable_with.form_actions"
       footer:
         who_is_behind: "Servicio desarrollado por %{development} y diseñado por <a href=\"http://www.sachagreif.com\">Sacha Greif</a>"
       form_actions:

config/locales/admin_ui.fr.yml

@@ -31,6 +31,7 @@ fr:
 
     messages:
       confirm: "Êtes-vous sûr(e) ?"
+      sending_form: "Votre formulaire est en cours d'envoi"
 
     shared:
       header:
@@ -57,6 +58,7 @@ fr:
         create: Créer
         update: Mettre à jour
         send: Envoyer
+        disable_with: En cours...
 
     notifications:
       new_content_entry:

config/locales/admin_ui.it.yml

@@ -34,6 +34,7 @@ it:
         create: Crea
         update: Salva
         send: Invia
+        disable_with: "locomotive.disable_with.form_actions"
 
     errors:
       "500":

config/locales/admin_ui.nl.yml

@@ -31,6 +31,7 @@ nl:
         create: Maak
         update: Update
         send: Verstuur
+        disable_with: "locomotive.disable_with.form_actions"
 
     errors:
       "500":

config/locales/admin_ui.no.yml

@@ -34,6 +34,7 @@
         create: Opprett
         update: Lagre
         send: Send
+        disable_with: "locomotive.disable_with.form_actions"
 
     errors:
       "500":

config/locales/admin_ui.pt-BR.yml

@@ -31,6 +31,7 @@ pt-BR:
         create: Criar
         update: Atualizar
         send: Enviar
+        disable_with: "locomotive.disable_with.form_actions"
 
     errors:
       "500":

config/locales/admin_ui.ru.yml

@@ -34,6 +34,7 @@ ru:
         create: Создать
         update: Сохранить
         send: Отправить
+        disable_with: "locomotive.disable_with.form_actions"
 
     errors:
       "500":

doc/TODO

@@ -124,11 +124,11 @@ x override sort for contents
   x unable to remove a field
   x "back to admin" link does not work if inline editor disabled
   x unable to delete memberships
+  x disallow to click twice on the submit form button (spinner ?)
+  x weird behaviour when changing the default locale of a site
   - editable_elements does not display the first time they get created (and if there are no existing ones)
   - display by categories does not work when localized
-  - disallow to click twice on the submit form button (spinner ?)
   - message to notify people if their browser is too old
-  - weird behaviour when changing the default locale of a site
 
 ? install a site by default at the first installation (without asking)
 

lib/locomotive/action_controller/responder.rb

@@ -9,6 +9,14 @@ module Locomotive
         super || has_errors?
       end
 
+      def options
+        super.merge({
+          :current_site     => self.controller.send(:current_site),
+          :current_account  => self.controller.send(:current_locomotive_account),
+          :ability          => self.controller.send(:current_ability)
+        })
+      end
+
       def to_json
         if get?
           display resource

lib/locomotive/haml.rb

@@ -6,8 +6,6 @@ module ActionView
 
       # Only preserve whitespace in the tag's content: https://github.com/nex3/haml/pull/503
       def content_tag_with_haml_and_preserve(name, content_or_options_with_block = nil, *args, &block)
-        Rails.logger.debug("[content_tag_with_haml_and_preserve / ENGINE] #{name} / #{respond_to?(:content_tag_with_haml)} / #{respond_to?(:content_tag_without_haml)}")
-
         return content_tag_without_haml(name, content_or_options_with_block, *args, &block) unless is_haml?
 
         preserve = haml_buffer.options[:preserve].include?(name.to_s)

vendor/assets/javascripts/locomotive/form_submit_notification.js

@@ -0,0 +1,39 @@
+/**
+ * Version 0.0.1
+ * Display a message letting the user know the form is being submitted
+ * Didier Lafforgue
+ */
+$.fn.formSubmitNotification = function(settings) {
+
+  function show() {
+    $('#form-submit-notification').fadeIn()
+  }
+
+  function hide() {
+    $('#form-submit-notification').fadeOut()
+  }
+
+  function create(message) {
+    if ($('#form-submit-notification').size() == 0) {
+      var element = $("<div id=\"form-submit-notification\"><div>" + message + "</div></div>").hide();
+      $('body').append(element);
+    }
+  }
+
+  return this.each(function() {
+    var form    = $(this);
+    var message = form.attr('data-sending-form-message');
+
+    if (typeof(message) == 'undefined')
+      message = form.find('input[type=submit]').attr('data-sending-form-message');
+
+    if (typeof(message) == 'undefined')
+      return ;
+
+    create(message);
+
+    form.bind('ajax:beforeSend', function(event) { show() });
+    form.bind('ajax:complete', function(event) { hide() });
+
+  });
+}