geoblacklight 5.3.0 → 6.0.0.pre.alpha.1

data/app/javascript/geoblacklight/index.js

@@ -1,17 +1,17 @@
 // Stimulus controllers
-import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller";
-import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller";
-import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller";
-import SearchResultsController from "geoblacklight/controllers/search_results_controller";
-import DownloadsController from "geoblacklight/controllers/downloads_controller";
-import ClipboardController from "geoblacklight/controllers/clipboard_controller";
+import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller"
+import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller"
+import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller"
+import SearchResultsController from "geoblacklight/controllers/search_results_controller"
+import DownloadsController from "geoblacklight/controllers/downloads_controller"
+import ClipboardController from "geoblacklight/controllers/clipboard_controller"
 
 // GBL core
-import Core from "geoblacklight/core";
+import Core from "geoblacklight/core"
 
 // Other modules
-import openLayersBasemaps from "geoblacklight/openlayers/basemaps";
-import leafletBasemaps from "geoblacklight/leaflet/basemaps";
+import openLayersBasemaps from "geoblacklight/openlayers/basemaps"
+import leafletBasemaps from "geoblacklight/leaflet/basemaps"
 
 export default {
   OpenlayersViewerController,
@@ -24,4 +24,4 @@ export default {
   leafletBasemaps,
   Core,
   onLoad: Core.onLoad,
-};
+}

data/app/javascript/geoblacklight/initializers/metadata_download.js

@@ -1,54 +1,52 @@
 export class GeoBlacklightMetadataDownloadButton {
   constructor(el, i, options = {}) {
-    this.options = options;
-    this.el = typeof el === "string" ? document.querySelector(el) : el;
-    this.download = document.querySelector(
-      this.options.target || this.el.getAttribute("data-ref-download")
-    );
+    this.options = options
+    this.el = typeof el === "string" ? document.querySelector(el) : el
+    this.download = document.querySelector(this.options.target || this.el.getAttribute("data-ref-download"))
     // On initialization only do this for the first one.
     if (i === 0) {
-      this.setRefUrl();
+      this.setRefUrl()
     }
-    this.configureHandler();
+    this.configureHandler()
   }
 
   configureHandler() {
-    this.el.addEventListener("click", () => this.setRefUrl());
+    this.el.addEventListener("click", () => this.setRefUrl())
   }
 
   setRefUrl() {
-    const refUrl = this.el.getAttribute("data-ref-endpoint");
+    const refUrl = this.el.getAttribute("data-ref-endpoint")
     if (!refUrl) {
-      this.download.style.display = "none";
+      this.download.style.display = "none"
     } else {
-      this.download.style.display = "";
-      this.download.setAttribute("href", refUrl);
+      this.download.style.display = ""
+      this.download.setAttribute("href", refUrl)
     }
   }
 }
 
 export default function initializeMetadataDownload() {
-  const modal = document.getElementById("blacklight-modal");
+  const modal = document.getElementById("blacklight-modal")
 
   modal.addEventListener("focus", (e) => {
-    if (!Array.from(e.target.classList).includes('show')){
-      return;
+    if (!Array.from(e.target.classList).includes("show")) {
+      return
     }
     e.target.querySelectorAll(".metadata-body").forEach((el) => {
-      el.closest(".modal-content").classList.add("metadata-modal");
-    });
+      el.closest(".modal-content").classList.add("metadata-modal")
+    })
 
     e.target.querySelectorAll(".pill-metadata").forEach((element, i) => {
-      new GeoBlacklightMetadataDownloadButton(element, i);
-    });
-  });
+      new GeoBlacklightMetadataDownloadButton(element, i)
+    })
+  })
 
   modal.addEventListener("blur", (e) => {
-    if (Array.from(e.target.classList).includes('show')){
-      return;
+    if (Array.from(e.target.classList).includes("show")) {
+      return
     }
     e.target.querySelectorAll(".metadata-body").forEach((el) => {
-      el.closest(".modal-content").classList.remove("metadata-modal");
-    });
-  });
+      el.closest(".modal-content").classList.remove("metadata-modal")
+    })
+  })
 }

data/app/javascript/geoblacklight/initializers/popovers.js

@@ -1,11 +1,11 @@
-import { Popover } from 'bootstrap';
+import { Popover } from "bootstrap"
 
 // Initialize popovers
 export default function initializePopovers() {
-  const popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]'); // Bootstrap 5 uses 'data-bs-toggle'
+  const popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]') // Bootstrap 5 uses 'data-bs-toggle'
   popoverElements.forEach((element) => {
     const popover = new Popover(element, {
       trigger: "hover",
-    });
-  });
+    })
+  })
 }

