From 760e8fff4d4fd71350ddc9b17e85e95a17d4ce8e Mon Sep 17 00:00:00 2001 From: Rasmus Date: Fri, 31 Mar 2023 19:41:34 +0300 Subject: oops --- rannak/mangud/uliopilane/tSark/main.js.bak | 537 ----------------------------- 1 file changed, 537 deletions(-) delete mode 100755 rannak/mangud/uliopilane/tSark/main.js.bak (limited to 'rannak/mangud/uliopilane/tSark/main.js.bak') diff --git a/rannak/mangud/uliopilane/tSark/main.js.bak b/rannak/mangud/uliopilane/tSark/main.js.bak deleted file mode 100755 index 2685ad4..0000000 --- a/rannak/mangud/uliopilane/tSark/main.js.bak +++ /dev/null @@ -1,537 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - let btn = document.querySelector('.modalButton'); - btn.click(); -}); - - - -/*Muutused Stuff*/ - -// Särgi color - -let colorFill = document.querySelector("#colorFiller"); -let colorStroke = document.querySelector("#colorStroke"); - -colorFill.addEventListener("input", () => { - let color = colorFill.value; - document.querySelector("#sark").style.fill = color; - - if (!stuffDone.includes("sarkColor")) - stuffDone.push("sarkColor"); -}) - -colorStroke.addEventListener("input", () => { - let color = colorStroke.value; - document.querySelector("#sark").style.stroke = color; - - if (!stuffDone.includes("sarkColor")) - stuffDone.push("sarkColor"); -}) - - -// Img upload - -const image_input = document.querySelector("#image_input"); -let uploadedImg = ""; - -image_input.addEventListener("change", () => { - const reader = new FileReader(); - reader.readAsDataURL(image_input.files[0]) - reader.addEventListener("load", () => { - uploadedImg = reader.result; - document.querySelector(".item").style.backgroundImage = `url(${uploadedImg})` - }); - - if (!stuffDone.includes("newImg")) - stuffDone.push("newImg"); -}) - - -/* Teksti Teema */ - -// Uus Tekst - -function nextText() { - document.querySelector("#sargiText").value = ""; - - let curText = document.querySelector(".sarkTekst") - let newText = curText.cloneNode(true); - curText.classList.remove("sarkTekst") - - //Reset Stuff - let angle=0; - let sarkFontSize = 20; - - let gi6 = document.querySelector("g") - newText.classList.add("sarkTekst") - newText.innerHTML = "Uus Tekst"; - gi6.appendChild(newText); -} - - - -// Input - -function chgTxt() { - - let tekstVali = document.querySelector("#sargiText"); - tekstVali.addEventListener("keyup", () => { - let sarkTekst = document.querySelector(".sarkTekst"); - sarkTekst.innerHTML = tekstVali.value; - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); - }); -} - -chgTxt() - - -/* -function getInputValue() { - // Selecting the input element and get its value - - //Btn - let inputVal = document.getElementById("sargiText").value; - //Txt - let sarkTekst = document.querySelector(".sarkTekst"); - sarkTekst.innerHTML = inputVal; - - if (!stuffDone.includes("newTxt")) - stuffDone.push("newTxt"); -} - -function enterSubmit(){ - document.getElementById('sargiText') - .addEventListener('keyup', event => { - if (event.code === 'Enter') - { - event.preventDefault(); - getInputValue(); - } - }); -} -enterSubmit() -*/ - - -// Color - -let colorText = document.querySelector("#colorText"); -colorText.addEventListener("input", () => { - let color = colorText.value; - document.querySelector(".sarkTekst").style.fill = color; - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}) - -// Position -const ules = document.querySelector(".ules"); -const alla = document.querySelector(".alla"); -const vasak = document.querySelector(".vasak"); -const parem = document.querySelector(".parem"); - -ules.addEventListener("click" , () => { - let tmpX = document.querySelector(".sarkTekst").x; - let tmpY = document.querySelector(".sarkTekst").y; - - tmpY.baseVal[0].value-=10; - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - -alla.addEventListener("click" , () => { - let tmpX = document.querySelector(".sarkTekst").x; - let tmpY = document.querySelector(".sarkTekst").y; - - tmpY.baseVal[0].value+=10; - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - -vasak.addEventListener("click", () => { - let tmpX = document.querySelector(".sarkTekst").x; - let tmpY = document.querySelector(".sarkTekst").y; - - tmpX.baseVal[0].value-=10; - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - -parem.addEventListener("click", () => { - let tmpX = document.querySelector(".sarkTekst").x; - let tmpY = document.querySelector(".sarkTekst").y; - - tmpX.baseVal[0].value+=10; - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - - -// Vertical Pos -const vasakule = document.querySelector(".vertVasak"); -const paremale = document.querySelector(".vertParem"); -let angle=0; - -vasakule.addEventListener("click" , () => { - let testing = document.querySelector(".sarkTekst"); - - angle -=5 - testing.setAttribute("transform", "rotate("+angle+")"); - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - -paremale.addEventListener("click" , () => { - let testing = document.querySelector(".sarkTekst"); - - angle +=5 - testing.setAttribute("transform", "rotate("+angle+")"); - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - - - -// FontZise - -const plus = document.querySelector(".plus"); -const minus = document.querySelector(".minus"); -let sarkFontSize = 20; - -plus.addEventListener("click" , () => { - let sarkForText = document.querySelector(".sarkTekst"); - - sarkFontSize +=2; - sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - -minus.addEventListener("click" , () => { - let sarkForText = document.querySelector(".sarkTekst"); - - sarkFontSize-=2; - sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); - - if (!stuffDone.includes("txt")) - stuffDone.push("txt"); -}); - - - - -// https://stackoverflow.com/questions/54076532/how-to-test-if-a-point-is-inside-an-svg-closed-path - - -// Funcs to check whether draggable el inside Svg path - -function oMousePos(elmt, evt) { - let ClientRect = elmt.getBoundingClientRect(); - return { - //object - x: Math.round(evt.clientX - ClientRect.left), - y: Math.round(evt.clientY - ClientRect.top) - }; -} - -function draggablePoints(m) { - //top left - draggable.p0s[0][0] = m.x - draggable.delta.x - 1; - draggable.p0s[0][1] = m.y - draggable.delta.y - 1; - //top right - draggable.p0s[1][0] = m.x - draggable.delta.x + draggable.w + 1; - draggable.p0s[1][1] = m.y - draggable.delta.y + 1; - //bottom right - draggable.p0s[2][0] = m.x - draggable.delta.x + draggable.w + 1; - draggable.p0s[2][1] = m.y - draggable.delta.y + draggable.h + 1; - //bottom left - draggable.p0s[3][0] = m.x - draggable.delta.x + 1; - draggable.p0s[3][1] = m.y - draggable.delta.y + draggable.h + 1; -} - - -m = {},// the mouse position -thePath = document.querySelector("path"), - -/* Rezisable Image Stuff */ -draggable = document.querySelector(".item"); - -draggable.addEventListener("mousedown", mousedown); - -// NEw stuff -draggable.w = draggable.getBoundingClientRect().width; -draggable.h = draggable.getBoundingClientRect().height; -draggable.p0s = [[], [], [], []];//one array for every corner -draggable.delta = {};// distance between the click point and the left upper corner - - - -function mousedown(e) { - window.addEventListener("mousemove", mousemove); - window.addEventListener("mouseup", mouseup); - - // NEw stuff - draggable.delta = oMousePos(draggable, e); - // - - - let prevX = e.clientX; - let prevY = e.clientY; - - function mousemove(e) { - if (!isResizing) { - - let item = document.querySelector(".item"); - //item.style.pointerEvents = "none"; - - /* - let posers = document.elementFromPoint(e.x, e.y).id; - item.style.pointerEvents = ""; - - if (posers != "sark"){ - console.log(posers); - - let newX = prevX - e.clientX; - let newY = prevY - e.clientY; - - const rect = el.getBoundingClientRect(); - - el.style.left = rect.left - newX + "px"; - el.style.top = rect.top - newY + "px"; - - prevX = e.clientX; - prevY = e.clientY; - - mouseup() - } - */ - - let counter = 0;// how many corners are in path - //m = oMousePos(drag_parent, e); - m = oMousePos(thePath, e); - draggablePoints(m); - draggable.style.left = draggable.p0s[0][0] + 1 + "px"; - draggable.style.top = draggable.p0s[0][1] + 1 + "px"; - - draggable.p0s.map(p => { - if (document.elementFromPoint(p[0], p[1]) && document.elementFromPoint(p[0], p[1]).id == "sark") { - counter++; - } - console.log(counter, document.elementFromPoint(p[0], p[1]).id == "sark"); - }); - - if (counter == 4){ - console.log("moving"); - let newX = prevX - e.clientX; - let newY = prevY - e.clientY; - - const rect = draggable.getBoundingClientRect(); - - draggable.style.left = rect.left - newX + "px"; - draggable.style.top = rect.top - newY + "px"; - - prevX = e.clientX; - prevY = e.clientY; - } - - else { - console.log("Out of Bounds!"); - //console.log(counter); - // Set it to init pos; from downtown - // it.style.left = brr.left + 200; - console.log(draggable.p0s); - } - - } - } - - function mouseup() { - window.removeEventListener("mousemove", mousemove); - window.removeEventListener("mouseup", mouseup); - //D = false; - } - -} - - - - -// Resizing Pic - - -let isResizing = false; -const resizers = document.querySelectorAll(".resizer"); -let currentResizer; - -for (let resizer of resizers) { - resizer.addEventListener("mousedown", mousedown); - - function mousedown(e) { - currentResizer = e.target; - isResizing = true; - - let prevX = e.clientX; - let prevY = e.clientY; - - window.addEventListener("mousemove", mousemove); - window.addEventListener("mouseup", mouseup); - - function mousemove(e) { - - const rect = draggable.getBoundingClientRect(); - - if (currentResizer.classList.contains("se")) { - draggable.style.width = rect.width - (prevX - e.clientX) + "px"; - draggable.style.height = rect.height - (prevY - e.clientY) + "px"; - } - - else if (currentResizer.classList.contains("sw")) { - draggable.style.width = rect.width + (prevX - e.clientX) + "px"; - draggable.style.height = rect.height - (prevY - e.clientY) + "px"; - draggable.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - else if (currentResizer.classList.contains("ne")) { - draggable.style.width = rect.width - (prevX - e.clientX) + "px"; - draggable.style.height = rect.height + (prevY - e.clientY) + "px"; - draggable.style.top = rect.top - (prevY - e.clientY) + "px"; - } - - else { - draggable.style.width = rect.width + (prevX - e.clientX) + "px"; - draggable.style.height = rect.height + (prevY - e.clientY) + "px"; - draggable.style.top = rect.top - (prevY - e.clientY) + "px"; - draggable.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - prevX = e.clientX; - prevY = e.clientY; - } - - function mouseup() { - window.removeEventListener("mousemove", mousemove); - window.removeEventListener("mouseup", mouseup); - isResizing = false; - } - - } // Resizing mousedown end - -} - -// Seting up resize Pic Pos -let brr = document.querySelector("#sark").getBoundingClientRect(); -let it = document.querySelector(".item"); -it.style.left = brr.left + 200; -//it.style.top = brr.top + 300; - - - - - - - -/* Ending stuff + Reset */ - - -// Move on Button -function message(msg, color){ - messageBox = document.querySelector(".messageBox"); - messageBox.innerHTML = msg; - messageBox.style.color = color; -} - - -let stuffDone = new Array(); - -const chkBtn = document.querySelector(".checkMoveOn"); - -chkBtn.addEventListener("click", (e) => { - - if (stuffDone.length >= 3){ - message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "#4BB543"); - moveOnEnable(); - } - else - message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red"); -}); - -function moveOnEnable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = "../utlused"; - - let tst = document.querySelectorAll(".resizer"); - for (elinjo of tst){ - elinjo.style.height = 0; - elinjo.style.width = 0; - } - -} - -// 6 - - - -// Reset Everything - -const nulliBtn = document.querySelector(".nulliBtn"); -nulliBtn.addEventListener("click", () => { - - stuffDone = new Array(); - - //SarkColor - document.querySelector("#sark").style.fill = "white"; - - document.querySelector("#sark").style.stroke = "black"; - - - - // Tekstid - document.querySelector("#sargiText").value = ""; - - curText = document.querySelector(".sarkTekst"); - newText = curText.cloneNode(true); - curText.classList.remove("sarkTekst"); - - let koikTekstid = document.querySelectorAll(".doneTekst"); - - for (let i = 0; i < koikTekstid.length; i++) { - koikTekstid[i].innerHTML = ""; - } - - //Reset Stuff - angle=0; - sarkFontSize = 20; - - let brro = document.querySelector("g") - newText.classList.add("sarkTekst") - newText.innerHTML = "Tekst"; - - brro.appendChild(newText); - document.querySelector(".sarkTekst").style.fill = "black"; - - - // Seting up resize Pic Pos - let brr = document.querySelector("#sark").getBoundingClientRect(); - let it = document.querySelector(".item"); - it.style.left = brr.left + 200; - //it.style.top = brr.top + 300; - - - // Moving IMg Corners - let tst = document.querySelectorAll(".resizer"); - for (elinjo of tst){ - elinjo.style.height = "7px"; - elinjo.style.width = "7px"; - } - -}) -- cgit v1.2.3