|
|
|
@ -278,7 +278,8 @@
|
|
|
|
import Logo from '../components/logo.svelte';
|
|
|
|
import Logo from '../components/logo.svelte';
|
|
|
|
import anime from 'animejs/lib/anime.es.js';
|
|
|
|
import anime from 'animejs/lib/anime.es.js';
|
|
|
|
import { onMount, afterUpdate } from 'svelte';
|
|
|
|
import { onMount, afterUpdate } from 'svelte';
|
|
|
|
//import { watchResize } from 'svelte-watch-resize';
|
|
|
|
import { scale } from 'svelte/transition';
|
|
|
|
|
|
|
|
import { quintOut } from 'svelte/easing'; //import { watchResize } from 'svelte-watch-resize';
|
|
|
|
|
|
|
|
|
|
|
|
let clicked = false;
|
|
|
|
let clicked = false;
|
|
|
|
let what = {
|
|
|
|
let what = {
|
|
|
|
@ -287,7 +288,8 @@
|
|
|
|
"zapojit" : [ 0, 0, 0, 0 ],
|
|
|
|
"zapojit" : [ 0, 0, 0, 0 ],
|
|
|
|
"zalozit" : [ 0, 0, 0, 0 ],
|
|
|
|
"zalozit" : [ 0, 0, 0, 0 ],
|
|
|
|
"oborovky" : [ 0, 0, 0, 0 ],
|
|
|
|
"oborovky" : [ 0, 0, 0, 0 ],
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
let obobo = [[ 0, 0, 0, 0 ], [0, 0, 0, 0]];
|
|
|
|
function clicked_fun() {
|
|
|
|
function clicked_fun() {
|
|
|
|
clicked = !clicked;
|
|
|
|
clicked = !clicked;
|
|
|
|
|
|
|
|
|
|
|
|
@ -308,7 +310,17 @@
|
|
|
|
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
|
|
|
|
|
|
|
|
console.log(what);
|
|
|
|
console.log(what);
|
|
|
|
}, 150);
|
|
|
|
}, 70);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
let cinnosti = document.getElementById("cinnosti");
|
|
|
|
|
|
|
|
let plusko = document.getElementById("plusko")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
obobo[0] = [ cinnosti.clientHeight, cinnosti.clientWidth, cinnosti.offsetLeft, cinnosti.offsetTop ];
|
|
|
|
|
|
|
|
obobo[1] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(obobo);
|
|
|
|
|
|
|
|
}, 70);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -371,7 +383,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function resize() {
|
|
|
|
function resize() {
|
|
|
|
if (document.querySelector("#predseda")) {
|
|
|
|
if (clicked) {
|
|
|
|
let predseda = document.getElementById("predseda");
|
|
|
|
let predseda = document.getElementById("predseda");
|
|
|
|
let prebiram = document.getElementById("prebiram");
|
|
|
|
let prebiram = document.getElementById("prebiram");
|
|
|
|
let zapojit = document.getElementById("zapojit");
|
|
|
|
let zapojit = document.getElementById("zapojit");
|
|
|
|
@ -387,19 +399,34 @@
|
|
|
|
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
|
|
|
|
|
|
|
|
console.log(what);
|
|
|
|
console.log(what);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
let cinnosti = document.getElementById("cinnosti");
|
|
|
|
|
|
|
|
let plusko = document.getElementById("plusko")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
obobo[0] = [ cinnosti.clientHeight, cinnosti.clientWidth, cinnosti.offsetLeft, cinnosti.offsetTop ];
|
|
|
|
|
|
|
|
obobo[1] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(obobo);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
onMount(() => {
|
|
|
|
if (window.innerWidth <= 800)
|
|
|
|
if (window.innerWidth <= 800)
|
|
|
|
clicked = true;
|
|
|
|
clicked = true;
|
|
|
|
|
|
|
|
let cinnosti = document.getElementById("cinnosti");
|
|
|
|
|
|
|
|
let plusko = document.getElementById("plusko")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
obobo[0] = [ cinnosti.clientHeight, cinnosti.clientWidth, cinnosti.offsetLeft, cinnosti.offsetTop ];
|
|
|
|
|
|
|
|
obobo[1] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(obobo);
|
|
|
|
})
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<svelte:head>
|
|
|
|
<svelte:head>
|
|
|
|
<title>Spolky a SORky PedF UK | Chci se zapojit</title>
|
|
|
|
<title>Spolky a SORky PedF UK | Chci se zapojit</title>
|
|
|
|
</svelte:head>
|
|
|
|
</svelte:head>
|
|
|
|
<!--<svelte:window use:watchResize={resize}/>-->
|
|
|
|
<svelte:window on:resize={resize}/>
|
|
|
|
|
|
|
|
|
|
|
|
<Logo keep={true}/>
|
|
|
|
<Logo keep={true}/>
|
|
|
|
|
|
|
|
|
|
|
|
@ -416,7 +443,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{#if clicked }
|
|
|
|
{#if clicked }
|
|
|
|
<div class="labels">
|
|
|
|
<div class="labels" transition:scale="{{duration: 700, opacity: 0.1, start: 0.2, easing: quintOut}}">
|
|
|
|
<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
|
|
|
|
<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
|
|
|
|
<line
|
|
|
|
<line
|
|
|
|
x1="{what['predseda'][1] + what['predseda'][2]}"
|
|
|
|
x1="{what['predseda'][1] + what['predseda'][2]}"
|
|
|
|
@ -523,7 +550,21 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{:else }
|
|
|
|
{:else }
|
|
|
|
<span class="label" id="cinnosti">Činnosti ve spolcích</span>
|
|
|
|
<div class="labels" transition:scale="{{duration: 700, opacity: 0.1, start: 0.2, easing: quintOut}}">
|
|
|
|
|
|
|
|
<span class="label" id="cinnosti" transition:scale="{{duration: 700, opacity: 0.1, start: 0.2, easing: quintOut}}" style="left: 50%; position: absolute; transform: translateX(-50%)">
|
|
|
|
|
|
|
|
Činnosti ve spolcích
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
|
|
|
|
|
|
|
|
<line
|
|
|
|
|
|
|
|
x1="{600}"
|
|
|
|
|
|
|
|
y1="{obobo[0][3]}"
|
|
|
|
|
|
|
|
x2="{600}"
|
|
|
|
|
|
|
|
y2="{400}"
|
|
|
|
|
|
|
|
stroke="black"
|
|
|
|
|
|
|
|
stroke-dasharray="5,5"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
{/if}
|
|
|
|
<canvas id="dots">
|
|
|
|
<canvas id="dots">
|
|
|
|
</canvas>
|
|
|
|
</canvas>
|
|
|
|
|
