From 4e0953b3dbbcf6df2485adcd77daa7f5ea0f9655 Mon Sep 17 00:00:00 2001 From: tblivet Date: Mon, 25 Nov 2024 18:13:37 +0100 Subject: [PATCH] feat: refacto to use native html dialog + js --- _dev/src/scss/components/_dialog.scss | 128 ++++++++++++++++++ _dev/src/scss/components/_index.scss | 1 + _dev/src/ts/autoUpgrade.ts | 6 +- _dev/src/ts/components/DialogContainer.ts | 61 +++++++++ _dev/src/ts/components/ModalContainer.ts | 61 --------- .../StartUpdateDialog.ts} | 6 +- _dev/src/ts/pages/UpdatePageBackup.ts | 16 +-- _dev/src/ts/routing/ScriptHandler.ts | 4 +- _dev/src/ts/utils/Hydration.ts | 6 +- _dev/tests/utils/Hydration.test.ts | 14 +- classes/Twig/PageSelectors.php | 4 +- .../UpdatePageBackupController.php | 16 +-- .../{Modal.stories.js => Dialog.stories.js} | 22 +-- ...kup.stories.js => DialogBackup.stories.js} | 12 +- ....stories.js => DialogBackupAll.stories.js} | 12 +- ...ories.js => DialogBackupDelete.stories.js} | 14 +- ...tories.js => DialogErrorReport.stories.js} | 14 +- ...ate.stories.js => DialogUpdate.stories.js} | 12 +- .../{modal.html.twig => dialog.html.twig} | 30 ++-- .../dialog-backup-all.html.twig} | 4 +- .../dialogs/dialog-backup-delete.html.twig | 17 +++ .../dialog-backup.html.twig} | 14 +- .../dialog-error-report.html.twig} | 18 +-- .../dialog-update.html.twig} | 24 ++-- views/templates/{modals => dialogs}/index.php | 0 views/templates/layouts/page.html.twig | 2 +- .../modals/modal-backup-delete.html.twig | 17 --- 27 files changed, 332 insertions(+), 203 deletions(-) create mode 100644 _dev/src/scss/components/_dialog.scss create mode 100644 _dev/src/ts/components/DialogContainer.ts delete mode 100644 _dev/src/ts/components/ModalContainer.ts rename _dev/src/ts/{modals/StartUpdateModal.ts => dialogs/StartUpdateDialog.ts} (89%) rename storybook/stories/components/{Modal.stories.js => Dialog.stories.js} (79%) rename storybook/stories/components/{ModalBackup.stories.js => DialogBackup.stories.js} (82%) rename storybook/stories/components/{ModalBackupAll.stories.js => DialogBackupAll.stories.js} (82%) rename storybook/stories/components/{ModalBackupDelete.stories.js => DialogBackupDelete.stories.js} (82%) rename storybook/stories/components/{ModalErrorReport.stories.js => DialogErrorReport.stories.js} (81%) rename storybook/stories/components/{ModalUpdate.stories.js => DialogUpdate.stories.js} (83%) rename views/templates/components/{modal.html.twig => dialog.html.twig} (52%) rename views/templates/{modals/modal-backup-all.html.twig => dialogs/dialog-backup-all.html.twig} (55%) create mode 100644 views/templates/dialogs/dialog-backup-delete.html.twig rename views/templates/{modals/modal-backup.html.twig => dialogs/dialog-backup.html.twig} (57%) rename views/templates/{modals/modal-error-report.html.twig => dialogs/dialog-error-report.html.twig} (75%) rename views/templates/{modals/modal-update.html.twig => dialogs/dialog-update.html.twig} (69%) rename views/templates/{modals => dialogs}/index.php (100%) delete mode 100644 views/templates/modals/modal-backup-delete.html.twig diff --git a/_dev/src/scss/components/_dialog.scss b/_dev/src/scss/components/_dialog.scss new file mode 100644 index 000000000..11b5ec271 --- /dev/null +++ b/_dev/src/scss/components/_dialog.scss @@ -0,0 +1,128 @@ +@use "../variables" as *; + +$e: ".dialog"; + +@at-root { + ::backdrop { + background-color: rgba(0, 0, 0, 0.5); + } +} + +#{$ua-id} { + #{$e} { + border: none; + border: none; + box-shadow: var(--#{$ua-prefix}box-shadow-modal); + width: 508px; + max-width: calc(100% - 2rem); + + &__content { + display: flex; + flex-direction: column; + gap: 1.5rem; + } + + &__header { + display: flex; + gap: 1rem; + align-items: center; + width: 100%; + padding: 1.5rem; + padding-block-end: 0; + border: none; + + .close { + flex-shrink: 0; + float: none; + margin: 0; + margin-inline-start: auto; + opacity: 1; + color: var(--#{$ua-prefix}base-text-color); + cursor: pointer; + + &:hover { + color: var(--#{$ua-prefix}base-text-color-hover); + } + + .material-icons { + font-size: 1.5rem; + } + } + } + + &__body { + display: flex; + flex-direction: column; + gap: 1.5rem; + padding-block: 0; + padding-inline: 1.5rem; + font-size: 1rem; + line-height: 1.375; + } + + &__footer { + padding: 1.5rem; + padding-block-start: 0; + border: none; + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 1rem; + } + + // Custom modals + &__spacer { + display: flex; + flex-direction: column; + gap: 1.5rem; + } + + &__no-backup { + margin-block: 0; + + label { + font-weight: 400; + } + } + + &__rocket-icon { + width: 1.425em; + height: 1.425em; + } + + &__error-report-form { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + &--md { + width: 904px; + max-width: calc(100% - 2rem); + } + + &--lg { + width: 1127px; + max-width: calc(100% - 2rem); + } + + &--danger { + #{$e}__header { + &::before { + content: "\e872"; + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + background-color: var(--#{$ua-prefix}red-50); + border-radius: 999px; + font-family: var(--#{$ua-prefix}font-family-material-icons); + font-size: 1.5rem; + font-weight: 400; + } + } + } + } +} diff --git a/_dev/src/scss/components/_index.scss b/_dev/src/scss/components/_index.scss index 30abd82a8..b71f4f88a 100644 --- a/_dev/src/scss/components/_index.scss +++ b/_dev/src/scss/components/_index.scss @@ -7,6 +7,7 @@ @use "button"; @use "check-requirements"; @use "content"; +@use "dialog"; @use "form"; @use "local-archive"; @use "logs"; diff --git a/_dev/src/ts/autoUpgrade.ts b/_dev/src/ts/autoUpgrade.ts index e01691043..fcb88e5fa 100644 --- a/_dev/src/ts/autoUpgrade.ts +++ b/_dev/src/ts/autoUpgrade.ts @@ -1,10 +1,10 @@ -import ModalContainer from './components/ModalContainer'; +import DialogContainer from './components/DialogContainer'; import RouteHandler from './routing/RouteHandler'; import ScriptHandler from './routing/ScriptHandler'; export const routeHandler = new RouteHandler(); -export const modalContainer = new ModalContainer(); +export const dialogContainer = new DialogContainer(); export const scriptHandler = new ScriptHandler(); -export default { routeHandler, scriptHandler, modalContainer }; +export default { routeHandler, scriptHandler, dialogContainer }; diff --git a/_dev/src/ts/components/DialogContainer.ts b/_dev/src/ts/components/DialogContainer.ts new file mode 100644 index 000000000..e59d96bc2 --- /dev/null +++ b/_dev/src/ts/components/DialogContainer.ts @@ -0,0 +1,61 @@ +import DomLifecycle from '../types/DomLifecycle'; +import Hydration from '../utils/Hydration'; + +export default class DialogContainer implements DomLifecycle { + public static readonly cancelEvent = 'cancel'; + public static readonly okEvent = 'ok'; + + public static readonly containerId = 'ua_dialog'; + + public mount(): void { + this.DialogContainer.addEventListener(Hydration.hydrationEventName, this.#displayDialog); + this.DialogContainer.addEventListener('click', this.#onClick); + this.DialogContainer.addEventListener(DialogContainer.cancelEvent, this.#closeDialog); + this.DialogContainer.addEventListener(DialogContainer.okEvent, this.#closeDialog); + } + + public beforeDestroy(): void { + this.DialogContainer.removeEventListener(Hydration.hydrationEventName, this.#displayDialog); + this.DialogContainer.removeEventListener('click', this.#onClick); + this.DialogContainer.removeEventListener(DialogContainer.cancelEvent, this.#closeDialog); + this.DialogContainer.removeEventListener(DialogContainer.okEvent, this.#closeDialog); + } + + public get DialogContainer(): HTMLElement { + const container = document.getElementById(DialogContainer.containerId); + + if (!container) { + throw new Error('Cannot find dialog container to initialize.'); + } + return container; + } + + #displayDialog(): void { + const dialog = document.getElementById(DialogContainer.containerId)?.getElementsByClassName('dialog')[0] as HTMLDialogElement; + if (dialog) { + dialog.showModal(); + } + } + + #onClick(ev: Event): void { + const target = ev.target ? (ev.target as HTMLElement) : null; + const dialog = target?.closest('.dialog'); + + if (dialog) { + if (target?.closest("[data-dismiss='dialog']")) { + dialog.dispatchEvent(new Event(DialogContainer.cancelEvent, { bubbles: true })); + } else if (!dialog.contains(target) || target === dialog) { + dialog.dispatchEvent(new Event(DialogContainer.cancelEvent, { bubbles: true })); + } else if (target?.closest(".dialog__footer button:not([data-dismiss='dialog'])")) { + dialog.dispatchEvent(new Event(DialogContainer.okEvent, { bubbles: true })); + } + } + } + + #closeDialog(ev: Event): void { + const dialog = ev.target as HTMLDialogElement; + if (dialog) { + dialog.close(); + } + } +} diff --git a/_dev/src/ts/components/ModalContainer.ts b/_dev/src/ts/components/ModalContainer.ts deleted file mode 100644 index 6431aee6b..000000000 --- a/_dev/src/ts/components/ModalContainer.ts +++ /dev/null @@ -1,61 +0,0 @@ -import DomLifecycle from '../types/DomLifecycle'; -import Hydration from '../utils/Hydration'; - -export default class ModalContainer implements DomLifecycle { - public static readonly cancelEvent = 'cancel'; - public static readonly okEvent = 'ok'; - - public static readonly containerId = 'ua_modal'; - - public mount(): void { - this.modalContainer.addEventListener(Hydration.hydrationEventName, this.#displayModal); - this.modalContainer.addEventListener('click', this.#onClick); - this.modalContainer.addEventListener(ModalContainer.cancelEvent, this.#closeModal); - this.modalContainer.addEventListener(ModalContainer.okEvent, this.#closeModal); - } - - public beforeDestroy(): void { - this.modalContainer.removeEventListener(Hydration.hydrationEventName, this.#displayModal); - this.modalContainer.removeEventListener('click', this.#onClick); - this.modalContainer.removeEventListener(ModalContainer.cancelEvent, this.#closeModal); - this.modalContainer.removeEventListener(ModalContainer.okEvent, this.#closeModal); - } - - public get modalContainer(): HTMLElement { - const container = document.getElementById(ModalContainer.containerId); - - if (!container) { - throw new Error('Cannot find modal container to initialize.'); - } - return container; - } - - #displayModal(): void { - const modal = document.getElementById(ModalContainer.containerId)?.getElementsByClassName('dialog')[0] as HTMLDialogElement; - if (modal) { - modal.showModal(); - } - } - - #onClick(ev: Event): void { - const target = ev.target ? (ev.target as HTMLElement) : null; - const modal = target?.closest('.dialog'); - - if (modal) { - if (target?.closest("[data-dismiss='modal']")) { - modal.dispatchEvent(new Event(ModalContainer.cancelEvent, { bubbles: true })); - } else if (!modal.contains(target) || target === modal) { - modal.dispatchEvent(new Event(ModalContainer.cancelEvent, { bubbles: true })); - } else if (target?.closest(".modal-footer button:not([data-dismiss='modal'])")) { - modal.dispatchEvent(new Event(ModalContainer.okEvent, { bubbles: true })); - } - } - } - - #closeModal(ev: Event): void { - const modal = ev.target as HTMLDialogElement; - if (modal) { - modal.close(); - } - } -} diff --git a/_dev/src/ts/modals/StartUpdateModal.ts b/_dev/src/ts/dialogs/StartUpdateDialog.ts similarity index 89% rename from _dev/src/ts/modals/StartUpdateModal.ts rename to _dev/src/ts/dialogs/StartUpdateDialog.ts index a622fea85..80437baf2 100644 --- a/_dev/src/ts/modals/StartUpdateModal.ts +++ b/_dev/src/ts/dialogs/StartUpdateDialog.ts @@ -1,16 +1,16 @@ import DomLifecycle from '../types/DomLifecycle'; import api from '../api/RequestHandler'; -export default class StartUpdateModal implements DomLifecycle { +export default class StartUpdateDialog implements DomLifecycle { protected readonly formId = 'form-confirm-update'; - protected readonly confirmCheckboxId = 'modal-start-update-own-backup'; + protected readonly confirmCheckboxId = 'dialog-start-update-own-backup'; public mount(): void { this.#form.addEventListener('submit', this.#onSubmit); this.#form.addEventListener('change', this.#onChange); this.#updateSubmitButtonStatus( - document.getElementById('modal-start-update-own-backup') as HTMLInputElement | undefined + document.getElementById('dialog-start-update-own-backup') as HTMLInputElement | undefined ); } diff --git a/_dev/src/ts/pages/UpdatePageBackup.ts b/_dev/src/ts/pages/UpdatePageBackup.ts index 0acc29956..f040093e2 100644 --- a/_dev/src/ts/pages/UpdatePageBackup.ts +++ b/_dev/src/ts/pages/UpdatePageBackup.ts @@ -1,6 +1,6 @@ import api from '../api/RequestHandler'; -import { modalContainer } from '../autoUpgrade'; -import ModalContainer from '../components/ModalContainer'; +import { dialogContainer } from '../autoUpgrade'; +import DialogContainer from '../components/DialogContainer'; import UpdatePage from './UpdatePage'; export default class UpdatePageBackup extends UpdatePage { @@ -12,7 +12,7 @@ export default class UpdatePageBackup extends UpdatePage { this.#form.addEventListener('change', this.#onInputChange); document.getElementById('ua_container')?.addEventListener('click', this.#onClick); - modalContainer.modalContainer.addEventListener(ModalContainer.okEvent, this.#onModalOk); + dialogContainer.DialogContainer.addEventListener(DialogContainer.okEvent, this.#onDialogOk); } public beforeDestroy(): void { @@ -20,7 +20,7 @@ export default class UpdatePageBackup extends UpdatePage { this.#form.removeEventListener('change', this.#onInputChange); document.getElementById('ua_container')?.removeEventListener('click', this.#onClick); - modalContainer.modalContainer.removeEventListener(ModalContainer.okEvent, this.#onModalOk); + dialogContainer.DialogContainer.removeEventListener(DialogContainer.okEvent, this.#onDialogOk); } get #form(): HTMLFormElement { @@ -49,12 +49,12 @@ export default class UpdatePageBackup extends UpdatePage { } }; - readonly #onModalOk = async (ev: Event) => { - // We handle the backup confirmation modal as it is really basic - if ((ev.target as HTMLElement).id === 'modal-confirm-backup') { + readonly #onDialogOk = async (ev: Event) => { + // We handle the backup confirmation dialog as it is really basic + if ((ev.target as HTMLElement).id === 'dialog-confirm-backup') { api.post(this.#form.dataset.routeToConfirmBackup!); } - // The update confirmation modal gets its logic in a dedicated script + // The update confirmation dialog gets its logic in a dedicated script }; readonly #onInputChange = async (ev: Event) => { diff --git a/_dev/src/ts/routing/ScriptHandler.ts b/_dev/src/ts/routing/ScriptHandler.ts index f78ce0cbe..7c4caaf66 100644 --- a/_dev/src/ts/routing/ScriptHandler.ts +++ b/_dev/src/ts/routing/ScriptHandler.ts @@ -7,7 +7,7 @@ import UpdatePagePostUpdate from '../pages/UpdatePagePostUpdate'; import DomLifecycle from '../types/DomLifecycle'; import { RoutesMatching } from '../types/scriptHandlerTypes'; import { routeHandler } from '../autoUpgrade'; -import StartUpdateModal from '../modals/StartUpdateModal'; +import StartUpdateDialog from '../dialogs/StartUpdateDialog'; export default class ScriptHandler { #currentScript: DomLifecycle | undefined; @@ -25,7 +25,7 @@ export default class ScriptHandler { 'update-page-update': UpdatePageUpdate, 'update-page-post-update': UpdatePagePostUpdate, - 'start-update-modal': StartUpdateModal + 'start-update-dialog': StartUpdateDialog }; /** diff --git a/_dev/src/ts/utils/Hydration.ts b/_dev/src/ts/utils/Hydration.ts index 33b448e3b..1f0612c6b 100644 --- a/_dev/src/ts/utils/Hydration.ts +++ b/_dev/src/ts/utils/Hydration.ts @@ -1,5 +1,5 @@ import { ApiResponseHydration } from '../types/apiTypes'; -import { modalContainer, routeHandler, scriptHandler } from '../autoUpgrade'; +import { dialogContainer, routeHandler, scriptHandler } from '../autoUpgrade'; export default class Hydration { /** @@ -33,13 +33,13 @@ export default class Hydration { if (elementToUpdate && data.new_content) { if (data.new_route) { scriptHandler.unloadRouteScript(); - modalContainer.beforeDestroy(); + dialogContainer.beforeDestroy(); } elementToUpdate.innerHTML = data.new_content; if (data.new_route) { - modalContainer.mount(); + dialogContainer.mount(); scriptHandler.updateRouteScript(data.new_route); if (!fromPopState) { diff --git a/_dev/tests/utils/Hydration.test.ts b/_dev/tests/utils/Hydration.test.ts index 6ceec4f79..6045ac707 100644 --- a/_dev/tests/utils/Hydration.test.ts +++ b/_dev/tests/utils/Hydration.test.ts @@ -2,14 +2,14 @@ import Hydration from '../../src/ts/utils/Hydration'; import { ApiResponseHydration } from '../../src/ts/types/apiTypes'; import RouteHandler from '../../src/ts/routing/RouteHandler'; import ScriptHandler from '../../src/ts/routing/ScriptHandler'; -import { modalContainer } from '../../src/ts/autoUpgrade'; +import { dialogContainer } from '../../src/ts/autoUpgrade'; const setNewRouteMock = jest.spyOn(RouteHandler.prototype, 'setNewRoute'); const updateRouteScriptMock = jest.spyOn(ScriptHandler.prototype, 'updateRouteScript'); const unloadRouteScriptMock = jest.spyOn(ScriptHandler.prototype, 'unloadRouteScript'); const loadScriptMock = jest.spyOn(ScriptHandler.prototype, 'loadScript'); -jest.mock('../../src/ts/components/ModalContainer', () => { +jest.mock('../../src/ts/components/DialogContainer', () => { return jest.fn().mockImplementation(() => { return { mount: jest.fn(), @@ -159,7 +159,7 @@ describe('Hydration', () => { ); }); - it('should refresh the modal container if a new page is loaded', () => { + it('should refresh the dialog container if a new page is loaded', () => { const response: ApiResponseHydration = { hydration: true, new_content: `

