Plakat

Plakatid

Leia iga plakati õige ajastu, ning muuda ka plakati teksti. -
- Kui oled valinud õige ajastu ja muutunud plakati lause, muutub see roheliseks, - näitamaks, et sellega on kõik korras. +

+ Leia iga plakati õige ajastu, ning muuda ka plakati teksti. +
+ NB: Uut loosungit saad lisada pärast seda, kui oled valinud õige ajastu.

@@ -102,31 +102,36 @@

- Testing Testing -

- -

- - - - - + + + + + Lisa Tekst - - + +

- - - - + + + + + +

+ Värv: + + + +

@@ -137,30 +142,35 @@

- Veekogud -

- - - - - + + + + Lisa Tekst - - + +

- - - - + + + + + +

+ Värv: + + + +

@@ -176,30 +186,34 @@

- Malev -

- - - - - + + + + Lisa Tekst - - + +

- - - - + + + + + +

+ Värv: + + +

@@ -211,30 +225,34 @@

- ViisAastak -

- - - - - + + + + Lisa Tekst - - + +

- - - - + + + + + +

+ Värv: + + +

diff --git a/rannak/mangud/partorg/plakat/script.js b/rannak/mangud/partorg/plakat/script.js index 4d4ee36..7ec4b7e 100644 --- a/rannak/mangud/partorg/plakat/script.js +++ b/rannak/mangud/partorg/plakat/script.js @@ -5,30 +5,220 @@ document.addEventListener('DOMContentLoaded', () => { +let ajastudCounter = 0 +let addedTexts = new Array(); + + +// New Text Adding +let newTextBtns = document.querySelectorAll(".muuda"); + +newTextBtns.forEach(btn => { + btn.addEventListener("click" , e => { + + + for (el of e.target.parentElement.parentElement.childNodes[1].childNodes) { + console.log(el); + if (el.classList != undefined && el.classList.contains("addedText")){ + el.classList.remove("addedText"); + console.log('dingdong'); + } + } + + + let inputText = e.target.parentElement.childNodes[5].value; + + let mySpan = document.createElement('span'); + mySpan.classList.add('addedText'); + mySpan.classList.add('oldAddedText'); + mySpan.innerHTML = inputText; + + + let parentEl= e.target.parentElement.parentElement.childNodes[1]; + parentEl.appendChild(mySpan); + + mySpan.style.top = "50%"; + mySpan.style.left = "35%"; + + e.target.parentElement.childNodes[5].value = ''; + + + if (!addedTexts.includes(parentEl.classList[1])) + addedTexts.push(parentEl.classList[1]); + + + + // Check If Done + if (addedTexts.length >= 4) + checkIfAllGood(); + + + }); +}) + + + + +// Start Text Edit + +let selectors = document.querySelectorAll("select"); +selectors.forEach(el => { + el.addEventListener("change", () => { + if(el.className == el.value) + enableEditing(el); + }); +}); + + + +function enableEditing(el){ + ajastudCounter += 1; + + el.style.backgroundColor = 'lime'; + el.style.border = 'none'; + el.style.borderRadius = '7px'; + el.disabled = true; + + + let imgDiv = el.parentElement.parentElement.childNodes[1]; + let blankImgLoc = `img/${el.id}Blank.png`; + + imgDiv.style.background = "url(" + blankImgLoc + ") no-repeat center"; + imgDiv.style.backgroundSize = "100% 100%"; + + let parent = el.parentElement.id; + + // Enable buttons + let btns = document.querySelectorAll(`#${parent} button`); + btns.forEach(btn => { + btn.disabled = false; + }); + + + // Enable inputs + let inputs = document.querySelectorAll(`#${parent} input`); + inputs.forEach(input => { + input.disabled = false; + }); + + +} + + + +// Reset Button +let resetBtns = document.querySelectorAll(".reset"); +resetBtns.forEach(btn => { + btn.addEventListener("click", () => { + + let imgDiv = btn.parentElement.parentElement.childNodes[1]; + imgDiv.innerHTML = ''; + + addedTexts = new Array(); + ajastudCounter = 0; + + + }); +}); + + + +// Color Changer + +let colorPickers = document.querySelectorAll("#color"); +colorPickers.forEach(el => { + + el.addEventListener("change", () => { + + for (text of el.parentElement.parentElement.childNodes[1].childNodes){ + if (text.classList != undefined && text.classList.contains("addedText")){ + + + let pickedColor = el.value; + text.style.color = pickedColor; + + + } + } + }); +}); + + + + + +// fontSize + +let fontIncs = document.querySelectorAll(".pluss"); +fontIncs.forEach(el => { + el.addEventListener("click", (e) => { + + for (text of el.parentElement.parentElement.parentElement.childNodes[1].childNodes){ + if (text.classList != undefined && text.classList.contains("addedText")){ + + + var font = window.getComputedStyle(text, null).getPropertyValue('font-size'); + var fontSize = parseFloat(font); + + text.style.fontSize = (fontSize + 1) + 'px'; + + + } + } + }); +}); + + + +let fontDecs = document.querySelectorAll(".miinus"); +fontDecs.forEach(el => { + el.addEventListener("click", (e) => { + + for (text of el.parentElement.parentElement.parentElement.childNodes[1].childNodes){ + if (text.classList != undefined && text.classList.contains("addedText")){ + + + var font = window.getComputedStyle(text, null).getPropertyValue('font-size'); + var fontSize = parseFloat(font); + + text.style.fontSize = (fontSize - 1) + 'px'; + + + } + } + }); +}); + + -// FROM HERE TODO -// Init Setup - to access later -let dingDong = document.querySelector(".addedText"); -dingDong.style.top = "50%"; -dingDong.style.left = "50%"; // Position -const ules = document.querySelectorAll(".ules"); -const alla = document.querySelectorAll(".alla"); +const ules = document.querySelectorAll(".ules"); +const alla = document.querySelectorAll(".alla"); const vasak = document.querySelectorAll(".vasak"); const parem = document.querySelectorAll(".parem"); + + ules.forEach(el => { el.addEventListener("click" , e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; + + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + + let curTop = theText.style["top"]; curTop = curTop.substring(0, curTop.length-1) @@ -37,9 +227,20 @@ ules.forEach(el => { }); }) + + alla.forEach(el => { el.addEventListener("click" , e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; + + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + + let curTop = theText.style["top"]; curTop = curTop.substring(0, curTop.length-1) @@ -48,70 +249,71 @@ alla.forEach(el => { }); }) + + vasak.forEach(el => { el.addEventListener("click", e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; - let curLeft = theText.style["left"]; - curLeft = curLeft.substring(0, curLeft.length-1) + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; - console.log("Vasak"); - console.log(theText.innerHTML); + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; - if (Number(curLeft) >= 5) - theText.style["left"] = Number(curLeft)-5+"%"; - }); -}) + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + + -parem.forEach(el => { - el.addEventListener("click", e => { - let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; let curLeft = theText.style["left"]; curLeft = curLeft.substring(0, curLeft.length-1) if (Number(curLeft) >= 5) - theText.style["left"] = Number(curLeft)+5+"%"; + theText.style["left"] = Number(curLeft)-5+"%"; }); }) -// Muuda Text button -const muudaBtn = document.querySelector(".muuda"); +parem.forEach(el => { + el.addEventListener("click", e => { + //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1]; -muudaBtn.addEventListener("click", e => { - console.log(e); -}); + let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes; + + let theText; + for (el of texts){ + if (el.classList != undefined && el.classList.contains("addedText")) + theText = el; + } + let curLeft = theText.style["left"]; + curLeft = curLeft.substring(0, curLeft.length-1) + + // Get the width of text itself and add the "left". + let offWi = theText.offsetWidth; + let parentWi = theText.parentElement.clientWidth; + let textWi = (offWi/parentWi)*100; + if (Number(curLeft)+textWi <= 95) + theText.style["left"] = Number(curLeft)+5+"%"; + + + }); +}) function checkIfAllGood(){ - let rightDone = []; - - for (let j=0; j < lists.length; j++){ - const list = lists[j]; - if (list.className.includes("startBasket")) - continue; - else if (list.children.length == 1){ - if (list.id == list.children[0].id){ - if (!rightDone.includes(list.id)) - rightDone.push(list.id); - } - } - } // For loop end - - if (rightDone.length == 6) { - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = ""; - } + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = ""; } diff --git a/rannak/mangud/partorg/plakat/styles.css b/rannak/mangud/partorg/plakat/styles.css index 67f8bbe..b2405f9 100644 --- a/rannak/mangud/partorg/plakat/styles.css +++ b/rannak/mangud/partorg/plakat/styles.css @@ -28,7 +28,9 @@ button:disabled{ cursor: not-allowed; } - +input[type=text] { + width: 100%; +} @@ -48,11 +50,6 @@ button:disabled{ - -.closeModalButton { - border-radius: 50px; -} - .modalButton{ display: inline-block; padding: 6px 12px; @@ -89,20 +86,27 @@ button:disabled{ justify-content: center; } -.plakatWrapper, .innerWrapper{ - width: 48%; -} -.innerWrapper{ - padding: 2rem; +.plakatWrapper{ + width: 60%; + overflow-wrap: break-word; + position: relative; + overflow: hidden; + clear: both; +} + +.inputWrapper{ + padding-left: 2rem; display: flex; flex-direction: column; - justify-content: center; + justify-content: right; align-items: center; } + + /* Input stuff*/ select{ @@ -112,7 +116,6 @@ select{ label{ padding: 1rem; - padding-top: 4rem; font-size: 1.2rem; } @@ -121,11 +124,11 @@ input { width: 75%; } -.innerWrapper button { +.inputWrapper button { margin-top: 1rem; } -.innerWrapper button { +.inputWrapper button { background-color: #596B6E; border: none; border-radius: 4px; @@ -135,9 +138,21 @@ input { } +.inputWrapper button:disabled { + cursor: not-allowed; + opacity: 0.5; +} +select:disabled{cursor: not-allowed} +input:disabled{ + cursor: not-allowed + opacity: 0.5; +} +.reset{ + background-color: red !important; +} @@ -145,8 +160,8 @@ input { .stalin { background: url("img/stalin.jpg") no-repeat center; - background-size: 100%; - font-size: 2rem; + background-size: 100% 100%; + font-size: 1rem; text-align: center; color: black; } @@ -154,8 +169,8 @@ input { .veekogud { background: url("img/veekogud.jpg") no-repeat center; - background-size: 100%; - font-size: 2rem; + background-size: 100% 100%; + font-size: 1rem; text-align: center; color: black; } @@ -164,7 +179,7 @@ input { .malev { background: url("img/malev.jpg") no-repeat center; background-size: 100% 100%; - font-size: 2rem; + font-size: 1rem; text-align: center; color: black; } @@ -173,7 +188,7 @@ input { .viisAastak { background: url("img/viisAastak.jpg") no-repeat center; background-size: 100% 100%; - font-size: 2rem; + font-size: 1rem; text-align: center; color: black; } @@ -182,12 +197,7 @@ input { height: 78vh; } -.plakatWrapper{ - position: relative; - overflow: hidden; - clear: both; -} -.addedText { +.addedText, .oldAddedText { position: absolute; } -- cgit v1.2.3

Kujunda Plakatit

Vali Plakat

Plakatid