summaryrefslogtreecommitdiff
path: root/rannak/mangud/uliopilane/tSark
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/uliopilane/tSark')
-rw-r--r--rannak/mangud/uliopilane/tSark/index.html17
-rw-r--r--rannak/mangud/uliopilane/tSark/main.js199
-rw-r--r--rannak/mangud/uliopilane/tSark/main.js.bak537
-rw-r--r--rannak/mangud/uliopilane/tSark/style.css80
4 files changed, 744 insertions, 89 deletions
diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html
index 789ad8f..655c8b1 100644
--- a/rannak/mangud/uliopilane/tSark/index.html
+++ b/rannak/mangud/uliopilane/tSark/index.html
@@ -2,9 +2,9 @@
<head>
<title>Särgi Kujundus</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link href="style.css" rel="stylesheet"/>
-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+ <link href="style.css" rel="stylesheet"/>
</head>
<body class="text-white">
@@ -15,7 +15,13 @@
<svg viewBox="0 0 512 512">
<g transform="translate(0,448)">
<path id="sark" d="m114.43-400.52-98.703 78.981 66.018 88.962 30.599-23.608v272.7h288.51v-272.7l29.397 23.608 66.026-88.282-95.992-76.942-74.453-0.70374c-0.58384 37.58-35.742 54.937-68.92 67.881-32.896-13.591-68.984-30.886-68.984-68.969 0.00036-0.0748-0.00033-0.14911 0-0.22393z" />
- <text class="sarkTekst doneTekst" x="200" y="-200" transform="rotate(0)" >Tekst</text>
+ <text class="sarkTekst doneTekst" x="237" y="-77" transform="rotate(0)" >Tekst</text>
+
+ <!-- To avoid Text overflow -->
+ <clipPath id="clip1">
+ <path id="clip1Path" d="m114.43-400.52-98.703 78.981 66.018 88.962 30.599-23.608v272.7h288.51v-272.7l29.397 23.608 66.026-88.282-95.992-76.942-74.453-0.70374c-0.58384 37.58-35.742 54.937-68.92 67.881-32.896-13.591-68.984-30.886-68.984-68.969 0.00036-0.0748-0.00033-0.14911 0-0.22393z" />
+ </clipPath>
+
</g>
</svg>
@@ -66,6 +72,11 @@
Kujunda enda T-särk. Edasi liikumiseks peab olema
kasutatud kõik kujundamise võimalused. Kui arvad, et särk on valmis,
siis kontorlli nupuga, kas särk on valmis".
+ <br/>
+ Pilti võid otsida veebist või valida ka oma arvutist.
+
+ <br/> <br/>
+ <span class="kuiEiLeiaTeksti">Kui sa ei leia teksti, siis tõenöoliselt on see pildi all :)</span>
</p>
<div>
diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
index ddbd533..cc7ef3a 100644
--- a/rannak/mangud/uliopilane/tSark/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -65,6 +65,15 @@ function nextText() {
let gi6 = document.querySelector("g")
newText.classList.add("sarkTekst")
newText.innerHTML = "Uus Tekst";
+
+ // Move a little, so that new txt isnt exatly on top of old.
+ let newYVal = newText.y.baseVal[0].value;
+ if (newYVal < -150)
+ newText.y.baseVal[0].value += 50;
+ else
+ newText.y.baseVal[0].value -= 50;
+ //console.log(newText.y.baseVal[0].value);
+
gi6.appendChild(newText);
}
@@ -229,10 +238,18 @@ minus.addEventListener("click" , () => {
+
+
+
+
+
+
+
+
+
/* Rezisable Image Stuff */
const el = document.querySelector(".item");
-let isResizing = false;
el.addEventListener("mousedown", mousedown);
@@ -246,42 +263,57 @@ function mousedown(e) {
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);
+ const rect = el.getBoundingClientRect();
+
+ let item = document.querySelector(".item");
+ item.style.pointerEvents = "none";
+ //let posers = document.elementFromPoint(e.x, e.y).id;
+
+ // New Stuff
+ let posers = document.elementFromPoint(rect.left, rect.top).id;
+ let posers2 = document.elementFromPoint(rect.right, rect.top).id;
+ let posers3 = document.elementFromPoint(rect.right, rect.bottom).id;
+ let posers4 = document.elementFromPoint(rect.left, rect.bottom).id;
+ // /// /////
+
+ console.log(posers, posers2, posers3, posers4);
+
+
+ item.style.pointerEvents = "";
- 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";
+ if (posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark"){
- prevX = e.clientX;
- prevY = e.clientY;
+ let newX = prevX - e.clientX;
+ let newY = prevY - e.clientY;
- mouseup()
- }
+ // Pic back to Center
+ let brr = document.querySelector("#sark").getBoundingClientRect();
+ el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px";
+ el.style.top = brr.top + (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px";
+ //el.style.top = brr.bottom - 2*(rect.bottom - rect.top) + "px";
- else {
- let newX = prevX - e.clientX;
- let newY = prevY - e.clientY;
+ prevX = e.clientX;
+ prevY = e.clientY;
+ mouseup()
+ }
- const rect = el.getBoundingClientRect();
+ else {
- el.style.left = rect.left - newX + "px";
- el.style.top = rect.top - newY + "px";
+ let newX = prevX - e.clientX;
+ let newY = prevY - e.clientY;
- prevX = e.clientX;
- 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;
+ }
}
}
@@ -294,8 +326,11 @@ function mousedown(e) {
+
const resizers = document.querySelectorAll(".resizer");
let currentResizer;
+let isResizing = false;
+
for (let resizer of resizers) {
resizer.addEventListener("mousedown", mousedown);
@@ -312,35 +347,69 @@ for (let resizer of resizers) {
function mousemove(e) {
- const rect = el.getBoundingClientRect();
-
- if (currentResizer.classList.contains("se")) {
- el.style.width = rect.width - (prevX - e.clientX) + "px";
- el.style.height = rect.height - (prevY - e.clientY) + "px";
- }
-
- else if (currentResizer.classList.contains("sw")) {
- el.style.width = rect.width + (prevX - e.clientX) + "px";
- el.style.height = rect.height - (prevY - e.clientY) + "px";
- el.style.left = rect.left - (prevX - e.clientX) + "px";
- }
-
- else if (currentResizer.classList.contains("ne")) {
- el.style.width = rect.width - (prevX - e.clientX) + "px";
- el.style.height = rect.height + (prevY - e.clientY) + "px";
- el.style.top = rect.top - (prevY - e.clientY) + "px";
- }
-
- else {
- el.style.width = rect.width + (prevX - e.clientX) + "px";
- el.style.height = rect.height + (prevY - e.clientY) + "px";
- el.style.top = rect.top - (prevY - e.clientY) + "px";
- el.style.left = rect.left - (prevX - e.clientX) + "px";
- }
-
- prevX = e.clientX;
- prevY = e.clientY;
- }
+ const rect = el.getBoundingClientRect();
+
+
+
+ let item = document.querySelector(".item");
+ item.style.pointerEvents = "none";
+ let posers = document.elementFromPoint(rect.left, rect.top).id;
+ let posers2 = document.elementFromPoint(rect.right, rect.top).id;
+ let posers3 = document.elementFromPoint(rect.right, rect.bottom).id;
+ let posers4 = document.elementFromPoint(rect.left, rect.bottom).id;
+ item.style.pointerEvents = "";
+
+
+
+ if ( !(posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark")){
+
+
+ if (currentResizer.classList.contains("se")) {
+ el.style.width = rect.width - (prevX - e.clientX) + "px";
+ el.style.height = rect.height - (prevY - e.clientY) + "px";
+ }
+
+ else if (currentResizer.classList.contains("sw")) {
+ el.style.width = rect.width + (prevX - e.clientX) + "px";
+ el.style.height = rect.height - (prevY - e.clientY) + "px";
+ el.style.left = rect.left - (prevX - e.clientX) + "px";
+ }
+
+ else if (currentResizer.classList.contains("ne")) {
+ el.style.width = rect.width - (prevX - e.clientX) + "px";
+ el.style.height = rect.height + (prevY - e.clientY) + "px";
+ el.style.top = rect.top - (prevY - e.clientY) + "px";
+ }
+
+ else {
+ el.style.width = rect.width + (prevX - e.clientX) + "px";
+ el.style.height = rect.height + (prevY - e.clientY) + "px";
+ el.style.top = rect.top - (prevY - e.clientY) + "px";
+ el.style.left = rect.left - (prevX - e.clientX) + "px";
+ }
+
+ }
+
+ // If resizing out of boundaries
+ else{
+
+ if (currentResizer.classList.contains("se") || currentResizer.classList.contains("sw")) {
+ el.style.width = rect.width - 15 + "px";
+ el.style.height = rect.height - 15 + "px";
+ mouseup();
+ }
+
+ if (currentResizer.classList.contains("ne") || currentResizer.classList.contains("nw")) {
+ el.style.width = rect.width - 15 + "px";
+ el.style.height = rect.height - 15 + "px";
+ mouseup();
+ }
+
+ }
+ prevX = e.clientX;
+ prevY = e.clientY;
+
+ } // Function mousemove end
function mouseup() {
window.removeEventListener("mousemove", mousemove);
@@ -354,9 +423,11 @@ for (let resizer of resizers) {
// 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;
+let it = document.querySelector(".item").getBoundingClientRect();
+let Boop = document.querySelector(".item");
+//it.style.left = brr.left + 200;
+Boop.style.left = brr.left + (brr.right - brr.left)/2 - (it.right - it.left)/2 + "px";
+Boop.style.top = brr.top + (brr.bottom - brr.top)/2 - (it.bottom - it.top)/2 + "px";
@@ -438,11 +509,13 @@ nulliBtn.addEventListener("click", () => {
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;
+
+ // Pic back to Center
+ let brr = document.querySelector("#sark").getBoundingClientRect();
+ let rect = document.querySelector(".item").getBoundingClientRect();
+ el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px";
+ el.style.top = brr.top + (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px";
+
// Moving IMg Corners
diff --git a/rannak/mangud/uliopilane/tSark/main.js.bak b/rannak/mangud/uliopilane/tSark/main.js.bak
new file mode 100644
index 0000000..2685ad4
--- /dev/null
+++ b/rannak/mangud/uliopilane/tSark/main.js.bak
@@ -0,0 +1,537 @@
+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 1179fb0..fd6c352 100644
--- a/rannak/mangud/uliopilane/tSark/style.css
+++ b/rannak/mangud/uliopilane/tSark/style.css
@@ -1,10 +1,15 @@
body{
- background-color: #FADFCA !important;
+ background-color: #FADFCA;
box-sizing: border-box;
margin: 0;
padding: 0;
}
+h1{
+ color: #4169E1;
+ font-weight: bold;
+}
+
.containeraa {
width: 100%;
height: 100vh;
@@ -19,10 +24,13 @@ body{
height: 100vh;
text-align: center;
background-color: #544B44;
+ overflow: scroll;
+ overflow-x: hidden
}
+
/* Move on Button */
button:disabled{
@@ -58,25 +66,31 @@ button:disabled{
padding-top: 7px;
}
+.kuiEiLeiaTeksti {font-size: .87rem;}
+
+
+
+
+
/* Modal Stuff */
.avatar {
border-radius: 20px;
- width: 100% !important;
- max-width: 15rem !important;
+ width: 100%;
+ max-width: 15rem;
}
.modalHeaderWrapper{
text-align: center;
- margin: 0 !important;
- width: 100% !important;
+ margin: 0;
+ width: 100%;
}
.modal{
- color: black !important;
+ color: black;
}
.closeModalButton {
@@ -84,29 +98,45 @@ button:disabled{
}
.modalButton{
- padding: 5px !important;
- margin-left: 30px !important;
- margin-top: 3px !important;
- background-color: rgba(0,136,169,1) !important;
- border: none !important;
- border-radius: 50px !important;
- cursor: pointer !important;
- transition: all 0.3 ease 0 !important;
- font-size: 1.1rem !important;
+ padding: 5px;
+ margin-left: 30px;
+ margin-top: 3px;
+ background-color: rgba(0,136,169,1);
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: all 0.3 ease 0;
+ font-size: 1.1rem;
}
.modalButton:hover{
- background-color: rgba(0,136,169,0.8) !important;
+ background-color: rgba(0,136,169,0.8);
}
+
+
+
+
+/* Clipping for text overflow */
+
+g {
+ clip-path: url(#clip1);
+}
+
/* Svg stuff*/
+path {
+ maring: 0;
+ padding: 0;
+}
+
svg {
- width: 100% !important;
- height: 100% !important;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
}
#sark {
@@ -149,16 +179,20 @@ svg {
text-align: center;
}
+.muutused h4 {
+ padding-top: .5rem;
+}
+
.fileUpload {
- margin-top: 5px;
+ margin-top: 2px;
}
.textPos, .nulliBtn{
- margin-top: 10px;
+ margin-top: 5px;
}
.textAddWrapper{
- margin: 10px;
+ margin: 5px;
}
.textAddWrapper *{
@@ -170,7 +204,7 @@ svg {
}
.nulliBtn {
- background-color: red !important;
+ background-color: red;
}
.textAddWrapper button {
@@ -179,7 +213,7 @@ svg {
border-radius: 4px;
font-size:1.3rem;
color:white;
- padding: 10px;
+ padding: 5px;
margin: 0 2px;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 07:28:24 +0000