New Content

`, @@ -169,12 +169,12 @@ describe('Hydration', () => { hydration.hydrate(response); - expect(modalContainer.beforeDestroy).toHaveBeenCalledTimes(1); + expect(dialogContainer.beforeDestroy).toHaveBeenCalledTimes(1); // Called on Init + refresh - expect(modalContainer.mount).toHaveBeenCalledTimes(2); + expect(dialogContainer.mount).toHaveBeenCalledTimes(2); }); - it('should not refresh the modal container if the DOM is untouched', () => { + it('should not refresh the dialog container if the DOM is untouched', () => { const response: ApiResponseHydration = { hydration: true, new_content: `

New Content

`, @@ -184,7 +184,7 @@ describe('Hydration', () => { hydration.hydrate(response); // Called on Init - expect(modalContainer.mount).toHaveBeenCalledTimes(1); + expect(dialogContainer.mount).toHaveBeenCalledTimes(1); }); }); diff --git a/classes/Twig/PageSelectors.php b/classes/Twig/PageSelectors.php index 1c0131ee4..20b87d000 100644 --- a/classes/Twig/PageSelectors.php +++ b/classes/Twig/PageSelectors.php @@ -7,7 +7,7 @@ class PageSelectors public const PAGE_PARENT_ID = 'update_assistant'; public const STEP_PARENT_ID = 'ua_container'; public const STEPPER_PARENT_ID = 'stepper_content'; - public const MODAL_PARENT_ID = 'ua_modal'; + public const DIALOG_PARENT_ID = 'ua_dialog'; public const RADIO_CARD_ONLINE_PARENT_ID = 'radio_card_online'; public const RADIO_CARD_ARCHIVE_PARENT_ID = 'radio_card_archive'; @@ -20,7 +20,7 @@ public static function getAllSelectors(): array 'page_parent_id' => self::PAGE_PARENT_ID, 'step_parent_id' => self::STEP_PARENT_ID, 'stepper_parent_id' => self::STEPPER_PARENT_ID, - 'modal_parent_id' => self::MODAL_PARENT_ID, + 'dialog_parent_id' => self::DIALOG_PARENT_ID, 'radio_card_online_parent_id' => self::RADIO_CARD_ONLINE_PARENT_ID, 'radio_card_archive_parent_id' => self::RADIO_CARD_ARCHIVE_PARENT_ID, ]; diff --git a/controllers/admin/self-managed/UpdatePageBackupController.php b/controllers/admin/self-managed/UpdatePageBackupController.php index 0a30e002f..5d3fb97ef 100644 --- a/controllers/admin/self-managed/UpdatePageBackupController.php +++ b/controllers/admin/self-managed/UpdatePageBackupController.php @@ -59,16 +59,16 @@ public function submitBackup(): JsonResponse { $imagesIncluded = $this->upgradeContainer->getUpgradeConfiguration()->shouldBackupImages(); - return $this->displayModal($imagesIncluded ? 'modal-backup-all' : 'modal-backup', [ - 'modalId' => 'modal-confirm-backup', + return $this->displayDialog($imagesIncluded ? 'dialog-backup-all' : 'dialog-backup', [ + 'dialogId' => 'dialog-confirm-backup', ]); } public function submitUpdate(): JsonResponse { - return $this->displayModal('modal-update', [ + return $this->displayDialog('dialog-update', [ 'noBackUp' => !$this->request->request->getBoolean('backupDone', false), - 'modalId' => 'modal-confirm-update', + 'dialogId' => 'dialog-confirm-update', 'form_route_to_confirm' => Routes::UPDATE_STEP_BACKUP_CONFIRM_UPDATE, @@ -148,14 +148,14 @@ private function getRefreshOfForm(array $params): JsonResponse ); } - private function displayModal(string $modalName, array $params): JsonResponse + private function displayDialog(string $dialogName, array $params): JsonResponse { - $options = $modalName === 'modal-update' ? ['addScript' => 'start-update-modal'] : null; + $options = $dialogName === 'dialog-update' ? ['addScript' => 'start-update-dialog'] : null; return AjaxResponseBuilder::hydrationResponse( - PageSelectors::MODAL_PARENT_ID, + PageSelectors::DIALOG_PARENT_ID, $this->getTwig()->render( - '@ModuleAutoUpgrade/modals/' . $modalName . '.html.twig', + '@ModuleAutoUpgrade/dialogs/' . $dialogName . '.html.twig', $params ), $options diff --git a/storybook/stories/components/Modal.stories.js b/storybook/stories/components/Dialog.stories.js similarity index 79% rename from storybook/stories/components/Modal.stories.js rename to storybook/stories/components/Dialog.stories.js index 66cb3bcc6..8c015143d 100644 --- a/storybook/stories/components/Modal.stories.js +++ b/storybook/stories/components/Dialog.stories.js @@ -23,14 +23,14 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ -import Modal from "../../../views/templates/components/modal.html.twig"; +import Dialog from "../../../views/templates/components/dialog.html.twig"; export default { - title: "Components/Modal", - component: Modal, + title: "Components/Dialog", + component: Dialog, excludeStories: ["Default"], argTypes: { - modalSize: { + dialogSize: { control: "select", options: ["sm", "md", "lg"], }, @@ -39,21 +39,21 @@ export default { export const Default = { args: { - modalId: "modal_id", + dialogId: "dialog_id", title: "Title goes here", message: "Message goes here, lorem ipsum dolor site amet", - modalSize: "lg", + dialogSize: "lg", psBaseUri: "/", - modalDanger: false, + dialogDanger: false, assets_base_path: "", }, }; document.addEventListener("DOMContentLoaded", () => { - const modals = document.querySelectorAll(".modal"); - modals.forEach((modal) => { - modal.style.display = "block"; - modal.classList.add("in"); + const dialogs = document.querySelectorAll(".dialog"); + dialogs.forEach((dialog) => { + dialog.style.display = "block"; + dialog.classList.add("in"); }); }); diff --git a/storybook/stories/components/ModalBackup.stories.js b/storybook/stories/components/DialogBackup.stories.js similarity index 82% rename from storybook/stories/components/ModalBackup.stories.js rename to storybook/stories/components/DialogBackup.stories.js index 69df828b6..70ce5a3de 100644 --- a/storybook/stories/components/ModalBackup.stories.js +++ b/storybook/stories/components/DialogBackup.stories.js @@ -23,17 +23,17 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ -import ModalBackup from "../../../views/templates/modals/modal-backup.html.twig"; -import { Default as Modal } from "./Modal.stories"; +import DialogBackup from "../../../views/templates/dialogs/dialog-backup.html.twig"; +import { Default as Dialog } from "./Dialog.stories"; export default { - title: "Components/Modal", - component: ModalBackup, + title: "Components/Dialog", + component: DialogBackup, }; export const Backup = { args: { - ...Modal.args, - modalSize: "md", + ...Dialog.args, + dialogSize: "md", }, }; diff --git a/storybook/stories/components/ModalBackupAll.stories.js b/storybook/stories/components/DialogBackupAll.stories.js similarity index 82% rename from storybook/stories/components/ModalBackupAll.stories.js rename to storybook/stories/components/DialogBackupAll.stories.js index 2fa04d230..b124d2751 100644 --- a/storybook/stories/components/ModalBackupAll.stories.js +++ b/storybook/stories/components/DialogBackupAll.stories.js @@ -23,17 +23,17 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ -import ModalBackup from "../../../views/templates/modals/modal-backup-all.html.twig"; -import { Default as Modal } from "./Modal.stories"; +import DialogBackup from "../../../views/templates/dialogs/dialog-backup-all.html.twig"; +import { Default as Dialog } from "./Dialog.stories"; export default { - title: "Components/Modal", - component: ModalBackup, + title: "Components/Dialog", + component: DialogBackup, }; export const BackupWithImg = { args: { - ...Modal.args, - modalSize: "md", + ...Dialog.args, + dialogSize: "md", }, }; diff --git a/storybook/stories/components/ModalBackupDelete.stories.js b/storybook/stories/components/DialogBackupDelete.stories.js similarity index 82% rename from storybook/stories/components/ModalBackupDelete.stories.js rename to storybook/stories/components/DialogBackupDelete.stories.js index 339286432..275491425 100644 --- a/storybook/stories/components/ModalBackupDelete.stories.js +++ b/storybook/stories/components/DialogBackupDelete.stories.js @@ -23,20 +23,20 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ -import ModalBackupDelete from "../../../views/templates/modals/modal-backup-delete.html.twig"; -import { Default as Modal } from "./Modal.stories"; +import DialogBackupDelete from "../../../views/templates/dialogs/dialog-backup-delete.html.twig"; +import { Default as Dialog } from "./Dialog.stories"; export default { - title: "Components/Modal", - component: ModalBackupDelete, + title: "Components/Dialog", + component: DialogBackupDelete, }; export const BackupDelete = { args: { - ...Modal.args, + ...Dialog.args, title: "Delete backup", message: "You are about to delete the autoupgrade_save_8.1.6 backup made on 15/07/2024 8:00. As it's your only backup, you will be redirected to the module's home page.", - modalSize: "lg", - modalDanger: true, + dialogSize: "lg", + dialogDanger: true, }, }; diff --git a/storybook/stories/components/ModalErrorReport.stories.js b/storybook/stories/components/DialogErrorReport.stories.js similarity index 81% rename from storybook/stories/components/ModalErrorReport.stories.js rename to storybook/stories/components/DialogErrorReport.stories.js index deb26a19e..ed4035f5b 100644 --- a/storybook/stories/components/ModalErrorReport.stories.js +++ b/storybook/stories/components/DialogErrorReport.stories.js @@ -23,21 +23,21 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ -import ModalErrorReport from "../../../views/templates/modals/modal-error-report.html.twig"; -import { Default as Modal } from "./Modal.stories"; +import DialogErrorReport from "../../../views/templates/dialogs/dialog-error-report.html.twig"; +import { Default as Dialog } from "./Dialog.stories"; export default { - title: "Components/Modal", - component: ModalErrorReport, + title: "Components/Dialog", + component: DialogErrorReport, }; export const ErrorReport = { args: { - ...Modal.args, - modalId: "errorModal", + ...Dialog.args, + dialogId: "errorDialog", title: "Send error report?", message: "", - modalSize: "md", + dialogSize: "md", dataPrivacyLink: "#" }, }; diff --git a/storybook/stories/components/ModalUpdate.stories.js b/storybook/stories/components/DialogUpdate.stories.js similarity index 83% rename from storybook/stories/components/ModalUpdate.stories.js rename to storybook/stories/components/DialogUpdate.stories.js index efa384241..293934294 100644 --- a/storybook/stories/components/ModalUpdate.stories.js +++ b/storybook/stories/components/DialogUpdate.stories.js @@ -23,18 +23,18 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ -import ModalUpdate from "../../../views/templates/modals/modal-update.html.twig"; -import { Default as Modal } from "./Modal.stories"; +import DialogUpdate from "../../../views/templates/dialogs/dialog-update.html.twig"; +import { Default as Dialog } from "./Dialog.stories"; export default { - title: "Components/Modal", - component: ModalUpdate, + title: "Components/Dialog", + component: DialogUpdate, }; export const Update = { args: { - ...Modal.args, - modalSize: "lg", + ...Dialog.args, + dialogSize: "lg", noBackUp: false, }, }; diff --git a/views/templates/components/modal.html.twig b/views/templates/components/dialog.html.twig similarity index 52% rename from views/templates/components/modal.html.twig rename to views/templates/components/dialog.html.twig index 6e968186d..bccb8236e 100644 --- a/views/templates/components/modal.html.twig +++ b/views/templates/components/dialog.html.twig @@ -1,43 +1,43 @@ - -
-
-
-

+

+
+

{{ title }}

-
-
- {% block modal_content %} +
+ {% block dialog_content %} {# Default content can go here, or it can be left empty so that children can override it #}

{{ message|raw }}

{% endblock %} - {% block modal_extra_content %} -
- {% block modal_extra_content_inner %} + {% block dialog_extra_content %} +
+ {% block dialog_extra_content_inner %} {# Default extra content can go here, or it can be left empty so that children can override it #} {% endblock %}
{% endblock %}
- {% block modal_footer %} -
- {% block modal_footer_inner %} + {% block dialog_footer %} +
+ {% block dialog_footer_inner %} {# Default footer content can go here, or it can be left empty so that children can override it #} {% endblock %}
diff --git a/views/templates/modals/modal-backup-all.html.twig b/views/templates/dialogs/dialog-backup-all.html.twig similarity index 55% rename from views/templates/modals/modal-backup-all.html.twig rename to views/templates/dialogs/dialog-backup-all.html.twig index 046f826d9..2e0fff29e 100644 --- a/views/templates/modals/modal-backup-all.html.twig +++ b/views/templates/dialogs/dialog-backup-all.html.twig @@ -1,6 +1,6 @@ -{% extends "@ModuleAutoUpgrade/modals/modal-backup.html.twig" %} +{% extends "@ModuleAutoUpgrade/dialogs/dialog-backup.html.twig" %} -{% block modal_content %} +{% block dialog_content %} {% set message = 'Your files, database, and images will be backed up.'|trans({}) %} {{ parent() }} {% endblock %} diff --git a/views/templates/dialogs/dialog-backup-delete.html.twig b/views/templates/dialogs/dialog-backup-delete.html.twig new file mode 100644 index 000000000..7eb1d1794 --- /dev/null +++ b/views/templates/dialogs/dialog-backup-delete.html.twig @@ -0,0 +1,17 @@ +{% extends "@ModuleAutoUpgrade/components/dialog.html.twig" %} + +{% block dialog_extra_content %}{% endblock %} + +{% block dialog_footer %} +
+ {% block dialog_footer_inner %} + + + + {% endblock %} +
+{% endblock %} diff --git a/views/templates/modals/modal-backup.html.twig b/views/templates/dialogs/dialog-backup.html.twig similarity index 57% rename from views/templates/modals/modal-backup.html.twig rename to views/templates/dialogs/dialog-backup.html.twig index d62456500..58d6dd34f 100644 --- a/views/templates/modals/modal-backup.html.twig +++ b/views/templates/dialogs/dialog-backup.html.twig @@ -1,17 +1,17 @@ -{% extends "@ModuleAutoUpgrade/components/modal.html.twig" %} +{% extends "@ModuleAutoUpgrade/components/dialog.html.twig" %} {% set title = 'Start backup?'|trans({}) %} {% set message = 'Your files and database will be backed up.'|trans({}) %} -{% block modal_content %} +{% block dialog_content %} {{ parent() }} {% endblock %} -{% block modal_extra_content %}{% endblock %} +{% block dialog_extra_content %}{% endblock %} -{% block modal_footer %} -
- {% block modal_footer_inner %} - diff --git a/views/templates/modals/modal-error-report.html.twig b/views/templates/dialogs/dialog-error-report.html.twig similarity index 75% rename from views/templates/modals/modal-error-report.html.twig rename to views/templates/dialogs/dialog-error-report.html.twig index 61446af20..5a69f6d1c 100644 --- a/views/templates/modals/modal-error-report.html.twig +++ b/views/templates/dialogs/dialog-error-report.html.twig @@ -1,7 +1,7 @@ -{% extends "@ModuleAutoUpgrade/components/modal.html.twig" %} +{% extends "@ModuleAutoUpgrade/components/dialog.html.twig" %} -{% block modal_content %} -
+{% block dialog_content %} +

{{ 'Help us improve the module by sending us this error report. You can add details in the description if you want to.'|trans({}) }}

@@ -16,8 +16,8 @@
{% endblock %} -{% block modal_extra_content_inner %} -
+{% block dialog_extra_content_inner %} +
{% endblock %} -{% block modal_footer %} -
- {% block modal_footer_inner %} - diff --git a/views/templates/modals/modal-update.html.twig b/views/templates/dialogs/dialog-update.html.twig similarity index 69% rename from views/templates/modals/modal-update.html.twig rename to views/templates/dialogs/dialog-update.html.twig index 92b60aab7..8eafb612d 100644 --- a/views/templates/modals/modal-update.html.twig +++ b/views/templates/dialogs/dialog-update.html.twig @@ -1,10 +1,10 @@ -{% extends "@ModuleAutoUpgrade/components/modal.html.twig" %} +{% extends "@ModuleAutoUpgrade/components/dialog.html.twig" %} {% set title = 'Start update?'|trans({}) %} -{% block modal_content %} -
+
{% endif %} {% endblock %} -{% block modal_footer %} -
- {% block modal_footer_inner %} - @@ -44,7 +44,7 @@ form="form-confirm-update" > -
+
{% endblock %} diff --git a/views/templates/modals/modal-backup-delete.html.twig b/views/templates/modals/modal-backup-delete.html.twig deleted file mode 100644 index d4c14be93..000000000 --- a/views/templates/modals/modal-backup-delete.html.twig +++ /dev/null @@ -1,17 +0,0 @@ -{% extends "@ModuleAutoUpgrade/components/modal.html.twig" %} - -{% block modal_extra_content %}{% endblock %} - -{% block modal_footer %} -
- {% block modal_footer_inner %} - - - - {% endblock %} -
-{% endblock %}