Remove inline JS

internetarchive · Dec 9, 2024 · 1c17c70 · 1c17c70
1 parent 00b8ece
commit 1c17c70
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 59 deletions.
diff --git a/openlibrary/plugins/openlibrary/js/index.js b/openlibrary/plugins/openlibrary/js/index.js
@@ -559,5 +559,11 @@ jQuery(function () {
         import (/* webpackChunkName: "go-back-links" */ './go-back-links')
             .then(module => module.initGoBackLinks(backLinks))
     }
+
+    const tagTypeSelector = document.querySelector('#tag_type')
+    if (tagTypeSelector) {
+        import(/* webpackChunkName: "tag-form" */ "./tag-form")
+            .then(module => module.initTagTypeSelector(tagTypeSelector))
+    }
 });
 
diff --git a/openlibrary/plugins/openlibrary/js/tag-form.js b/openlibrary/plugins/openlibrary/js/tag-form.js
@@ -0,0 +1,45 @@
+const SUBJECT_TYPES = ["subject", "person", "place", "time"]
+
+let inputContainer
+const inputSetMapping = {}
+
+export function initTagTypeSelector(selector) {
+    const subTypeInputs = document.querySelectorAll(".sub-type-inputs__input-set")
+    inputContainer = document.querySelector(".sub-type-inputs")
+
+    subTypeInputs.forEach((input) => {
+        inputSetMapping[input.dataset.inputType] = input
+    })
+    inputContainer.textContent = ""
+
+    if (selector.value) {
+        if (SUBJECT_TYPES.includes(selector.value)) {
+            showSubTypeInputs('subject')
+        } else {
+            showSubTypeInputs(selector.value)
+        }
+    }
+
+    selector.addEventListener("change", (event) => {
+        const selectedValue = event.target.value
+        let selectedType
+        if (SUBJECT_TYPES.includes(selectedValue)) {
+            selectedType = 'subject'
+        } else {
+            selectedType = selectedValue
+        }
+
+        hideSubTypeInputs()
+        if (selectedType) {
+            showSubTypeInputs(selectedType)
+        }
+    })
+}
+
+function hideSubTypeInputs() {
+    inputContainer.textContent = ""
+}
+
+function showSubTypeInputs(inputsToShow) {
+    inputContainer.appendChild(inputSetMapping[inputsToShow])
+}
diff --git a/openlibrary/templates/type/tag/tag_form_inputs.html b/openlibrary/templates/type/tag/tag_form_inputs.html
@@ -40,66 +40,13 @@
     </div>
 </div>
 
-$if type_picker_options.get("subjects_only", False):
-    <div class="sub-type-inputs">
-        <div class="sub-type-inputs__input-set" data-input-type="subject">
-            $:render_template("type/tag/subject/edit_form_inputs", page)
-        </div>
+<div class="sub-type-inputs">
+    <div class="sub-type-inputs__input-set" data-input-type="subject">
+        $:render_template("type/tag/subject/edit_form_inputs", page)
     </div>
-$else:
-    <div class="sub-type-inputs">
-        <div class="sub-type-inputs__input-set" data-input-type="subject">
-            $:render_template("type/tag/subject/edit_form_inputs", page)
-        </div>
+
+    $if not type_picker_options.get("subjects_only", False):
         <div class="sub-type-inputs__input-set" data-input-type="collection">
             $:render_template("type/tag/collection/edit_form_inputs", page)
         </div>
-    </div>
-
-    <script>
-        const SUBJECT_TYPES = ["subject", "person", "place", "time"]
-        const tagTypeSelector = document.querySelector('#tag_type')
-        const subTypeInputs = document.querySelectorAll(".sub-type-inputs__input-set")
-        const inputContainer = document.querySelector(".sub-type-inputs")
-        const inputSetMapping = {}
-
-        function initTagTypeSelector(selector) {
-            subTypeInputs.forEach((input) => {
-                inputSetMapping[input.dataset.inputType] = input
-            })
-            inputContainer.textContent = ""
-
-            if (selector.value) {
-                if (SUBJECT_TYPES.includes(selector.value)) {
-                    showSubTypeInputs('subject')
-                } else {
-                    showSubTypeInputs(selector.value)
-                }
-            }
-
-            selector.addEventListener("change", (event) => {
-                const selectedValue = event.target.value
-                let selectedType
-                if (SUBJECT_TYPES.includes(selectedValue)) {
-                    selectedType = 'subject'
-                } else {
-                    selectedType = selectedValue
-                }
-
-                hideSubTypeInputs()
-                if (selectedType) {
-                    showSubTypeInputs(selectedType)
-                }
-            })
-        }
-
-        function hideSubTypeInputs() {
-            inputContainer.textContent = ""
-        }
-
-        function showSubTypeInputs(inputsToShow) {
-            inputContainer.appendChild(inputSetMapping[inputsToShow])
-        }
-
-        initTagTypeSelector(tagTypeSelector)
-    </script>
+</div>