diff --git a/Dockerfile b/Dockerfile
index e26688c..6f62d8a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,6 +8,5 @@ FROM caddy:2.6.4
COPY img /usr/share/caddy/img
COPY css /usr/share/caddy/css
-COPY js /usr/share/caddy/js
COPY stores.json robots.txt /usr/share/caddy/
COPY --from=builder /src/index.html /usr/share/caddy/index.html
diff --git a/css/site.css b/css/site.css
index e4dbd70..37457b6 100644
--- a/css/site.css
+++ b/css/site.css
@@ -62,6 +62,9 @@ ol {
.clearfix {
clear: both;
}
+.hidden {
+ display: none;
+}
#map {
height: 500px;
diff --git a/index.html b/index.html
index 5d1ada1..4674c08 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,6 @@
/>
-
-
NYC Bookstores
- The Many Independent Bookstores of New York City
-
+
+ The Many Independent Bookstores of New York City
+
+
- intro
-
${description}` : ""}`;
}
+ function hideElementById(id) {
+ const element = document.getElementById(id);
+ if (element !== undefined) {
+ element.classList.add("hidden");
+ }
+ }
+
+ function showElementById(id) {
+ const element = document.getElementById(id);
+ if (element !== undefined) {
+ element.classList.remove("hidden");
+ }
+ }
+
+ function setContent(id, html) {
+ const element = document.getElementById(id);
+ if (element !== undefined) {
+ element.innerHTML = html;
+ }
+ }
+
document.addEventListener("DOMContentLoaded", function () {
- $.getJSON("./stores.json", function (data) {
- data.sort(function (a, b) {
- var aname = a.name.toLowerCase();
- var bname = b.name.toLowerCase();
- return aname === bname ? 0 : +(aname > bname) || -1;
+ fetch("./stores.json")
+ .then((resp) => {
+ return resp.json();
+ })
+ .then((data) => {
+ data.sort(function (a, b) {
+ var aname = a.name.toLowerCase();
+ var bname = b.name.toLowerCase();
+ return aname === bname ? 0 : +(aname > bname) || -1;
+ });
+ data.forEach((value, key) => {
+ value.rowNumber = key;
+ value.slug = slugify(value.name);
+ });
+ setContent("storeCount", data.length);
+ window.data = data;
+ loadMap(data);
+ })
+ .catch((err) => {
+ // we'll live with the static cache!
+ console.log(err);
});
- $.each(data, function (key, value) {
- value.rowNumber = key;
- value.slug = slugify(value.name);
- });
- $("#storeCount").html(data.length);
- window.data = data;
- loadMap(data);
- });
});
window.addEventListener(
@@ -750,7 +781,7 @@
function getStoreBySlug(slug) {
var ret = false;
- $.each(window.data, function (key, value) {
+ window.data.forEach((value, key) => {
if (value.slug === slug) {
ret = value;
return false;
@@ -783,18 +814,18 @@
popup.setLngLat([store.long, store.lat]).setHTML(store.name).addTo(map);
- $("#info").hide();
- $("#selected").html(SelectedStoreTemplate(store));
- $("#selected").show();
+ hideElementById("info");
+ setContent("selected", SelectedStoreTemplate(store));
+ showElementById("selected");
if (pushState) {
updateHash(store.slug);
}
}
function showInfo(pushState = true) {
- $("#selected").hide();
+ hideElementById("selected");
popup.remove();
- $("#info").show();
+ showElementById("info");
if (pushState) {
updateHash("info");
}
@@ -804,7 +835,7 @@
var geolocate = new mapboxgl.GeolocateControl();
var points = [];
- $.each(data, function (key, value) {
+ data.forEach((value, key) => {
points.push({
type: "Feature",
geometry: {
@@ -874,13 +905,17 @@
.addTo(map);
});
- $("#Stores").html(TableViewTemplate(data));
- $("#Stores tbody tr").on("click", function () {
- updateSelectedStore(data[$(this)[0].id], true);
- $(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
+ setContent("Stores", TableViewTemplate(data));
+ document.querySelectorAll("#Stores tbody tr").forEach((element) => {
+ element.addEventListener("click", () => {
+ updateSelectedStore(data[element.id], true);
+ document
+ .getElementById("subhed")
+ .scrollIntoView({ behavior: "smooth" });
+ });
});
- $("#viewInfo").on("click", showInfo);
+ document.getElementById("viewInfo").addEventListener("click", showInfo);
}