From d6fdcd3ef9508e8dbf1a461093df93b201944ea7 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 23 Feb 2020 15:20:41 +0100
Subject: [PATCH] ui: re-add automatic slug generation

---
 passbook/static/static/passbook/pf.js | 47 +++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/passbook/static/static/passbook/pf.js b/passbook/static/static/passbook/pf.js
index 1e75d5850..44e713308 100644
--- a/passbook/static/static/passbook/pf.js
+++ b/passbook/static/static/passbook/pf.js
@@ -36,3 +36,50 @@ document.querySelectorAll(".codemirror").forEach((cm) => {
         autoRefresh: true,
     });
 });
+
+// Automatic slug fields
+const convertToSlug = (text) => {
+    return text
+        .toLowerCase()
+        .replace(/[^\w ]+/g, '')
+        .replace(/ +/g, '-');
+};
+
+document.querySelectorAll("input[name=name]").forEach((input) => {
+    input.addEventListener("input", (e) => {
+        const form = e.target.closest("form");
+        const slugField = form.querySelector("input[name=slug]");
+        slugField.value = convertToSlug(slugField.value);
+    });
+});
+
+// Dynamic Array field logic
+window.addEventListener('load', function () {
+
+    function addRemoveEventListener(widgetElement) {
+        widgetElement.querySelectorAll('.array-remove').forEach(function (element) {
+            element.addEventListener('click', function () {
+                this.parentNode.parentNode.remove();
+            });
+        });
+    }
+
+    document.querySelectorAll('.dynamic-array-widget').forEach(function (widgetElement) {
+
+        addRemoveEventListener(widgetElement);
+
+        widgetElement.querySelector('.add-array-item').addEventListener('click', function () {
+            var first = widgetElement.querySelector('.array-item');
+            var newElement = first.cloneNode(true);
+            var id_parts = newElement.querySelector('input').getAttribute('id').split('_');
+            var id = id_parts.slice(0, -1).join('_') + '_' + String(parseInt(id_parts.slice(-1)[0]) + 1);
+            newElement.querySelector('input').setAttribute('id', id);
+            newElement.querySelector('input').value = '';
+
+            addRemoveEventListener(newElement);
+            first.parentElement.insertBefore(newElement, first.parentNode.lastChild);
+        });
+
+    });
+
+});