Fix automatic slug update on sbs form

digitalfabrik · Jun 11, 2024 · cd23bd9 · cd23bd9
1 parent 234e040
commit cd23bd9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/integreat_cms/cms/templates/pages/page_sbs.html b/integreat_cms/cms/templates/pages/page_sbs.html
@@ -178,7 +178,7 @@ <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 %}
+                            {% render_field page_translation_form.slug placeholder=slug_placeholder id="target_slug-link" %}
                         </div>
                         <label for="{{ page_translation_form.title.id_for_label }}">
                             {{ page_translation_form.title.label }}

diff --git a/integreat_cms/static/src/js/forms/update-permalink.ts b/integreat_cms/static/src/js/forms/update-permalink.ts
@@ -82,4 +82,22 @@ window.addEventListener("load", () => {
         slugField.value = currentSlug;
         toggleSlugMode();
     });
+
+    // This is used to slugify the title of the slug in target language
+    const slugifyStr = (str: string) => {
+        let trimmedStr = str.replace(/^\s+|\s+$/g, ""); // trim leading/trailing white space
+        let loweredCaseStr = trimmedStr.toLowerCase(); // convert string to lowercase
+        let slugStr = loweredCaseStr
+            .replace(/[^a-z0-9 -]/g, "") // remove any non-alphanumeric characters
+            .replace(/\s+/g, "-") // replace spaces with hyphens
+            .replace(/-+/g, "-"); // remove consecutive hyphens
+        return slugStr;
+    };
+    document.getElementById("target_translation_title")?.addEventListener("focusout", () => {
+        const targetLinkElement = document.getElementById("target_slug-link") as HTMLInputElement;
+        const targetTitleElement = (document.getElementById("target_translation_title") as HTMLInputElement).value
+            .trim()
+            .replace(/\s+/g, " ");
+        targetLinkElement.value = slugifyStr(targetTitleElement);
+    });
 });