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
parent
f973ccef1b
commit
655fe18d72
@ -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)
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -176,7 +176,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
input[type=submit], button[type=submit] {
|
||||
@include light-button;
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -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> — <small>version</small> %{version}"
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -34,6 +34,7 @@ it:
|
||||
create: Crea
|
||||
update: Salva
|
||||
send: Invia
|
||||
disable_with: "locomotive.disable_with.form_actions"
|
||||
|
||||
errors:
|
||||
"500":
|
||||
|
||||
@ -31,6 +31,7 @@ nl:
|
||||
create: Maak
|
||||
update: Update
|
||||
send: Verstuur
|
||||
disable_with: "locomotive.disable_with.form_actions"
|
||||
|
||||
errors:
|
||||
"500":
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
create: Opprett
|
||||
update: Lagre
|
||||
send: Send
|
||||
disable_with: "locomotive.disable_with.form_actions"
|
||||
|
||||
errors:
|
||||
"500":
|
||||
|
||||
@ -31,6 +31,7 @@ pt-BR:
|
||||
create: Criar
|
||||
update: Atualizar
|
||||
send: Enviar
|
||||
disable_with: "locomotive.disable_with.form_actions"
|
||||
|
||||
errors:
|
||||
"500":
|
||||
|
||||
@ -34,6 +34,7 @@ ru:
|
||||
create: Создать
|
||||
update: Сохранить
|
||||
send: Отправить
|
||||
disable_with: "locomotive.disable_with.form_actions"
|
||||
|
||||
errors:
|
||||
"500":
|
||||
|
||||
4
doc/TODO
4
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)
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
39
vendor/assets/javascripts/locomotive/form_submit_notification.js
vendored
Normal file
39
vendor/assets/javascripts/locomotive/form_submit_notification.js
vendored
Normal 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() });
|
||||
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user