feat: Try to use Share API (#53)

Author: Bigismall

index.html

@@ -23,6 +23,7 @@
     </aside>
     <aside class="download download--hidden">
       <a class="download__input download__input--action" download href="#" id="js-download">Download image</a>
+      <button class="download__input download__input--share" id="js-share">Share image</a>
       <button class="download__input js-reset">Try another image</button>
     </aside>
     <aside class="map map--hidden map--center">

src/scripts/DownloadManager.ts

@@ -5,15 +5,18 @@ import { warn } from "./console.ts";
 
 export default class DownloadManager extends ObserverPublisher(Publisher) {
   private readonly downloadSelector: HTMLLinkElement;
+  private readonly shareSelector: HTMLLinkElement;
   private readonly resetSelector: NodeListOf<HTMLElement>;
   private readonly container: HTMLElement | null;
 
   constructor(
     $downloadElement: HTMLLinkElement,
+    $shareElement: HTMLLinkElement,
     $resetElement: NodeListOf<HTMLElement>,
   ) {
     super();
     this.downloadSelector = $downloadElement;
+    this.shareSelector = $shareElement;
     this.resetSelector = $resetElement;
     this.container = $downloadElement.parentElement;
 
@@ -24,6 +27,10 @@ export default class DownloadManager extends ObserverPublisher(Publisher) {
       });
       return element;
     });
+
+    if (!navigator.canShare()) {
+      this.shareSelector.classList.add("download--hidden");
+    }
   }
 
   update(publication: Message) {
@@ -57,6 +64,20 @@ export default class DownloadManager extends ObserverPublisher(Publisher) {
     );
     this.downloadSelector.setAttribute("download", this.generateFilename());
     this.downloadSelector.setAttribute("href", dataURL);
+
+    if (navigator.canShare()) {
+      this.shareSelector.addEventListener("click", (event) => {
+        event.preventDefault();
+        navigator.share({
+          title: "See my photo with the embedded map",
+          files: [
+            new File([dataURL], this.generateFilename(), {
+              type: "image/jpeg",
+            }),
+          ],
+        });
+      });
+    }
   }
 
   hide() {

src/scripts/index.ts

@@ -25,6 +25,7 @@ window.addEventListener("load", () => {
     ["photo", $("#js-map")],
     ["canvas", $("#js-main-canvas")],
     ["download", $("#js-download")],
+    ["share", $("#js-share")],
     ["reset", $$(".js-reset")], // At least 2 elements have this class
     ["mapOptions", $("#js-map-options")],
   ]);
@@ -39,6 +40,7 @@ window.addEventListener("load", () => {
   browser = new PhotoBrowser($elements.get("browser") as HTMLInputElement);
   downloadManager = new DownloadManager(
     $elements.get("download") as HTMLLinkElement,
+    $elements.get("share") as HTMLLinkElement,
     $elements.get("reset") as NodeListOf<HTMLElement>,
   );