style(templates): modernize JS to arrow functions and const/let

Convert all remaining function declarations, var usage, and string
concatenation across base, add, checkin, and data templates.
This commit is contained in:
Jon Seager 2026-02-05 12:45:52 +00:00
parent 5acbddd65b
commit 4fc81dd0c5
No known key found for this signature in database
4 changed files with 47 additions and 47 deletions

View file

@ -7,7 +7,7 @@
let _searchTimeout = null;
let _nearbyCafes = [];
function locateUser(btn) {
const locateUser = (btn) => {
const errorEl = document.getElementById('nearby-error');
const searchWrap = document.getElementById('nearby-search-wrap');
errorEl.classList.add('hidden');
@ -44,9 +44,9 @@
},
{ enableHighAccuracy: true, timeout: 15000 }
);
}
};
function onSearchInput(input) {
const onSearchInput = (input) => {
clearTimeout(_searchTimeout);
const resultsEl = document.getElementById('nearby-results');
@ -59,9 +59,9 @@
_searchTimeout = setTimeout(() => {
searchNearby(input.value.trim());
}, 350);
}
};
function toggleCitySearch(checkbox) {
const toggleCitySearch = (checkbox) => {
const locateBtn = document.getElementById('locate-btn');
const cityWrap = document.getElementById('city-search-wrap');
const searchWrap = document.getElementById('nearby-search-wrap');
@ -84,9 +84,9 @@
resultsEl.classList.add('hidden');
resultsEl.innerHTML = '';
}
}
};
async function searchNearby(query) {
const searchNearby = async (query) => {
const resultsEl = document.getElementById('nearby-results');
const errorEl = document.getElementById('nearby-error');
const spinnerEl = document.getElementById('nearby-spinner');
@ -135,9 +135,9 @@
} finally {
spinnerEl.classList.add('hidden');
}
}
};
function selectPlace(index) {
const selectPlace = (index) => {
const cafe = _nearbyCafes[index];
if (!cafe) return;
@ -151,13 +151,13 @@
document.getElementById('nearby-results').classList.add('hidden');
document.getElementById('nearby-search').value = '';
}
};
function escapeHtml(text) {
const escapeHtml = (text) => {
const el = document.createElement('span');
el.textContent = text;
return el.innerHTML;
}
};
</script>
{% endblock %}

View file

@ -12,23 +12,23 @@
></script>
{% block head %}{% endblock %}
<script>
document.addEventListener("DOMContentLoaded", function () {
var mobileQuery = window.matchMedia("(max-width: 767px)");
document.addEventListener("DOMContentLoaded", () => {
const mobileQuery = window.matchMedia("(max-width: 767px)");
if (!mobileQuery.matches) return;
function setupInfiniteScroll() {
document.querySelectorAll("[data-infinite-scroll]").forEach(function (container) {
var sentinel = container.querySelector(".infinite-scroll-sentinel");
const setupInfiniteScroll = () => {
document.querySelectorAll("[data-infinite-scroll]").forEach((container) => {
const sentinel = container.querySelector(".infinite-scroll-sentinel");
if (!sentinel || sentinel.dataset.observed) return;
sentinel.dataset.observed = "true";
var observer = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
var nextUrl = container.getAttribute("data-next-url");
var targetSelector = container.getAttribute("data-target");
const nextUrl = container.getAttribute("data-next-url");
const targetSelector = container.getAttribute("data-target");
if (!nextUrl || !targetSelector) {
observer.disconnect();
return;
@ -40,27 +40,27 @@
fetch(nextUrl, {
headers: { "datastar-request": "true" },
})
.then(function (res) { return res.text(); })
.then(function (html) {
var doc = new DOMParser().parseFromString(html, "text/html");
var newTarget = doc.querySelector(targetSelector);
.then((res) => res.text())
.then((html) => {
const doc = new DOMParser().parseFromString(html, "text/html");
const newTarget = doc.querySelector(targetSelector);
if (!newTarget) return;
// Append new rows to existing tbody
var existingTbody = container.querySelector("tbody");
var newTbody = newTarget.querySelector("tbody");
const existingTbody = container.querySelector("tbody");
const newTbody = newTarget.querySelector("tbody");
if (existingTbody && newTbody) {
Array.from(newTbody.children).forEach(function (row) {
Array.from(newTbody.children).forEach((row) => {
existingTbody.appendChild(document.adoptNode(row));
});
}
// Check if there are more pages
var newContainer = newTarget.querySelector("[data-infinite-scroll]");
var newNextUrl = newContainer && newContainer.getAttribute("data-next-url");
const newContainer = newTarget.querySelector("[data-infinite-scroll]");
const newNextUrl = newContainer && newContainer.getAttribute("data-next-url");
if (newNextUrl) {
container.setAttribute("data-next-url", newNextUrl);
var newSentinel = document.createElement("div");
const newSentinel = document.createElement("div");
newSentinel.className = "infinite-scroll-sentinel h-4 md:hidden";
newSentinel.setAttribute("aria-hidden", "true");
container.appendChild(newSentinel);
@ -77,11 +77,11 @@
observer.observe(sentinel);
});
}
};
setupInfiniteScroll();
var bodyObserver = new MutationObserver(function () {
const bodyObserver = new MutationObserver(() => {
setupInfiniteScroll();
});
bodyObserver.observe(document.body, { childList: true, subtree: true });

View file

@ -2,7 +2,7 @@
{% block head %}
<script>
function locateUser() {
const locateUser = () => {
const root = document.getElementById('checkin-root');
const emit = (name, detail) =>
root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
@ -27,7 +27,7 @@ function locateUser() {
},
{ enableHighAccuracy: true, timeout: 15000 },
);
}
};
</script>
{% endblock %}

View file

@ -81,24 +81,24 @@
<div id="detail-panel"></div>
<script>
(function() {
var searchInput = document.getElementById('data-search');
(() => {
const searchInput = document.getElementById('data-search');
if (!searchInput) return;
var debounceTimer;
searchInput.addEventListener('input', function() {
let debounceTimer;
searchInput.addEventListener('input', () => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(function() {
var params = new URLSearchParams(window.location.search);
var activeTab = params.get('type') || 'brews';
var query = searchInput.value;
var url = '/data?type=' + activeTab + '&q=' + encodeURIComponent(query);
debounceTimer = setTimeout(() => {
const params = new URLSearchParams(window.location.search);
const activeTab = params.get('type') || 'brews';
const query = searchInput.value;
const url = `/data?type=${activeTab}&q=${encodeURIComponent(query)}`;
history.pushState(null, '', url);
fetch(url, { headers: { 'datastar-request': 'true' } })
.then(function(res) { return res.text(); })
.then(function(html) {
.then((res) => res.text())
.then((html) => {
document.getElementById('data-content').innerHTML = html;
});
}, 300);