Add option to share persistent URL

Author: eltos

app.js

@@ -15,16 +15,6 @@ const countries = [
 ];
 
 
-let selectedMonthRange = document.location.hash.split("#")[1] || null;
-let selectedCountries = document.location.hash.split("#")[2]?.split("+") || ["DE"];
-selectedCountries = [...new Set(selectedCountries).intersection(new Set(countries.map(c => c.code)))];
-let locale = document.location.hash.split("#")[3];
-
-function updateHash() {
-  document.location.hash = selectedMonthRange + "#" + selectedCountries.toSorted().join("+") + (locale !== "de" ? "#" + locale : "");
-}
-
-
 // ------------------------------------------------------------
 // Initialisierung
 const API_BASE = "https://openholidaysapi.org";
@@ -38,18 +28,39 @@ let i18n = {
   nationwide: "landesweit",
   mioResidents: "Mio. Einwohner",
   incompleteData: "Unvollständige Datenbasis",
-  dataSources: "Datenquellen"
+  dataSources: "Datenquellen",
+  share: "Link teilen",
+  shareInfo: "Persistenter Link wurde in die Zwischenablage kopiert"
 };
 
+
+const url = new URL(location)
+let selectedMonthRange = url.searchParams.get("range");
+let selectedCountries = url.searchParams.get("countries")?.split("|") || ["DE"];
+selectedCountries = [...new Set(selectedCountries).intersection(new Set(countries.map(c => c.code)))];
+let locale = url.searchParams.get("lang") || "de";
+
+
 const calendarContainer = document.getElementById("calendar");
 const sourceInfo = document.getElementById("sourceInfo");
 const yearSelect = document.getElementById("yearSelect");
 const countryList = document.getElementById("countryList");
+const shareLinkButton = document.getElementById("shareLink");
+shareLinkButton.addEventListener("click", e => {
+  const url = new URL(location)
+  url.searchParams.set("range", selectedMonthRange)
+  url.searchParams.set("countries", selectedCountries.toSorted().join("|"));
+  url.searchParams.set('lang', locale);
+  window.prompt(i18n.shareInfo, url.toString());
+  navigator.clipboard.writeText(url.toString());
+})
 document.getElementById("languageSelector").onclick = async e => {
   locale = locale === "de" ? "en" : "de";
-  updateHash()
-  document.location.reload();
+  const url = new URL(location)
+  url.searchParams.set('lang', locale);
+  location.href = url.toString();
 };
+
 document.addEventListener("DOMContentLoaded", async () => {
 
   await i18ninit();
@@ -63,6 +74,8 @@ document.addEventListener("DOMContentLoaded", async () => {
     throw e
   }
 
+  shareLinkButton.text = i18n.share
+
   sourceInfo.append(i18n.dataSources + ": ")
 
   function sourceLink(url, label) {
@@ -143,7 +156,6 @@ function populateYearSelect() {
   yearSelect.value = selectedMonthRange
   yearSelect.addEventListener("change", async e => {
     selectedMonthRange = e.currentTarget.value;
-    updateHash();
     await updateCalendar();
   });
 }
@@ -168,7 +180,6 @@ function renderCountrySelection() {
         selectedCountries.push(c.code);
         div.classList.add("active");
       }
-      updateHash();
       await updateCalendar();
     });
     countryList.appendChild(div);

i18n/en.json

@@ -9,5 +9,7 @@
   "nationwide": "national",
   "mioResidents": "M people",
   "incompleteData": "Incomplete data",
-  "dataSources": "Data sources"
+  "dataSources": "Data sources",
+  "share": "Share link",
+  "shareInfo": "Persistent link was copied to the clipboard"
 }

index.html

@@ -15,7 +15,10 @@ <h1 data-i18n="title" onclick="document.location='.'">Holidense: Feriendichte Ka
     gerade Urlaub hat. Die Daten basieren auf der
     <a href="https://www.openholidaysapi.org" target="_blank">OpenHolidays API</a>.
   </p>
-  <button id="languageSelector">🌐</button>
+  <div class="option-icons">
+    <button class="option-icon" id="languageSelector" title="Toggle language EN/DE &#013;Sprache wechseln DE/EN">🌐</button>
+    <button class="option-icon" id="shareLink">🔗</button>
+  </div>
 </header>
 
 <section id="controls">

styles.css

@@ -51,18 +51,26 @@ a:hover {
   }
 }
 
-#languageSelector {
+.option-icons {
   position: absolute;
   right: 0;
   top: 0;
   margin: 10px;
+}
+
+.option-icon {
   cursor: pointer;
   border: none;
   background: none;
   color: #7fb6ff;
+  opacity: 0.7;
   font-size: 1rem;
 }
 
+.option-icon:hover {
+  opacity: 1;
+}
+
 #controls, #countrySelect {
   display: flex;
   flex-wrap: wrap;