summaryrefslogtreecommitdiff
path: root/rannak/mangud/uliopilane/tSark
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/uliopilane/tSark')
-rw-r--r--[-rwxr-xr-x]rannak/mangud/uliopilane/tSark/img/avatar.pngbin668741 -> 668741 bytes
-rw-r--r--[-rwxr-xr-x]rannak/mangud/uliopilane/tSark/img/picLink.txt0
-rw-r--r--[-rwxr-xr-x]rannak/mangud/uliopilane/tSark/img/shirtImg.jpgbin26450 -> 26450 bytes
-rw-r--r--[-rwxr-xr-x]rannak/mangud/uliopilane/tSark/img/tshirt.svg0
-rw-r--r--[-rwxr-xr-x]rannak/mangud/uliopilane/tSark/index.html0
-rw-r--r--[-rwxr-xr-x]rannak/mangud/uliopilane/tSark/main.js0
-rwxr-xr-xrannak/mangud/uliopilane/tSark/main.js.bak537
-rw-r--r--[-rwxr-xr-x]rannak/mangud/uliopilane/tSark/style.css0
8 files changed, 0 insertions, 537 deletions
diff --git a/rannak/mangud/uliopilane/tSark/img/avatar.png b/rannak/mangud/uliopilane/tSark/img/avatar.png
index dd044fd..dd044fd 100755..100644
--- a/rannak/mangud/uliopilane/tSark/img/avatar.png
+++ b/rannak/mangud/uliopilane/tSark/img/avatar.png
Binary files differ
diff --git a/rannak/mangud/uliopilane/tSark/img/picLink.txt b/rannak/mangud/uliopilane/tSark/img/picLink.txt
index 091d2df..091d2df 100755..100644
--- a/rannak/mangud/uliopilane/tSark/img/picLink.txt
+++ b/rannak/mangud/uliopilane/tSark/img/picLink.txt
diff --git a/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg b/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg
index 93f10de..93f10de 100755..100644
--- a/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg
+++ b/rannak/mangud/uliopilane/tSark/img/shirtImg.jpg
Binary files differ
diff --git a/rannak/mangud/uliopilane/tSark/img/tshirt.svg b/rannak/mangud/uliopilane/tSark/img/tshirt.svg
index 19a7205..19a7205 100755..100644
--- a/rannak/mangud/uliopilane/tSark/img/tshirt.svg
+++ b/rannak/mangud/uliopilane/tSark/img/tshirt.svg
diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html
index 2d8bb52..2d8bb52 100755..100644
--- a/rannak/mangud/uliopilane/tSark/index.html
+++ b/rannak/mangud/uliopilane/tSark/index.html
diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
index a91fbec..a91fbec 100755..100644
--- a/rannak/mangud/uliopilane/tSark/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
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";
- }
-
-})
diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css
index 4da8d25..4da8d25 100755..100644
--- a/rannak/mangud/uliopilane/tSark/style.css
+++ b/rannak/mangud/uliopilane/tSark/style.css