mirador modding

js/checkbox.js

@@ -13,12 +13,3 @@
   Drupal.theme.checkbox = () =>
     '<input type="checkbox" class="form-checkbox form-boolean form-boolean--type-checkbox"/>';
 })(Drupal);
-
-jQuery( window ).on( "load", function() {
-	console.log( "window loaded" );
-	//jQuery(".mirador80").remove();
-	//jQuery(".mirador104").click();
-//	jQuery('.mirador104 button.MuiButtonBase-root.MuiIconButton-root').trigger('click');
-
-});
-

js/mirador-mods.js

@@ -1,25 +1,54 @@
-//This code waits for the viewer to load with the search panel open, then it closes the search 'companion window'
-//leaving the search icon visible. This combo is not available in the configs
-window.addEventListener("load", () => {
-    const tryInit = (attempts = 0) => {
-        const searchPanel = document.querySelector("div.mirador31");
-        const searchPanelToggle = document.querySelector("button.mirador34");
+/**
+ * @file
+ * Custom behavior to swap the sidebar toggle icon for a search icon.
+ */
 
-        if (!searchPanel || !searchPanelToggle) {
-            if (attempts < 20) setTimeout(() => tryInit(attempts + 1), 250);
-            return;
-        }
+(function (Drupal, once) {
+  Drupal.behaviors.customSearchIconSwap = {
+    attach: function (context, settings) {
+      // Use 'once' to ensure we only run this once per element.
+      // We target the specific Material UI icon inside the 'Toggle sidebar' button.
+      const elements = once(
+        "search-icon-swap",
+        'button[aria-label="Toggle sidebar"] svg.MuiSvgIcon-root',
+        context
+      );
 
-        searchPanel.style.display = "none";
-        searchPanel.style.visibility = "hidden";
-        searchPanelToggle.setAttribute("aria-expanded", "false");
-        searchPanelToggle.setAttribute("aria-label", "Expand sidebar");
-        searchPanelToggle.setAttribute("title", "Expand sidebar");
-        searchPanelToggle.click();
+      elements.forEach(function (svg) {
+        const path = svg.querySelector("path");
+        const searchPathData =
+          "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z";
+
+        if (path) {
+          path.setAttribute("d", searchPathData);
+        }
+      });
+    },
   };
+})(Drupal, once);
 
-    tryInit();
-});
+//This code waits for the viewer to load with the search panel open, then it closes the search 'companion window'
+//leaving the search icon visible. This combo is not available in the configs
+// window.addEventListener("load", () => {
+//     const tryInit = (attempts = 0) => {
+//         const searchPanel = document.querySelector("div.mirador31");
+//         const searchPanelToggle = document.querySelector("button.mirador34");
+//
+//         if (!searchPanel || !searchPanelToggle) {
+//             if (attempts < 20) setTimeout(() => tryInit(attempts + 1), 250);
+//             return;
+//         }
+//
+//         searchPanel.style.display = "none";
+//         searchPanel.style.visibility = "hidden";
+//         searchPanelToggle.setAttribute("aria-expanded", "false");
+//         searchPanelToggle.setAttribute("aria-label", "Expand sidebar");
+//         searchPanelToggle.setAttribute("title", "Expand sidebar");
+//         searchPanelToggle.click();
+//     };
+//
+//     tryInit();
+// });
 
 /*
 window.addEventListener("load", (event) => {
@@ -43,4 +72,3 @@ window.addEventListener("load", (event) => {
 	searchPanelToggle.click();
 });
 */
-