130 lines
4.3 KiB
JavaScript
130 lines
4.3 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
const cardSelector = '[data-shared-editable-action-card]';
|
|
|
|
const getCard = (element) => element.closest(cardSelector);
|
|
|
|
const getDirectDeleteElement = (card, selector) => Array.from(card?.children || [])
|
|
.find((child) => child.matches(selector)) || null;
|
|
|
|
const setEditMode = (card, enabled) => {
|
|
if (!card) {
|
|
return;
|
|
}
|
|
|
|
const readView = card.querySelector('[data-shared-editable-card-read]');
|
|
const editView = card.querySelector('[data-shared-editable-card-form]');
|
|
const editButtons = card.querySelectorAll('[data-shared-editable-card-edit]');
|
|
|
|
if (readView) {
|
|
readView.hidden = enabled;
|
|
}
|
|
if (editView) {
|
|
editView.hidden = !enabled;
|
|
}
|
|
editButtons.forEach((editButton) => {
|
|
editButton.disabled = enabled;
|
|
editButton.setAttribute('aria-disabled', String(enabled));
|
|
editButton.classList.toggle('sg-button--inactive', enabled);
|
|
});
|
|
};
|
|
|
|
const resetDeleteConfirmation = (card) => {
|
|
const stage = card?.closest('.sg-delete-confirmation-pattern__stage');
|
|
const confirmation = getDirectDeleteElement(card, '[data-shared-editable-card-delete-confirmation]');
|
|
const input = confirmation?.querySelector('[data-shared-editable-card-delete-input]');
|
|
const submit = confirmation?.querySelector('[data-shared-editable-card-delete-submit]');
|
|
|
|
if (input) {
|
|
input.value = '';
|
|
}
|
|
if (submit) {
|
|
submit.disabled = true;
|
|
submit.setAttribute('aria-disabled', 'true');
|
|
submit.classList.add('sg-button--process-inactive');
|
|
}
|
|
if (confirmation) {
|
|
confirmation.hidden = true;
|
|
}
|
|
if (stage) {
|
|
stage.dataset.dialogOpen = 'false';
|
|
}
|
|
};
|
|
|
|
const openDeleteConfirmation = (card) => {
|
|
const stage = card?.closest('.sg-delete-confirmation-pattern__stage');
|
|
const confirmation = getDirectDeleteElement(card, '[data-shared-editable-card-delete-confirmation]');
|
|
const input = confirmation?.querySelector('[data-shared-editable-card-delete-input]');
|
|
|
|
if (input) {
|
|
input.value = '';
|
|
input.focus();
|
|
}
|
|
if (confirmation) {
|
|
confirmation.hidden = false;
|
|
}
|
|
if (stage) {
|
|
stage.dataset.dialogOpen = 'true';
|
|
}
|
|
};
|
|
|
|
const updateDeleteButton = (input) => {
|
|
const card = getCard(input);
|
|
const confirmation = input?.closest('[data-shared-editable-card-delete-confirmation]');
|
|
const submit = confirmation?.querySelector('[data-shared-editable-card-delete-submit]');
|
|
const token = card?.dataset.sharedEditableDeleteToken || 'DELETE';
|
|
const valid = input.value === token;
|
|
|
|
if (submit) {
|
|
submit.disabled = !valid;
|
|
submit.setAttribute('aria-disabled', String(!valid));
|
|
submit.classList.toggle('sg-button--process-inactive', !valid);
|
|
}
|
|
};
|
|
|
|
const init = (root) => {
|
|
if (!root || root.dataset.sharedEditableActionCardsInitialized === 'true') {
|
|
return;
|
|
}
|
|
|
|
root.dataset.sharedEditableActionCardsInitialized = 'true';
|
|
root.querySelectorAll(cardSelector).forEach((card) => setEditMode(card, false));
|
|
root.addEventListener('click', (event) => {
|
|
const edit = event.target.closest('[data-shared-editable-card-edit]');
|
|
if (edit && root.contains(edit)) {
|
|
setEditMode(getCard(edit), true);
|
|
return;
|
|
}
|
|
|
|
const cancel = event.target.closest('[data-shared-editable-card-cancel]');
|
|
if (cancel && root.contains(cancel)) {
|
|
const card = getCard(cancel);
|
|
resetDeleteConfirmation(card);
|
|
setEditMode(card, false);
|
|
return;
|
|
}
|
|
|
|
const deleteButton = event.target.closest('[data-shared-editable-card-delete]');
|
|
if (deleteButton && root.contains(deleteButton)) {
|
|
openDeleteConfirmation(getCard(deleteButton));
|
|
return;
|
|
}
|
|
|
|
const deleteCancel = event.target.closest('[data-shared-editable-card-delete-cancel]');
|
|
if (deleteCancel && root.contains(deleteCancel)) {
|
|
resetDeleteConfirmation(getCard(deleteCancel));
|
|
}
|
|
});
|
|
|
|
root.addEventListener('input', (event) => {
|
|
const input = event.target.closest('[data-shared-editable-card-delete-input]');
|
|
if (input && root.contains(input)) {
|
|
updateDeleteButton(input);
|
|
}
|
|
});
|
|
};
|
|
|
|
window.SharedEditableActionCard = { init, resetDeleteConfirmation, setEditMode };
|
|
}());
|