79 lines
1.6 KiB
Svelte
79 lines
1.6 KiB
Svelte
<script>
|
|
import { onMount } from "svelte";
|
|
import { fade } from "svelte/transition";
|
|
|
|
let popup
|
|
let visible = false
|
|
|
|
export let target
|
|
$: set_target(target)
|
|
const set_target = el => {
|
|
if (!el) {
|
|
return
|
|
}
|
|
|
|
move_to_element(el)
|
|
setTimeout(() => { move_to_element(el) }, 500)
|
|
}
|
|
const move_to_element = el => {
|
|
if (visible && popup) {
|
|
let rect = el.getBoundingClientRect()
|
|
popup.style.top = (rect.top + el.offsetHeight + 20) + "px"
|
|
popup.style.left = (rect.left + (el.clientWidth / 2) - 40) + "px"
|
|
}
|
|
}
|
|
const close = () => {
|
|
localStorage.setItem("viewer_intro_popup_dismissed", "🍆")
|
|
visible = false
|
|
}
|
|
onMount(() => {
|
|
if (localStorage.getItem("viewer_intro_popup_dismissed") === "🍆") {
|
|
return
|
|
}
|
|
visible = true
|
|
})
|
|
</script>
|
|
|
|
{#if visible}
|
|
<div bind:this={popup} in:fade out:fade class="intro_popup">
|
|
<h3>Upload your own files here!</h3>
|
|
<p>
|
|
On pixeldrain you can share your files with large or small
|
|
groups of people. The sky is the limit!
|
|
</p>
|
|
<button on:click={close} class="close button_highlight round">
|
|
<i class="icon">check</i> Got it!
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.intro_popup {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 380px;
|
|
max-width: 80%;
|
|
height: auto;
|
|
background-color: var(--layer_4_color);
|
|
box-shadow: 1px 1px 10px var(--shadow_color);
|
|
border-radius: 20px;
|
|
z-index: 50;
|
|
transition: opacity .4s, left .5s, top .5s;
|
|
}
|
|
.intro_popup:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
left: 30px;
|
|
top: -15px;
|
|
border-bottom: 15px solid var(--layer_4_color);
|
|
border-left: 15px solid transparent;
|
|
border-right: 15px solid transparent;
|
|
}
|
|
.close {
|
|
float: right;
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
</style>
|