oops

1 files changed, 0 insertions, 537 deletions

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