data/app/javascript/geoblacklight/initializers/relations.js

@@ -1,40 +1,40 @@
 const fadeIn = (element, duration) => {
-  element.style.opacity = 0;
-  element.style.display = "block";
+  element.style.opacity = 0
+  element.style.display = "block"
 
-  let start = null;
+  let start = null
   function step(timestamp) {
-    if (!start) start = timestamp;
-    const progress = timestamp - start;
-    element.style.opacity = Math.min(progress / duration, 1);
+    if (!start) start = timestamp
+    const progress = timestamp - start
+    element.style.opacity = Math.min(progress / duration, 1)
     if (progress < duration) {
-      window.requestAnimationFrame(step);
+      window.requestAnimationFrame(step)
     }
   }
 
-  window.requestAnimationFrame(step);
-};
+  window.requestAnimationFrame(step)
+}
 
 // Set up the relations widgets by querying the relations endpoint
 export default function initializeRelations() {
   document.querySelectorAll('[data-relations="true"]').forEach((element) => {
-    const attributes = element.dataset;
-    const relationUrl = `${attributes.url}/relations`;
+    const attributes = element.dataset
+    const relationUrl = `${attributes.url}/relations`
 
     fetch(relationUrl, { headers: { "X-Requested-With": "XMLHttpRequest" } })
       .then((response) => {
         if (!response.ok) {
-          throw new Error("Network response was not ok");
+          throw new Error("Network response was not ok")
         }
-        return response.text();
+        return response.text()
       })
       .then((data) => {
-        const div = document.createElement("div");
-        div.innerHTML = data;
-        element.appendChild(div);
-        div.style.display = "none";
-        fadeIn(div, 200);
+        const div = document.createElement("div")
+        div.innerHTML = data
+        element.appendChild(div)
+        div.style.display = "none"
+        fadeIn(div, 200)
       })
-      .catch((error) => console.error("Error:", error));
-  });
+      .catch((error) => console.error("Error:", error))
+  })
 }

data/app/javascript/geoblacklight/initializers/tooltips.js

@@ -1,55 +1,51 @@
-import { Tooltip } from "bootstrap";
+import { Tooltip } from "bootstrap"
 
 export default function initializeTooltips() {
   document.body.addEventListener(
     "mouseenter",
     (event) => {
       if (event.target.closest(".blacklight-icons.svg_tooltip svg")) {
-        const svgElement = event.target.closest(
-          ".blacklight-icons.svg_tooltip svg"
-        );
-        const svgTitleElement = svgElement.querySelector("title");
-        const titleText = svgTitleElement ? svgTitleElement.textContent : "";
+        const svgElement = event.target.closest(".blacklight-icons.svg_tooltip svg")
+        const svgTitleElement = svgElement.querySelector("title")
+        const titleText = svgTitleElement ? svgTitleElement.textContent : ""
 
         if (titleText !== undefined && titleText !== "") {
           // Initialize Bootstrap tooltip with native JavaScript
           const tooltip = new Tooltip(svgElement, {
             placement: "bottom",
             title: titleText,
-          });
-          tooltip.show();
+          })
+          tooltip.show()
 
           // Store the original title in the data-original-title attribute
           // and remove the title element to prevent it from interfering with Bootstrap's tooltip.
-          svgElement.setAttribute("data-original-title", titleText);
-          svgTitleElement.remove();
+          svgElement.setAttribute("data-original-title", titleText)
+          svgTitleElement.remove()
         }
       }
     },
-    true
-  ); // Use capture to ensure the event is caught as it bubbles up
+    true,
+  ) // Use capture to ensure the event is caught as it bubbles up
 
   document.body.addEventListener(
     "mouseleave",
     (event) => {
       if (event.target.closest(".blacklight-icons.svg_tooltip svg")) {
-        const svgElement = event.target.closest(
-          ".blacklight-icons.svg_tooltip svg"
-        );
-        const originalTitle = svgElement.getAttribute("data-original-title");
+        const svgElement = event.target.closest(".blacklight-icons.svg_tooltip svg")
+        const originalTitle = svgElement.getAttribute("data-original-title")
 
         if (originalTitle !== undefined && originalTitle !== "") {
           // Restore the SVG title element from data-original-title
-          const newTitleElement = document.createElement("title");
-          newTitleElement.textContent = originalTitle;
-          svgElement.prepend(newTitleElement);
-          svgElement.setAttribute("data-original-title", "");
+          const newTitleElement = document.createElement("title")
+          newTitleElement.textContent = originalTitle
+          svgElement.prepend(newTitleElement)
+          svgElement.setAttribute("data-original-title", "")
         }
       }
 
       // Remove tooltips
-      document.querySelectorAll(".tooltip").forEach((elem) => elem.remove());
+      document.querySelectorAll(".tooltip").forEach((elem) => elem.remove())
     },
-    true
-  ); // Use capture to ensure the event is caught as it bubbles up
+    true,
+  ) // Use capture to ensure the event is caught as it bubbles up
 }

