remove jquery

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

css/site.css

@@ -62,6 +62,9 @@ ol {
 .clearfix {
   clear: both;
 }
+.hidden {
+  display: none;
+}
 
 #map {
   height: 500px;

index.html

@@ -26,8 +26,6 @@
     />
     <link rel="icon" type="image/png" href="/img/favicon.png" />
     <link rel="apple-touch-icon" href="/img/social.jpg" />
-    <script type="text/javascript" src="/js/jquery.3.6.0.js"></script>
-    <script type="text/javascript" src="/js/jquery.scrollTo.2.1.3.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
     <link
@@ -42,7 +40,7 @@
       media="screen"
       rel="stylesheet"
       type="text/css"
-      href="/css/site.css?1678229090807?1678229616129?1678229646573?1678229670306?1678229728212?1678229754175?1678229784956"
+      href="/css/site.css?1678229090807?1678229616129?1678229646573?1678229670306?1678229728212?1678229754175?1678229784956?1678233805437"
     />
     <meta
       property="title"
@@ -81,7 +79,11 @@
       <h1>NYC Bookstores</h1>
       <div>
         <ul class="nav">
-          <li><h2>The Many Independent Bookstores of New York City</h2></li>
+          <li>
+            <h2 id="subhed">
+              The Many Independent Bookstores of New York City
+            </h2>
+          </li>
           <li><a id="viewInfo">intro</a></li>
           <li>
             <a
@@ -699,21 +701,50 @@
           ${description ? `<p class="description">${description}</p>` : ""}`;
       }
 
+      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) {
+        fetch("./stores.json")
-          data.sort(function (a, b) {
+          .then((resp) => {
-            var aname = a.name.toLowerCase();
+            return resp.json();
-            var bname = b.name.toLowerCase();
+          })
-            return aname === bname ? 0 : +(aname > bname) || -1;
+          .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();
+        hideElementById("info");
-        $("#selected").html(SelectedStoreTemplate(store));
+        setContent("selected", SelectedStoreTemplate(store));
-        $("#selected").show();
+        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));
+        setContent("Stores", TableViewTemplate(data));
-        $("#Stores tbody tr").on("click", function () {
+        document.querySelectorAll("#Stores tbody tr").forEach((element) => {
-          updateSelectedStore(data[$(this)[0].id], true);
+          element.addEventListener("click", () => {
-          $(window).scrollTo($("#selected"), 250, { offset: { top: -15 } });
+            updateSelectedStore(data[element.id], true);
+            document
+              .getElementById("subhed")
+              .scrollIntoView({ behavior: "smooth" });
+          });
         });
 
-        $("#viewInfo").on("click", showInfo);
+        document.getElementById("viewInfo").addEventListener("click", showInfo);
       }
     </script>
     <script>

js/jquery.scrollTo.2.1.3.js

@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2007 Ariel Flesler - aflesler ○ gmail • com | https://github.com/flesler
- * Licensed under MIT
- * @author Ariel Flesler
- * @version 2.1.3
- */
-;(function(factory){'use strict';if(typeof define==='function'&&define.amd){define(['jquery'],factory)}else if(typeof module!=='undefined'&&module.exports){module.exports=factory(require('jquery'))}else{factory(jQuery)}})(function($){'use strict';var $scrollTo=$.scrollTo=function(target,duration,settings){return $(window).scrollTo(target,duration,settings)};$scrollTo.defaults={axis:'xy',duration:0,limit:true};function isWin(elem){return!elem.nodeName||$.inArray(elem.nodeName.toLowerCase(),['iframe','#document','html','body'])!==-1}function isFunction(obj){return typeof obj==='function'}$.fn.scrollTo=function(target,duration,settings){if(typeof duration==='object'){settings=duration;duration=0}if(typeof settings==='function'){settings={onAfter:settings}}if(target==='max'){target=9e9}settings=$.extend({},$scrollTo.defaults,settings);duration=duration||settings.duration;var queue=settings.queue&&settings.axis.length>1;if(queue){duration/=2}settings.offset=both(settings.offset);settings.over=both(settings.over);return this.each(function(){if(target===null){return}var win=isWin(this),elem=win?this.contentWindow||window:this,$elem=$(elem),targ=target,attr={},toff;switch(typeof targ){case 'number':case 'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,elem);case 'object':if(targ.length===0){return}if(targ.is||targ.style){toff=(targ=$(targ)).offset()}}var offset=isFunction(settings.offset)&&settings.offset(elem,targ)||settings.offset;$.each(settings.axis.split(''),function(i,axis){var Pos=axis==='x'?'Left':'Top',pos=Pos.toLowerCase(),key='scroll'+Pos,prev=$elem[key](),max=$scrollTo.max(elem,axis);if(toff){attr[key]=toff[pos]+(win?0:prev-$elem.offset()[pos]);if(settings.margin){attr[key]-=parseInt(targ.css('margin'+Pos),10)||0;attr[key]-=parseInt(targ.css('border'+Pos+'Width'),10)||0}attr[key]+=offset[pos]||0;if(settings.over[pos]){attr[key]+=targ[axis==='x'?'width':'height']()*settings.over[pos]}}else{var val=targ[pos];attr[key]=val.slice&&val.slice(-1)==='%'?parseFloat(val)/100*max:val}if(settings.limit&&/^\d+$/.test(attr[key])){attr[key]=attr[key]<=0?0:Math.min(attr[key],max)}if(!i&&settings.axis.length>1){if(prev===attr[key]){attr={}}else if(queue){animate(settings.onAfterFirst);attr={}}}});animate(settings.onAfter);function animate(callback){var opts=$.extend({},settings,{queue:true,duration:duration,complete:callback&&function(){callback.call(elem,targ,settings)}});$elem.animate(attr,opts)}})};$scrollTo.max=function(elem,axis){var Dim=axis==='x'?'Width':'Height',scroll='scroll'+Dim;if(!isWin(elem)){return elem[scroll]-$(elem)[Dim.toLowerCase()]()}var size='client'+Dim,doc=elem.ownerDocument||elem.document,html=doc.documentElement,body=doc.body;return Math.max(html[scroll],body[scroll])-Math.min(html[size],body[size])};function both(val){return isFunction(val)||$.isPlainObject(val)?val:{top:val,left:val}}$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(t){return $(t.elem)[t.prop]()},set:function(t){var curr=this.get(t);if(t.options.interrupt&&t._last&&t._last!==curr){return $(t.elem).stop()}var next=Math.round(t.now);if(curr!==next){$(t.elem)[t.prop](next);t._last=this.get(t)}}};return $scrollTo});