Merge two focus events into one

digitalfabrik · Jul 22, 2024 · fa5b7c4 · fa5b7c4
1 parent 2b79dcc
commit fa5b7c4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 32 deletions.
diff --git a/integreat_cms/cms/templates/pages/page_sbs.html b/integreat_cms/cms/templates/pages/page_sbs.html
@@ -179,12 +179,12 @@ <h1 class="heading">
                                 {{ page_translation_form.instance.base_link }}
                             </label>
                             {% translate " Leave blank to generate unique permalink from title" as slug_placeholder %}
-                            {% render_field page_translation_form.slug placeholder=slug_placeholder id="target_slug-link" %}
+                            {% render_field page_translation_form.slug placeholder=slug_placeholder %}
                         </div>
                         <label for="{{ page_translation_form.title.id_for_label }}">
                             {{ page_translation_form.title.label }}
                         </label>
-                        {% render_field page_translation_form.title|add_error_class:"border-red-500" id="target_translation_title" %}
+                        {% render_field page_translation_form.title|add_error_class:"border-red-500" %}
                         <label for="{{ page_translation_form.content.id_for_label }}">
                             {{ page_translation_form.content.label }}
                         </label>

diff --git a/integreat_cms/static/src/js/forms/update-permalink.ts b/integreat_cms/static/src/js/forms/update-permalink.ts
@@ -40,21 +40,25 @@ window.addEventListener("load", () => {
             .setAttribute("data-copy-to-clipboard", encodeURI(updatedLink.concat(currentSlug)));
     };
 
-    if (
-        document.getElementById("id_title") &&
-        (document.querySelector('[for="id_title"]') as HTMLElement)?.dataset?.slugifyUrl
-    ) {
-        document.getElementById("id_title").addEventListener("focusout", ({ target }) => {
-            const submissionLock = new SubmissionPrevention(".no-premature-submission");
-            const currentTitle = (target as HTMLInputElement).value;
-            const dataset = (document.querySelector('[for="id_title"]') as HTMLElement).dataset;
-            slugify(dataset.slugifyUrl, { title: currentTitle, model_id: dataset.modelId })
-                .then((response) => {
-                    /* on success write response to both slug field and permalink */
-                    slugField.value = response.unique_slug;
-                    updatePermalink(response.unique_slug);
-                })
-                .finally(() => submissionLock.release());
+    if (document.querySelectorAll("#id_title")) {
+        document.querySelectorAll("#id_title").forEach((item) => {
+            item.addEventListener("focusout", ({ target }) => {
+                const submissionLock = new SubmissionPrevention(".no-premature-submission");
+                const currentTitle = (target as HTMLInputElement).value;
+                const nodeList: NodeListOf<HTMLInputElement> = document.querySelectorAll(
+                    '[for="id_title"],[for="id_slug"]'
+                );
+                for (const node of nodeList) {
+                    const datasetItem = node.dataset;
+                    slugify(datasetItem.slugifyUrl, { title: currentTitle, model_id: datasetItem.modelId })
+                        .then((response) => {
+                            /* on success write response to both slug field and permalink */
+                            slugField.value = response.unique_slug;
+                            updatePermalink(response.unique_slug);
+                        })
+                        .finally(() => submissionLock.release());
+                }
+            });
         });
     }
 
@@ -86,19 +90,4 @@ window.addEventListener("load", () => {
         slugField.value = currentSlug;
         toggleSlugMode();
     });
-
-    // This is used to slugify the title of the slug in target language in the page_sbs template
-    document.getElementById("target_translation_title")?.addEventListener("focusout", () => {
-        const submissionLock = new SubmissionPrevention(".no-premature-submission");
-        const targetTitleElement = (document.getElementById("target_translation_title") as HTMLInputElement).value;
-        const targetLinkElement = document.getElementById("target_slug-link") as HTMLInputElement;
-        const dataset = (document.querySelector('[for="id_slug"]') as HTMLElement).dataset;
-        slugify(dataset.slugifyUrl, { title: targetTitleElement, model_id: dataset.modelId })
-            .then((response) => {
-                /* on success write response to both slug field and permalink */
-                targetLinkElement.value = response.unique_slug;
-                updatePermalink(response.unique_slug);
-            })
-            .finally(() => submissionLock.release());
-    });
 });