data/app/javascript/geoblacklight/initializers/truncation.js

@@ -5,31 +5,31 @@
 class Truncator {
   constructor(element, { lines, id }) {
     // if the element is already small enough, don't truncate it
-    const minHeight = lines * parseFloat(window.getComputedStyle(element).fontSize);
-    if (element.getBoundingClientRect().height < minHeight) return;
+    const minHeight = lines * parseFloat(window.getComputedStyle(element).fontSize)
+    if (element.getBoundingClientRect().height <= minHeight) return
 
     // set a unique ID for the element if it doesn't have one
-    this.element = element;
-    this.element.id ||= id;
+    this.element = element
+    this.element.id ||= id
 
     // add the button
-    this.button = document.createElement("button");
-    this.button.classList.add("btn", "btn-link", "p-0", "border-0");
-    this.button.dataset.bsToggle = "collapse";
-    this.button.dataset.bsTarget = `#${this.element.id}`;
-    this.button.setAttribute("aria-expanded", "false");
-    this.button.setAttribute("aria-controls", this.element.id);
-    this.button.textContent = "Read more";
-    this.button.addEventListener("click", this.toggle.bind(this));
-    element.parentNode.insertBefore(this.button, element.nextSibling);
+    this.button = document.createElement("button")
+    this.button.classList.add("btn", "btn-link", "p-0", "border-0")
+    this.button.dataset.bsToggle = "collapse"
+    this.button.dataset.bsTarget = `#${this.element.id}`
+    this.button.setAttribute("aria-expanded", "false")
+    this.button.setAttribute("aria-controls", this.element.id)
+    this.button.textContent = "Read more"
+    this.button.addEventListener("click", this.toggle.bind(this))
+    element.parentNode.insertBefore(this.button, element.nextSibling)
 
     // start collapsed
-    this.element.classList.add("collapse");
+    this.element.classList.add("collapse")
   }
 
   toggle() {
-    if (this.button.textContent == "Read more") this.button.textContent = "Close";
-    else this.button.textContent = "Read more";
+    if (this.button.textContent == "Read more") this.button.textContent = "Close"
+    else this.button.textContent = "Read more"
   }
 }
 
@@ -40,6 +40,6 @@ export default function initializeTruncation() {
     new Truncator(element, {
       lines: 12,
       id: `truncate-${i}`,
-    });
-  });
+    })
+  })
 }

data/app/javascript/geoblacklight/leaflet/basemaps.js

@@ -65,10 +65,9 @@ export default {
   },
   openstreetmapStandard: {
     url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-    attribution:
-      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     maxZoom: 19,
     worldCopyJump: true,
     retina: "@2x",
   },
-};
+}

data/app/javascript/geoblacklight/leaflet/constants.js

@@ -1,18 +1,18 @@
-import { LatLngBounds } from "leaflet";
+import { LatLngBounds } from "leaflet"
 
 export const DEFAULT_BOUNDS = new LatLngBounds([
   [-30, -100],
   [30, 100],
-]);
+])
 
-export const DEFAULT_OPACITY = 0.75;
+export const DEFAULT_OPACITY = 0.75
 
-export const DEFAULT_BASEMAP = "positron";
+export const DEFAULT_BASEMAP = "positron"
 
 export const DEFAULT_GEOM_OVERLAY_OPTIONS = {
-  color: '#3388ff',
+  color: "#3388ff",
   dashArray: "5 5",
   weight: 2,
   opacity: 1,
-  fillOpacity: 0
-}
+  fillOpacity: 0,
+}

data/app/javascript/geoblacklight/leaflet/controls/geosearch.js

