geoblacklight 5.2.0 → 6.0.0.pre.alpha.1

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()
     }
   }
 }

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

@@ -1,42 +1,42 @@
-import { DomUtil, DomEvent, Control } from "leaflet";
-import { getLayerOpacity } from "geoblacklight/leaflet/utils";
+import { DomUtil, DomEvent, Control } from "leaflet"
+import { getLayerOpacity } from "geoblacklight/leaflet/utils"
 
 export default class LayerOpacityControl extends Control {
   constructor(layer, options = {}) {
-    super(options);
-    this.options.position = "topleft";
+    super(options)
+    this.options.position = "topleft"
     var layers = [layer]
     // Check if layer is actually a layer group
     if (typeof layer.getLayers !== "undefined") {
-      layers = layer.getLayers();
-      layers = layers && layers[0] instanceof L.Layer ? layers : [layer];
+      layers = layer.getLayers()
+      layers = layers && layers[0] instanceof L.Layer ? layers : [layer]
     } else {
-      this.layersOnLoad = Object.keys(layer).includes('_layers');
+      this.layersOnLoad = Object.keys(layer).includes("_layers")
     }
-    this.options.layer = layers[0];
-    this.options.layers = this.layersOnLoad ? [] : layers;
+    this.options.layer = layers[0]
+    this.options.layers = this.layersOnLoad ? [] : layers
   }
 
   onAdd(map) {
-    const container = DomUtil.create("div", "opacity-control unselectable");
-    const controlArea = DomUtil.create("div", "opacity-area", container);
-    const handle = DomUtil.create("div", "opacity-handle", container);
-    const handleArrowUp = DomUtil.create("div", "opacity-arrow-up", handle);
-    const handleText = DomUtil.create("div", "opacity-text", handle);
-    const handleArrowDown = DomUtil.create("div", "opacity-arrow-down", handle);
-    const bottom = DomUtil.create("div", "opacity-bottom", container);
+    const container = DomUtil.create("div", "opacity-control unselectable")
+    const controlArea = DomUtil.create("div", "opacity-area", container)
+    const handle = DomUtil.create("div", "opacity-handle", container)
+    const handleArrowUp = DomUtil.create("div", "opacity-arrow-up", handle)
+    const handleText = DomUtil.create("div", "opacity-text", handle)
+    const handleArrowDown = DomUtil.create("div", "opacity-arrow-down", handle)
+    const bottom = DomUtil.create("div", "opacity-bottom", container)
 
-    DomEvent.stopPropagation(container);
-    DomEvent.disableClickPropagation(container);
-    this.setListeners(handle, bottom, handleText, map);
+    DomEvent.stopPropagation(container)
+    DomEvent.disableClickPropagation(container)
+    this.setListeners(handle, bottom, handleText, map)
 
-    handle.setAttribute("tabindex", "0");
-    let opacity =  getLayerOpacity(this.options.layer);
-    const opacityPercentage = parseInt(opacity * 100);
-    handle.style.zIndex = 4;
-    handle.style.top = `calc(100% - ${opacityPercentage}% - 12px)`;
-    handleText.innerHTML = `${opacityPercentage}%`;
-    return container;
+    handle.setAttribute("tabindex", "0")
+    let opacity = getLayerOpacity(this.options.layer)
+    const opacityPercentage = parseInt(opacity * 100)
+    handle.style.zIndex = 4
+    handle.style.top = `calc(100% - ${opacityPercentage}% - 12px)`
+    handleText.innerHTML = `${opacityPercentage}%`
+    return container
   }
 
   updateMapOpacity(opacity) {
@@ -45,10 +45,10 @@ export default class LayerOpacityControl extends Control {
 
   layerOpacity(layer, opacity) {
     try {
-      layer.setStyle({"fillOpacity": opacity, "opacity": opacity})
+      layer.setStyle({ fillOpacity: opacity, opacity: opacity })
     } catch {
       try {
-        layer.setOpacity(opacity);
+        layer.setOpacity(opacity)
       } catch {
         console.error("Couldn't set opacity for layer", layer)
       }
@@ -56,65 +56,66 @@ export default class LayerOpacityControl extends Control {
   }
 
   setListeners(handle, bottom, handleText, map) {
-    let start = false;
-    let startTop;
+    let start = false
+    let startTop
 
     DomEvent.on(document, "mousemove", (e) => {
-      if (!start) return;
-      const percentInverse =
-        Math.max(0, Math.min(200, startTop + parseInt(e.clientY, 10) - start)) /
-        2;
-      handle.style.top = `${percentInverse * 2 - 13}px`;
-      handleText.innerHTML = `${Math.round((1 - percentInverse / 100) * 100)}%`;
-      bottom.style.height = `${Math.max(0, (100 - percentInverse) * 2 - 13)}px`;
-      bottom.style.top = `${Math.min(200, percentInverse * 2 + 13)}px`;
-      this.updateMapOpacity(1 - percentInverse / 100);
-    });
+      if (!start) return
+      const percentInverse = Math.max(0, Math.min(200, startTop + parseInt(e.clientY, 10) - start)) / 2
+      handle.style.top = `${percentInverse * 2 - 13}px`
+      handleText.innerHTML = `${Math.round((1 - percentInverse / 100) * 100)}%`
+      bottom.style.height = `${Math.max(0, (100 - percentInverse) * 2 - 13)}px`
+      bottom.style.top = `${Math.min(200, percentInverse * 2 + 13)}px`
+      this.updateMapOpacity(1 - percentInverse / 100)
+    })
 
     DomEvent.on(handle, "mousedown", (e) => {
-      start = parseInt(e.clientY, 10);
-      startTop = handle.offsetTop - 12;
-      return false;
-    });
+      start = parseInt(e.clientY, 10)
+      startTop = handle.offsetTop - 12
+      return false
+    })
 
     DomEvent.on(document, "mouseup", () => {
-      start = null;
-    });
+      start = null
+    })
 
