plakat Done, all Games Done!!

1 files changed, 248 insertions, 46 deletions

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 = "";
 }