enabled long-running buttons in a couple more places

This commit is contained in:
Dave Cranwell 2015-03-06 09:47:57 +00:00
parent 314274bec4
commit 62e69a3da8
3 changed files with 30 additions and 17 deletions

View file

@ -147,28 +147,37 @@ $(function() {
$(document).on('click', 'button.button-longrunning', function(e){
var $self = $(this);
var $replacementElem = $('em', $self);
var reEnableAfter = 30;
var dataName = 'disabledtimeout'
var timeoutLength = 30; // Button re-enables after this time (seconds), to allow for errors in submissions causing forms to be permanently un-usable
var dataname = 'disabledtimeout'
// Disabling a button prevents it submitting the form, so disabling must occur on a timeout only after this function returns
// Disabling a button prevents it submitting the form, so disabling
// must occur on a brief timeout only after this function returns.
var timeout = setTimeout(function(){
// save original button value
$self.data('original-text', $replacementElem.text());
if(!$self.data(dataName)) {
// Button re-enables after a timeout to prevent button becoming
// permanently un-usable
$self.data(dataName, setTimeout(function(){
clearTimeout($self.data(dataName));
$self.prop('disabled', '').removeData(dataName).removeClass('button-longrunning-active')
if($self.data('clicked-text')){
$replacementElem.text($self.data('original-text'));
}
if(!$self.data(dataname)) {
$self.data(dataname, setTimeout(function(){
clearTimeout($self.data(dataname));
$self.prop('disabled', '').removeData(dataname).removeClass('button-longrunning-active')
$replacementElem.text($self.data('original-text'));
}, timeoutLength * 1000));
}, reEnableAfter * 1000));
if($self.data('clicked-text') && $replacementElem.length){
// Save current button text
$self.data('original-text', $replacementElem.text());
$replacementElem.text($self.data('clicked-text'));
}
}
// Disabling button must be done last: disabled buttons can't be
// modified in the normal way, it would seem.
$self.addClass('button-longrunning-active').prop('disabled', 'true');
}
clearTimeout(timeout);
},10);
});

View file

@ -26,11 +26,13 @@
<ul>
<li class="actions">
<div class="dropdown dropup dropdown-button match-width">
<input type="submit" value="{% trans 'Save as draft' %}" class="button" />
<button type="submit" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving...' %}"><span class="icon icon-spinner"></span><em>{% trans 'Save draft' %}</em></button>
<div class="dropdown-toggle icon icon-arrow-up"></div>
<ul role="menu">
{% if parent_page_perms.can_publish_subpage %}
<li><input type="submit" name="action-publish" value="{% trans 'Publish' %}" class="button" /></li>
<li>
<button type="submit" name="action-publish" value="action-publish" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Publishing...' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% trans 'Publish' %}</em></button>
</li>
{% endif %}
<li><input type="submit" name="action-submit" value="{% trans 'Submit for moderation' %}" class="button" /></li>
</ul>

View file

@ -21,7 +21,9 @@
{% for field in form %}
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}
{% endfor %}
<li><input type="submit" value="{% trans 'Save' %}" /></li>
<li>
<button type="submit" class="button-longrunning" data-clicked-text="{% trans 'Saving...' %}"><span class="icon icon-spinner"></span><em>{% trans 'Save' %}</em></button>
</li>
</ul>
</form>
</div>