1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
// ******************** Zoom Stuff **************************** //
const svg = document.querySelector("svg");
const getTransformParameters = (element) => {
const transform = element.style.transform;
let scale = 1, x = 0, y = 0;
if (transform.includes("scale"))
scale = parseFloat(transform.slice(transform.indexOf("scale") + 6));
if (transform.includes("translateX"))
x = parseInt(transform.slice(transform.indexOf("translateX") + 11));
if (transform.includes("translateY"))
y = parseInt(transform.slice(transform.indexOf("translateY") + 11));
return { scale, x, y };
};
const getTransformString = (scale, x, y) =>
"scale(" + scale + ") " + "translateX(" + x + "%) translateY(" + y + "%)";
// Pan and Zoom funcs
const pan = (direction) => {
const { scale, x, y } = getTransformParameters(svg);
let dx = 0, dy = 0;
switch (direction) {
case "left":
dx = 3;
break;
case "right":
dx = -3;
break;
case "up":
dy = 3;
break;
case "down":
dy = -3;
break;
}
svg.style.transform = getTransformString(scale, x + dx, y + dy);
};
const zoom = (direction) => {
const { scale, x, y } = getTransformParameters(svg);
let dScale = 0.1;
if (direction == "out") dScale *= -1;
if (scale == 0.1 && direction == "out") dScale = 0;
svg.style.transform = getTransformString(scale + dScale, x, y);
};
// Event Listeners
document.getElementById("left-button").onclick = () => pan("left");
document.getElementById("right-button").onclick = () => pan("right");
document.getElementById("up-button").onclick = () => pan("up");
document.getElementById("down-button").onclick = () => pan("down");
document.getElementById("zoom-in-button").onclick = () => zoom("in");
document.getElementById("zoom-out-button").onclick = () => zoom("out");
// ******************** Other Stuff **************************** //
const riigid = document.querySelectorAll("svg path")
// Praegu Eesti, Portugal, Holland
const leitavad = ["EE", "PT", "NL"]
let leitud = [];
// Add click listener
for (let i = 0; i < riigid.length; i++){
if (leitavad.includes(riigid[i].id)){
riigid[i].addEventListener("click", e => {
e.target.style.fill = "#00FF00";
if (!leitud.includes(e.target.id))
leitud.push(riigid[i].id);
if (leitavad.length == leitud.length)
moveOnEnable();
})
}
else{
riigid[i].addEventListener("click", e => {
e.target.style.fill = "#FF0000";
})
}
}
function moveOnEnable(){
const btn = document.querySelector(".moveOn");
btn.disabled = false;
btn.onclick = () => location.href = "../rolliValik";
}
|
