mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2025-01-04 14:28:49 +00:00
[assets] Remove UI and behaviours for interactions:
This commit addresses https://github.com/mouse-reeve/bookwyrm/pull/883#discussion_r609739553.
This commit is contained in:
parent
2f90b4ce66
commit
b92ff9752d
2 changed files with 12 additions and 65 deletions
|
@ -235,34 +235,6 @@ html {
|
||||||
right: 0;
|
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
|
/* States
|
||||||
******************************************************************************/
|
******************************************************************************/
|
||||||
|
|
||||||
|
|
|
@ -238,44 +238,19 @@ let BookWyrm = new class {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
const bookwyrm = this;
|
const bookwyrm = this;
|
||||||
const trigger = event.submitter;
|
const form = event.currentTarget;
|
||||||
const target = event.currentTarget;
|
const relatedforms = document.querySelectorAll(`.${form.dataset.id}`);
|
||||||
const forms = document.querySelectorAll(`.${target.dataset.id}`);
|
|
||||||
|
|
||||||
// Change icon to show ongoing activity on the current UI.
|
// Toggle class on all related forms.
|
||||||
// Disable the element used to submit the form to prevent duplicated requests.
|
relatedforms.forEach(relatedForm => bookwyrm.addRemoveClass(
|
||||||
// @todo Ideally, disable all potential ways to submit this specific form.
|
relatedForm,
|
||||||
forms.forEach(form => {
|
|
||||||
bookwyrm.addRemoveClass(form, 'is-processing', true);
|
|
||||||
trigger.setAttribute('disabled', null);
|
|
||||||
});
|
|
||||||
|
|
||||||
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',
|
'is-hidden',
|
||||||
form.className.indexOf('is-hidden') == -1
|
relatedForm.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(
|
this.ajaxPost(form).catch(error => {
|
||||||
form,
|
// @todo Display a notification in the UI instead.
|
||||||
'has-error',
|
console.warn('Request failed:', error);
|
||||||
form.className.indexOf('is-hidden') == -1
|
|
||||||
));
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue