geoblacklight 5.4.0 → 6.0.0.pre.alpha.1

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

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

@@ -1,18 +1,17 @@
-import { identifyFeatures } from "esri-leaflet";
-import { polygon, geoJSON, circleMarker, layerGroup } from "leaflet";
-import { appendErrorMessage, appendLoadingMessage, getLayerOpacity, linkify } from "geoblacklight/leaflet/utils";
+import { identifyFeatures } from "esri-leaflet"
+import { appendErrorMessage, appendLoadingMessage, getLayerOpacity, linkify } from "geoblacklight/leaflet/utils"
 
 export const wmsInspection = (map, url, layerId, layer) => {
   // add crosshair class for map items
-  map.getContainer().classList.add('leaflet-clickable');
+  map.getContainer().classList.add("leaflet-clickable")
 
   // Inspect on click
   map.on("click", async (e) => {
-    const spinner = document.createElement("tbody");
-    spinner.className = "attribute-table-body";
+    const spinner = document.createElement("tbody")
+    spinner.className = "attribute-table-body"
     spinner.innerHTML =
-      '<tr><td colspan="2"><div class="spinner-border" role="status"><span class="visually-hidden">Inspecting</span></div></td></tr>';
-    document.querySelector(".attribute-table-body").replaceWith(spinner);
+      '<tr><td colspan="2"><div class="spinner-border" role="status"><span class="visually-hidden">Inspecting</span></div></td></tr>'
+    document.querySelector(".attribute-table-body").replaceWith(spinner)
 
     const wmsoptions = {
       URL: url,
@@ -23,75 +22,84 @@ export const wmsInspection = (map, url, layerId, layer) => {
       QUERY_LAYERS: layerId,
       X: Math.round(e.containerPoint.x),
       Y: Math.round(e.containerPoint.y),
-    };
+    }
 
     try {
       const response = await fetch("/wms/handle", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "X-CSRF-Token": document
-            .querySelector('meta[name="csrf-token"]')
-            .getAttribute("content"),
+          "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
         },
         body: JSON.stringify(wmsoptions),
-      });
+      })
 
-      if (!response.ok) throw new Error("Network response was not ok.");
+      if (!response.ok) throw new Error("Network response was not ok.")
 
-      const response_data = await response.json();
+      const response_data = await response.json()
 
-      if (response_data.hasOwnProperty("error") || response_data.hasOwnProperty('exceptions') || response_data.features.length === 0) {
+      if (
+        response_data.hasOwnProperty("error") ||
+        response_data.hasOwnProperty("exceptions") ||
+        response_data.features.length === 0
+      ) {
         document.querySelector(".attribute-table-body").innerHTML =
-          '<tr><td colspan="2">Could not find that feature</td></tr>';
-        return;
+          '<tr><td colspan="2">Could not find that feature</td></tr>'
+        return
       }
-      const data = response_data.features[0];
-      if (!data.isHTML) overlayLayer(map, data, layer);
+      const data = response_data.features[0]
+      if (!data.isHTML) overlayLayer(map, data, layer)
 
-      populateAttributeTable(data);
+      populateAttributeTable(data)
     } catch (error) {
-      console.error("Fetch error: ", error);
+      console.error("Fetch error: ", error)
     }
