From 655fe18d72a50f354f182cda14c47eb72fd24e17 Mon Sep 17 00:00:00 2001 From: Didier Lafforgue Date: Mon, 16 Apr 2012 11:38:32 +0200 Subject: [PATCH] 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 --- .../views/content_types/edit_view.coffee | 1 - .../inline_editor/application_view.js.coffee | 4 -- .../inline_editor/toolbar_view.js.coffee | 6 --- .../views/pages/edit_view.js.coffee | 9 +++-- .../views/shared/form_view.js.coffee | 14 ++++++- .../views/theme_assets/index_view.js.coffee | 14 +++++-- .../backoffice/application.css.scss | 23 +++++++++++ .../locomotive/backoffice/layout.css.scss | 2 +- .../locomotive/shared/_form_actions.html.haml | 2 +- .../locomotive/theme_assets/index.html.haml | 2 +- config/locales/admin_ui.de.yml | 1 + config/locales/admin_ui.en.yml | 3 ++ config/locales/admin_ui.es.yml | 1 + config/locales/admin_ui.fr.yml | 2 + config/locales/admin_ui.it.yml | 1 + config/locales/admin_ui.nl.yml | 1 + config/locales/admin_ui.no.yml | 1 + config/locales/admin_ui.pt-BR.yml | 1 + config/locales/admin_ui.ru.yml | 1 + doc/TODO | 4 +- lib/locomotive/action_controller/responder.rb | 8 ++++ lib/locomotive/haml.rb | 2 - .../locomotive/form_submit_notification.js | 39 +++++++++++++++++++ 23 files changed, 117 insertions(+), 25 deletions(-) create mode 100644 vendor/assets/javascripts/locomotive/form_submit_notification.js diff --git a/app/assets/javascripts/locomotive/views/content_types/edit_view.coffee b/app/assets/javascripts/locomotive/views/content_types/edit_view.coffee index 4ea76c59..293f9a61 100644 --- a/app/assets/javascripts/locomotive/views/content_types/edit_view.coffee +++ b/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) diff --git a/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee b/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee index 9ed71b53..175d3d96 100644 --- a/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee +++ b/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 diff --git a/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee b/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee index f156e552..68d9e6c2 100644 --- a/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee +++ b/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') diff --git a/app/assets/javascripts/locomotive/views/pages/edit_view.js.coffee b/app/assets/javascripts/locomotive/views/pages/edit_view.js.coffee index 78871d00..46d74629 100644 --- a/app/assets/javascripts/locomotive/views/pages/edit_view.js.coffee +++ b/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 - - - diff --git a/app/assets/javascripts/locomotive/views/shared/form_view.js.coffee b/app/assets/javascripts/locomotive/views/shared/form_view.js.coffee index aa4e0017..0034de82 100644 --- a/app/assets/javascripts/locomotive/views/shared/form_view.js.coffee +++ b/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 diff --git a/app/assets/javascripts/locomotive/views/theme_assets/index_view.js.coffee b/app/assets/javascripts/locomotive/views/theme_assets/index_view.js.coffee index aca117db..27613fc4 100644 --- a/app/assets/javascripts/locomotive/views/theme_assets/index_view.js.coffee +++ b/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) diff --git a/app/assets/stylesheets/locomotive/backoffice/application.css.scss b/app/assets/stylesheets/locomotive/backoffice/application.css.scss index d449f550..4f98f454 100644 --- a/app/assets/stylesheets/locomotive/backoffice/application.css.scss +++ b/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 { diff --git a/app/assets/stylesheets/locomotive/backoffice/layout.css.scss b/app/assets/stylesheets/locomotive/backoffice/layout.css.scss index 4ccbd8d1..c252e73b 100644 --- a/app/assets/stylesheets/locomotive/backoffice/layout.css.scss +++ b/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; } diff --git a/app/views/locomotive/shared/_form_actions.html.haml b/app/views/locomotive/shared/_form_actions.html.haml index 8532464f..030b70ae 100644 --- a/app/views/locomotive/shared/_form_actions.html.haml +++ b/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 \ No newline at end of file diff --git a/app/views/locomotive/theme_assets/index.html.haml b/app/views/locomotive/theme_assets/index.html.haml index d4b11fd6..7c9e92ff 100644 --- a/app/views/locomotive/theme_assets/index.html.haml +++ b/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' diff --git a/config/locales/admin_ui.de.yml b/config/locales/admin_ui.de.yml index 3b20686c..44726aaf 100644 --- a/config/locales/admin_ui.de.yml +++ b/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 Sacha Greif — version %{version}" diff --git a/config/locales/admin_ui.en.yml b/config/locales/admin_ui.en.yml index 9bad502f..82e2f862 100644 --- a/config/locales/admin_ui.en.yml +++ b/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.
Warning: 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 diff --git a/config/locales/admin_ui.es.yml b/config/locales/admin_ui.es.yml index 1a3d00a9..42ba21d9 100644 --- a/config/locales/admin_ui.es.yml +++ b/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 Sacha Greif" form_actions: diff --git a/config/locales/admin_ui.fr.yml b/config/locales/admin_ui.fr.yml index d8f31f53..df9bda20 100644 --- a/config/locales/admin_ui.fr.yml +++ b/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: diff --git a/config/locales/admin_ui.it.yml b/config/locales/admin_ui.it.yml index 2ba82a42..37f094b2 100644 --- a/config/locales/admin_ui.it.yml +++ b/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": diff --git a/config/locales/admin_ui.nl.yml b/config/locales/admin_ui.nl.yml index 693bc3bb..21c84318 100644 --- a/config/locales/admin_ui.nl.yml +++ b/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": diff --git a/config/locales/admin_ui.no.yml b/config/locales/admin_ui.no.yml index a8333e60..46baecb3 100644 --- a/config/locales/admin_ui.no.yml +++ b/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": diff --git a/config/locales/admin_ui.pt-BR.yml b/config/locales/admin_ui.pt-BR.yml index db05d942..61ac86a4 100644 --- a/config/locales/admin_ui.pt-BR.yml +++ b/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": diff --git a/config/locales/admin_ui.ru.yml b/config/locales/admin_ui.ru.yml index 951d11cc..c327368b 100644 --- a/config/locales/admin_ui.ru.yml +++ b/config/locales/admin_ui.ru.yml @@ -34,6 +34,7 @@ ru: create: Создать update: Сохранить send: Отправить + disable_with: "locomotive.disable_with.form_actions" errors: "500": diff --git a/doc/TODO b/doc/TODO index 6c11b652..50d53ed6 100644 --- a/doc/TODO +++ b/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) diff --git a/lib/locomotive/action_controller/responder.rb b/lib/locomotive/action_controller/responder.rb index 4afa475f..c516e54b 100644 --- a/lib/locomotive/action_controller/responder.rb +++ b/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 diff --git a/lib/locomotive/haml.rb b/lib/locomotive/haml.rb index 8071853e..0d7140da 100644 --- a/lib/locomotive/haml.rb +++ b/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) diff --git a/vendor/assets/javascripts/locomotive/form_submit_notification.js b/vendor/assets/javascripts/locomotive/form_submit_notification.js new file mode 100644 index 00000000..f39579c0 --- /dev/null +++ b/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 = $("
" + message + "
").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() }); + + }); +} \ No newline at end of file