-    let _this = this;
-    DomEvent.on(map, 'layeradd', function(e) {
-      if (e.layer.options.addToOpacitySlider || (_this.layersOnLoad && e.layer instanceof L.Layer)){
-        _this.options.layers.push(e.layer);
+    let _this = this
+    DomEvent.on(map, "layeradd", function (e) {
+      if (e.layer.options.addToOpacitySlider || (_this.layersOnLoad && e.layer instanceof L.Layer)) {
+        _this.options.layers.push(e.layer)
       }
-    });
+    })
 
-    DomEvent.on(map, 'layerremove', function(e) {
-      if (e.layer.options.addToOpacitySlider){
-        const index = _this.options.layers.indexOf(e.layer);
-        if (index) { _this.options.layers.splice(index, 1)};
+    DomEvent.on(map, "layerremove", function (e) {
+      if (e.layer.options.addToOpacitySlider) {
+        const index = _this.options.layers.indexOf(e.layer)
+        if (index) {
+          _this.options.layers.splice(index, 1)
+        }
       }
-    });
+    })
 
-
-    DomEvent.on(handle, 'keydown', function(e) {
-      const opacity = _this.geoJSON ? _this.options.layer.style.fillOpacity : _this.options.layer.options.opacity;
-      const step = 1;
-      var newOpacity;
-      if (e.key == 'ArrowDown'){
-        newOpacity = opacity * 100 - step;
-      } else if (e.key == 'ArrowUp') {
-        newOpacity = opacity * 100 + step;
+    DomEvent.on(handle, "keydown", function (e) {
+      const opacity = _this.geoJSON ? _this.options.layer.style.fillOpacity : _this.options.layer.options.opacity
+      const step = 1
+      var newOpacity
+      if (e.key == "ArrowDown") {
+        newOpacity = opacity * 100 - step
+      } else if (e.key == "ArrowUp") {
+        newOpacity = opacity * 100 + step
       } else {
-        return;
+        return
+      }
+      e.preventDefault()
+      if (newOpacity > 100 || newOpacity < 0) {
+        return
       }
-      e.preventDefault();
-      if (newOpacity > 100 || newOpacity < 0) { return; }
       newOpacity = Math.round(newOpacity)
-      handle.style.top = `calc(100% - ${newOpacity}% - 12px)`;
-      handleText.innerHTML = newOpacity + "%";
-      bottom.style.height = newOpacity + "%";
-      bottom.style.top = `calc(100% - ${newOpacity}%)`;
+      handle.style.top = `calc(100% - ${newOpacity}% - 12px)`
+      handleText.innerHTML = newOpacity + "%"
+      bottom.style.height = newOpacity + "%"
+      bottom.style.top = `calc(100% - ${newOpacity}%)`
       _this.updateMapOpacity(newOpacity / 100)
-    });
+    })
   }
 }

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

@@ -0,0 +1,49 @@
+import { Control } from "leaflet"
+
+export default class sidebarControl extends Control {
+  constructor(options) {
+    const _options = { ...options }
+    super(_options)
+  }
+
+  onAdd(map) {
+    var div = L.DomUtil.create("div", "leaflet-sidebar")
+    div.setAttribute("tabindex", "0")
+    const sidebarContainer = this.options.sidebar
+
+    // Disable zoom when the mouse enters the sidebar
+    div.addEventListener("mouseenter", function () {
+      map.scrollWheelZoom.disable()
+    })
+
+    div.addEventListener("touchstart", function () {
+      map.touchZoom.disable()
+      map.dragging.disable()
+    })
+
+    // without this the map will try to find data about whatever is behind the sidebar
+    div.addEventListener("click", function (event) {
+      event.stopPropagation()
+    })
+
+    // Enable zoom when the mouse leaves the sidebar
+    div.addEventListener("touchend", function () {
+      map.touchZoom.enable()
+      map.dragging.enable()
+    })
+
+    // Enable zoom when the mouse leaes the sidebar
+    div.addEventListener("mouseleave", function () {
+      map.scrollWheelZoom.enable()
+    })
+
+    if (!sidebarContainer) {
+      return
+    }
+    // Make sure table height is same as map (with a little padding)
+    sidebarContainer.children[0].style.maxHeight = `${map._container.offsetHeight - 30}px`
+    div.innerHTML = sidebarContainer.innerHTML
+    sidebarContainer.remove()
+    return div
+  }
+}

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

@@ -1,98 +1,101 @@
-import { DomUtil, DomEvent, Handler } from "leaflet";
+import { DomUtil, DomEvent, Handler } from "leaflet"
 
 export default class Sleep extends Handler {
   addHooks() {
-    const container = DomUtil.create("div", "wake-overlay w-100 h-100 position-absolute align-items-center justify-content-center", this._map._container);
+    const container = DomUtil.create(
+      "div",
+      "wake-overlay w-100 h-100 position-absolute align-items-center justify-content-center",
+      this._map._container,
+    )
     const button = DomUtil.create("button", "btn btn-primary wake-button", container)
 
-    button.innerHTML = this._map.options.MESSAGE;
-    button.setAttribute("tabindex", "0");
-    button.style.zIndex = 2000;
-    container.style.zIndex = 1999;
-    const background = String(this._map.options.BACKGROUND);
-    container.style.background = background;
-    this.container = container;
-    if (this._map.options.MARGIN_DISTANCE) {
+    button.innerHTML = this._map.options.message
+    button.setAttribute("tabindex", "0")
+    button.style.zIndex = 2000
+    container.style.zIndex = 1999
+    const background = String(this._map.options.background)
+    container.style.background = background
+    this.container = container
+    if (this._map.options.margin_distance) {
       this.updateBasedOnSize()
     } else {
-      this.sleepMap();
+      this.sleepMap()
     }
     this.setListeners()
   }
 
   sleepMap() {
-    this._map.dragging.disable();
-    this._map.touchZoom.disable();
-    this._map.scrollWheelZoom.disable();
-    this._map.doubleClickZoom.disable();
-    this._map.boxZoom.disable();
-    this._map.keyboard.disable();  
-    this.container.classList.add('d-flex');
-    this.container.classList.remove('d-none');
+    this._map.dragging.disable()
+    this._map.touchZoom.disable()
+    this._map.scrollWheelZoom.disable()
+    this._map.doubleClickZoom.disable()
+    this._map.boxZoom.disable()
+    this._map.keyboard.disable()
+    this.container.classList.add("d-flex")
+    this.container.classList.remove("d-none")
   }
 
   wakeMap() {
-    this._map.dragging.enable();
-    this._map.touchZoom.enable();
-    this._map.scrollWheelZoom.enable();
-    this._map.doubleClickZoom.enable();
-    this._map.boxZoom.enable();
-    this._map.keyboard.enable();
-    this.container.classList.remove('d-flex');
-    this.container.classList.add('d-none');
+    this._map.dragging.enable()
+    this._map.touchZoom.enable()
+    this._map.scrollWheelZoom.enable()
+    this._map.doubleClickZoom.enable()
+    this._map.boxZoom.enable()
+    this._map.keyboard.enable()
+    this.container.classList.remove("d-flex")
+    this.container.classList.add("d-none")
   }
 
   updateBasedOnSize() {
-    const rect = this._map._container.getBoundingClientRect();
+    const rect = this._map._container.getBoundingClientRect()
     // sometimes the left/right side has larger margin, so we take an average
-    const calculation = ((window.innerWidth - rect.right) + rect.left) / 2;
-    if (calculation < this._map.options.MARGIN_DISTANCE) {
-      this.sleepMap();
+    const calculation = (window.innerWidth - rect.right + rect.left) / 2
+    if (calculation < this._map.options.margin_distance) {
+      this.sleepMap()
     } else {
-      this.wakeMap();
+      this.wakeMap()
     }
   }
 
   setListeners() {
-    const _this = this;
-    let timer;
-    let sleeptimer;
+    const _this = this
+    let timer
+    let sleeptimer
 
-    if (_this._map.options.MARGIN_DISTANCE){
+    if (_this._map.options.margin_distance) {
       window.addEventListener("resize", (event) => {
-        _this.updateBasedOnSize();
+        _this.updateBasedOnSize()
       })
     }
 
     DomEvent.on(_this.container, "click", (e) => {
       _this.wakeMap()
-    });
+    })
 
     DomEvent.on(_this.container, "focus", (e) => {
       _this.wakeMap()
-    });
+    })
 
-    if (this._map.options.HOVERTOWAKE) {
+    if (this._map.options.hovertowake) {
       DomEvent.on(this._map._container, "mouseenter", (e) => {
-        clearTimeout(sleeptimer);
+        clearTimeout(sleeptimer)
 
-        timer = setTimeout(function() {
+        timer = setTimeout(function () {
           _this.wakeMap()
-        }, _this._map.options.WAKETIME);
-      
-      });
+        }, _this._map.options.waketime)
+      })
 
       DomEvent.on(this._map._container, "mouseleave", (e) => {
-        clearTimeout(timer);
-      
-        sleeptimer = setTimeout(function() {
+        clearTimeout(timer)
+
+        sleeptimer = setTimeout(function () {
           _this.sleepMap()
-        }, _this._map.options.SLEEPTIME);
-      });
+        }, _this._map.options.sleeptime)
+      })
     }
 
     DomEvent.on(this.container, "touchstart", (e) => {
       _this.wakeMap()
-    });
+    })
   }
 }