geoblacklight 4.4.1 → 5.0.0.pre.alpha.11

data/app/javascript/geoblacklight/controllers/search_results_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus";
+import { geoJSONToBounds } from "geoblacklight/leaflet/utils";
+import { DEFAULT_BOUNDS } from "geoblacklight/leaflet/constants";
+
+export default class SearchResultsController extends Controller {
+  static targets = ["result"];
+  static outlets = ["leaflet-viewer"];
+
+  // Fit the map to the combined bounding box of all search results
+  // If a bounding box query is already active, do not override it
+  fitResultBounds() {
+    if (new URL(window.location).searchParams.get("bbox")) return;
+    this.leafletViewerOutlet.fitBounds(this.getMaximalBounds());
+  }
+
+  // Get the bounding box of a search result from its data attributes
+  getResultBounds(resultElement) {
+    const geomElement = resultElement.querySelector("[data-geom]");
+    if (geomElement && geomElement.dataset.geom) {
+      return geoJSONToBounds(JSON.parse(geomElement.dataset.geom));
+    }
+  }
+
+  // Find the combined bounding box of all search results
+  getMaximalBounds() {
+    const bounds = this.resultTargets.map(this.getResultBounds);
+    const nonNullBounds = bounds.filter((b) => b);
+
+    if (nonNullBounds.length > 0) {
+      return nonNullBounds.reduce((max, b) => max.extend(b));
+    }
+
+    return DEFAULT_BOUNDS;
+  }
+
+  // Preview the selected search result's bounding box on the map
+  previewResultOnMap(event) {
+    const geomElement = event.target.querySelector("[data-geom]");
+    if (geomElement && geomElement.dataset.geom !== "") {
+      const geom = JSON.parse(geomElement.dataset.geom);
+      const bbox = geoJSONToBounds(geom);
+      this.leafletViewerOutlet.addBoundsOverlay(bbox);
+    }
+  }
+
+  // Remove the previewed bounding box
+  clearPreview() {
+    this.leafletViewerOutlet.removeBoundsOverlay();
+  }
+}

data/app/javascript/geoblacklight/core.js

@@ -0,0 +1,69 @@
+// Initializers
+import initializePopovers from "geoblacklight/initializers/popovers";
+import initializeRelations from "geoblacklight/initializers/relations";
+import initializeTooltips from "geoblacklight/initializers/tooltips";
+import initializeTruncation from "geoblacklight/initializers/truncation";
+import initializeMetadataDownload from "geoblacklight/initializers/metadata_download";
+
+// Stimulus controllers
+import ClipboardController from "geoblacklight/controllers/clipboard_controller";
+import CloverViewerController from "geoblacklight/controllers/clover_viewer_controller";
+import DownloadsController from "geoblacklight/controllers/downloads_controller";
+import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller";
+import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller";
+import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller";
+import SearchResultsController from "geoblacklight/controllers/search_results_controller";
+
+// Inspired by Blacklight's javascript/blacklight/core.js
+const Geoblacklight = (function () {
+  const callbacks = [];
+  return {
+    // Hook: pass a callback to add it to the activation stack
+    onLoad: function (callback) {
+      callbacks.push(callback);
+    },
+
+    // Activate all stored callbacks
+    activate: function (event) {
+      callbacks.forEach((callback) => {
+        callback(event);
+      });
+    },
+
+    // Define hooks that will trigger the activation of the Geoblacklight JS
+    listeners: function () {
+      if (typeof Turbo !== "undefined")
+        return ["turbo:load", "turbo:frame-load"];
+      else return ["DOMContentLoaded"];
+    },
+  };
+})();
+
+// Add event listeners that call activate() for each event type
+Geoblacklight.listeners().forEach((listener) =>
+  document.addEventListener(listener, (event) => Geoblacklight.activate(event))
+);
+
+// Register our initializers
+Geoblacklight.onLoad(initializePopovers);
+Geoblacklight.onLoad(initializeRelations);
+Geoblacklight.onLoad(initializeTooltips);
+Geoblacklight.onLoad(initializeTruncation);
+Geoblacklight.onLoad(initializeMetadataDownload);
+
+// Register our Stimulus controllers
+if (typeof Stimulus !== "undefined") {
+  Stimulus.register("openlayers-viewer", OpenlayersViewerController);
+  Stimulus.register("clover-viewer", CloverViewerController);
+  Stimulus.register("oembed-viewer", OembedViewerController);
+  Stimulus.register("leaflet-viewer", LeafletViewerController);
+  Stimulus.register("search-results", SearchResultsController);
+  Stimulus.register("downloads", DownloadsController);
+  Stimulus.register("clipboard", ClipboardController);
+} else {
+  console.error(
+    "Couldn't find Stimulus. Check installation instructions at https://github.com/hotwired/stimulus-rails."
+  );
+}
+
+export default Geoblacklight;

data/app/javascript/geoblacklight/index.js

