From 4fc7c7808fb7f0f05aff99f455213f67273aeb9f Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Wed, 16 Oct 2024 23:28:56 +0200 Subject: [PATCH] Always prefix modal fields with modal id --- formwork/src/Panel/Modals/Modal.php | 8 ++- .../components/inputs/editor/markdown/menu.ts | 6 +- panel/src/ts/components/views/pages.ts | 69 +++++++++++-------- panel/views/modals/modal.php | 6 +- 4 files changed, 49 insertions(+), 40 deletions(-) diff --git a/formwork/src/Panel/Modals/Modal.php b/formwork/src/Panel/Modals/Modal.php index 40838ecd..1c4ecbc9 100644 --- a/formwork/src/Panel/Modals/Modal.php +++ b/formwork/src/Panel/Modals/Modal.php @@ -15,13 +15,17 @@ class Modal implements Arrayable { use DataArrayable; + protected string $id; + protected ModalButtonCollection $buttons; /** * @param array $data */ - public function __construct(protected string $id, array $data, protected Translation $translation, protected FieldFactory $fieldFactory) + public function __construct(string $id, array $data, protected Translation $translation, protected FieldFactory $fieldFactory) { + $this->id = Str::append($id, 'Modal'); + $this->data = [...$this->defaults(), ...$data]; if ($this->data['title'] === null) { @@ -61,7 +65,7 @@ class Modal implements Arrayable { $fieldCollection = new FieldCollection(); - $fieldCollection->setMultiple(Arr::map($this->data['fields'] ?? [], fn ($data, $name) => $this->fieldFactory->make($name, $data, $fieldCollection))); + $fieldCollection->setMultiple(Arr::map($this->data['fields'] ?? [], fn ($data, $name) => $this->fieldFactory->make($this->id . '.' . $name, $data, $fieldCollection))); return $fieldCollection; } diff --git a/panel/src/ts/components/inputs/editor/markdown/menu.ts b/panel/src/ts/components/inputs/editor/markdown/menu.ts index 143243c1..af075178 100644 --- a/panel/src/ts/components/inputs/editor/markdown/menu.ts +++ b/panel/src/ts/components/inputs/editor/markdown/menu.ts @@ -269,11 +269,7 @@ export function menuPlugin() { return true; } app.modals["linkModal"].show(undefined, (modal) => { - const uri = $("[name=uri]", modal.element) as HTMLInputElement; - uri.value = ""; - ($("[data-command=insert-link]", modal.element) as HTMLElement).addEventListener("click", insertLink); - function insertLink(this: HTMLElement) { - const uri = $("[name=uri]", modal.element) as HTMLInputElement; + const uri = $('[id="linkModal.uri"]') as HTMLInputElement; if (view && uri.value) { toggleMark(schema.marks.link, { href: uri.value })(view.state, view.dispatch); } diff --git a/panel/src/ts/components/views/pages.ts b/panel/src/ts/components/views/pages.ts index a90ac47f..90a40ee7 100644 --- a/panel/src/ts/components/views/pages.ts +++ b/panel/src/ts/components/views/pages.ts @@ -16,8 +16,8 @@ export class Pages { const searchInput = $(".page-search"); - const newPageModal = document.getElementById("newPageModal"); - const slugModal = document.getElementById("slugModal"); + const newPageModal = app.modals["newPageModal"]; + const slugModal = app.modals["slugModal"]; $$(".pages-tree").forEach((element) => { if (element.dataset.orderableChildren === "true") { @@ -122,8 +122,12 @@ export class Pages { } if (newPageModal) { - ($("#title", newPageModal) as HTMLElement).addEventListener("keyup", (event) => { - ($("#slug", newPageModal) as HTMLInputElement).value = makeSlug((event.target as HTMLInputElement).value); + const titleInput = $('[id="newPageModal.title"]') as HTMLInputElement; + const slugInput = $('[id="newPageModal.slug"]') as HTMLInputElement; + const parentSelect = $('[id="newPageModal.parent"]') as HTMLInputElement; + + titleInput.addEventListener("keyup", (event) => { + ($('[id="newPageModal.slug"]') as HTMLInputElement).value = makeSlug((event.target as HTMLInputElement).value); }); const handleSlugChange = (event: Event) => { @@ -131,11 +135,11 @@ export class Pages { target.value = validateSlug(target.value); }; - ($("#slug", newPageModal) as HTMLElement).addEventListener("keyup", handleSlugChange); - ($("#slug", newPageModal) as HTMLElement).addEventListener("blur", handleSlugChange); + slugInput.addEventListener("keyup", handleSlugChange); + slugInput.addEventListener("blur", handleSlugChange); - ($("#parent", newPageModal) as HTMLElement).addEventListener("change", () => { - const option = $('.dropdown-list[data-for="parent"] .selected', newPageModal); + parentSelect.addEventListener("change", () => { + const option = $('.dropdown-list[data-for="newPageModal.parent"] .selected'); if (!option) { return; @@ -143,14 +147,14 @@ export class Pages { const allowedTemplates = option.dataset.allowedTemplates ? option.dataset.allowedTemplates.split(" ") : []; - const pageTemplate = $("#template", newPageModal) as HTMLInputElement; + const pageTemplate = $('[id="newPageModal.template"]') as HTMLInputElement; if (allowedTemplates.length > 0) { pageTemplate.dataset.previousValue = pageTemplate.value; pageTemplate.value = allowedTemplates[0]; - ($('.form-select[data-for="template"', newPageModal) as HTMLInputElement).value = ($(`.dropdown-list[data-for="template"] .dropdown-item[data-value="${pageTemplate.value}"]`, newPageModal) as HTMLElement).innerText; + ($('.form-select[data-for="newPageModal.template"]') as HTMLInputElement).value = ($(`.dropdown-list[data-for="newPageModal.template"] .dropdown-item[data-value="${pageTemplate.value}"]`) as HTMLElement).innerText; - $$('.dropdown-list[data-for="template"] .dropdown-item').forEach((option) => { + $$('.dropdown-list[data-for="newPageModal.template"] .dropdown-item').forEach((option) => { if (!allowedTemplates.includes(option.dataset.value as string)) { option.classList.add("disabled"); } @@ -159,10 +163,10 @@ export class Pages { if ("previousValue" in pageTemplate.dataset) { pageTemplate.value = pageTemplate.dataset.previousValue as string; delete pageTemplate.dataset.previousValue; - ($('.form-select[data-for="template"', newPageModal) as HTMLInputElement).value = ($(`.dropdown-list[data-for="template"] .dropdown-item[data-value="${pageTemplate.value}"]`, newPageModal) as HTMLElement).innerText; + ($('.form-select[data-for="newPageModal.template"]') as HTMLInputElement).value = ($(`.dropdown-list[data-for="newPageModal.template"] .dropdown-item[data-value="${pageTemplate.value}"]`) as HTMLElement).innerText; } - $$('.dropdown-list[data-for="template"] .dropdown-item', newPageModal).forEach((option) => { + $$('.dropdown-list[data-for="newPageModal.template"] .dropdown-item').forEach((option) => { option.classList.remove("disabled"); }); } @@ -193,53 +197,58 @@ export class Pages { } if (slugModal && commandChangeSlug) { + const newSlugInput = $('[id="slugModal.newSlug"]') as HTMLInputElement; + const commandGenerateSlug = $("[data-command=generate-slug]", slugModal.element) as HTMLElement; + const commandContinue = $("[data-command=continue]", slugModal.element) as HTMLElement; + commandChangeSlug.addEventListener("click", () => { app.modals["slugModal"].show(undefined, (modal) => { const slug = (document.getElementById("slug") as HTMLInputElement).value; - const slugInput = $("#newSlug", modal.element) as HTMLInputElement; + const slugInput = $('[id="slugModal.newSlug"]', modal.element) as HTMLInputElement; slugInput.value = slug; slugInput.placeholder = slug; }); }); - ($("#newSlug", slugModal) as HTMLElement).addEventListener("keydown", (event) => { - if (event.key === "Enter") { - ($("[data-command=continue]", slugModal) as HTMLElement).click(); - } - }); - const handleSlugChange = (event: Event) => { const target = event.target as HTMLInputElement; target.value = validateSlug(target.value); }; - ($("#newSlug", slugModal) as HTMLElement).addEventListener("keyup", handleSlugChange); - ($("#newSlug", slugModal) as HTMLElement).addEventListener("blur", handleSlugChange); + newSlugInput.addEventListener("keyup", handleSlugChange); + newSlugInput.addEventListener("blur", handleSlugChange); - ($("[data-command=generate-slug]", slugModal) as HTMLElement).addEventListener("click", () => { + commandGenerateSlug.addEventListener("click", () => { const slug = makeSlug((document.getElementById("title") as HTMLInputElement).value); - ($("#newSlug", slugModal) as HTMLInputElement).value = slug; - ($("#newSlug", slugModal) as HTMLElement).focus(); + newSlugInput.value = slug; + newSlugInput.focus(); }); - ($("[data-command=continue]", slugModal) as HTMLElement).addEventListener("click", () => { - const slug = ($("#newSlug", slugModal) as HTMLInputElement).value.replace(/^-+|-+$/, ""); + const changeSlug = () => { + const slug = newSlugInput.value.replace(/^-+|-+$/, ""); if (slug.length > 0) { const route = ($(".page-route-inner") as HTMLElement).innerHTML; - ($("#newSlug", slugModal) as HTMLInputElement).value = slug; + newSlugInput.value = slug; ($("#slug") as HTMLInputElement).value = slug; ($(".page-route-inner") as HTMLElement).innerHTML = route.replace(/\/[a-z0-9-]+\/$/, `/${slug}/`); } app.modals["slugModal"].hide(); + }; + + commandContinue.addEventListener("click", changeSlug); + + newSlugInput.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + changeSlug(); + } }); } $$("[data-modal=renameFileModal]").forEach((element) => { element.addEventListener("click", () => { - const modal = document.getElementById("renameFileModal") as HTMLElement; - const input = $("#filename", modal) as HTMLInputElement; + const input = $('[id="renameFileModal.filename"]') as HTMLInputElement; input.value = element.dataset.filename as string; input.setSelectionRange(0, input.value.lastIndexOf(".")); }); diff --git a/panel/views/modals/modal.php b/panel/views/modals/modal.php index 9780731e..41f6a6a2 100644 --- a/panel/views/modals/modal.php +++ b/panel/views/modals/modal.php @@ -1,10 +1,10 @@ -