From 644d01d067d1f19d105d11b6f7fc959c2c6e5ede Mon Sep 17 00:00:00 2001
From: wryk <wryk@wryk.moe>
Date: Sat, 22 Feb 2020 05:08:25 +0100
Subject: [PATCH] fix(modal)

---
 package-lock.json                 |  5 --
 package.json                      |  1 -
 src/components/ContextMenu.svelte | 79 ++++++++++++++-----------------
 src/components/Controls.svelte    |  2 +-
 src/components/Queue.svelte       |  4 +-
 5 files changed, 39 insertions(+), 52 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ad6459b..7114705 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6435,11 +6435,6 @@
         "to-regex": "^3.0.2"
       }
     },
-    "micromodal": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.4.2.tgz",
-      "integrity": "sha512-tL8Z6Vi72haNUNlkhLjJJv1Q16eqUWMPAGT4RF7mwDM5DNyJXC67Yj8jw/yVgGYdhnCEBBf3X5JM3d/MpXSEKg=="
-    },
     "miller-rabin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
diff --git a/package.json b/package.json
index 5db3c6d..78bf207 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "date-fns": "^2.9.0",
     "get-urls": "^9.2.0",
     "iter-tools": "^7.0.0-rc.0",
-    "micromodal": "^0.4.2",
     "route-parser": "0.0.5",
     "svelte-pipeable-store": "^1.0.3",
     "svelte-portal": "^0.1.0",
diff --git a/src/components/ContextMenu.svelte b/src/components/ContextMenu.svelte
index bf64801..359a2c4 100644
--- a/src/components/ContextMenu.svelte
+++ b/src/components/ContextMenu.svelte
@@ -1,61 +1,54 @@
-<button class="contextMenu__item" on:click={() => openShare()}>Share this song</button>
-<a class="contextMenu__item" href="" target="_blank">Link to toot</a>
-<a class="contextMenu__item" href="" target="_blank">Link to media</a>
+<button class="contextMenu__item" on:click={() => showModal()}>Share this song</button>
+<a class="contextMenu__item" href={track.referer.url} target="_blank">Link to toot</a>
+<a class="contextMenu__item" href={track.media.url} 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>
+    {#if open}
+        <div class="modal">
+            <div class="modal__overlay" tabindex="-1" on:click={() => hideModal()}></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 class="modal__container" role="dialog" aria-modal="true">
+                <button class="modal__close" aria-label="close" on:click={() => hideModal()}></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</label>
+                        </div>
+                        <button class="modalShare__copy" on:click={() => copyUrl()}>copy</button>
                     </div>
-                    <button class="modalShare__copy" on:click={() => copyUrl()}>copy</button>
                 </div>
             </div>
         </div>
-    </div>
+    {/if}
 </Portal>
 
 <script>
-import copy from 'copy-to-clipboard';
-import { onMount, getContext } from 'svelte';
-import Portal from 'svelte-portal';
-import MicroModal from 'micromodal';
+    import { getContext } from 'svelte'
+    import Portal from 'svelte-portal'
+    import copy from 'copy-to-clipboard'
 
-export let shareUrl
+    export let track
 
-let isBigPlayer = false
+    let open = false
+    let isBigPlayer = false
+    $: shareUrlInput = track.shareUrl + (isBigPlayer ? '?large' : '')
 
-$: shareUrlInput = shareUrl + (isBigPlayer ? '?large' : '')
-$: console.log(shareUrl)
-$: console.log(shareUrlInput)
-const closeMenu = getContext('closeMenu')
-
-function openShare () {
-    MicroModal.show('share-modal')
-    closeMenu()
-}
-
-function closeModal () {
-    MicroModal.close('share-modal');
-}
-
-function copyUrl () {
-    copy(shareUrl)
-}
-
-onMount(() => {
-    MicroModal.init();
-})
+    const closeMenu = getContext('closeMenu')
 
+    function showModal () {
+        open = true
+        closeMenu()
+    }
 
+    function hideModal () {
+        open = false
+    }
 
+    function copyUrl () {
+        copy(shareUrlInput)
+    }
 </script>
\ No newline at end of file
diff --git a/src/components/Controls.svelte b/src/components/Controls.svelte
index 8f6ef59..5ec2d65 100644
--- a/src/components/Controls.svelte
+++ b/src/components/Controls.svelte
@@ -28,7 +28,7 @@
             <button slot="btn" class="controls__menuBtn" aria-label="track menu"><IconMenu></IconMenu></button>
             <div slot="content" class="contextMenu__list">
                 {#if $current}
-                    <ContextMenu shareUrl={$current.shareUrl}></ContextMenu>
+                    <ContextMenu track={$current}></ContextMenu>
                 {/if}
             </div>
         </Popper>
diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte
index c161b5f..ce68166 100644
--- a/src/components/Queue.svelte
+++ b/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 shareUrl={$next.shareUrl}></ContextMenu>
+                        <ContextMenu track={$next}></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 shareUrl={track.shareUrl}></ContextMenu>
+                        <ContextMenu track={track}></ContextMenu>
                     </div>
                 </Popper>
             </div>