Use Web Share API

Amphiluke · Dec 2, 2023 · 77f0895 · 77f0895
1 parent 4aa3686
commit 77f0895
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",

diff --git a/src/components/PanelSharing.vue b/src/components/PanelSharing.vue
@@ -3,7 +3,7 @@ import {computed, useCssModule} from "vue";
 import {useCollectionsStore, isUserDefined} from "../stores/collections.mjs";
 import {useLSystemStore} from "../stores/lSystem.mjs";
 import {useInterfaceStore} from "../stores/interface.mjs";
-import {useObjectUrl, useFileDialog} from "@vueuse/core";
+import {useObjectUrl, useFileDialog, useShare} from "@vueuse/core";
 import interfaceStyles from "../styles/interface.module.css";
 import panelStyles from "../styles/panel.module.css";
 
@@ -42,6 +42,15 @@ let lsvgBlob = computed(() => {
 });
 let lsvgURL = useObjectUrl(lsvgBlob);
 
+let {share, isSupported: isShareSupported} = useShare();
+function launchShare() {
+  share({
+    title: "L-system",
+    text: "Image of an L-system from the lindsvg app",
+    files: [new File([svgBlob.value], "l-system.svg", {type: svgBlob.value.type})],
+  });
+}
+
 let permalink = computed(() => {
   if (!collectionsStore.selectedCID || !collectionsStore.selectedLID || isUserDefined(collectionsStore.selectedCID)) {
     return "";
@@ -95,6 +104,17 @@ async function copyPermalink({target}) {
         >
           SVG
         </a>
+
+        <template v-if="isShareSupported">
+          <h3>Share file…</h3>
+          <button
+            type="button"
+            :class="[interfaceStyles.button, $style.fileButton, $style.shareButton]"
+            @click="launchShare"
+          >
+            SVG
+          </button>
+        </template>
       </div>
 
       <hr>
@@ -127,7 +147,7 @@ async function copyPermalink({target}) {
   .fileControls {
     align-items: center;
     display: grid;
-    gap: 20px 10px;
+    gap: 15px 10px;
     grid-template-columns: 1fr 25% 25%;
 
     & h3 {
@@ -148,6 +168,10 @@ async function copyPermalink({target}) {
         background: none;
       }
     }
+
+    & .shareButton {
+      grid-column: 3 / 4;
+    }
   }
 
   .permalinkField {

diff --git a/src/stores/bank.mjs b/src/stores/bank.mjs
@@ -503,7 +503,7 @@ export default [
         iterations: 5,
         step: 7,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": ["4", "3", "2", "1"],
           "stroke-linecap": "round",
         },
@@ -618,7 +618,7 @@ export default [
         iterations: 4,
         step: 0.8,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": ["4", "3", "2", "1"],
         },
       },
@@ -635,7 +635,7 @@ export default [
         iterations: 4,
         step: 2,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": ["3", "2", "1"],
         },
       },
@@ -866,7 +866,7 @@ export default [
         iterations: 4,
         step: 5,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
         },
       },
@@ -974,7 +974,7 @@ export default [
         iterations: 6,
         step: 14,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
           "stroke-linejoin": "round",
         },
@@ -993,7 +993,7 @@ export default [
         iterations: 5,
         step: 20,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
           "stroke-linejoin": "round",
         },
@@ -1070,7 +1070,7 @@ export default [
         iterations: 4,
         step: 5,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
         },
       },