Add working share modal

package-lock.json

@@ -3611,6 +3611,14 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.2.1.tgz",
+      "integrity": "sha512-btru1Q6RD9wbonIvEU5EfnhIRGHLo//BGXQ1hNAD2avIs/nBZlpbOeKtv3mhoUByN4DB9Cb6/vXBymj1S43KmA==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
@@ -8692,6 +8700,11 @@
         "lodash": "^4.17.15"
       }
     },
+    "svelte-portal": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-portal/-/svelte-portal-0.1.0.tgz",
+      "integrity": "sha512-kef+ksXVKun224mRxat+DdO4C+cGHla+fEcZfnBAvoZocwiaceOfhf5azHYOPXSSB1igWVFTEOF3CDENPnuWxg=="
+    },
     "svelte-routing": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.4.0.tgz",
@@ -8835,6 +8848,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.0.6",
+    "copy-to-clipboard": "^3.2.1",
     "core-js-pure": "^3.6.4",
     "date-fns": "^2.9.0",
     "get-urls": "^9.2.0",
@@ -32,6 +33,7 @@
     "micromodal": "^0.4.2",
     "route-parser": "0.0.5",
     "svelte-pipeable-store": "^1.0.3",
+    "svelte-portal": "^0.1.0",
     "svelte-routing": "^1.4.0"
   },
   "browserslist": [

src/assets/scss/3-components/_forms.scss

@@ -148,6 +148,7 @@ input[type="checkbox"] {
   background: no-repeat url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.452.833L3.75 5.653 1.548 3.565 0 5.113 3.75 8.75 10 2.381 8.452.833z' fill='%23635776'/%3E%3C/svg%3E%0A");
   background-position: center;
   background-size: 0 0;
+  vertical-align: top;
   transition: .2s background cubic-bezier(.64, 1.93, .55, 1.94);
 }
 

src/components/ContextMenu.svelte

@@ -2,10 +2,41 @@
 <a class="contextMenu__item" href="" target="_blank">Link to toot</a>
 <a class="contextMenu__item" href="" target="_blank">Link to media</a>
 
+<!-- Sharemodal -->
+<Portal target="{document.body}">
+    <div class="modal" id="share-modal" aria-hidden="true">
+        <div class="modal__overlay" tabindex="-1" on:click={() => closeModal()}></div>
+
+        <div class="modal__container" role="dialog" aria-modal="true">
+            <button class="modal__close" aria-label="close" on:click={() => closeModal()}></button>
+            <div class="modal__title">Share this song</div>
+            <div class="modal__content">
+                <input class="modalShare__input f-size-full w100" readonly type="text" value={shareUrlInput}>
+                <div class="modalShare__controls">
+                    <div class="modalShare__bigplayer">
+                        <input type="checkbox" id="bigplayer_active" bind:checked={isBigPlayer}>
+                        <label for="bigplayer_active">active big player {isBigPlayer}</label>
+                    </div>
+                    <button class="modalShare__copy" on:click={() => copyUrl()}>copy</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</Portal>
+
 <script>
+import copy from 'copy-to-clipboard';
 import { onMount, getContext } from 'svelte';
+import Portal from 'svelte-portal';
 import MicroModal from 'micromodal';
 
+export let shareUrl
+
+let isBigPlayer = false
+
+$: shareUrlInput = shareUrl + (isBigPlayer ? '?large' : '')
+$: console.log(shareUrl)
+$: console.log(shareUrlInput)
 const closeMenu = getContext('closeMenu')
 
 function openShare () {
@@ -13,4 +44,18 @@ function openShare () {
     closeMenu()
 }
 
+function closeModal () {
+    MicroModal.close('share-modal');
+}
+
+function copyUrl () {
+    copy(shareUrl)
+}
+
+onMount(() => {
+    MicroModal.init();
+})
+
+
+
 </script>

src/components/Controls.svelte

@@ -27,7 +27,9 @@
         <Popper>
             <button slot="btn" class="controls__menuBtn" aria-label="track menu"><IconMenu></IconMenu></button>
             <div slot="content" class="contextMenu__list">
-                <ContextMenu></ContextMenu>
+                {#if $current}
+                    <ContextMenu shareUrl={$current.shareUrl}></ContextMenu>
+                {/if}
             </div>
         </Popper>
     </div>
@@ -43,6 +45,7 @@
     import Popper from '/components/PopperMenu'
     import ContextMenu from '/components/ContextMenu'
 
+    const current = getContext('current')
     const paused = getContext('paused')
     const canPrevious = getContext('canPrevious')
     const canNext = getContext('canNext')

src/components/Queue.svelte

@@ -17,7 +17,7 @@
                 <Popper>
                     <button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
                     <div slot="content" class="contextMenu__list">
-                        <ContextMenu></ContextMenu>
+                        <ContextMenu shareUrl={$next.shareUrl}></ContextMenu>
                     </div>
                 </Popper>
             {/if}
@@ -39,7 +39,7 @@
                 <Popper>
                     <button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
                     <div slot="content" class="contextMenu__list">
-                        <ContextMenu></ContextMenu>
+                        <ContextMenu shareUrl={track.shareUrl}></ContextMenu>
                     </div>
                 </Popper>
             </div>

src/components/Radio.svelte

@@ -15,7 +15,6 @@
 
     <Footer></Footer>
 
-    <ShareModal></ShareModal>
 </div>
 
 <script>
@@ -24,7 +23,6 @@
     import Footer from '/components/layout/Footer.svelte'
     import Queue from '/components/Queue.svelte'
     import Viewer from '/components/Viewer.svelte'
-    import ShareModal from '/components/ShareModal.svelte'
     import { get, writable, writableLocalStorage, derived, scan, wait, startWith, distinct } from '/services/store.js'
     import { radioIterator, radioShareIterator } from '/services/radio.js'
     import DeepSet from '/services/deep-set.js'

src/components/ShareModal.svelte

@@ -1,32 +0,0 @@
-
-<div class="modal" id="share-modal" aria-hidden="true">
-    <div class="modal__overlay" tabindex="-1" on:click={() => closeModal()}></div>
-
-    <div class="modal__container" role="dialog" aria-modal="true">
-        <button class="modal__close" aria-label="close" on:click={() => closeModal()}></button>
-        <div class="modal__title">Share this song</div>
-        <div class="modal__content">
-            <input class="modalShare__input f-size-full w100" readonly type="text" value="https://radio.eldritch.cafe/share/eldritch.cafe/1645635448?large">
-            <div class="modalShare__controls">
-                <div class="modalShare__bigplayer">
-                    <input type="checkbox" id="bigplayer_active">
-                    <label for="bigplayer_active">active big player</label>
-                </div>
-                <button class="modalShare__copy">copy</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<script>
-import MicroModal from 'micromodal';
-MicroModal.init();
-
-
-let closeModal = () => {
-    MicroModal.close('share-modal');
-}
-
-
-</script>