diff options
author | Rasmus <rasmus.luha@gmail.com> | 2023-03-31 19:41:34 +0300 |
---|---|---|
committer | Rasmus <rasmus.luha@gmail.com> | 2023-03-31 19:41:34 +0300 |
commit | 760e8fff4d4fd71350ddc9b17e85e95a17d4ce8e (patch) | |
tree | c7ea657fe7d99852ff3c5ea19ca386d69bd9af55 /rannak/kaart/kaart.js | |
parent | c40293acd3a00b20d74cf37823b7efb1b75dec9b (diff) |
oops
Diffstat (limited to 'rannak/kaart/kaart.js')
-rw-r--r-- | rannak/kaart/kaart.js | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/rannak/kaart/kaart.js b/rannak/kaart/kaart.js new file mode 100644 index 0000000..e905fb5 --- /dev/null +++ b/rannak/kaart/kaart.js @@ -0,0 +1,108 @@ +// ******************** 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") + + +const leitavad = ["IS", "LV", "LT", "UA", "HU", "Russian Federation", "France"] +let leitud = []; + +// Add click listener +for (let i = 0; i < riigid.length; i++){ + if (leitavad.includes(riigid[i].id) || leitavad.includes(riigid[i].className.baseVal)){ + riigid[i].addEventListener("click", e => { + e.target.style.fill = "#00FF00"; + if (!leitud.includes(i)) + leitud.push(i); + + if (leitavad.length == leitud.length) + moveOnEnable(); + + console.log(leitud.length); + }) + } + 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"; +} |