summaryrefslogtreecommitdiff
path: root/rannak/mangud/uliopilane/tSark
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/uliopilane/tSark')
-rwxr-xr-xrannak/mangud/uliopilane/tSark/index.html6
-rwxr-xr-xrannak/mangud/uliopilane/tSark/main.js39
-rwxr-xr-xrannak/mangud/uliopilane/tSark/style.css15
3 files changed, 38 insertions, 22 deletions
diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html
index b85127e..806303d 100755
--- a/rannak/mangud/uliopilane/tSark/index.html
+++ b/rannak/mangud/uliopilane/tSark/index.html
@@ -15,7 +15,7 @@
<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="237" y="-77" transform="rotate(0)" >Tekst</text>
+ <text class="sarkTekst doneTekst" id="sarkTekst" x="237" y="-77" transform="rotate(0)" >Tekst</text>
<!-- To avoid Text overflow -->
<clipPath id="clip1">
@@ -109,11 +109,12 @@
<h4>Lisa Pilt</h4>
<label for="image_input">Vali pilt:</label>
<input type="file" id="image_input" accept="image/jpg, image/png"/>
+ <button id="imgToCenterBtn" onclick="imgToCenter();">Pilt algusesse</button>
</div>
<div class="textPos">
- <h4>Kirjta tekst</h4>
+ <h4>Kirjuta tekst</h4>
<label for="sargiText">Vali tekst:</label>
<input id="sargiText" type="text" placeholder="Sinu tekst siia"/>
@@ -141,7 +142,6 @@
</div> <!-- TextPos End -->
<div>
- <label for="nulliBtn">Nulli särk:</label>
<button class="nulliBtn">Nulli särk</button>
</div>
diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js
index cc7ef3a..a91fbec 100755
--- a/rannak/mangud/uliopilane/tSark/main.js
+++ b/rannak/mangud/uliopilane/tSark/main.js
@@ -64,6 +64,7 @@ function nextText() {
let gi6 = document.querySelector("g")
newText.classList.add("sarkTekst")
+ newText.id = 'sarkTekst';
newText.innerHTML = "Uus Tekst";
// Move a little, so that new txt isnt exatly on top of old.
@@ -277,14 +278,13 @@ function mousedown(e) {
let posers4 = document.elementFromPoint(rect.left, rect.bottom).id;
// /// /////
- console.log(posers, posers2, posers3, posers4);
-
item.style.pointerEvents = "";
-
- if (posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark"){
+ //if ( posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark") {
+ if ( !(posers == "sark" || posers == "sarkTekst") || !(posers2 == "sark" || posers2 == "sarkTekst") ||
+ !(posers3 == "sark" || posers3 == "sarkTekst") || !(posers4 == "sark" || posers4 == "sarkTekst")) {
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
@@ -327,6 +327,8 @@ function mousedown(e) {
+
+
const resizers = document.querySelectorAll(".resizer");
let currentResizer;
let isResizing = false;
@@ -421,6 +423,7 @@ for (let resizer of resizers) {
}
+
// Seting up resize Pic Pos
let brr = document.querySelector("#sark").getBoundingClientRect();
let it = document.querySelector(".item").getBoundingClientRect();
@@ -431,6 +434,9 @@ Boop.style.top = brr.top + (brr.bottom - brr.top)/2 - (it.bottom - it.top)/2 +
+
+
+
/* Move on Button*/
function message(msg, color){
messageBox = document.querySelector(".messageBox");
@@ -440,11 +446,9 @@ function message(msg, 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();
@@ -453,6 +457,7 @@ chkBtn.addEventListener("click", (e) => {
message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red");
});
+
function moveOnEnable(){
const btn = document.querySelector(".moveOn");
btn.disabled = false;
@@ -466,7 +471,20 @@ function moveOnEnable(){
}
-// 6
+
+
+
+
+// Pic back to Center
+function imgToCenter(){
+ 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";
+}
+
+
+
@@ -509,13 +527,8 @@ nulliBtn.addEventListener("click", () => {
document.querySelector(".sarkTekst").style.fill = "black";
-
// 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";
-
+ imgToCenter();
// Moving IMg Corners
diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css
index fd6c352..808fbb8 100755
--- a/rannak/mangud/uliopilane/tSark/style.css
+++ b/rannak/mangud/uliopilane/tSark/style.css
@@ -168,10 +168,16 @@ svg {
font-size:1.3rem;
color:white;
padding: 10px;
- margin: 0 2px;
+ margin: .7rem;
font-size: 0.9rem;
}
+.nulliBtn {
+ margin-top: .7rem !important;
+ background-color: red !important;
+}
+
+
.muutused {
margin-top: 10px;
border-top: 2px solid gray;
@@ -180,7 +186,7 @@ svg {
}
.muutused h4 {
- padding-top: .5rem;
+ padding-top: 1.7rem;
}
.fileUpload {
@@ -203,10 +209,6 @@ svg {
cursor: pointer;
}
-.nulliBtn {
- background-color: red;
-}
-
.textAddWrapper button {
background-color: #596B6E;
border: none;
@@ -229,6 +231,7 @@ svg {
background-repeat: no-repeat;
background-size: 100%;
top: 50vh;
+ cursor: move;
/*
top: 50%;
right: 50%;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 03:22:27 +0000