diff options
| -rwxr-xr-x | rannak/mangud/uliopilane/tSark/index.html | 6 | ||||
| -rwxr-xr-x | rannak/mangud/uliopilane/tSark/main.js | 39 | ||||
| -rwxr-xr-x | rannak/mangud/uliopilane/tSark/style.css | 15 |
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%; |