sark FIX, Very Nice

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%;