From 42f97f63d52a15cc1869ea167892c4af0962df24 Mon Sep 17 00:00:00 2001
From: "Adrian O.V" <83074853+CodexAdrian@users.noreply.github.com>
Date: Wed, 28 Jun 2023 11:44:47 -0400
Subject: [PATCH] Share modal (#74)

* Creation of the share modal

* Update package.json

* Addressed comments

* Fixed dependency

* Update ShareModal.vue

* Fixed url

* Update ShareModal.vue

* Adressed changes
---
 docs/.vitepress/config.js          |   1 +
 docs/components/share-modal.md     |  44 +++++
 lib/assets/external/mastodon.svg   |   1 +
 lib/assets/external/reddit.svg     |   1 +
 lib/assets/external/twitter.svg    |   1 +
 lib/assets/icons/mail.svg          |   1 +
 lib/assets/icons/share.svg         |   1 +
 lib/assets/styles/classes.scss     |   6 +-
 lib/components/base/ShareModal.vue | 270 +++++++++++++++++++++++++++++
 lib/components/index.js            |   7 +
 package.json                       |   3 +-
 pnpm-lock.yaml                     |  11 ++
 12 files changed, 345 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/share-modal.md
 create mode 100644 lib/assets/external/mastodon.svg
 create mode 100644 lib/assets/external/reddit.svg
 create mode 100644 lib/assets/external/twitter.svg
 create mode 100644 lib/assets/icons/mail.svg
 create mode 100644 lib/assets/icons/share.svg
 create mode 100644 lib/components/base/ShareModal.vue

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index e3f6014b8..f246dae7c 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -44,6 +44,7 @@ export default {
           { text: 'Markdown', link: '/components/markdown' },
           { text: 'Copy Code', link: '/components/copy-code' },
           { text: 'Notifications', link: '/components/notifications' },
+          { text: 'Share Modal', link: '/components/share-modal' },
         ],
       },
     ],
