geoblacklight 5.3.0 → 6.0.0.pre.alpha.1

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

@@ -1,47 +1,49 @@
-import { Control } from "leaflet";
+import { Control } from "leaflet"
 
 export default class sidebarControl extends Control {
   constructor(options) {
-    const _options = { ...options };
-    super(_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;
+    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("mouseenter", function () {
+      map.scrollWheelZoom.disable()
+    })
 
-    div.addEventListener('touchstart', function() {
-      map.touchZoom.disable();
-      map.dragging.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();
-    });
+    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();
-    });
+    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();
-    });
+    div.addEventListener("mouseleave", function () {
+      map.scrollWheelZoom.enable()
+    })
 
-    if (!sidebarContainer) { return };
+    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;
+    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()
-    });
+    })
   }
 }