Use Web Share API for sharing entry

miniflux · Aug 1, 2023 · 061f12f · 061f12f
1 parent bf4823b
commit 061f12f
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/template/templates/views/entry.html b/template/templates/views/entry.html
@@ -49,6 +49,7 @@ <h1 dir="auto">
                     <li>
                         <a href="{{ route "sharedEntry" "shareCode" .entry.ShareCode }}"
                             title="{{ t "entry.shared_entry.title" }}"
+                            data-share-status="shared"
                             target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.shared_entry.label" }}</span></a>
                     </li>
                     <li>
@@ -64,6 +65,7 @@ <h1 dir="auto">
                     <li>
                         <a href="{{ route "shareEntry" "entryID" .entry.ID }}"
                             title="{{ t "entry.share.title" }}"
+                            data-share-status="share"
                             target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span></a>
                     </li>
                 {{ end }}

diff --git a/ui/static/js/app.js b/ui/static/js/app.js
@@ -221,9 +221,9 @@ function updateEntriesStatus(entryIDs, status, callback) {
     request.withBody({entry_ids: entryIDs, status: status});
     request.withCallback((resp) => {
         resp.json().then(count => {
-        if (callback) {
-            callback(resp);
-        }
+            if (callback) {
+                callback(resp);
+            }
 
             if (status === "read") {
                 decrementUnreadCounter(count);
@@ -336,7 +336,7 @@ function handleFetchOriginalContent() {
         response.json().then((data) => {
             if (data.hasOwnProperty("content") && data.hasOwnProperty("reading_time")) {
                 document.querySelector(".entry-content").innerHTML = data.content;
-				document.querySelector(".entry-reading-time").innerHTML = data.reading_time;
+                document.querySelector(".entry-reading-time").innerHTML = data.reading_time;
             }
         });
     });
@@ -557,7 +557,7 @@ function handleConfirmationMessage(linkElement, callback) {
     }
 
     linkElement.style.display = "none";
-    
+
     let containerElement = linkElement.parentNode;
     let questionElement = document.createElement("span");
 
@@ -638,3 +638,43 @@ function handlePlayerProgressionSave(playerElement) {
         request.execute();
     }
 }
+
+/**
+ * handle new share entires and already shared entries
+ */
+function handleShare() {
+    let link = document.querySelector('a[data-share-status]');
+    let title = document.querySelector("body > main > section > header > h1 > a");
+    if (link.dataset.shareStatus === "shared") {
+        checkShareAPI(title, link.href);
+    }
+    if (link.dataset.shareStatus === "share") {
+        let request = new RequestBuilder(link.href);
+        request.withCallback((r) => {
+            checkShareAPI(title, r.url);
+        });
+        request.withHttpMethod("GET");
+        request.execute();
+    }
+}
+
+/**
+* wrapper for Web Share API
+*/
+function checkShareAPI(title, url) {
+    if (!navigator.canShare) {
+        console.error("Your browser doesn't support the Web Share API.");
+        window.location = url;
+        return;
+    }
+    try {
+        navigator.share({
+            title: title,
+            url: url
+        });
+        window.location.reload();
+    } catch (err) {
+        console.error(err);
+        window.location.reload();
+    }
+}
diff --git a/ui/static/js/bootstrap.js b/ui/static/js/bootstrap.js
@@ -52,6 +52,7 @@ document.addEventListener("DOMContentLoaded", function () {
     onClick("a[data-toggle-bookmark]", (event) => handleBookmark(event.target));
     onClick("a[data-fetch-content-entry]", () => handleFetchOriginalContent());
     onClick("a[data-action=search]", (event) => setFocusToSearchInput(event));
+    onClick("a[data-share-status]", () => handleShare());
     onClick("a[data-action=markPageAsRead]", (event) => handleConfirmationMessage(event.target, () => markPageAsRead()));
     onClick("a[data-toggle-status]", (event) => handleEntryStatus("next", event.target));