';
// The injected "Change location" button needs the same handler.
var changeBtn = cardMount.querySelector("[data-weather-loc]");
if (changeBtn) changeBtn.addEventListener("click", openPopover);
}
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c];
});
}
function showError(msg) {
setChip("📍 Weather", "Set your location");
setAqiChip(null);
if (cardMount && getLoc()) {
cardMount.innerHTML =
'
' +
escapeHtml(msg) + ' · ' +
'
';
var b = cardMount.querySelector("[data-weather-loc]");
if (b) b.addEventListener("click", openPopover);
}
}
// ---- location popover ----------------------------------------------------
// Built in JS so layout.html only needs the chip button. Class strings are
// full literals so Tailwind's content scan keeps them.
var popover = null;
var selectedUnit = "celsius"; // default for everyone; °F is opt-in
function setUnit(u) {
selectedUnit = u === "fahrenheit" ? "fahrenheit" : "celsius";
if (!popover) return;
popover.querySelectorAll("[data-loc-unit]").forEach(function (b) {
var on = b.getAttribute("data-loc-unit") === selectedUnit;
b.classList.toggle("bg-[color:var(--accent)]", on);
b.classList.toggle("text-white", on);
b.classList.toggle("text-[color:var(--ink)]/60", !on);
});
}
function defaultCountry() {
var lang = (navigator.language || "en-US");
var m = lang.match(/[-_]([A-Za-z]{2})$/);
return m ? m[1].toUpperCase() : "US";
}
function buildPopover() {
var dlg = document.createElement("div");
dlg.id = "pete-weather-loc";
dlg.className = "hidden fixed inset-0 z-50 bg-[color:var(--ink)]/40 backdrop-blur-sm flex items-start justify-center pt-[12vh] px-4";
dlg.setAttribute("role", "dialog");
dlg.setAttribute("aria-modal", "true");
dlg.innerHTML =
'
' +
'
' +
'
Weather location
' +
'' +
'
' +
'
' +
'
Enter your postal code to see the local forecast. The background follows the weather. Saved in this browser only.
' +
'
' +
'' +
'' +
'
' +
'
' +
'Units' +
'
' +
'' +
'' +
'
' +
'
' +
'' +
'
' +
'' +
'' +
'
' +
'
' +
'
';
document.body.appendChild(dlg);
// A small, friendly country list (Zippopotam supports ~60). Common ones up
// top; the user can type any postal code that matches their selected country.
var countries = [
["US", "🇺🇸 United States"], ["PT", "🇵🇹 Portugal"], ["GB", "🇬🇧 United Kingdom"],
["ES", "🇪🇸 Spain"], ["FR", "🇫🇷 France"], ["DE", "🇩🇪 Germany"], ["IT", "🇮🇹 Italy"],
["NL", "🇳🇱 Netherlands"], ["BE", "🇧🇪 Belgium"], ["CH", "🇨🇭 Switzerland"],
["AT", "🇦🇹 Austria"], ["IE", "🇮🇪 Ireland"], ["DK", "🇩🇰 Denmark"],
["SE", "🇸🇪 Sweden"], ["PL", "🇵🇱 Poland"], ["CZ", "🇨🇿 Czechia"],
["CA", "🇨🇦 Canada"], ["AU", "🇦🇺 Australia"], ["NZ", "🇳🇿 New Zealand"],
["BR", "🇧🇷 Brazil"], ["MX", "🇲🇽 Mexico"], ["JP", "🇯🇵 Japan"], ["IN", "🇮🇳 India"]
];
var sel = dlg.querySelector("[data-loc-country]");
countries.forEach(function (c) {
var o = document.createElement("option");
o.value = c[0]; o.textContent = c[1];
sel.appendChild(o);
});
dlg.addEventListener("click", function (e) { if (e.target === dlg) closePopover(); });
dlg.querySelector("[data-loc-close]").addEventListener("click", closePopover);
dlg.querySelector("[data-loc-clear]").addEventListener("click", function () {
setLoc(null);
try { localStorage.removeItem(CACHE_KEY); } catch (e) {}
closePopover();
// Hand the background back to the server's seasonal default.
if (window.PeteWeather) window.PeteWeather.set(seasonalDefault.variant, seasonalDefault.intensity);
setChip("📍 Weather", "Set your location");
setAqiChip(null);
if (cardMount) cardMount.innerHTML = "";
});
dlg.querySelectorAll("[data-loc-unit]").forEach(function (b) {
b.addEventListener("click", function () { setUnit(b.getAttribute("data-loc-unit")); });
});
dlg.querySelector("[data-loc-save]").addEventListener("click", onSave);
dlg.querySelector("[data-loc-postal]").addEventListener("keydown", function (e) {
if (e.key === "Enter") onSave();
});
return dlg;
}
function showLocError(msg) {
var el = popover.querySelector("[data-loc-error]");
if (!el) return;
if (msg) { el.textContent = msg; el.classList.remove("hidden"); }
else { el.classList.add("hidden"); }
}
function onSave() {
var country = popover.querySelector("[data-loc-country]").value;
var postal = popover.querySelector("[data-loc-postal]").value.trim();
var saveBtn = popover.querySelector("[data-loc-save]");
if (!postal) { showLocError("Enter a postal code."); return; }
showLocError("");
saveBtn.disabled = true; saveBtn.textContent = "…";
geocode(country, postal).then(function (geo) {
var loc = {
country: country, postal: postal,
lat: geo.lat, lon: geo.lon, name: geo.name,
unit: selectedUnit
};
setLoc(loc);
try { localStorage.removeItem(CACHE_KEY); } catch (e) {}
closePopover();
run(true);
}).catch(function (err) {
showLocError((err && err.message) || "Couldn't find that postal code.");
}).then(function () {
saveBtn.disabled = false; saveBtn.textContent = "Save";
});
}
function openPopover() {
if (!popover) popover = buildPopover();
var loc = getLoc();
popover.querySelector("[data-loc-country]").value = loc ? loc.country : defaultCountry();
popover.querySelector("[data-loc-postal]").value = loc ? loc.postal : "";
setUnit(loc && loc.unit ? loc.unit : "celsius");
showLocError("");
popover.classList.remove("hidden");
var inp = popover.querySelector("[data-loc-postal]");
if (inp) setTimeout(function () { inp.focus(); }, 30);
}
function closePopover() {
if (popover) popover.classList.add("hidden");
}
// ---- boot ----------------------------------------------------------------
// Remember the server's seasonal pick so "Clear" can restore it.
var seasonalDefault = {
variant: document.documentElement.dataset.weather || "",
intensity: document.documentElement.dataset.intensity || "heavy"
};
function run(force) {
var loc = getLoc();
if (!loc) { setChip("📍 Weather", "Set your location"); return; }
setChip("📍 " + escapeHtml(loc.name.split(",")[0]) + "…", "Loading forecast…");
loadForecast(loc, force)
.then(function (entry) { renderForecast(loc, entry); })
.catch(function () { showError("Forecast unavailable"); });
}
document.addEventListener("DOMContentLoaded", function () {
if (chipBtn) chipBtn.addEventListener("click", openPopover);
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") closePopover();
});
run(false);
});
})();