From 84563247f691917697edd57c27950c2c7ee8191b Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Wed, 4 Mar 2015 17:41:28 +0000 Subject: [PATCH 01/11] styling for buttons that submit long-running forms --- .../templates/wagtailstyleguide/base.html | 24 ++++++++++- .../static_src/wagtailadmin/js/core.js | 30 ++++++++++++++ .../wagtailadmin/scss/components/forms.scss | 41 ++++++++++++++++++- .../wagtailadmin/scss/layouts/login.scss | 2 +- .../templates/wagtailadmin/login.html | 2 +- 5 files changed, 94 insertions(+), 5 deletions(-) diff --git a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html index 4eb02ae3e1..d5d3dab166 100644 --- a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html +++ b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html @@ -291,7 +291,29 @@ No No - +

Buttons with internal loading indicators (currently only button supported)

+

Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.

+ + +

Secondary

+ + +

Small

+ + +

Buttons where the text is replaced on click

+ + +

Arbitrarily bigger

+ + +

Mixtures

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index 09dd2a1912..62b795a352 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -134,6 +134,7 @@ $(function() { } } + /* Functions that need to run/rerun when active tabs are changed */ $(document).on('shown.bs.tab', function(e) { // Resize autosize textareas @@ -141,4 +142,33 @@ $(function() { autosize.update($(this).get()); }); }); + + /* Debounce submission of long-running forms and add spinner to give sense of activity */ + $(document).on('click', 'button.button-longrunning', function(e){ + var $self = $(this); + var timeoutLength = 10000; // Button re-enables after this time, to allow for errors in submissions causing forms to be permanently un-usable + var dataname = 'disabledtimeout' + var $replacementElem = $('em', $self); + + e.preventDefault(); + + // save original button value + $self.data('original-text', $self.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)); + + if($self.data('clicked-text') && $replacementElem.length){ + $replacementElem.text($self.data('clicked-text')); + } + + $self.closest('form').submit(); + $self.addClass('button-longrunning-active').prop('disabled', 'true'); + + } + }); }); diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss index 96cb1f941e..61b9997e8f 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss @@ -73,8 +73,8 @@ input, textarea, select, .richtext, .tagit{ } &:disabled, &[disabled], &:disabled:hover, &[disabled]:hover{ background-color:inherit; - cursor:not-allowed; color:$color-grey-4; + cursor:default; } } @@ -354,7 +354,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ background-color:$color-grey-3 !important; border-color:$color-grey-3 !important; color:lighten($color-grey-2, 15%) !important; - cursor:not-allowed; + cursor:default !important; } &.button-secondary:disabled, &.button-secondary[disabled], &.button-secondary.disabled{ background-color: white !important; @@ -366,6 +366,43 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ border:0 !important; } + &.button-longrunning{ + span{ + @include transition(all 0.3s ease); + @include transform(scale(0.9)); + display:inline-block; + height:0.9em; + position:relative; + opacity:0; + width:0; + visibility:hidden; + text-align:center; + padding-right:0em; + } + em{ + font-style:normal; + } + &.button-longrunning-active span{ + @include transform(scale(1)); + visibility:visible; + width:1em; + opacity:0.8; + padding-right:0.5em; + } + + .icon-spinner:after{ + text-align:center; + position:absolute; + left:0; + margin:0; + line-height:1em; + display: inline-block; + font-size:1em; + } + } + + + @media screen and (min-width: $breakpoint-mobile){ font-size:0.95em; padding:0 1.4em; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss index 1236fdbb8b..13eea5c385 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss @@ -47,7 +47,7 @@ form{ width:auto; color:white; } - input[type=submit]{ + button{ font-size:1.5em; padding:1.1em 2.4em; height:3.5em; diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/login.html b/wagtail/wagtailadmin/templates/wagtailadmin/login.html index 3364cf684d..49061422eb 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/login.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/login.html @@ -56,7 +56,7 @@ {% endcomment %}
  • - +
    • From c2ec25897051c808e1bdfc8bd5e888e5c406da83 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Thu, 5 Mar 2015 11:13:03 +0000 Subject: [PATCH 02/11] tweak to timing --- .../wagtailadmin/static_src/wagtailadmin/js/core.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index 62b795a352..de43f18e32 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -146,26 +146,27 @@ $(function() { /* Debounce submission of long-running forms and add spinner to give sense of activity */ $(document).on('click', 'button.button-longrunning', function(e){ var $self = $(this); - var timeoutLength = 10000; // Button re-enables after this time, to allow for errors in submissions causing forms to be permanently un-usable - var dataname = 'disabledtimeout' var $replacementElem = $('em', $self); + 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' + e.preventDefault(); // save original button value - $self.data('original-text', $self.text()); + $self.data('original-text', $replacementElem.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)); + }, timeoutLength * 1000)); if($self.data('clicked-text') && $replacementElem.length){ $replacementElem.text($self.data('clicked-text')); } - + $self.closest('form').submit(); $self.addClass('button-longrunning-active').prop('disabled', 'true'); From 314274bec4d0d8c095cf3d11dd361aca0a8223d2 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 6 Mar 2015 09:28:16 +0000 Subject: [PATCH 03/11] tweaks to how buttons disable themselves --- .../static_src/wagtailadmin/js/core.js | 38 +++++++++---------- .../templates/wagtailadmin/pages/edit.html | 6 ++- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index de43f18e32..6b8c76762c 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -84,7 +84,7 @@ $(function() { /* close all dropdowns on body clicks */ $(document).on('click', function(e) { var relTarg = e.relatedTarget || e.toElement; - if (!$(relTarg).hasClass('dropdown-toggle')) { + if(!$(relTarg).hasClass('dropdown-toggle') && !$(relTarg).closest('.dropdown').length){ $('.dropdown').removeClass('open'); } }); @@ -151,25 +151,25 @@ $(function() { 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' - e.preventDefault(); + // Disabling a button prevents it submitting the form, so disabling must occur on a timeout only after this function returns + var timeout = setTimeout(function(){ + // save original button value + $self.data('original-text', $replacementElem.text()); - // save original button value - $self.data('original-text', $replacementElem.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)); + 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)); + + if($self.data('clicked-text') && $replacementElem.length){ + $replacementElem.text($self.data('clicked-text')); + } + $self.addClass('button-longrunning-active').prop('disabled', 'true'); + } - if($self.data('clicked-text') && $replacementElem.length){ - $replacementElem.text($self.data('clicked-text')); - } - - $self.closest('form').submit(); - $self.addClass('button-longrunning-active').prop('disabled', 'true'); - - } + clearTimeout(timeout); + },10); }); }); diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html index b927bcf716..9efd8ac0bb 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html @@ -32,7 +32,7 @@
    • - + {% if not page.locked %}
      @@ -44,7 +44,9 @@
    • {% trans 'Delete' %}
      • {% endif %} {% if page_perms.can_publish %} -
      • +
    • + +
      • {% endif %}
    From 62e69a3da8e35513a0ea941eb2fa5a76784f0a35 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 6 Mar 2015 09:47:57 +0000 Subject: [PATCH 04/11] enabled long-running buttons in a couple more places --- .../static_src/wagtailadmin/js/core.js | 37 ++++++++++++------- .../templates/wagtailadmin/pages/create.html | 6 ++- .../templates/wagtaildocs/documents/add.html | 4 +- 3 files changed, 30 insertions(+), 17 deletions(-) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index 6b8c76762c..fb35482f03 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -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); }); diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html index db8b1a65e6..998b8c52c6 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html @@ -26,11 +26,13 @@
    • - +
        {% if parent_page_perms.can_publish_subpage %} -
        • +
      • + +
        • {% endif %}
      diff --git a/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html b/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html index 9bb0b3b2d9..575575ec7c 100644 --- a/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html +++ b/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html @@ -21,7 +21,9 @@ {% for field in form %} {% include "wagtailadmin/shared/field_as_li.html" with field=field %} {% endfor %} -
      • +
    • + +
    From 81f3d97c43c44f0c232849bf9598493649b8e1a8 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Thu, 2 Apr 2015 09:48:55 +0100 Subject: [PATCH 05/11] enabled long-running on embed modal --- .../wagtailembeds/templates/wagtailembeds/chooser/chooser.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wagtail/wagtailembeds/templates/wagtailembeds/chooser/chooser.html b/wagtail/wagtailembeds/templates/wagtailembeds/chooser/chooser.html index c813ecbc2d..1fdbb7195b 100644 --- a/wagtail/wagtailembeds/templates/wagtailembeds/chooser/chooser.html +++ b/wagtail/wagtailembeds/templates/wagtailembeds/chooser/chooser.html @@ -11,7 +11,7 @@ {% for field in form %} {% include "wagtailadmin/shared/field_as_li.html" with field=field %} {% endfor %} -
    • +
    • From cd481f8eee1610bcb44208905c924ebda5d4dfec Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Thu, 2 Apr 2015 09:55:20 +0100 Subject: [PATCH 06/11] added in a few more places --- .../wagtaildocs/templates/wagtaildocs/chooser/chooser.html | 4 +++- wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html | 2 +- .../templates/wagtailimages/chooser/chooser.html | 4 +++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/wagtail/wagtaildocs/templates/wagtaildocs/chooser/chooser.html b/wagtail/wagtaildocs/templates/wagtaildocs/chooser/chooser.html index 9359f1f9a7..07ba119851 100644 --- a/wagtail/wagtaildocs/templates/wagtaildocs/chooser/chooser.html +++ b/wagtail/wagtaildocs/templates/wagtaildocs/chooser/chooser.html @@ -32,7 +32,9 @@ {% for field in uploadform %} {% include "wagtailadmin/shared/field_as_li.html" with field=field %} {% endfor %} -
    • +
  • + +
    • diff --git a/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html b/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html index 575575ec7c..4cd4782a9c 100644 --- a/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html +++ b/wagtail/wagtaildocs/templates/wagtaildocs/documents/add.html @@ -22,7 +22,7 @@ {% include "wagtailadmin/shared/field_as_li.html" with field=field %} {% endfor %}
  • - +
    • diff --git a/wagtail/wagtailimages/templates/wagtailimages/chooser/chooser.html b/wagtail/wagtailimages/templates/wagtailimages/chooser/chooser.html index e42ffe818b..5f4e3a2278 100644 --- a/wagtail/wagtailimages/templates/wagtailimages/chooser/chooser.html +++ b/wagtail/wagtailimages/templates/wagtailimages/chooser/chooser.html @@ -44,7 +44,9 @@ {% include "wagtailadmin/shared/field_as_li.html" with field=field %} {% endif %} {% endfor %} -
    • +
  • + +
    • From b11b6a07310d18be8a542194a552eccce5c55175 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Thu, 2 Apr 2015 10:46:25 +0100 Subject: [PATCH 07/11] fixed dropdown toggling on IE10+ --- wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index fb35482f03..6dc47ba277 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -82,9 +82,9 @@ $(function() { }); /* close all dropdowns on body clicks */ - $(document).on('click', function(e) { - var relTarg = e.relatedTarget || e.toElement; - if(!$(relTarg).hasClass('dropdown-toggle') && !$(relTarg).closest('.dropdown').length){ + $(document).on('click', function(e){ + var targ = e.target; + if(!$(targ).hasClass('dropdown-toggle') && !$(targ).closest('.dropdown').length){ $('.dropdown').removeClass('open'); } }); From 411eec5d3336afbc0d44b144fbe49b5378e590bb Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 24 Apr 2015 11:23:13 +0100 Subject: [PATCH 08/11] applied @joshbarr tweaks --- .../static_src/wagtailadmin/js/core.js | 52 ++++++++++--------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index 6dc47ba277..7d67af6990 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -147,38 +147,40 @@ $(function() { $(document).on('click', 'button.button-longrunning', function(e){ var $self = $(this); var $replacementElem = $('em', $self); + + // Time (seconds) after which the button re-activates var reEnableAfter = 30; var dataName = 'disabledtimeout' - // 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(){ - 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')); - } + // Trigger form submission if it's a submit button + if (this.form && this.getAttribute('type') === 'submit') { + $(this.form).trigger('submit'); + } - }, reEnableAfter * 1000)); + 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)); - if($self.data('clicked-text') && $replacementElem.length){ - // Save current button text - $self.data('original-text', $replacementElem.text()); - - $replacementElem.text($self.data('clicked-text')); + $self.prop('disabled', '').removeData(dataName).removeClass('button-longrunning-active') + + if($self.data('clicked-text')){ + $replacementElem.text($self.data('original-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'); + }, 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')); } - clearTimeout(timeout); - },10); + + // 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'); + } }); }); From 5aea7dd51e8e3d2e0fefc097e06b0673a1d3b746 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Tue, 1 Sep 2015 16:32:15 +0100 Subject: [PATCH 09/11] Revert "applied @joshbarr tweaks" This reverts commit 8df933f58c49fa9c26283ffd2b5b2289ef72bc19. --- .../static_src/wagtailadmin/js/core.js | 52 +++++++++---------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index 7d67af6990..6dc47ba277 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -147,40 +147,38 @@ $(function() { $(document).on('click', 'button.button-longrunning', function(e){ var $self = $(this); var $replacementElem = $('em', $self); - - // Time (seconds) after which the button re-activates var reEnableAfter = 30; var dataName = 'disabledtimeout' - // Trigger form submission if it's a submit button - if (this.form && this.getAttribute('type') === 'submit') { - $(this.form).trigger('submit'); - } + // 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(){ + 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)) { - // Button re-enables after a timeout to prevent button becoming - // permanently un-usable - $self.data(dataName, setTimeout(function(){ - clearTimeout($self.data(dataName)); + }, reEnableAfter * 1000)); - $self.prop('disabled', '').removeData(dataName).removeClass('button-longrunning-active') - - if($self.data('clicked-text')){ - $replacementElem.text($self.data('original-text')); + if($self.data('clicked-text') && $replacementElem.length){ + // Save current button text + $self.data('original-text', $replacementElem.text()); + + $replacementElem.text($self.data('clicked-text')); } - }, 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'); } - - // 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); }); }); From 41dafc9c6aadedaf8ee65d6d76f064bbe4293606 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Tue, 1 Sep 2015 16:49:03 +0100 Subject: [PATCH 10/11] linted --- .jscsrc | 1 + .../static_src/wagtailadmin/js/core.js | 37 ++++++++++--------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/.jscsrc b/.jscsrc index 010eaa554d..6fb0264638 100644 --- a/.jscsrc +++ b/.jscsrc @@ -11,6 +11,7 @@ "node_modules/**", "**/*.min.js", "**/vendor/**/*.js", + "./wagtail/wagtailadmin/static/**", "./wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel.js", "./wagtail/contrib/wagtailsearchpromotions/templates/wagtailsearchpromotions/includes/searchpromotions_formset.js", "./wagtail/wagtailusers/templates/wagtailusers/groups/includes/page_permissions_formset.js", diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js index 6dc47ba277..15c83392bb 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js @@ -82,9 +82,9 @@ $(function() { }); /* close all dropdowns on body clicks */ - $(document).on('click', function(e){ - var targ = e.target; - if(!$(targ).hasClass('dropdown-toggle') && !$(targ).closest('.dropdown').length){ + $(document).on('click', function(e) { + var relTarg = e.relatedTarget || e.toElement; + if (!$(relTarg).hasClass('dropdown-toggle')) { $('.dropdown').removeClass('open'); } }); @@ -134,7 +134,6 @@ $(function() { } } - /* Functions that need to run/rerun when active tabs are changed */ $(document).on('shown.bs.tab', function(e) { // Resize autosize textareas @@ -144,41 +143,43 @@ $(function() { }); /* Debounce submission of long-running forms and add spinner to give sense of activity */ - $(document).on('click', 'button.button-longrunning', function(e){ + $(document).on('click', 'button.button-longrunning', function(e) { var $self = $(this); var $replacementElem = $('em', $self); - var reEnableAfter = 30; + var reEnableAfter = 30; var dataName = 'disabledtimeout' - // Disabling a button prevents it submitting the form, so disabling + // 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(){ - if(!$self.data(dataName)) { + + var timeout = setTimeout(function() { + if (!$self.data(dataName)) { // Button re-enables after a timeout to prevent button becoming // permanently un-usable - $self.data(dataName, setTimeout(function(){ + $self.data(dataName, setTimeout(function() { clearTimeout($self.data(dataName)); - + $self.prop('disabled', '').removeData(dataName).removeClass('button-longrunning-active') - - if($self.data('clicked-text')){ + + if ($self.data('clicked-text')) { $replacementElem.text($self.data('original-text')); } }, reEnableAfter * 1000)); - - if($self.data('clicked-text') && $replacementElem.length){ + + 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'); + $self.addClass('button-longrunning-active').prop('disabled', 'true'); } + clearTimeout(timeout); - },10); + }, 10); }); }); From cf9758138ada0e1528bf29d054dbe0227075981a Mon Sep 17 00:00:00 2001 From: Matt Westcott Date: Mon, 5 Oct 2015 22:54:37 +0100 Subject: [PATCH 11/11] Release note for #1075 --- CHANGELOG.txt | 1 + docs/releases/1.2.rst | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 018b08000e..f49771fd92 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -11,6 +11,7 @@ Changelog * Simplified body_class in default homepage template (Josh Barr) * page_published signal now called with the revision object that was published (Josh Barr) * Added an overrideable favicon to the admin interface + * Added spinner animations to long-running form submissions * Fix: Deleting a page permission from the groups admin UI does not immediately submit the form * Fix: Wagtail userbar is shown on pages that do not pass a `page` variable to the template (e.g. because they override the `serve` method) diff --git a/docs/releases/1.2.rst b/docs/releases/1.2.rst index 8d9bf0f55d..128b1fa2ea 100644 --- a/docs/releases/1.2.rst +++ b/docs/releases/1.2.rst @@ -17,6 +17,7 @@ What's new * Simplified body_class in default homepage template * page_published signal now called with the revision object that was published * Added a favicon to the admin interface, customisable by overriding the ``branding_favicon`` block (see :ref:`custom_branding`). + * Added spinner animations to long-running form submissions Bug fixes ~~~~~~~~~