pedf
/
spolky
Archived
1
0
Fork 0
Code Pull Requests Releases Activity

pavucina tlacidla

Browse Source
master
Lukáš Hozda 4 years ago
parent cb3f2684b4
commit c4d19ed6e7
1 changed files with 152 additions and 93 deletions
Show Stats Download Patch File Download Diff File

245
src/routes/index.svelte
Unescape Escape View File

@ -5,6 +5,7 @@
display: flex;
cursor: pointer;
line-height: 1em;
z-index: 1011;
}
#plusko:hover {
}
@ -28,9 +29,18 @@
.label2:hover {
border: solid 0.1em #d73648;
}
.labels:hover > *:not(:hover) {
font-size: 0.45em;
.labels {
position: absolute;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 1200px;
height: 800px;
}
/*.labels:hover > *:not(:hover) {
font-size: 0.45em;
}*/
.label a {
color: #000;
}
@ -47,24 +57,24 @@
top: 70vh;
}
#predseda {
left: 23vw;
top: 15vh;
left: 200px;
top: 100px;
}
#prebiram {
left: 65vw;
top: 19vh;
right: 150px;
top: 150px;
}
#zapojit {
left: 25vw;
top: 50vh;
left: 150px;
top: 400px;
}
#zalozit {
top: 60vh;
left: 71vw;
top: 600px;
right: 170px;
}
#oborovky {
left: 32vw;
top: 75vh;
left: 300px;
top: 700px;
}
.active {
}
@ -73,6 +83,9 @@
height: 0.7em;
position: relative;
}
.label.label2 span a {
padding: 0.5em;
}
.cross:before, .cross:after {
content: "";
@ -83,14 +96,14 @@
.cross:before {
left: 50%;
width: 10%;
width: 20%;
margin-left: -5%;
height: 100%;
}
.cross:after {
top: 50%;
height: 10%;
height: 20%;
margin-top: -5%;
width: 100%;
}
@ -130,6 +143,9 @@
line-height: 1;
margin-bottom: 0;
}
.dotted {
border-top: dotted 1px;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
@ -178,14 +194,14 @@
top: 70vh;
}
#predseda {
top: 30vh;
top: 25vh;
width: calc(100% - 16em);
left: 0;
padding: 0;
padding-left: 20px;
}
#prebiram {
top: 40vh;
top: 37.5vh;
width: calc(100% - 16em);
left: 0;
padding: 0;
@ -199,14 +215,14 @@
padding-left: 20px;
}
#zalozit {
top: 60vh;
top: 62.5vh;
width: calc(100% - 16em);
left: 0;
padding: 0;
padding-left: 20px;
}
#oborovky {
top: 70vh;
top: 75vh;
width: calc(100% - 16em);
left: 0;
padding: 0;
@ -230,7 +246,7 @@
border-radius: 4vw;
background-color: var(--color-primary);
color: #fff !important;
padding: 3rem 9rem;
padding: 3rem 1rem;
margin-left: 8em;
margin-right: 8em;
text-align: center;
@ -240,6 +256,15 @@
font-size: calc(var(--font-size));
color: #fff;
}
svg {
display: none
}
.labels {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
}
</style>
@ -249,68 +274,34 @@
import { onMount, afterUpdate } from 'svelte';
let clicked = false;
//function drawLineXY(fromXY, toXY) {
// if(!lineElem) {
// lineElem = document.createElement('canvas');
// lineElem.style.position = "absolute";
// lineElem.style.zIndex = -100;
// document.body.appendChild(lineElem);
// }
// var leftpoint, rightpoint;
// if(fromXY.x < toXY.x) {
// leftpoint = fromXY;
// rightpoint = toXY;
// } else {
// leftpoint = toXY;
// rightpoint = fromXY;
// }
// var lineWidthPix = 4;
// var gutterPix = 10;
// var origin = {x:leftpoint.x-gutterPix,
// y:Math.min(fromXY.y, toXY.y)-gutterPix};
// lineElem.width = Math.max(rightpoint.x - leftpoint.x, lineWidthPix) +
// 2.0*gutterPix;
// lineElem.height = Math.abs(fromXY.y - toXY.y) + 2.0*gutterPix;
// lineElem.style.left = origin.x;
// lineElem.style.top = origin.y;
// var ctx = lineElem.getContext('2d');
// // Use the identity matrix while clearing the canvas
// ctx.save();
// ctx.setTransform(1, 0, 0, 1, 0, 0);
// ctx.clearRect(0, 0, lineElem.width, lineElem.height);
// ctx.restore();
// ctx.lineWidth = 4;
// ctx.strokeStyle = '#09f';
// ctx.beginPath();
// ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
// ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
// ctx.stroke();
//}
function spin() {
//anime({
// targets: "#plusko img",
// rotate: {
// value: "+=180",
// duration: 300,
// direction: "alternate",
// },
//})
}
function unspin() {
//anime({
// targets: "#plusko img",
// rotate: {
// value: 0
// }
//});
let what = {
"predseda" : [ 0, 0, 0, 0 ],
"prebiram" : [ 0, 0, 0, 0 ],
"zapojit" : [ 0, 0, 0, 0 ],
"zalozit" : [ 0, 0, 0, 0 ],
"oborovky" : [ 0, 0, 0, 0 ],
}
function clicked_fun() {
clicked = !clicked;
if (clicked) {
setTimeout(() => {
let predseda = document.getElementById("predseda");
let prebiram = document.getElementById("prebiram");
let zapojit = document.getElementById("zapojit");
let zalozit = document.getElementById("zalozit");
let oborovky = document.getElementById("oborovky");
let plusko = document.getElementById("plusko")
what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
console.log(what);
}, 150);
}
}
@ -347,22 +338,6 @@
// alert(htmlLine);
document.body.innerHTML += htmlLine;
}
//afterUpdate(() => {
// if (document.getElementById("predseda") !== null && document.getElementById("predseda") !== undefined) {
// let predseda = document.getElementById("predseda");
// let prebiram = document.getElementById("prebiram");
// let zapojit = document.getElementById("zapojit");
// let zalozit = document.getElementById("zalozit");
// let oborovky = document.getElementById("oborovky");
// let plusko = document.getElementById("plusko")
// connect(predseda, plusko, "#000", "1");
// connect(prebiram, plusko, "#000", "1");
// connect(zapojit, plusko, "#000", "1");
// connect(zalozit, plusko, "#000", "1");
// connect(oborovky, plusko, "#000", "1");
// }
//});
function vwTOpx(value) {
var w = window,
d = document,
@ -401,7 +376,7 @@
<Logo keep={true}/>
<main id="container">
<div id="plusko" on:mouseover="{spin}" on:mouseout="{unspin}" class:active="{clicked}" on:click="{clicked_fun}">
<div id="plusko" class:active="{clicked}" on:click="{clicked_fun}">
{#if clicked}
<img src="/img/main-btn-active.png">
{:else}
@ -414,6 +389,90 @@
{#if clicked }
<div class="labels">
<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
<line
x1="{what['predseda'][1] + what['predseda'][2]}"
y1="{what['predseda'][0] + what['predseda'][3]}"
x2="{what['zapojit'][2] + what['zapojit'][1]}"
y2="{what['zapojit'][3]}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['zapojit'][2] + what['zapojit'][1]}"
y1="{what['zapojit'][3]}"
x2="{what['oborovky'][1] + what['oborovky'][2] - 7}"
y2="{what['oborovky'][3] + 10}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
y1="{what['oborovky'][3] + 10}"
x2="{what['zalozit'][2] + 10}"
y2="{what['zalozit'][3] + 5}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['zalozit'][2] + 10}"
y1="{what['zalozit'][3] + 5}"
x2="{what['prebiram'][2] + 10}"
y2="{what['prebiram'][3] + what['prebiram'][0]}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['prebiram'][2] + 10}"
y1="{what['prebiram'][3] + what['prebiram'][0]}"
x2="{what['predseda'][1] + what['predseda'][2]}"
y2="{what['predseda'][0] + what['predseda'][3]}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['predseda'][1] + what['predseda'][2]}"
y1="{what['predseda'][0] + what['predseda'][3]}"
x2="{600}"
y2="{400}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['zapojit'][2] + what['zapojit'][1]}"
y1="{what['zapojit'][3]}"
x2="{600}"
y2="{400}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['oborovky'][1] + what['oborovky'][2] - 7}"
y1="{what['oborovky'][3] + 10}"
x2="{600}"
y2="{400}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['zalozit'][2] + 10}"
y1="{what['zalozit'][3] + 5}"
x2="{600}"
y2="{400}"
stroke="black"
stroke-dasharray="5,5"
/>
<line
x1="{what['prebiram'][2] + 10}"
y1="{what['prebiram'][3] + what['prebiram'][0]}"
x2="{600}"
y2="{400}"
stroke="black"
stroke-dasharray="5,5"
/>
</svg>
<div class="label label2" id="predseda">
<span><a href="/predseda">Předseda spolku</a></span>
<div class="cross bottom-right"></div>