moviewyrm/bookwyrm/static/js/status_cache.js

251 lines
7.2 KiB
JavaScript
Raw Normal View History

2021-09-08 20:58:10 +00:00
/* exported StatusCache */
2021-09-09 14:39:38 +00:00
/* globals BookWyrm */
2021-09-08 20:58:10 +00:00
2021-12-16 18:53:38 +00:00
let StatusCache = new (class {
2021-09-08 20:58:10 +00:00
constructor() {
2021-12-16 18:53:38 +00:00
document
.querySelectorAll("[data-cache-draft]")
.forEach((t) => t.addEventListener("change", this.updateDraft.bind(this)));
2021-09-09 13:54:34 +00:00
2021-12-16 18:53:38 +00:00
document.querySelectorAll("[data-cache-draft]").forEach((t) => this.populateDraft(t));
2021-09-09 13:54:34 +00:00
2021-12-16 18:53:38 +00:00
document
.querySelectorAll(".submit-status")
.forEach((button) => button.addEventListener("submit", this.submitStatus.bind(this)));
2021-09-10 21:27:08 +00:00
2021-12-16 18:53:38 +00:00
document
.querySelectorAll(".form-rate-stars label.icon")
.forEach((button) => button.addEventListener("click", this.toggleStar.bind(this)));
2021-09-08 20:58:10 +00:00
}
/**
* Update localStorage copy of drafted status
*
* @param {Event} event
* @return {undefined}
*/
updateDraft(event) {
// Used in set reading goal
let key = event.target.dataset.cacheDraft;
let value = event.target.value;
2021-09-09 15:24:36 +00:00
2021-09-09 14:39:38 +00:00
if (!value) {
window.localStorage.removeItem(key);
2021-09-09 15:24:36 +00:00
2021-09-09 14:39:38 +00:00
return;
}
2021-09-08 20:58:10 +00:00
window.localStorage.setItem(key, value);
}
/**
* Toggle display of a DOM node based on its value in the localStorage.
*
* @param {object} node - DOM node to toggle.
* @return {undefined}
*/
populateDraft(node) {
// Used in set reading goal
let key = node.dataset.cacheDraft;
let value = window.localStorage.getItem(key);
2021-09-09 15:24:36 +00:00
2021-09-09 14:39:38 +00:00
if (!value) {
return;
}
2021-09-08 20:58:10 +00:00
node.value = value;
}
2021-09-09 13:54:34 +00:00
/**
* Post a status with ajax
*
* @param {} event
2021-09-09 13:54:34 +00:00
* @return {undefined}
*/
submitStatus(event) {
const form = event.currentTarget;
let trigger = event.submitter;
// Safari doesn't understand "submitter"
if (!trigger) {
trigger = event.currentTarget.querySelector("button[type=submit]");
}
2021-09-12 18:48:25 +00:00
// This allows the form to submit in the old fashioned way if there's a problem
if (!trigger || !form) {
return;
}
event.preventDefault();
2021-12-16 18:53:38 +00:00
BookWyrm.addRemoveClass(form, "is-processing", true);
trigger.setAttribute("disabled", null);
BookWyrm.ajaxPost(form)
.finally(() => {
// Change icon to remove ongoing activity on the current UI.
// Enable back the element used to submit the form.
BookWyrm.addRemoveClass(form, "is-processing", false);
trigger.removeAttribute("disabled");
})
.then((response) => {
if (!response.ok) {
throw new Error();
}
this.submitStatusSuccess(form);
})
.catch((error) => {
console.warn(error);
this.announceMessage("status-error-message");
});
}
2021-09-09 13:54:34 +00:00
/**
* Show a message in the live region
*
* @param {String} the id of the message dom element
* @return {undefined}
*/
announceMessage(message_id) {
const element = document.getElementById(message_id);
2021-09-10 17:20:40 +00:00
let copy = element.cloneNode(true);
copy.id = null;
2021-12-16 18:53:38 +00:00
element.insertAdjacentElement("beforebegin", copy);
BookWyrm.addRemoveClass(copy, "is-hidden", false);
setTimeout(
function () {
copy.remove();
},
10000,
copy
);
}
/**
* Success state for a posted status
*
* @param {Object} the html form that was submitted
* @return {undefined}
*/
submitStatusSuccess(form) {
2021-09-09 13:54:34 +00:00
// Clear form data
form.reset();
2021-09-09 14:39:38 +00:00
// Clear localstorage
2021-12-16 18:53:38 +00:00
form.querySelectorAll("[data-cache-draft]").forEach((node) =>
window.localStorage.removeItem(node.dataset.cacheDraft)
);
2021-09-09 14:39:38 +00:00
// Close modals
2021-09-09 15:06:36 +00:00
let modal = form.closest(".modal.is-active");
2021-09-09 15:24:36 +00:00
if (modal) {
2021-09-09 15:06:36 +00:00
modal.getElementsByClassName("modal-close")[0].click();
// Update shelve buttons
2021-09-29 17:59:36 +00:00
if (form.reading_status) {
2021-12-16 18:53:38 +00:00
document
.querySelectorAll("[data-shelve-button-book='" + form.book.value + "']")
.forEach((button) =>
this.cycleShelveButtons(button, form.reading_status.value)
);
2021-09-29 17:59:36 +00:00
}
2021-09-10 00:06:18 +00:00
return;
2021-09-09 15:06:36 +00:00
}
2021-09-09 15:20:55 +00:00
// Close reply panel
let reply = form.closest(".reply-panel");
2021-09-09 15:24:36 +00:00
if (reply) {
2021-09-09 15:20:55 +00:00
document.querySelector("[data-controls=" + reply.id + "]").click();
}
2021-12-16 18:53:38 +00:00
this.announceMessage("status-success-message");
}
/**
* Change which buttons are available for a shelf
*
* @param {Object} html button dom element
* @param {String} the identifier of the selected shelf
* @return {undefined}
*/
cycleShelveButtons(button, identifier) {
2021-09-10 00:06:18 +00:00
// Pressed button
let shelf = button.querySelector("[data-shelf-identifier='" + identifier + "']");
let next_identifier = shelf.dataset.shelfNext;
2021-09-10 00:06:18 +00:00
// Set all buttons to hidden
2021-12-16 18:53:38 +00:00
button
.querySelectorAll("[data-shelf-identifier]")
.forEach((item) => BookWyrm.addRemoveClass(item, "is-hidden", true));
2021-09-10 00:06:18 +00:00
// Button that should be visible now
let next = button.querySelector("[data-shelf-identifier=" + next_identifier + "]");
2021-09-10 00:06:18 +00:00
// Show the desired button
BookWyrm.addRemoveClass(next, "is-hidden", false);
2021-09-09 15:20:55 +00:00
// ------ update the dropdown buttons
2021-09-10 00:06:18 +00:00
// Remove existing hidden class
2021-12-16 18:53:38 +00:00
button
.querySelectorAll("[data-shelf-dropdown-identifier]")
.forEach((item) => BookWyrm.addRemoveClass(item, "is-hidden", false));
2021-09-10 00:06:18 +00:00
// Remove existing disabled states
2021-11-20 08:34:37 +00:00
2021-12-16 18:53:38 +00:00
button
.querySelectorAll("[data-shelf-dropdown-identifier] button")
.forEach((item) => (item.disabled = false));
2021-12-16 18:53:38 +00:00
next_identifier = next_identifier == "complete" ? "read" : next_identifier;
2021-09-10 00:03:31 +00:00
2021-09-10 00:06:18 +00:00
// Disable the current state
button.querySelector(
"[data-shelf-dropdown-identifier=" + identifier + "] button"
).disabled = true;
let main_button = button.querySelector(
"[data-shelf-dropdown-identifier=" + next_identifier + "]"
);
2021-09-10 00:03:31 +00:00
2021-09-10 00:06:18 +00:00
// Hide the option that's shown as the main button
BookWyrm.addRemoveClass(main_button, "is-hidden", true);
2021-09-10 00:06:18 +00:00
// Just hide the other two menu options, idk what to do with them
2021-12-16 18:53:38 +00:00
button
.querySelectorAll("[data-extra-options]")
.forEach((item) => BookWyrm.addRemoveClass(item, "is-hidden", true));
2021-09-10 00:03:31 +00:00
2021-09-10 00:06:18 +00:00
// Close menu
2021-12-04 20:11:29 +00:00
let menu = button.querySelector("details[open]");
2021-09-10 00:03:31 +00:00
if (menu) {
2021-12-04 20:11:29 +00:00
menu.removeAttribute("open");
2021-09-10 00:03:31 +00:00
}
2021-09-09 13:54:34 +00:00
}
2021-09-10 21:27:08 +00:00
/**
* Reveal half-stars
*
* @param {Event} event
* @return {undefined}
*/
toggleStar(event) {
const label = event.currentTarget;
let wholeStar = document.getElementById(label.getAttribute("for"));
if (wholeStar.checked) {
event.preventDefault();
let halfStar = document.getElementById(label.dataset.forHalf);
wholeStar.checked = null;
halfStar.checked = "checked";
}
}
2021-12-16 18:53:38 +00:00
})();