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

This commit is contained in:
Didier Lafforgue 2012-04-16 11:38:32 +02:00
parent f973ccef1b
commit 655fe18d72
23 changed files with 117 additions and 25 deletions

View File

@ -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)

View File

@ -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

View File

@ -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')

View File

@ -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

View File

@ -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

View File

@ -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)

View File

@ -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 {

View File

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

View File

@ -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

View File

@ -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'

View File

@ -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}"

View File

@ -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

View File

@ -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:

View File

@ -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:

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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)

View File

@ -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

View File

@ -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)

View File

@ -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() });
});
}