diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 8c4acc86..c7451a3f 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -235,34 +235,6 @@ html { right: 0; } -/** Animations and transitions - ******************************************************************************/ - -@keyframes beating { - 0% { font-size: 100%; } - 25% { font-size: 125%; } - 100% { font-size: 75%; } -} - -@keyframes turning { - from { transform: rotateZ(0deg); } - to { transform: rotateZ(360deg); } -} - -.is-processing .icon-heart::before { - animation: beating 0.5s infinite alternate ease-in-out; -} - -.is-processing .icon-boost::before { - animation: turning 0.5s infinite ease-in-out; -} - -@media (prefers-reduced-motion: reduce) { - .is-processing .icon::before { - animation-duration: 1.5s; - } -} - /* States ******************************************************************************/ diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js index 63f10561..485daf15 100644 --- a/bookwyrm/static/js/bookwyrm.js +++ b/bookwyrm/static/js/bookwyrm.js @@ -238,45 +238,20 @@ let BookWyrm = new class { event.preventDefault(); const bookwyrm = this; - const trigger = event.submitter; - const target = event.currentTarget; - const forms = document.querySelectorAll(`.${target.dataset.id}`); + const form = event.currentTarget; + const relatedforms = document.querySelectorAll(`.${form.dataset.id}`); - // Change icon to show ongoing activity on the current UI. - // Disable the element used to submit the form to prevent duplicated requests. - // @todo Ideally, disable all potential ways to submit this specific form. - forms.forEach(form => { - bookwyrm.addRemoveClass(form, 'is-processing', true); - trigger.setAttribute('disabled', null); + // Toggle class on all related forms. + relatedforms.forEach(relatedForm => bookwyrm.addRemoveClass( + relatedForm, + 'is-hidden', + relatedForm.className.indexOf('is-hidden') == -1 + )); + + this.ajaxPost(form).catch(error => { + // @todo Display a notification in the UI instead. + console.warn('Request failed:', error); }); - - this.ajaxPost(target) - .finally(() => { - // Change icon to remove ongoing activity on the current UI. - // Enable back the element used to submit the form. - forms.forEach(form => { - bookwyrm.addRemoveClass(form, 'is-processing', false); - trigger.removeAttribute('disabled'); - }); - }) - .then(function() { - forms.forEach(form => bookwyrm.addRemoveClass( - form, - 'is-hidden', - form.className.indexOf('is-hidden') == -1 - )); - }) - .catch(error => { - // @todo Display a notification in the UI instead. - // For now, the absence of change will be enough. - console.warn('Request failed:', error); - - forms.forEach(form => bookwyrm.addRemoveClass( - form, - 'has-error', - form.className.indexOf('is-hidden') == -1 - )); - }); } /**