diff --git a/docs/components/share-modal.md b/docs/components/share-modal.md
new file mode 100644
index 000000000..44f48d34d
--- /dev/null
+++ b/docs/components/share-modal.md
@@ -0,0 +1,44 @@
+# Share Modal
+
+<DemoContainer>
+  <Button @click="$refs.shareContent.show('This is content')">
+    <EditIcon/>
+    Share Content
+  </Button>
+  <Button @click="$refs.shareLink.show('https://modrinth.com')">
+    <GlobeIcon/>
+    Share Link
+  </Button>
+  <ShareModal
+    ref="shareContent"
+    share-title="This is the title for the content"
+    share-text="Share this content"
+  />
+  <ShareModal
+    ref="shareLink"
+    share-title="This is the title for the link"
+    share-text="Share this link"
+    link
+  />
+</DemoContainer>
+
+```vue
+  <ShareModal
+    ref="shareContent"
+    share-title="This is the title for the content"
+    share-text="Share this content"
+  />
+  <ShareModal
+    ref="shareLink"
+    share-title="This is the title for the link"
+    share-text="Share this link"
+    link
+  />
+
+```
+You can use ref to open the modal, calling the show method
+
+`content` is what will be shown in the text of the input for sharing
+```text
+$refs.shareContent.show(content)
+```
diff --git a/lib/assets/external/mastodon.svg b/lib/assets/external/mastodon.svg
new file mode 100644
index 000000000..9e96c9410
--- /dev/null
+++ b/lib/assets/external/mastodon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z"/></svg>
\ No newline at end of file
diff --git a/lib/assets/external/reddit.svg b/lib/assets/external/reddit.svg
new file mode 100644
index 000000000..5cfd11243
--- /dev/null
+++ b/lib/assets/external/reddit.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 100 100" height="512" viewBox="0 0 100 100" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_x33_2.Reddit"><path id="Icon_69_" d="m90 50.6c-.2-4.8-4.2-8.6-9.1-8.5-2.2.1-4.2 1-5.7 2.4-6.8-4.7-14.9-7.2-23.2-7.4l3.9-18.7 12.9 2.6c.4 3.3 3.3 5.7 6.6 5.3s5.7-3.3 5.3-6.6-3.3-5.7-6.6-5.3c-1.9.2-3.6 1.3-4.5 2.9l-14.7-2.9c-1-.2-2 .4-2.2 1.4l-4.4 20.9c-8.4.1-16.5 2.7-23.5 7.4-3.5-3.3-9.1-3.2-12.4.4-3.3 3.5-3.2 9.1.4 12.4.7.6 1.5 1.2 2.4 1.6-.1.9-.1 1.8 0 2.6 0 13.5 15.7 24.5 35.1 24.5s35.1-10.9 35.1-24.5c.1-.9.1-1.8 0-2.6 2.8-1.4 4.7-4.5 4.6-7.9zm-60.3 6.1c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm35 16.6c-4.3 3.2-9.5 4.9-14.8 4.6-5.3.2-10.6-1.4-14.8-4.6-.6-.7-.5-1.7.2-2.3.6-.5 1.4-.5 2.1 0 3.6 2.6 8 4 12.5 3.8 4.5.2 8.9-1 12.6-3.7.7-.6 1.7-.6 2.4 0 .6.7.6 1.7 0 2.4v-.2zm-1-10.3c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6c.1 3.3-2.4 6.1-5.8 6.2-.1 0-.2 0-.3 0z"/></g></svg>
\ No newline at end of file
diff --git a/lib/assets/external/twitter.svg b/lib/assets/external/twitter.svg
new file mode 100644
index 000000000..a43d68d9f
--- /dev/null
+++ b/lib/assets/external/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
\ No newline at end of file
diff --git a/lib/assets/icons/mail.svg b/lib/assets/icons/mail.svg
new file mode 100644
index 000000000..536e7c2c7
--- /dev/null
+++ b/lib/assets/icons/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
\ No newline at end of file
diff --git a/lib/assets/icons/share.svg b/lib/assets/icons/share.svg
new file mode 100644
index 000000000..f7be8a132
--- /dev/null
+++ b/lib/assets/icons/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share-2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
\ No newline at end of file
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index 025c4459e..dfaef406a 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -623,10 +623,14 @@ a,
 
 .resizable-textarea-wrapper {
   display: block;
+  flex-grow: 1;
+  width: 100%;
+  margin-bottom: 0;
+  height: 10rem !important;
 
   textarea {
+    height: 100%;
     border-radius: var(--radius-sm);
-    min-height: 10rem;
     width: calc(100% - var(--gap-xl) - var(--gap-sm));
     resize: vertical;
   }
diff --git a/lib/components/base/ShareModal.vue b/lib/components/base/ShareModal.vue
new file mode 100644
index 000000000..c6eef33f4
--- /dev/null
+++ b/lib/components/base/ShareModal.vue
@@ -0,0 +1,270 @@
+<script setup>
+import {
+  Button,
+  Modal,
+  ClipboardCopyIcon,
+  LinkIcon,
+  ShareIcon,
+  MailIcon,
+  GlobeIcon,
+  TwitterIcon,
+  MastodonIcon,
+  RedditIcon,
+} from '@/components'
+import { computed, ref, nextTick } from 'vue'
+import QrcodeVue from 'qrcode.vue'
+
+const props = defineProps({
+  header: {
+    type: String,
+    default: 'Share',
+  },
+  shareTitle: {
+    type: String,
+    default: 'Modrinth',
+  },
+  shareText: {
+    type: String,
+    default: null,
+  },
+  link: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const shareModal = ref(null)
+
+const qrCode = ref(null)
+const qrImage = ref(null)
+const content = ref(null)
+const url = ref(null)
+const canShare = ref(false)
+const share = () => {
+  navigator.share(
+    props.link
+      ? {
+          title: props.shareTitle.toString(),
+          text: props.shareText,
+          url: url.value,
+        }
+      : {
+          title: props.shareTitle.toString(),
+          text: content.value,
+        }
+  )
+}
+
+const show = async (passedContent) => {
+  content.value = props.shareText ? `${props.shareText}\n\n${passedContent}` : passedContent
+  shareModal.value.show()
+  if (props.link) {
+    url.value = passedContent
+    nextTick(() => {
+      console.log(qrCode.value)
+      fetch(qrCode.value.getElementsByTagName('canvas')[0].toDataURL('image/png'))
+        .then((res) => res.blob())
+        .then((blob) => {
+          console.log(blob)
+          qrImage.value = blob
+        })
+    })
+  }
+  if (navigator.canShare({ title: props.shareTitle.toString(), text: content.value })) {
+    canShare.value = true
+  }
+}
+
+const copyImage = async () => {
+  const item = new ClipboardItem({ 'image/png': qrImage.value })
+  await navigator.clipboard.write([item])
+}
+
+const copyText = async () => {
+  await navigator.clipboard.writeText(url.value ?? content.value)
+}
+
+const sendEmail = computed(
+  () =>
+    `mailto:user@test.com
+    ?subject=${encodeURIComponent(props.shareTitle)}
+    &body=` + encodeURIComponent(content.value)
+)
+
+const sendTweet = computed(
+  () => `https://twitter.com/intent/tweet?text=` + encodeURIComponent(content.value)
+)
+
+const sendToot = computed(() => `https://tootpick.org/#text=` + encodeURIComponent(content.value))
+
+const postOnReddit = computed(
+  () =>
+    `https://www.reddit.com/submit?title=${encodeURIComponent(props.shareTitle)}&text=` +
+    encodeURIComponent(content.value)
+)
+
+defineExpose({
+  show,
+})
+</script>
+
+<template>
+  <Modal ref="shareModal" :header="header">
+    <div class="share-body">
+      <div v-if="link" class="qr-wrapper">
+        <div ref="qrCode">
+          <QrcodeVue :value="url" class="qr-code" margin="3" />
+        </div>
+        <Button v-tooltip="'Copy QR code'" icon-only class="copy-button" @click="copyImage">
+          <ClipboardCopyIcon />
+        </Button>
+      </div>
+      <div v-else class="resizable-textarea-wrapper">
+        <textarea v-model="content" />
+        <Button v-tooltip="'Copy Text'" icon-only class="copy-button transparent" @click="copyText">
+          <ClipboardCopyIcon />
+        </Button>
+      </div>
+      <div class="all-buttons">
+        <div v-if="link" class="iconified-input">
+          <LinkIcon />
+          <input type="text" :value="url" readonly />
+          <Button v-tooltip="'Copy Text'" @click="copyText">
+            <ClipboardCopyIcon />
+          </Button>
+        </div>
+        <div class="button-row">
+          <Button v-if="canShare" v-tooltip="'Share'" icon-only @click="share">
+            <ShareIcon />
+          </Button>
+          <a v-tooltip="'Send as an email'" class="btn icon-only" target="_blank" :href="sendEmail">
+            <MailIcon />
+          </a>
+          <a
+            v-if="link"
+            v-tooltip="'Open link in browser'"
+            class="btn icon-only"
+            target="_blank"
+            :href="url"
+          >
+            <GlobeIcon />
+          </a>
+          <a
+            v-tooltip="'Toot about it'"
+            class="btn mastodon icon-only"
+            target="_blank"
+            :href="sendToot"
+          >
+            <MastodonIcon />
+          </a>
+          <a
+            v-tooltip="'Tweet about it'"
+            class="btn twitter icon-only"
+            target="_blank"
+            :href="sendTweet"
+          >
+            <TwitterIcon />
+          </a>
+          <a
+            v-tooltip="'Share on Reddit'"
+            class="btn reddit icon-only"
+            target="_blank"
+            :href="postOnReddit"
+          >
+            <RedditIcon />
+          </a>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.share-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+  padding: var(--gap-lg);
+}
+
+.all-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  flex-grow: 1;
+  justify-content: center;
+}
+
+.iconified-input {
+  width: 100%;
+
+  input {
+    flex-basis: auto;
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-sm);
+
+  .btn {
+    fill: var(--color-contrast);
+    color: var(--color-contrast);
+
+    &.reddit {
+      background-color: #ff4500;
+    }
+
+    &.mastodon {
+      background-color: #563acc;
+    }
+
+    &.twitter {
+      background-color: #1da1f2;
+    }
+  }
+}
+
+.qr-wrapper {
+  position: relative;
+  margin: 0 auto;
+
+  &:hover {
+    .copy-button {
+      opacity: 1;
+    }
+  }
+}
+
+.qr-code {
+  background-color: white !important;
+  border-radius: var(--radius-md);
+}
+
+.copy-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: var(--gap-sm);
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+}
+
+.resizable-textarea-wrapper {
+  position: relative;
+  height: 100%;
+
+  textarea {
+    width: 100%;
+    margin: 0;
+  }
+
+  .btn {
+    opacity: 1;
+    margin: 0;
+  }
+}
+</style>
diff --git a/lib/components/index.js b/lib/components/index.js
index 2bbf7c763..6951c7ddf 100644
--- a/lib/components/index.js
+++ b/lib/components/index.js
@@ -23,6 +23,7 @@ export { default as Notifications } from './base/Notifications.vue'
 export { default as ModalConfirm } from './base/ModalConfirm.vue'
 export { default as Breadcrumbs } from './base/Breadcrumbs.vue'
 export { default as DropdownButton } from './base/DropdownButton.vue'