-  });
+  })
 }
 
 export const overlayLayer = (map, data, layer) => {
-  const highlightLayerOld = Object.values(map._layers).filter(layer => layer.options.highlightLayer);
-  if (highlightLayerOld[0]) highlightLayerOld.map(layer => map.removeLayer(layer));
-  if (!data) return;
+  const highlightLayerOld = Object.values(map._layers).filter((layer) => layer.options.highlightLayer)
+  if (highlightLayerOld[0]) highlightLayerOld.map((layer) => map.removeLayer(layer))
+  if (!data) return
 
-  let overlayLayer;
+  let overlayLayer
 
-  const opacity = getLayerOpacity(layer);
-  const color = map.options.selected_color;
+  const opacity = getLayerOpacity(layer)
+  const color = map.options.selected_color
 
   if (data._latlngs) {
-    overlayLayer = polygon(data._latlngs, {color: color, weight: 2, layer: true, fillOpacity: opacity, addToOpacitySlider: true, highlightLayer: true });
+    overlayLayer = L.polygon(data._latlngs, {
+      color: color,
+      weight: 2,
+      layer: true,
+      fillOpacity: opacity,
+      addToOpacitySlider: true,
+      highlightLayer: true,
+    })
   } else {
-    overlayLayer = geoJSON(data, {
+    overlayLayer = L.geoJSON(data, {
       color: color,
       opacity: opacity,
       addToOpacitySlider: true,
       highlightLayer: true,
-      pointToLayer: function(feature, latlng) {
-        return circleMarker(latlng, {
+      pointToLayer: function (feature, latlng) {
+        return L.circleMarker(latlng, {
           radius: 8,
           fillColor: color,
           color: color,
           weight: 1,
           opacity: opacity,
-          fillOpacity: opacity
-        });
-      }
-    });
+          fillOpacity: opacity,
+        })
+      },
+    })
   }
-  layerGroup([overlayLayer]).addTo(map);
+  L.layerGroup([overlayLayer]).addTo(map)
 }
 
 export const tiledMapLayerInspection = (map, layer) => {
   this.map.on("click", (e) => {
-    this.appendLoadingMessage();
+    this.appendLoadingMessage()
 
     // Query layer at click location
     identifyFeatures({
@@ -104,21 +112,21 @@ export const tiledMapLayerInspection = (map, layer) => {
       .at(e.latlng)
       .run((error, featureCollection) => {
         if (error) {
-          this.appendErrorMessage();
+          this.appendErrorMessage()
         } else {
-          this.populateAttributeTable(featureCollection.features[0]);
+          this.populateAttributeTable(featureCollection.features[0])
         }
-      });
-  });
+      })
+  })
 }
 
 export const dynamicMapLayerInspection = (map, layer, layerId) => {
   // add crosshair class for map items
-  map.getContainer().classList.add('leaflet-clickable');
+  map.getContainer().classList.add("leaflet-clickable")
 
   // Inspect on click
   map.on("click", (e) => {
-    appendLoadingMessage();
+    appendLoadingMessage()
 
     // Query layer at click location
     const identify = identifyFeatures({
@@ -128,40 +136,40 @@ export const dynamicMapLayerInspection = (map, layer, layerId) => {
       .tolerance(2)
       .returnGeometry(true)
       .on(map)
-      .at(e.latlng);
+      .at(e.latlng)
 
     // Query specific layer if dynamicLayerId is set
     if (layerId) {
-      identify.layers("all: " + layerId);
+      identify.layers("all: " + layerId)
     }
 
     identify.run((error, featureCollection, response) => {
       if (error || response.results < 1) {
-        appendErrorMessage();
+        appendErrorMessage()
       } else {
-        overlayLayer(map, featureCollection.features[0], layer);
-        populateAttributeTable(featureCollection.features[0]);
+        overlayLayer(map, featureCollection.features[0], layer)
+        populateAttributeTable(featureCollection.features[0])
       }
-    });
-  });
+    })
+  })
 }
 
 export const featureLayerInspection = (map, layer) => {
   // add crosshair class for map items
-  layer.on('load', function() {
-    this.eachFeature(function(layer) {
-      var overlay = layer._path ? layer._path : layer._icon;
+  layer.on("load", function () {
+    this.eachFeature(function (layer) {
+      var overlay = layer._path ? layer._path : layer._icon
       if (overlay) {
-        overlay.classList.add('leaflet-clickable');
+        overlay.classList.add("leaflet-clickable")
       }
-    });
-  });
+    })
+  })
 
   // Inspect on click
   layer.on("click", (e) => {
-    const distance = 3000 / (1 + map.getZoom());
+    const distance = 3000 / (1 + map.getZoom())
 
-    appendLoadingMessage();
+    appendLoadingMessage()
 
     // Query layer at click location
     layer
@@ -170,27 +178,27 @@ export const featureLayerInspection = (map, layer) => {
       .nearby(e.latlng, distance)
       .run((error, featureCollection) => {
         if (error || !featureCollection.features.length) {
-          appendErrorMessage();
+          appendErrorMessage()
         } else {
-          overlayLayer(map, featureCollection.features[0], layer);
-          populateAttributeTable(featureCollection.features[0]);
+          overlayLayer(map, featureCollection.features[0], layer)
+          populateAttributeTable(featureCollection.features[0])
         }
-      });
-  });
+      })
+  })
 }
 
 const populateAttributeTable = (feature) => {
-  let html = '<tbody class="attribute-table-body">';
+  let html = '<tbody class="attribute-table-body">'
 
   // Step through properties and append to table
   Object.keys(feature.properties).forEach((property) => {
     html += `<tr><td>${property}</td>
-               <td>${linkify(feature.properties[property])}</td></tr>`;
-  });
-  html += "</tbody>";
+               <td>${linkify(feature.properties[property])}</td></tr>`
+  })
+  html += "</tbody>"
 
-  const tableBody = document.querySelector(".attribute-table-body");
+  const tableBody = document.querySelector(".attribute-table-body")
   if (tableBody) {
-    tableBody.outerHTML = html; // Replace existing table body with new content
+    tableBody.outerHTML = html // Replace existing table body with new content
   }
 }

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

@@ -1,6 +1,7 @@
 const indexMapInfoTemplate = (data) => `
   <div class="index-map-info">
-    ${data.title
+    ${
+      data.title
         ? `
       <div class="col-sm-12">
         <h3>${data.title}</h3>
@@ -8,9 +9,11 @@ const indexMapInfoTemplate = (data) => `
         : ""
     }
     <div class="col-sm-12">
-      ${data.thumbnailUrl
-        ? `
-        ${data.websiteUrl
+      ${
+        data.thumbnailUrl
+          ? `
+        ${
+          data.websiteUrl
             ? `
           <a href="${data.websiteUrl}">
             <img src="${data.thumbnailUrl}" class="img-responsive">
@@ -18,53 +21,57 @@ const indexMapInfoTemplate = (data) => `
             : `
           <img src="${data.thumbnailUrl}">`
         }`
-        : ""
-    }
+          : ""
+      }
       <dl class="row dl-invert document-metadata">
-        ${data.websiteUrl
-        ? `
+        ${
+          data.websiteUrl
+            ? `
           <dt class="col-sm-3">Website:</dt>
           <dd class="col-sm-9"><a href="${data.websiteUrl}">${data.websiteUrl}</a></dd>`
-        : ""
-    }
-        ${data.downloadUrl
-        ? `
+            : ""
+        }
+        ${
+          data.downloadUrl
+            ? `
           <dt class="col-sm-3">Download:</dt>
           <dd class="col-sm-9"><a href="${data.downloadUrl}">${data.downloadUrl}</a></dd>`
-        : ""
-    }
-        ${data.recordIdentifier
-        ? `
+            : ""
+        }
+        ${
+          data.recordIdentifier
+            ? `
           <dt class="col-sm-3">Record Identifier:</dt>
           <dd class="col-sm-9">${data.recordIdentifier}</dd>`
-        : ""
-    }
-        ${data.label
-        ? `
+            : ""
+        }
+        ${
+          data.label
+            ? `
           <dt class="col-sm-3">Label:</dt>
           <dd class="col-sm-9">${data.label}</dd>`
-        : ""
-    }
-        ${data.note
-        ? `
+            : ""
+        }
+        ${
+          data.note
+            ? `
           <dt class="col-sm-3">Note:</dt>
           <dd class="col-sm-9">${data.note}</dd>`
-        : ""
-    }
+            : ""
+        }
       </dl>
     </div>
-  </div>`;
-  
+  </div>`
+
 const indexMapDownloadTemplate = (data) =>
-    data.downloadUrl
-        ? `
+  data.downloadUrl
+    ? `
   <li class="list-group-item download js-index-map-feature">
     <h3 class="card-subtitle">Selected feature</h3>
     <ul class="list-group list-group-flush list-group-nested">
       <li class="list-group-item download">
         <div class="download-link-container">
-          <a class="btn btn-default download download-original" href="${data.downloadUrl
-        }">
+          <a class="btn btn-default download download-original" href="${data.downloadUrl}">
             ${data.label ? data.label : "Download"}
           </a>
         </div>
@@ -72,49 +79,47 @@ const indexMapDownloadTemplate = (data) =>
     </ul>
   </li>
 `
-        : "";
+    : ""
 
 const indexMapTemplate = (data) => {
-    return new Promise((resolve) => {
-        if (data.iiifUrl && !data.thumbnailUrl) {
-            fetch(data.iiifUrl)
-                .then((response) => response.json())
-                .then((manifestResponse) => {
-                    if (manifestResponse.thumbnail["@id"] !== null) {
-                        data.thumbnailUrl = manifestResponse.thumbnail["@id"];
-                    }
-                    resolve(data); // Resolve the modified data
-                })
-                .catch(() => resolve(data)); // In case of error, resolve with original data
-        } else {
-            resolve(data); // Immediately resolve if no iiifUrl
-        }
-    });
-};
+  return new Promise((resolve) => {
+    if (data.iiifUrl && !data.thumbnailUrl) {
+      fetch(data.iiifUrl)
+        .then((response) => response.json())
+        .then((manifestResponse) => {
+          if (manifestResponse.thumbnail["@id"] !== null) {
+            data.thumbnailUrl = manifestResponse.thumbnail["@id"]
+          }
+          resolve(data) // Resolve the modified data
+        })
+        .catch(() => resolve(data)) // In case of error, resolve with original data
+    } else {
+      resolve(data) // Immediately resolve if no iiifUrl
+    }
+  })
+}
 
 export const availabilityStyle = (availability, leafletOptions) => {
-    var style = availability || typeof availability === "undefined"
-        ? leafletOptions.LAYERS.INDEX.DEFAULT
-        : leafletOptions.LAYERS.INDEX.UNAVAILABLE;
-    style['fillOpacity'] = leafletOptions.opacity || .65;
-    style['opacity'] = leafletOptions.opacity || .65;
-    return style
+  var style =
+    availability || typeof availability === "undefined"
+      ? leafletOptions.layers.index.DEFAULT
+      : leafletOptions.layers.index.UNAVAILABLE
+  style["fillOpacity"] = leafletOptions.opacity || 0.65
+  style["opacity"] = leafletOptions.opacity || 0.65
+  return style
 }
 
 export const updateInformation = (properties) => {
-    indexMapTemplate(properties).then((updatedProperties) => {
-        const indexMapHtml = indexMapInfoTemplate(updatedProperties);
-        document.querySelector(".viewer-information").innerHTML = indexMapHtml;
+  indexMapTemplate(properties).then((updatedProperties) => {
+    const indexMapHtml = indexMapInfoTemplate(updatedProperties)
+    document.querySelector(".viewer-information").innerHTML = indexMapHtml
 
-        const indexMapDownloadHtml =
-            indexMapDownloadTemplate(updatedProperties);
-        const downloadElement = document.querySelector(".js-download-list");
+    const indexMapDownloadHtml = indexMapDownloadTemplate(updatedProperties)
+    const downloadElement = document.querySelector(".js-download-list")
 
-        if (Boolean(downloadElement)) {
-            downloadElement.innerHTML += indexMapDownloadHtml; // Appends new download template
-            downloadElement
-                .querySelectorAll(".js-index-map-feature")
-                .forEach((elem) => elem.remove());
-        }
-    });
-};
+    if (Boolean(downloadElement)) {
+      downloadElement.innerHTML += indexMapDownloadHtml // Appends new download template
+      downloadElement.querySelectorAll(".js-index-map-feature").forEach((elem) => elem.remove())
+    }
+  })
+}