@@ -0,0 +1,29 @@
+// Stimulus controllers
+import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller";
+import CloverViewerController from "geoblacklight/controllers/clover_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";
+
+// Other modules
+import openLayersBasemaps from "geoblacklight/openlayers/basemaps";
+import leafletBasemaps from "geoblacklight/leaflet/basemaps";
+
+export default {
+  OpenlayersViewerController,
+  CloverViewerController,
+  OembedViewerController,
+  LeafletViewerController,
+  SearchResultsController,
+  DownloadsController,
+  ClipboardController,
+  openLayersBasemaps,
+  leafletBasemaps,
+  Core,
+  onLoad: Core.onLoad,
+};

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

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

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

@@ -0,0 +1,11 @@
+import { Popover } from 'bootstrap';
+
+// Initialize popovers
+export default function initializePopovers() {
+  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

@@ -0,0 +1,40 @@
+const fadeIn = (element, duration) => {
+  element.style.opacity = 0;
+  element.style.display = "block";
+
+  let start = null;
+  function step(timestamp) {
+    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);
+};
+
+// 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`;
+
+    fetch(relationUrl, { headers: { "X-Requested-With": "XMLHttpRequest" } })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.text();
+      })
+      .then((data) => {
+        const div = document.createElement("div");
+        div.innerHTML = data;
+        element.appendChild(div);
+        div.style.display = "none";
+        fadeIn(div, 200);
+      })
+      .catch((error) => console.error("Error:", error));
+  });
+}

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

@@ -0,0 +1,55 @@
+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 : "";
+
+        if (titleText !== undefined && titleText !== "") {
+          // Initialize Bootstrap tooltip with native JavaScript
+          const tooltip = new Tooltip(svgElement, {
+            placement: "bottom",
+            title: titleText,
+          });
+          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();
+        }
+      }
+    },
+    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");
+
+        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", "");
+        }
+      }
+
+      // Remove tooltips
+      document.querySelectorAll(".tooltip").forEach((elem) => elem.remove());
+    },
+    true
+  ); // Use capture to ensure the event is caught as it bubbles up
+}

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

@@ -0,0 +1,45 @@
+// Truncate and expand/collapse abstracts (descriptions) on show page
+
+// Class that handles adding a button to expand/collapse a description
+// Uses bootstrap's built-in collapse functionality; CSS is used to do the truncation
+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;
+
+    // set a unique ID for the element if it doesn't have one
+    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);
+
+    // start collapsed
+    this.element.classList.add("collapse");
+  }
+
+  toggle() {
+    if (this.button.textContent == "Read more") this.button.textContent = "Close";
+    else this.button.textContent = "Read more";
+  }
+}
+
+// Initialize truncation for all elements with class "truncate-abstract"
+// Ensure they have unique IDs because bootstrap requires this
+export default function initializeTruncation() {
+  document.querySelectorAll(".truncate-abstract").forEach((element, i) => {
+    new Truncator(element, {
+      lines: 12,
+      id: `truncate-${i}`,
+    });
+  });
+}

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

@@ -0,0 +1,74 @@
+export default {
+  darkMatter: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  positron: {
+    url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  positronLite: {
+    url: "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  worldAntique: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-antique/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  worldEco: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-eco/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  flatBlue: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-flatblue/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  midnightCommander: {
+    url: "https://cartocdn_{s}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}{retina}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://carto.com/attributions">Carto</a>',
+    maxZoom: 18,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  openstreetmapHot: {
+    url: "https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>',
+    maxZoom: 19,
+    worldCopyJump: true,
+    retina: "@2x",
+  },
+  openstreetmapStandard: {
+    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+    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

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

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

@@ -0,0 +1,160 @@
+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);
+  }
+
+  onAdd(map) {
+    this.map = map;
+    this.map.options.geoSearchControl = this;
+
+    // Create the buttons
+    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);
+
+    // Show the appropriate button
+    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.options.delay);
+
+    // Add the event handler
+    this.map.addHandler("geosearch", GeoSearchHandler);
+
+    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;
+  }
+
+  // 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;
+  }
+
+  // Hide the static button, show the dynamic button, and apply the search
+  staticSearch() {
+    this.staticButton.style.display = "none";
+    if (this.options.dynamic) {
+      this.dynamicButton.style.display = "block";
+    }
+    // Do full page reload for staticSearch button
+    this.applySearch({ turbo: false });
+  }
+
+  // Update the URL with the current bounding box and go back to page 1
+  applySearch(opts={turbo: true}) {
+    // Delete any existing page and bbox parameters
+    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(" "));
+
+    // 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);
+
+    // Otherwise fall back to the traditional full page reload
+    else window.location.href = newUrl;
+  }
+
+  // Toggle the dynamic search option
+  toggleDynamicSearch() {
+    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";
+  }
+}
+
+class GeoSearchHandler extends Handler {
+  constructor(map) {
+    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));
+  }
+
+  // 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");
+  }
+
+  handleResize() {
+    this.wasResized = true;
+  }
+
+  handleDragEnd() {
+    if (this.wasResized) this.wasResized = false;
+    else this.control.dynamicSearcher.apply(this.control);
+  }
+
+  handleDragStart() {
+    if (!this.control.options.dynamic) {
+      this.control.hideDynamicButton();
+    }
+  }
+}