+export { default as ShareModal } from './base/ShareModal.vue'
 
 export { default as Categories } from './search/Categories.vue'
 export { default as SearchFilter } from './search/SearchFilter.vue'
@@ -125,5 +126,11 @@ export { default as VersionIcon } from '@/assets/icons/version.svg'
 export { default as WikiIcon } from '@/assets/icons/wiki.svg'
 export { default as XIcon } from '@/assets/icons/x.svg'
 export { default as XCircleIcon } from '@/assets/icons/x-circle.svg'
+export { default as MailIcon } from '@/assets/icons/mail.svg'
+export { default as ShareIcon } from '@/assets/icons/share.svg'
+
+export { default as MastodonIcon } from '@/assets/external/mastodon.svg'
+export { default as RedditIcon } from '@/assets/external/reddit.svg'
+export { default as TwitterIcon } from '@/assets/external/twitter.svg'
 
 export { default as ModrinthIcon } from '@/assets/branding/logo.svg'
diff --git a/package.json b/package.json
index 21943854b..f415da073 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.31",
+  "version": "0.4.32",
   "files": [
     "dist",
     "lib"
@@ -29,6 +29,7 @@
     "floating-vue": "^2.0.0-beta.20",
     "highlight.js": "^11.8.0",
     "markdown-it": "^13.0.1",
+    "qrcode.vue": "^3.4.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.1",
     "vue-select": "^4.0.0-beta.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95420a612..8d22d8a58 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,9 @@ dependencies:
   markdown-it:
     specifier: ^13.0.1
     version: 13.0.1
+  qrcode.vue:
+    specifier: ^3.4.0
+    version: 3.4.0(vue@3.3.4)
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -1905,6 +1908,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /qrcode.vue@3.4.0(vue@3.3.4):
+    resolution: {integrity: sha512-4XeImbv10Fin16Fl2DArCMhGyAdvIg2jb7vDT+hZiIAMg/6H6mz9nUZr/dR8jBcun5VzNzkiwKhiqOGbloinwA==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.3.4
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true