fix(modal)
This commit is contained in:
@ -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>
|
Reference in New Issue
Block a user