117 lines
3.4 KiB
JavaScript
117 lines
3.4 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
const cardSelector = '[data-shared-editable-action-card]';
|
|
|
|
const getCard = (element) => element.closest(cardSelector);
|
|
|
|
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]');
|
|
|
|
if (readView) {
|
|
readView.hidden = enabled;
|
|
}
|
|
if (editView) {
|
|
editView.hidden = !enabled;
|
|
}
|
|
};
|
|
|
|
const resetDeleteConfirmation = (card) => {
|
|
const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
|
|
const input = card?.querySelector('[data-shared-editable-card-delete-input]');
|
|
const submit = card?.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 (card) {
|
|
card.dataset.dialogOpen = 'false';
|
|
}
|
|
};
|
|
|
|
const openDeleteConfirmation = (card) => {
|
|
const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
|
|
const input = card?.querySelector('[data-shared-editable-card-delete-input]');
|
|
|
|
if (input) {
|
|
input.value = '';
|
|
input.focus();
|
|
}
|
|
if (confirmation) {
|
|
confirmation.hidden = false;
|
|
}
|
|
if (card) {
|
|
card.dataset.dialogOpen = 'true';
|
|
}
|
|
};
|
|
|
|
const updateDeleteButton = (input) => {
|
|
const card = getCard(input);
|
|
const submit = card?.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.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 };
|
|
}());
|