From a1366570ceff1b917fd4f556b1f0bcc7a9e99e8b Mon Sep 17 00:00:00 2001
From: Justin Willis <jgw9617@gmail.com>
Date: Wed, 1 Sep 2021 11:54:59 -0700
Subject: [PATCH] chore(): add new pwa-features folder + initial demos

---
 docs/pwa-features/clipboard-api.html   | 62 +++++++++++++++++++++++
 docs/pwa-features/file-access-api.html | 68 ++++++++++++++++++++++++++
 docs/pwa-features/web-share.html       | 66 +++++++++++++++++++++++++
 3 files changed, 196 insertions(+)
 create mode 100644 docs/pwa-features/clipboard-api.html
 create mode 100644 docs/pwa-features/file-access-api.html
 create mode 100644 docs/pwa-features/web-share.html
diff --git a/docs/pwa-features/clipboard-api.html b/docs/pwa-features/clipboard-api.html
new file mode 100644
index 0000000..2c945e8
--- /dev/null
+++ b/docs/pwa-features/clipboard-api.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Clipboard Demo</title>
+  </head>
+  <body>
+    <h1>
+      Clipboard API
+    </h1>
+
+    <p>
+      More details can be found in the
+      <a
+        href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/open/?tabs=cmd-Windows"
+        >browsers devtools console</a
+      >
+    </p>
+
+    <button onclick="copyText()">
+      Copy Text / URLs
+    </button>
+
+    <button onclick="copyFile()">
+      Copy a File
+    </button>
+    
+    <p id="status-message"></p>
+
+    <script>
+      async function copyText() {
+        try {
+          await navigator.clipboard.writeText('Copying text!');
+          console.log('Text copied to clipboard');
+          
+          document.querySelector("#status-message").textContent = "Text copied to clipboard";
+        } catch (err) {
+          console.error('Failed to copy: ', err);
+        }
+      }
+
+      async function copyFile() {
+        const test_file = new File(["some text..."], "filename.txt", {type: "text/plain"});
+        
+        try {
+          await navigator.clipboard.write([
+            new ClipboardItem({
+              [test_file.type]: test_file
+            })
+          ]);
+          console.log('Image copied.');
+          
+          document.querySelector("#status-message").textContent = "Image copied to clipboard";
+        } catch (err) {
+          console.error('Failed to copy: ', err);
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/docs/pwa-features/file-access-api.html b/docs/pwa-features/file-access-api.html
new file mode 100644
index 0000000..42ffb1f
--- /dev/null
+++ b/docs/pwa-features/file-access-api.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>File Access API Demo</title>
+  </head>
+  <body>
+    <h1>
+      File Access API
+    </h1>
+
+    <p>
+      More details can be found in the
+      <a
+        href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/open/?tabs=cmd-Windows"
+        >browsers devtools console</a
+      >
+    </p>
+
+    <button onclick="chooseFile()">
+      Open File
+    </button>
+
+    <button onclick="saveFile()">
+      Save File
+    </button>
+
+    <script>
+      let file;
+      
+      async function chooseFile() {
+        const fileHandles = await window.showOpenFilePicker({
+          startIn: "pictures"
+        });
+        file = await fileHandles[0].getFile();
+
+        if (file) {
+          console.log(file);
+
+          const img = new Image();
+          img.src = URL.createObjectURL(file);
+
+          document.body.append(img);
+        }
+      }
+
+      async function saveFile() {
+        const options = {
+          types: [
+            {
+              description: "Image Files",
+              accept: {
+                "image/png": [".png"]
+              }
+            }
+          ]
+        };
+        const handle = await window.showSaveFilePicker(options);
+        
+        const writable = await handle.createWritable();
+        await writable.write(file);
+        await writable.close();
+      }
+    </script>
+  </body>
+</html>
diff --git a/docs/pwa-features/web-share.html b/docs/pwa-features/web-share.html
new file mode 100644
index 0000000..ddcbfdd
--- /dev/null
+++ b/docs/pwa-features/web-share.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Web Share Demo</title>
+  </head>
+  <body>
+    <h1>
+      Web Share API
+    </h1>
+
+    <p>
+      More details can be found in the
+      <a
+        href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/open/?tabs=cmd-Windows"
+        >browsers devtools console</a
+      >
+    </p>
+
+    <button onclick="shareText()">
+      Share Text / URLs
+    </button>
+
+    <button onclick="shareFile()">
+      Share a File
+    </button>
+
+    <script>
+      async function shareText() {
+        if (navigator.share) {
+          try {
+            await navigator.share({
+              title: 'Sharing!',
+              text: 'Check this out',
+              url: 'https://www.pwabuilder.com',
+            });
+          }
+          catch (err) {
+            console.log('Error sharing', error);
+          }
+        }
+      }
+
+      async function shareFile() {
+        const test_file = new File(["some text..."], "filename.txt", {type: "text/plain"});
+        
+        if (navigator.canShare && navigator.canShare({ files: [test_file] })) {
+          try {
+            await navigator.share({
+              files: [test_file],
+              title: 'Sharing a File',
+              text: 'Just sharing a file (:',
+            })
+          }
+          catch (err) {
+            console.log('Error sharing', error);
+          }
+        } else {
+          console.log(`Your system doesn't support sharing files.`);
+        }
+      }
+    </script>
+  </body>
+</html>
