Merge pull request #2016 from bookwyrm-social/duplicate-script

Moves duplicate field script into its own file

bookwyrm/static/js/bookwyrm.js

@@ -38,10 +38,6 @@ let BookWyrm = new (class {
             .querySelectorAll("[data-modal-open]")
             .forEach((node) => node.addEventListener("click", this.handleModalButton.bind(this)));
 
-        document
-            .querySelectorAll("[data-duplicate]")
-            .forEach((node) => node.addEventListener("click", this.duplicateInput.bind(this)));
-
         document
             .querySelectorAll("details.dropdown")
             .forEach((node) =>
@@ -495,26 +491,6 @@ let BookWyrm = new (class {
         window.open(url, windowName, "left=100,top=100,width=430,height=600");
     }
 
-    duplicateInput(event) {
-        const trigger = event.currentTarget;
-        const input_id = trigger.dataset.duplicate;
-        const orig = document.getElementById(input_id);
-        const parent = orig.parentNode;
-        const new_count = parent.querySelectorAll("input").length + 1;
-
-        let input = orig.cloneNode();
-
-        input.id += "-" + new_count;
-        input.value = "";
-
-        let label = parent.querySelector("label").cloneNode();
-
-        label.setAttribute("for", input.id);
-
-        parent.appendChild(label);
-        parent.appendChild(input);
-    }
-
     /**
      * Set up a "click-to-copy" component from a textarea element
      * with `data-copytext`, `data-copytext-label`, `data-copytext-success`

bookwyrm/static/js/forms.js

@@ -0,0 +1,32 @@
+(function () {
+    "use strict";
+
+    /**
+     * Duplicate an input field
+     *
+     * @param {event} the click even on the associated button
+     */
+    function duplicateInput(event) {
+        const trigger = event.currentTarget;
+        const input_id = trigger.dataset.duplicate;
+        const orig = document.getElementById(input_id);
+        const parent = orig.parentNode;
+        const new_count = parent.querySelectorAll("input").length + 1;
+
+        let input = orig.cloneNode();
+
+        input.id += "-" + new_count;
+        input.value = "";
+
+        let label = parent.querySelector("label").cloneNode();
+
+        label.setAttribute("for", input.id);
+
+        parent.appendChild(label);
+        parent.appendChild(input);
+    }
+
+    document
+        .querySelectorAll("[data-duplicate]")
+        .forEach((node) => node.addEventListener("click", duplicateInput));
+})();

bookwyrm/templates/book/edit/edit_book_form.html

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% load static %}
 
 {% if form.non_field_errors %}
 <div class="block">
@@ -302,3 +303,7 @@
         </section>
     </div>
 </div>
+
+{% block scripts %}
+<script src="{% static "js/forms.js" %}"></script>
+{% endblock %}