@@ -1,160 +1,166 @@
-import { DomUtil, Control, Handler, setOptions } from "leaflet";
-import { debounce, boundsToBbox } from "geoblacklight/leaflet/utils";
+import { DomUtil, Control, Handler, setOptions } from "leaflet"
+import { debounce, boundsToBbox } from "geoblacklight/leaflet/utils"
 
 export const geosearchDefaultOptions = {
   dynamic: true,
   delay: 800,
-};
+}
 
 export default class GeoSearchControl extends Control {
   constructor(options) {
-    const _options = { ...geosearchDefaultOptions, ...options };
-    super(_options);
-    setOptions(this, _options);
+    const _options = { ...geosearchDefaultOptions, ...options }
+    super(_options)
+    setOptions(this, _options)
   }
 
   onAdd(map) {
-    this.map = map;
-    this.map.options.geoSearchControl = this;
+    this.map = map
+    this.map.options.geoSearchControl = this
 
     // Create the buttons
-    this.staticButton = this.createStaticButton();
-    this.dynamicButton = this.createDynamicButton();
+    this.staticButton = this.createStaticButton()
+    this.dynamicButton = this.createDynamicButton()
 
     // Add the buttons to the viewer
-    const container = DomUtil.create("div");
-    container.className = "leaflet-control search-control";
-    container.appendChild(this.staticButton);
-    container.appendChild(this.dynamicButton);
+    const container = DomUtil.create("div")
+    container.className = "leaflet-control search-control"
+    container.appendChild(this.staticButton)
+    container.appendChild(this.dynamicButton)
 
     // Show the appropriate button
-    if (this.options.dynamic) this.dynamicButton.style.display = "block";
-    else this.staticButton.style.display = "block";
+    if (this.options.dynamic) this.dynamicButton.style.display = "block"
+    else this.staticButton.style.display = "block"
 
     // Set up the dynamic search function with debounce
     this.dynamicSearcher = debounce(() => {
       if (this.options.dynamic) {
-        this.applySearch();
+        this.applySearch()
       }
-    }, this.options.delay);
+    }, this.options.delay)
 
     // Add the event handler
-    this.map.addHandler("geosearch", GeoSearchHandler);
+    this.map.addHandler("geosearch", GeoSearchHandler)
 
-    return container;
+    return container
   }
 
   // Button to search when clicked; contains an icon
   createStaticButton() {
-    const staticButtonNode = DomUtil.create("a");
-    staticButtonNode.setAttribute("id", "gbl-static-button");
-    staticButtonNode.setAttribute("href", "#");
-    staticButtonNode.setAttribute("style", "display:none;");
-    staticButtonNode.className = "btn btn-primary";
-    staticButtonNode.textContent = "Search here";
-    staticButtonNode.addEventListener("click", this.staticSearch.bind(this));
-    return staticButtonNode;
+    const staticButtonNode = DomUtil.create("a")
+    staticButtonNode.setAttribute("id", "gbl-static-button")
+    staticButtonNode.setAttribute("href", "#")
+    staticButtonNode.setAttribute("style", "display:none;")
+    staticButtonNode.className = "btn btn-primary shadow"
+    staticButtonNode.textContent = "Search here"
+    staticButtonNode.addEventListener("click", this.staticSearch.bind(this))
+    return staticButtonNode
   }
 
   // Button to search when the map is moved; contains a checkbox
   createDynamicButton() {
-    const dynamicButtonNode = DomUtil.create("label");
-    dynamicButtonNode.setAttribute("id", "gbl-dynamic-button");
-    dynamicButtonNode.textContent = " Search when I move the map";
-    dynamicButtonNode.setAttribute("style", "display:none;");
-    const input = DomUtil.create("input");
-    input.setAttribute("type", "checkbox");
-    input.checked = true;
-    dynamicButtonNode.insertBefore(input, dynamicButtonNode.firstChild);
-    dynamicButtonNode.addEventListener(
-      "input",
-      this.toggleDynamicSearch.bind(this)
-    );
-    return dynamicButtonNode;
+    const dynamicButtonNode = DomUtil.create("label")
+    dynamicButtonNode.setAttribute("id", "gbl-dynamic-button")
+    dynamicButtonNode.className = "btn shadow border form-check-label"
+    dynamicButtonNode.textContent = " Search when I move the map"
+    dynamicButtonNode.setAttribute("style", "display:none;")
+    dynamicButtonNode.setAttribute("for", "gbl-dynamic-search-toggle")
+    const input = DomUtil.create("input")
+    input.setAttribute("type", "checkbox")
+    input.setAttribute("id", "gbl-dynamic-search-toggle")
+    input.className = "form-check-input"
+    input.checked = true
+    dynamicButtonNode.insertBefore(input, dynamicButtonNode.firstChild)
+    dynamicButtonNode.addEventListener("input", this.toggleDynamicSearch.bind(this))
+    return dynamicButtonNode
   }
 
   // Hide the static button, show the dynamic button, and apply the search
   staticSearch() {
-    this.staticButton.style.display = "none";
+    this.staticButton.style.display = "none"
     if (this.options.dynamic) {
-      this.dynamicButton.style.display = "block";
+      this.dynamicButton.style.display = "block"
     }
     // Do full page reload for staticSearch button
-    this.applySearch({ turbo: false });
+    this.applySearch({ turbo: false })
   }
 
   // Update the URL with the current bounding box and go back to page 1
