Eesti Vabariigi tunnustamine 1991

Leia esimesed seitse riiki, kes tunnustasid Eesti iseseisvust +

+ Leia esimesed seitse riiki, kes tunnustasid Eesti iseseisvust: +
+ Island - 22.august 1991, Leedu - 22.august, Läti - 23.august, + Vene NFSV - 24.august, Ungari - 24.august, Prantsusmaa - 25.august, + Ukraina - 26.august. +

@@ -1012,6 +1018,6 @@

- + diff --git a/rannak/kaart/js/kaart.js b/rannak/kaart/js/kaart.js deleted file mode 100755 index e905fb5..0000000 --- a/rannak/kaart/js/kaart.js +++ /dev/null @@ -1,108 +0,0 @@ -// ******************** 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"; -} diff --git a/rannak/kaart/kaart.css b/rannak/kaart/kaart.css new file mode 100644 index 0000000..f941739 --- /dev/null +++ b/rannak/kaart/kaart.css @@ -0,0 +1,74 @@ +body { + display: flex; + flex-direction: column; +} + +/* Upper Container Stuff*/ +.upperContainer{ + text-align: center; + width: 70%; + margin-left: 15%; +} + + +.upperContainer .movementBtn{ + background-color: #687494; + border: none; + border-radius: 4px; + font-size:1.3rem; + color:white; + padding: 10px; + margin: 0 2px; +} + + +/* Move On Stuff*/ + +.moveOn{ + display: inline-block; + border: none; + padding: 6px 12px; + margin-left: 50px; + margin-botton: 0; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #4BB543; + color: white; +} + +button:disabled{ + opacity: 0.5; +} + + + +/* Kaart Stuff */ + + +.svgContainer { + overflow: hidden; + border: 2px solid #E3D4AD; + border-radius: 10px; + margin: 1.5%; + background-color: #434854; + max-height: 75vh; +} + + /* #00394f, #006284 */ + +svg {transition: transform 0.1s linear 0.1s;} +svg path{ + fill: #767F94; + stroke: #eee !important; + stroke-width: .25 !important; +} + +svg path:hover { + fill: #A9B5D4; + transition: 0.6s !important; + cursor: pointer !important; + +} 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"; +} -- cgit v1.2.3