75 lines
1.9 KiB
Svelte
75 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
function copyLink() {
|
|
const input: HTMLInputElement = document.getElementById('input-share-link') as HTMLInputElement;
|
|
input.focus();
|
|
input.select();
|
|
document.execCommand('copy');
|
|
}
|
|
|
|
async function shareLink() {
|
|
const shareData = {url: location.toString()};
|
|
|
|
try {
|
|
await navigator.share(shareData);
|
|
} catch (err) {
|
|
console.error('Error: ' + err);
|
|
copyLink();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="guest-main">
|
|
<section class="container-overflow">
|
|
<section class="share-url not-mobile">
|
|
<h3>Share the link of the room !</h3>
|
|
<input type="text" readonly id="input-share-link" value={location.toString()}>
|
|
<button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
|
|
</section>
|
|
<section class="is-mobile">
|
|
<h3>Share the link of the room !</h3>
|
|
<input type="hidden" readonly id="input-share-link" value={location.toString()}>
|
|
<button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
div.guest-main {
|
|
height: calc(100% - 56px);
|
|
|
|
text-align: center;
|
|
|
|
section {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
section.container-overflow {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
section.is-mobile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 900px), only screen and (max-height: 600px) {
|
|
div.guest-main {
|
|
section.share-url.not-mobile {
|
|
display: none;
|
|
}
|
|
|
|
section.is-mobile {
|
|
display: block;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
section.container-overflow {
|
|
height: calc(100% - 120px);
|
|
}
|
|
}
|
|
}
|
|
</style> |