-  applySearch(opts={turbo: true}) {
+  applySearch(opts = { turbo: true }) {
     // Delete any existing page and bbox parameters
-    const params = new URL(window.location).searchParams;
-    params.delete("page");
-    params.delete("bbox");
+    const params = new URL(window.location).searchParams
+    params.delete("page")
+    params.delete("bbox")
 
     // Calculate the bounding box from the current map bounds
-    const bbox = boundsToBbox(this._map.getBounds());
-    params.set("bbox", bbox.join(" "));
+    const bbox = boundsToBbox(this._map.getBounds())
+    params.set("bbox", bbox.join(" "))
 
     // Make the new target URL using the configured base URL
     const newUrl = new URL(this.options.baseUrl)
     newUrl.search = params.toString()
 
     // If Turbo Drive is active, do the new page navigation without a full page reload
-    if (window.Turbo && opts.turbo) window.Turbo.visit(newUrl);
-
+    if (Turbo && opts.turbo) {
+      // prevent scroll to top on new page
+      document.addEventListener("turbo:before-render", (event) => {
+        Turbo.navigator.currentVisit.scrolled = true
+      })
+      Turbo.visit(newUrl)
+    }
     // Otherwise fall back to the traditional full page reload
-    else window.location.href = newUrl;
+    else window.location.href = newUrl
   }
 
   // Toggle the dynamic search option
   toggleDynamicSearch() {
-    this.options.dynamic = !this.options.dynamic;
+    this.options.dynamic = !this.options.dynamic
   }
 
   // Hide the dynamic button and show the static button
   hideDynamicButton() {
-    this.dynamicButton.style.display = "none";
-    this.staticButton.style.display = "block";
+    this.dynamicButton.style.display = "none"
+    this.staticButton.style.display = "block"
   }
 }
 
 class GeoSearchHandler extends Handler {
   constructor(map) {
-    super(map);
-    this.map = map;
-    this.control = map.options.geoSearchControl;
-    this.wasResized = false;
+    super(map)
+    this.map = map
+    this.control = map.options.geoSearchControl
+    this.wasResized = false
   }
 
   // Bind event handlers to the map
   addHooks() {
-    this.map.on("resize", this.handleResize.bind(this));
-    this.map.on("dragend", this.handleDragEnd.bind(this));
-    this.map.on("dragstart", this.handleDragStart.bind(this));
-    this.map.on("zoomstart", this.handleDragEnd.bind(this));
-    this.map.on("zoomend", this.handleDragStart.bind(this));
+    this.map.on("resize", this.handleResize.bind(this))
+    this.map.on("dragend", this.handleDragEnd.bind(this))
+    this.map.on("dragstart", this.handleDragStart.bind(this))
+    this.map.on("zoomstart", this.handleDragEnd.bind(this))
+    this.map.on("zoomend", this.handleDragStart.bind(this))
   }
 
   // Remove event handlers from the map
   removeHooks() {
-    this.map.off("resize");
-    this.map.off("dragend");
-    this.map.off("dragstart");
-    this.map.off("zoomend");
-    this.map.off("zoomstart");
+    this.map.off("resize")
+    this.map.off("dragend")
+    this.map.off("dragstart")
+    this.map.off("zoomend")
+    this.map.off("zoomstart")
   }
 
   handleResize() {
-    this.wasResized = true;
+    this.wasResized = true
   }
 
   handleDragEnd() {
-    if (this.wasResized) this.wasResized = false;
-    else this.control.dynamicSearcher.apply(this.control);
+    if (this.wasResized) this.wasResized = false
+    else this.control.dynamicSearcher.apply(this.control)
   }
 
   handleDragStart() {
     if (!this.control.options.dynamic) {
-      this.control.hideDynamicButton();
+      this.control.hideDynamicButton()
     }
   }
 }