fix TypeChanger bug

openlibrary/macros/TypeChanger.html

@@ -3,12 +3,6 @@
 $# and any generic page in the admin UI; e.g. creating a page.
 $if ctx.user and ctx.user.is_admin():
     <div class="formElement pagetype collapse adminOnly" id="pageType">
-        <script>
-        function changeTemplate() {
-            var t = document.edit['type.key'].value;
-            document.location.href += '&t=' + t;
-        }
-        </script>
         <div class="label">
             <label for="type.key">$_("Page Type")</label>
             <span class="small gray">&nbsp;<a href="javascript:;"
@@ -18,7 +12,7 @@
             <p class="smaller">$_("Every piece of Open Library is defined by the type of content it displays, usually by content definition (e.g. Authors, Editions, Works) but sometimes by content use (e.g. macro, template, rawtext). Changing this for an existing page will alter its presentation and the data fields available for editing its content.") <span class="red">$_("Please use caution changing Page Type!")</span></p><p class="smaller">$_("(Simplest solution: If you aren't sure whether this should be changed, don't change it.)")</p>
         </div>
         <div class="input">
-            $:thinginput(type, name="type.key", id="type.key", expected_type="/type/type", kind="regular",  onchange="changeTemplate();")
+            $:thinginput(type, name="type.key", id="type.key", expected_type="/type/type", kind="regular")
         </div>
     </div>
 $else:

openlibrary/plugins/openlibrary/js/index.js

@@ -195,6 +195,13 @@ jQuery(function () {
             });
     }
 
+    // conditionally load for type changing input
+    const typeChanger = document.getElementById('type.key')
+    if (typeChanger) {
+        import(/* webpackChunkName: "type-changer" */ './type_changer.js')
+            .then(module => module.initTypeChanger(typeChanger));
+    }
+
     // conditionally load real time signup functionality based on class in the page
     if (document.getElementsByClassName('olform create validate').length) {
         import(/* webpackChunkName: "realtime-account-validation" */'./realtime_account_validation.js')

openlibrary/plugins/openlibrary/js/type_changer.js

@@ -0,0 +1,19 @@
+/**
+ * Functionality for TypeChanger.html
+ */
+
+export function initTypeChanger(elem) {
+    // /about?m=edit - where this code is run
+
+    function changeTemplate() {
+        // Change the template of the page based on the selected value
+        const searchParams = new URLSearchParams(window.location.search);
+        const t = elem.value;
+        searchParams.set('t', t);
+
+        // Update the URL and navigate to the new page
+        window.location.search = searchParams.toString();
+    }
+
+    elem.addEventListener('change', changeTemplate);
+}

static/css/page-edit.less

@@ -125,9 +125,11 @@ div#databar {
 }
 /* stylelint-enable selector-max-specificity */
 
-.formElement.pagetype,
-.formElement.pagetype select {
+.formElement.pagetype {
   width: 300px;
+  #type\.key {
+    width: 100%;
+  }
 }
 /* stylelint-disable selector-max-specificity */
 div#revertNotice,