From 703b1bcec82f4776f715e8d41484af1105aa6eae Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 27 Oct 2024 14:20:50 +0100 Subject: [PATCH 1/4] Add `Field::isReadonly()` --- formwork/src/Fields/Field.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/formwork/src/Fields/Field.php b/formwork/src/Fields/Field.php index c8fb90168..fbffd7119 100644 --- a/formwork/src/Fields/Field.php +++ b/formwork/src/Fields/Field.php @@ -173,6 +173,14 @@ public function isHidden(): bool return $this->is('visible', false); } + /** + * Return whether the field is readonly + */ + public function isReadonly(): bool + { + return $this->is('readonly'); + } + /** * Validate field value */ @@ -239,7 +247,7 @@ public function isValidated(): bool */ public function is(string $key, bool $default = false): bool { - return $this->baseGet($key, $default) === true; + return $this->get($key, $default) === true; } public function get(string $key, mixed $default = null): mixed From afd82a4dc7d1335495c7a7899b836a39c7a3a9e5 Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 27 Oct 2024 14:22:41 +0100 Subject: [PATCH 2/4] Rename css class `.form-input-reset` to `.form-input-action` --- panel/src/scss/components/forms/_forms-base.scss | 9 ++------- panel/src/ts/components/inputs.ts | 2 +- panel/views/fields/date.php | 4 ++-- panel/views/fields/image.php | 4 ++-- 4 files changed, 7 insertions(+), 12 deletions(-) diff --git a/panel/src/scss/components/forms/_forms-base.scss b/panel/src/scss/components/forms/_forms-base.scss index ce044b6da..8dcf3532c 100644 --- a/panel/src/scss/components/forms/_forms-base.scss +++ b/panel/src/scss/components/forms/_forms-base.scss @@ -26,11 +26,6 @@ background-color: var(--color-base-700); color: var(--color-base-300); } - - &[readonly] { - // Safari Mobile bug - @include user-select-none; - } } .form-input[type="checkbox"], @@ -129,7 +124,7 @@ margin-bottom: 0; } -.form-input-reset { +.form-input-action { position: absolute; top: 50%; right: 0.5rem; @@ -159,7 +154,7 @@ padding-left: 1.75rem; } -.form-input-wrap .form-input:has(+ .form-input-reset) { +.form-input-wrap .form-input:has(+ .form-input-action) { padding-right: 1.625rem; } diff --git a/panel/src/ts/components/inputs.ts b/panel/src/ts/components/inputs.ts index 6c5b47d04..cc5a0540c 100644 --- a/panel/src/ts/components/inputs.ts +++ b/panel/src/ts/components/inputs.ts @@ -35,7 +35,7 @@ export class Inputs { $$("select:not([hidden])", parent).forEach((element: HTMLSelectElement) => (this[element.name] = new SelectInput(element, app.config.SelectInput))); - $$(".form-input-reset", parent).forEach((element) => { + $$(".form-input-action[data-reset]", parent).forEach((element) => { const targetId = element.dataset.reset; if (targetId) { element.addEventListener("click", () => { diff --git a/panel/views/fields/date.php b/panel/views/fields/date.php index 543391793..537747404 100644 --- a/panel/views/fields/date.php +++ b/panel/views/fields/date.php @@ -12,5 +12,5 @@ 'disabled' => $field->isDisabled(), 'hidden' => $field->isHidden(), ]) ?>> - icon('times-circle') ?> - \ No newline at end of file + icon('times-circle') ?> + diff --git a/panel/views/fields/image.php b/panel/views/fields/image.php index ed35077e0..de4413f58 100644 --- a/panel/views/fields/image.php +++ b/panel/views/fields/image.php @@ -13,5 +13,5 @@ 'disabled' => $field->isDisabled(), 'hidden' => $field->isHidden(), ]) ?>> - icon('times-circle') ?> - \ No newline at end of file + icon('times-circle') ?> + From 8d32d27d7469c8808ca6f8ebe34729640a75d979 Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 27 Oct 2024 14:28:39 +0100 Subject: [PATCH 3/4] Add `slug` field type --- formwork/fields/slug.php | 74 ++++++++++++++++++++ formwork/src/Pages/Page.php | 5 +- panel/modals/newPage.yaml | 4 +- panel/src/ts/components/inputs.ts | 3 + panel/src/ts/components/inputs/slug-input.ts | 28 ++++++++ panel/src/ts/components/views/pages.ts | 14 ---- panel/views/fields/slug.php | 23 ++++++ 7 files changed, 135 insertions(+), 16 deletions(-) create mode 100644 formwork/fields/slug.php create mode 100644 panel/src/ts/components/inputs/slug-input.ts create mode 100644 panel/views/fields/slug.php diff --git a/formwork/fields/slug.php b/formwork/fields/slug.php new file mode 100644 index 000000000..1417172a4 --- /dev/null +++ b/formwork/fields/slug.php @@ -0,0 +1,74 @@ + function (Field $field, $value): string { + if (Constraint::isEmpty($value)) { + return ''; + } + + if (!is_string($value) && !is_numeric($value)) { + throw new ValidationException(sprintf('Invalid value for field "%s" of type "%s"', $field->name(), $field->type())); + } + + if ($field->has('min') && strlen((string) $value) < $field->get('min')) { + throw new ValidationException(sprintf('The minimum allowed length for field "%s" of type "%s" is %d', $field->name(), $field->value(), $field->get('min'))); + } + + if ($field->has('max') && strlen((string) $value) > $field->get('max')) { + throw new ValidationException(sprintf('The maximum allowed length for field "%s" of type "%s" is %d', $field->name(), $field->value(), $field->get('max'))); + } + + if ($field->has('pattern') && !Constraint::matchesRegex((string) $value, $field->get('pattern'))) { + throw new ValidationException(sprintf('The value of field "%s" of type "%s" does not match the required pattern', $field->name(), $field->value())); + } + + if (!$field->hasUniqueValue()) { + throw new ValidationException(sprintf('The value of field "%s" of type "%s" must be unique', $field->name(), $field->value())); + } + + return (string) $value; + }, + + 'source' => function (Field $field): ?Field { + if (($source = $field->get('source')) === null) { + return null; + } + return $field->parent()?->get($source); + }, + + 'autoUpdate' => function (Field $field): bool { + return $field->is('autoUpdate', true); + }, + + 'hasUniqueValue' => function (Field $field): bool { + $root = $field->get('root'); + + if ($root === null) { + return true; + } + + $parentField = $field->parent()?->get($root); + + if ($parentField === null || $parentField->type() !== 'page') { + throw new ValidationException(sprintf('Invalid parent reference for field "%s" of type "%s"', $field->name(), $field->type())); + } + + $children = $parentField->return()->children(); + + foreach ($children as $child) { + if ($child->slug() === $field->value()) { + return false; + } + } + + return true; + }, + ]; +}; diff --git a/formwork/src/Pages/Page.php b/formwork/src/Pages/Page.php index a3333fc60..99d0f6e94 100644 --- a/formwork/src/Pages/Page.php +++ b/formwork/src/Pages/Page.php @@ -185,7 +185,7 @@ public function __construct(array $data = []) ]; } - $this->fields->setValues([...$this->data, 'parent' => $this->parent()?->route(), 'template' => $this->template]); + $this->fields->setValues([...$this->data, 'slug' => $this->slug, 'parent' => $this->parent()?->route(), 'template' => $this->template]); $this->loaded = true; } @@ -460,6 +460,9 @@ public function setSlug(string $slug): void if (!$this->validateSlug($slug)) { throw new InvalidArgumentException('Invalid page slug'); } + if ($slug === $this->slug) { + return; + } if ($this->isIndexPage() || $this->isErrorPage()) { throw new UnexpectedValueException('Cannot change slug of index or error pages'); } diff --git a/panel/modals/newPage.yaml b/panel/modals/newPage.yaml index 8bc9b8fcb..aa8fb354d 100644 --- a/panel/modals/newPage.yaml +++ b/panel/modals/newPage.yaml @@ -9,11 +9,13 @@ fields: required: true slug: - type: text + type: slug label: '{{panel.pages.newPage.slug}}' suggestion: '{{panel.pages.newPage.slugSuggestion}}' required: true pattern: '^[a-z0-9\-]+$' + source: title + root: parent parent: type: page diff --git a/panel/src/ts/components/inputs.ts b/panel/src/ts/components/inputs.ts index cc5a0540c..87bbd00eb 100644 --- a/panel/src/ts/components/inputs.ts +++ b/panel/src/ts/components/inputs.ts @@ -9,6 +9,7 @@ import { ImageInput } from "./inputs/image-input"; import { ImagePicker } from "./inputs/image-picker"; import { RangeInput } from "./inputs/range-input"; import { SelectInput } from "./inputs/select-input"; +import { SlugInput } from "./inputs/slug-input"; import { TagInput } from "./inputs/tag-input"; export class Inputs { @@ -35,6 +36,8 @@ export class Inputs { $$("select:not([hidden])", parent).forEach((element: HTMLSelectElement) => (this[element.name] = new SelectInput(element, app.config.SelectInput))); + $$(".form-input-slug", parent).forEach((element: HTMLInputElement) => (this[element.name] = new SlugInput(element))); + $$(".form-input-action[data-reset]", parent).forEach((element) => { const targetId = element.dataset.reset; if (targetId) { diff --git a/panel/src/ts/components/inputs/slug-input.ts b/panel/src/ts/components/inputs/slug-input.ts new file mode 100644 index 000000000..fee6e19bd --- /dev/null +++ b/panel/src/ts/components/inputs/slug-input.ts @@ -0,0 +1,28 @@ +import { makeSlug, validateSlug } from "../../utils/validation"; +import { $ } from "../../utils/selectors"; + +export class SlugInput { + constructor(element: HTMLInputElement) { + const source = $(`[id="${element.dataset.source}"]`) as HTMLInputElement | null; + const autoUpdate = "autoUpdate" in element.dataset && element.dataset.autoUpdate === "true"; + + if (source) { + if (autoUpdate) { + source.addEventListener("input", () => (element.value = makeSlug(source.value))); + } else { + const generateButton = $(`[data-generate-slug="${element.id}"]`) as HTMLButtonElement | null; + if (generateButton) { + generateButton.addEventListener("click", () => (element.value = makeSlug(source.value))); + } + } + } + + const handleSlugChange = (event: Event) => { + const target = event.target as HTMLInputElement; + target.value = validateSlug(target.value); + }; + + element.addEventListener("keyup", handleSlugChange); + element.addEventListener("blur", handleSlugChange); + } +} diff --git a/panel/src/ts/components/views/pages.ts b/panel/src/ts/components/views/pages.ts index 90a40ee74..39f45a3d5 100644 --- a/panel/src/ts/components/views/pages.ts +++ b/panel/src/ts/components/views/pages.ts @@ -122,22 +122,8 @@ export class Pages { } if (newPageModal) { - 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) => { - const target = event.target as HTMLInputElement; - target.value = validateSlug(target.value); - }; - - slugInput.addEventListener("keyup", handleSlugChange); - slugInput.addEventListener("blur", handleSlugChange); - parentSelect.addEventListener("change", () => { const option = $('.dropdown-list[data-for="newPageModal.parent"] .selected'); diff --git a/panel/views/fields/slug.php b/panel/views/fields/slug.php new file mode 100644 index 000000000..0c993e4dd --- /dev/null +++ b/panel/views/fields/slug.php @@ -0,0 +1,23 @@ +layout('fields.field') ?> +
+ attr([ + 'class' => ['form-input', 'form-input-slug', $field->get('class')], + 'type' => 'text', + 'id' => $field->name(), + 'name' => $field->formName(), + 'value' => $field->value(), + 'placeholder' => $field->placeholder(), + 'minlength' => $field->get('min'), + 'maxlength' => $field->get('max'), + 'pattern' => $field->get('pattern'), + 'required' => $field->isRequired(), + 'disabled' => $field->isDisabled(), + 'hidden' => $field->isHidden(), + 'readonly' => $field->isReadonly(), + 'data-source' => $field->source()?->name(), + 'data-auto-update' => $field->autoUpdate() ? 'true' : 'false', + ]) ?>> + autoUpdate() && !$field->isReadonly()): ?> + icon('sparks') ?> + +
From 24234fbd86a3d8ae808bb55566b30567f71b54de Mon Sep 17 00:00:00 2001 From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com> Date: Sun, 27 Oct 2024 14:35:24 +0100 Subject: [PATCH 4/4] Replace page slug modal with field in attributes section --- formwork/src/Pages/Page.php | 20 ++++++- .../src/Panel/Controllers/PagesController.php | 2 - panel/modals/slug.yaml | 32 ----------- panel/src/scss/components/_pages.scss | 39 -------------- panel/src/ts/components/views/pages.ts | 54 +------------------ panel/views/pages/editor.php | 9 +--- site/schemes/pages/default.yaml | 9 ++++ site/schemes/pages/page.yaml | 11 +++- 8 files changed, 39 insertions(+), 137 deletions(-) delete mode 100644 panel/modals/slug.yaml diff --git a/formwork/src/Pages/Page.php b/formwork/src/Pages/Page.php index 99d0f6e94..36f62dc54 100644 --- a/formwork/src/Pages/Page.php +++ b/formwork/src/Pages/Page.php @@ -58,7 +58,7 @@ class Page extends Model implements Stringable /** * Ignored field names on frontmatter generation */ - protected const IGNORED_FIELD_NAMES = ['content', 'template', 'parent']; + protected const IGNORED_FIELD_NAMES = ['content', 'slug', 'template', 'parent']; /** * Ignored field types on frontmatter generation @@ -603,6 +603,22 @@ public function isDeletable(): bool return !($this->hasChildren() || $this->isIndexPage() || $this->isErrorPage()); } + /** + * Return whether the slug is editable + */ + public function isSlugEditable(): bool + { + return !$this->isIndexPage() && !$this->isErrorPage(); + } + + /** + * Return whether the slug is readonly + */ + public function isSlugReadonly(): bool + { + return !$this->isSlugEditable(); + } + /** * Return whether the page has loaded */ @@ -686,7 +702,7 @@ public function save(?string $language = null): void $defaults = $this->defaults(); $fieldCollection = $this->fields - ->setValues([...$this->data, 'parent' => $this->parent()->route(), 'template' => $this->template]) + ->setValues([...$this->data, 'slug' => $this->slug, 'parent' => $this->parent()->route(), 'template' => $this->template]) ->validate(); foreach ($fieldCollection as $field) { diff --git a/formwork/src/Panel/Controllers/PagesController.php b/formwork/src/Panel/Controllers/PagesController.php index 57a1dfad9..7c2876dc0 100644 --- a/formwork/src/Panel/Controllers/PagesController.php +++ b/formwork/src/Panel/Controllers/PagesController.php @@ -197,8 +197,6 @@ public function edit(RouteParams $routeParams): Response $this->modal('changes'); - $this->modal('slug'); - $this->modal('deletePage'); $this->modal('deleteFile'); diff --git a/panel/modals/slug.yaml b/panel/modals/slug.yaml deleted file mode 100644 index 1d3165f2b..000000000 --- a/panel/modals/slug.yaml +++ /dev/null @@ -1,32 +0,0 @@ -title: '{{panel.pages.changeSlug}}' - -form: false - -fields: - newSlug: - type: text - label: '{{panel.pages.newPage.slug}}' - suggestion: '{{panel.pages.newPage.slugSuggestion}}' - required: true - -buttons: - dismiss: - action: dismiss - icon: times-circle - label: '{{panel.modal.action.cancel}}' - variant: secondary - - continue: - action: command - icon: check-circle - label: '{{panel.modal.action.continue}}' - align: right - command: continue - - generate: - action: command - icon: sparks - label: '{{panel.pages.changeSlug.generate}}' - variant: link - align: right - command: generate-slug diff --git a/panel/src/scss/components/_pages.scss b/panel/src/scss/components/_pages.scss index 6393fbb74..68dabc327 100644 --- a/panel/src/scss/components/_pages.scss +++ b/panel/src/scss/components/_pages.scss @@ -16,11 +16,6 @@ font-size: $font-size-sm; } -.page-route-changeable { - padding: $focusring-width; - margin: -($focusring-width); -} - .button .page-language { font-size: $font-size-xs; } @@ -100,40 +95,6 @@ white-space: nowrap; } -.page-slug-change { - padding: 0; - border-color: transparent; - margin: 0; - background-color: transparent; - box-shadow: none; - color: var(--color-base-300); - cursor: pointer; - - &:hover, - &:focus { - border-color: transparent; - background-color: transparent; - color: var(--color-base-300); - } - - &:focus { - @include focusring; - } - - & .icon { - display: inline-block; - margin-right: 0; - color: var(--color-base-100); - opacity: 0; - transition: opacity $transition-time-sm; - } - - &:hover .icon, - &:focus .icon { - opacity: 1; - } -} - .is-dragging .page-title { pointer-events: none; } diff --git a/panel/src/ts/components/views/pages.ts b/panel/src/ts/components/views/pages.ts index 39f45a3d5..073b09481 100644 --- a/panel/src/ts/components/views/pages.ts +++ b/panel/src/ts/components/views/pages.ts @@ -1,5 +1,5 @@ import { $, $$ } from "../../utils/selectors"; -import { escapeRegExp, makeDiacriticsRegExp, makeSlug, validateSlug } from "../../utils/validation"; +import { escapeRegExp, makeDiacriticsRegExp } from "../../utils/validation"; import { app } from "../../app"; import { debounce } from "../../utils/events"; import { Notification } from "../notification"; @@ -12,12 +12,10 @@ export class Pages { const commandCollapseAllPages = $("[data-command=collapse-all-pages]") as HTMLButtonElement; const commandReorderPages = $("[data-command=reorder-pages]") as HTMLButtonElement; const commandPreview = $("[data-command=preview]") as HTMLButtonElement; - const commandChangeSlug = $("[data-command=change-slug]") as HTMLButtonElement; const searchInput = $(".page-search"); const newPageModal = app.modals["newPageModal"]; - const slugModal = app.modals["slugModal"]; $$(".pages-tree").forEach((element) => { if (element.dataset.orderableChildren === "true") { @@ -182,56 +180,6 @@ 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 = $('[id="slugModal.newSlug"]', modal.element) as HTMLInputElement; - slugInput.value = slug; - slugInput.placeholder = slug; - }); - }); - - const handleSlugChange = (event: Event) => { - const target = event.target as HTMLInputElement; - target.value = validateSlug(target.value); - }; - - newSlugInput.addEventListener("keyup", handleSlugChange); - newSlugInput.addEventListener("blur", handleSlugChange); - - commandGenerateSlug.addEventListener("click", () => { - const slug = makeSlug((document.getElementById("title") as HTMLInputElement).value); - newSlugInput.value = slug; - newSlugInput.focus(); - }); - - const changeSlug = () => { - const slug = newSlugInput.value.replace(/^-+|-+$/, ""); - - if (slug.length > 0) { - const route = ($(".page-route-inner") as HTMLElement).innerHTML; - 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 input = $('[id="renameFileModal.filename"]') as HTMLInputElement; diff --git a/panel/views/pages/editor.php b/panel/views/pages/editor.php index 47e22540d..3005b05c2 100644 --- a/panel/views/pages/editor.php +++ b/panel/views/pages/editor.php @@ -13,16 +13,9 @@
insert('_pages/status', ['page' => $page]) ?>
- isIndexPage() && !$page->isErrorPage()) : ?> -
- -
- -
route() ?>
- +
route() ?>
- diff --git a/site/schemes/pages/default.yaml b/site/schemes/pages/default.yaml index 9d9b13cdc..90b4c321d 100644 --- a/site/schemes/pages/default.yaml +++ b/site/schemes/pages/default.yaml @@ -18,6 +18,15 @@ fields: label: '{{page.status.published}}' default: true + slug: + type: slug + label: '{{page.slug}}' + suggestion: '{{panel.pages.newPage.slugSuggestion}}' + required: true + readonly@: page.isSlugReadonly + source: title + autoUpdate: false + parent: type: page label: '{{page.parent}}' diff --git a/site/schemes/pages/page.yaml b/site/schemes/pages/page.yaml index a39991cb7..4202e35a8 100644 --- a/site/schemes/pages/page.yaml +++ b/site/schemes/pages/page.yaml @@ -22,7 +22,7 @@ layout: collapsible: true collapsed: true label: '{{page.attributes}}' - fields: [parent, template] + fields: [slug, parent, template] files: collapsible: true @@ -76,6 +76,15 @@ fields: label: '{{page.cacheable}}' default: true + slug: + type: slug + label: '{{page.slug}}' + suggestion: '{{panel.pages.newPage.slugSuggestion}}' + required: true + readonly@: page.isSlugReadonly + source: title + autoUpdate: false + parent: type: page label: '{{page.parent}}'