Share and install buttons

bartekl1 · Dec 16, 2023 · c4ca710 · c4ca710
1 parent 8177bae
commit c4ca710
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 10 deletions.
diff --git a/static/js/index.js b/static/js/index.js
@@ -15,6 +15,16 @@ function getRandomVideo() {
     }
 }
 
+function getPWADisplayMode() {
+    const isStandalone =
+        window.matchMedia("(display-mode: standalone)").matches ||
+        window.matchMedia("(display-mode: window-controls-overlay)").matches;
+    if (navigator.standalone || isStandalone) {
+        return "standalone";
+    }
+    return "browser";
+}
+
 function loadCurrentReadings() {
     fetch("/api/current_readings").then((res) => { return res.json() }).then((json) => {
         if (json.status === "ok") {
@@ -148,3 +158,43 @@ fetch(
                 e.target = "_blank";
             });
     });
+
+if (navigator.canShare) {
+    document.querySelector("#share").addEventListener("click", () => {
+        navigator.share({
+            title: "Swarzędz Meteo",
+            text:
+                window.navigator.language.split("-")[0] === "pl"
+                    ? "Amatorska stacja meteo w Swarzędzu"
+                    : "Amateur meteorological station in Swarzedz",
+            url: window.location.href,
+        });
+    });
+
+    document.querySelector("#share").classList.remove("d-none");
+}
+
+var deferredPrompt;
+window.addEventListener("beforeinstallprompt", (e) => {
+    deferredPrompt = e;
+
+    if (getPWADisplayMode() == "browser") {
+        document.querySelector("#install").classList.remove("d-none");
+    }
+});
+
+document.querySelector("#install").addEventListener("click", async () => {
+    if (deferredPrompt !== null) {
+        deferredPrompt.prompt();
+        // const { outcome } = await deferredPrompt.userChoice;
+        // if (outcome === "accepted") {
+        //     deferredPrompt = null;
+        // }
+    }
+});
+
+window.addEventListener("appinstalled", () => {
+    console.log("PWA was installed");
+
+    document.querySelector("#install").classList.add("d-none");
+});
diff --git a/static/js/translate.js b/static/js/translate.js
@@ -32,6 +32,8 @@ const dataBSTranslations = {
     "Profil GitHub": "GitHub profile",
     "Bieżące odczyty": "Current readings",
     Informacje: "Information",
+    Udostępnij: "Share",
+    Zainstaluj: "Install",
 };
 
 if (window.navigator.language.split("-")[0] !== "pl") {

diff --git a/templates/index.html b/templates/index.html
@@ -70,16 +70,27 @@ <h1 class="h2 text-center" id="website-title">
     </div>
 
     <div class="container d-none" id="main">
-        <div class="btn-group mb-2">
-            <input type="radio" class="btn-check" name="tab" id="current-readings-tab-button" target="#current-readings" checked>
-            <label class="btn btn-primary tab-label" for="current-readings-tab-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Bieżące odczyty">
-                <i class="bi bi-circle-fill"></i>
-            </label>
-
-            <input type="radio" class="btn-check" name="tab" id="info-tab-button" target="#info">
-            <label class="btn btn-secondary tab-label" for="info-tab-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Informacje">
-                <i class="bi bi-info-circle"></i>
-            </label>
+        <div>
+            <div class="btn-group mb-2 float-start">
+                <input type="radio" class="btn-check" name="tab" id="current-readings-tab-button" target="#current-readings" checked>
+                <label class="btn btn-primary tab-label" for="current-readings-tab-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Bieżące odczyty">
+                    <i class="bi bi-circle-fill"></i>
+                </label>
+
+                <input type="radio" class="btn-check" name="tab" id="info-tab-button" target="#info">
+                <label class="btn btn-secondary tab-label" for="info-tab-button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Informacje">
+                    <i class="bi bi-info-circle"></i>
+                </label>
+            </div>
+            <div class="float-end">
+                <button class="btn btn-primary d-none" id="share" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Udostępnij">
+                    <i class="bi bi-share-fill"></i>
+                </button>
+                <button class="btn btn-primary d-none" id="install" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Zainstaluj">
+                    <i class="bi bi-download"></i>
+                </button>
+            </div>
+            <div class="clearfix"></div>
         </div>
 
         <div class="frame" id="current-readings">