mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-01-17 13:38:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Always prefix modal fields with modal id

Browse Source
This commit is contained in:
Giuseppe Criscione 2024-10-16 23:28:56 +02:00
parent b87da99adb
commit 4fc7c7808f
4 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
formwork/src/Panel/Modals/Modal.php
View File

@ -15,13 +15,17 @@ class Modal implements Arrayable
{
use DataArrayable;
protected string $id;
protected ModalButtonCollection $buttons;
/**
* @param array<string, mixed> $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;
}

6
panel/src/ts/components/inputs/editor/markdown/menu.ts
View File

@ -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);
}

69
panel/src/ts/components/views/pages.ts
View File

@ -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("."));
});

6
panel/views/modals/modal.php
View File

@ -1,10 +1,10 @@
<div id="<?= $modal->id() ?>Modal" class="modal" aria-labelledby="<?= $modal->id() ?>ModalLabel">
<div id="<?= $modal->id() ?>" class="modal" aria-labelledby="<?= $modal->id() ?>Label">
<div class="<?= $this->classes(['modal-container', 'modal-size-large' => $modal->size() === 'large']) ?>">
<?php if ($modal->hasForm()): ?>
<form <?php if ($modal->action()) : ?>action="<?= $panel->uri($modal->action()) ?>" <?php endif ?> method="post">
<?php endif ?>
<div class="modal-header">
<div class="caption" id="<?= $modal->id() ?>ModalLabel"><?= $this->escape($modal->title()) ?></div>
<div class="caption" id="<?= $modal->id() ?>Label"><?= $this->escape($modal->title()) ?></div>
</div>
<div class="modal-content">
<?php if ($modal->message()) : ?>
@ -36,4 +36,4 @@
</form>
<?php endif ?>
</div>
</div>
</div>