Mastodon/mastoradio-la-radio-di-mastodon
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix(modal)

Browse Source
This commit is contained in:
wryk 2020-02-22 05:08:25 +01:00
parent fe9005b956
commit 644d01d067
5 changed files with 39 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

79
src/components/ContextMenu.svelte
View File

@ -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>

2
src/components/Controls.svelte
View File

@ -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>

4
src/components/Queue.svelte
View File

@ -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>