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

Add working share modal

This commit is contained in:
Tixie 2020-02-22 04:38:33 +01:00
parent e42fd4fe6b
commit 6a8b379763
8 changed files with 75 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package-lock.json generated
View File

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

2
package.json
View File

@ -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": [

1
src/assets/scss/3-components/_forms.scss
View File

@ -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);
}

51
src/components/ContextMenu.svelte
View File

@ -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>
<script>
import { onMount, getContext } from 'svelte';
import MicroModal from 'micromodal';
<!-- 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>

5
src/components/Controls.svelte
View File

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

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

2
src/components/Radio.svelte
View File

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

32
src/components/ShareModal.svelte
View File

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