From 9a4d6be0ca9cb86ef56acdbf8bcc1fe9f920a19c Mon Sep 17 00:00:00 2001
From: Rasmus <rasmus.luha@gmail.com>
Date: Sun, 2 Apr 2023 00:30:04 +0300
Subject: plakat Done, all Games Done!!
---
rannak/mangud/partorg/plakat.bak/img/avatar.png | Bin 657556 -> 0 bytes
rannak/mangud/partorg/plakat.bak/img/lenin.png | Bin 37366 -> 0 bytes
rannak/mangud/partorg/plakat.bak/img/nazi.png | Bin 20381 -> 0 bytes
.../mangud/partorg/plakat.bak/img/normalSelect.cur | Bin 4286 -> 0 bytes
rannak/mangud/partorg/plakat.bak/img/redStar.png | Bin 39590 -> 0 bytes
rannak/mangud/partorg/plakat.bak/img/stalin.jpg | Bin 168805 -> 0 bytes
.../mangud/partorg/plakat.bak/img/stalinAddOn.png | Bin 976997 -> 0 bytes
rannak/mangud/partorg/plakat.bak/img/testImg.jpg | Bin 498451 -> 0 bytes
rannak/mangud/partorg/plakat.bak/img/veekogud.jpg | Bin 223291 -> 0 bytes
rannak/mangud/partorg/plakat.bak/index.html | 125 ---------
rannak/mangud/partorg/plakat.bak/main.js | 224 ----------------
rannak/mangud/partorg/plakat.bak/style.css | 188 -------------
rannak/mangud/partorg/plakat/img/malevBlank.png | Bin 0 -> 690413 bytes
rannak/mangud/partorg/plakat/img/stalinBlank.png | Bin 0 -> 25223827 bytes
rannak/mangud/partorg/plakat/img/veekogudBlank.png | Bin 0 -> 21683348 bytes
.../mangud/partorg/plakat/img/viisAastakBlank.png | Bin 0 -> 12708001 bytes
rannak/mangud/partorg/plakat/index.html | 148 ++++++-----
rannak/mangud/partorg/plakat/script.js | 294 +++++++++++++++++----
rannak/mangud/partorg/plakat/styles.css | 64 +++--
19 files changed, 368 insertions(+), 675 deletions(-)
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/avatar.png
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/lenin.png
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/nazi.png
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/normalSelect.cur
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/redStar.png
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/stalin.jpg
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/testImg.jpg
delete mode 100644 rannak/mangud/partorg/plakat.bak/img/veekogud.jpg
delete mode 100644 rannak/mangud/partorg/plakat.bak/index.html
delete mode 100644 rannak/mangud/partorg/plakat.bak/main.js
delete mode 100644 rannak/mangud/partorg/plakat.bak/style.css
create mode 100644 rannak/mangud/partorg/plakat/img/malevBlank.png
create mode 100644 rannak/mangud/partorg/plakat/img/stalinBlank.png
create mode 100644 rannak/mangud/partorg/plakat/img/veekogudBlank.png
create mode 100644 rannak/mangud/partorg/plakat/img/viisAastakBlank.png
(limited to 'rannak/mangud/partorg')
diff --git a/rannak/mangud/partorg/plakat.bak/img/avatar.png b/rannak/mangud/partorg/plakat.bak/img/avatar.png
deleted file mode 100644
index 485a70c..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/avatar.png and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/lenin.png b/rannak/mangud/partorg/plakat.bak/img/lenin.png
deleted file mode 100644
index e36df3d..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/lenin.png and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/nazi.png b/rannak/mangud/partorg/plakat.bak/img/nazi.png
deleted file mode 100644
index 87e616e..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/nazi.png and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur b/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur
deleted file mode 100644
index fdd943c..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/normalSelect.cur and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/redStar.png b/rannak/mangud/partorg/plakat.bak/img/redStar.png
deleted file mode 100644
index b6eee79..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/redStar.png and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/stalin.jpg b/rannak/mangud/partorg/plakat.bak/img/stalin.jpg
deleted file mode 100644
index bc0a3a5..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/stalin.jpg and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png b/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png
deleted file mode 100644
index d3e05fd..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/stalinAddOn.png and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/testImg.jpg b/rannak/mangud/partorg/plakat.bak/img/testImg.jpg
deleted file mode 100644
index d88d950..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/testImg.jpg and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg b/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg
deleted file mode 100644
index 23f04ab..0000000
Binary files a/rannak/mangud/partorg/plakat.bak/img/veekogud.jpg and /dev/null differ
diff --git a/rannak/mangud/partorg/plakat.bak/index.html b/rannak/mangud/partorg/plakat.bak/index.html
deleted file mode 100644
index 4754c9b..0000000
--- a/rannak/mangud/partorg/plakat.bak/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Plakat</title>
- <!-- Bootstrap - CSS only -->
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
-
- <link rel="stylesheet" href="style.css">
-</head>
-<body>
- <section class="wrapper">
-
- <div id="toolbar">
-
- <div class="intro">
- <h1>Kujunda Plakatit</h1>
- <p>Vali välja üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemisele.</p>
- <button class="moveOn" disabled>Liigu Edasi</button>
-
- <!-- Button trigger modal -->
- <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal">
- Sissejuhatus
- </button>
-
- <button id="clear">Puhasta</button>
- </div>
-
- <div class="inputs">
- <form>
- <p class="toolbarDiv">
- <label for="stroke">Värv</label>
- <input id="stroke" name='stroke' type="color">
- </p>
-
- <p class="toolbarDiv">
- <label for="lineWidth">Joone Paksus</label>
- <input id="lineWidth" name='lineWidth' type="number" value="5" maxlength="1">
- </p>
-
- <!--
- <button id="clear">Puhasta</button>
- -->
- </form>
- </div>
-
-
-
- <!-- Image Pick-->
- <h2 class="ValiTxt"> Vali Plakat </h2>
- <div class="pickingSec">
- <img id="stalin" class="pickImg picked" alt="Jossup Saloninjo Plakat" src="img/stalin.jpg"/>
- <img id="veekogud" class="pickImg" alt="Veekogude Plakat" src="img/veekogud.jpg"/>
- <img id="testing" class="pickImg" alt="Veekogude Plakat" src="img/testImg.jpg"/>
- </div>
-
-
- <!-- Add-Ons Pick
- <h2 class="ValiTxt"> Vali Lisasid </h2>
- <div class="pickingSec">
- <img id="redStar" class="pickImg" alt="red star" src="img/redStar.png"/>
- <img id="lenin" class="pickImg" alt="lenin" src="img/lenin.png"/>
- <img id="nazi" class="pickImg" alt="Nazi Flag" src="img/nazi.png"/>
- <img id="stalinAddOn" class="pickImg" alt="Stalin" src="img/stalinAddOn.png"/>
- </div>
- -->
-
- </div>
-
-
-
-
- <div class="canvasWrap">
- <canvas id="drawing-board"></canvas>
- </div>
-
-
- </section>
-
-
-
-
- <!-- Modal -->
- <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
-
- <div class="modal-header">
- <div class="modalHeaderWrapper">
- <h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5>
- </div>
- <img class="avatar" alt="avatar" src="img/avatar.png"/>
- </div>
-
- <div class="modal-body">
-
- Peale ajalehe väljalõigete olen aastate jooksul kogunud ja säilitanud meeleolukaid plakateid nõukogudeaja kuldsest elust.
- <br/>
- Jagan siinkohal teiega, seltsimehed noored, nelja nendest. Plakatid on pärit erinevatest aastakümnetest: <br/>1950ndad, 1960ndad, 1970ndad ja 1980ndad aastad.
- <br/>
- <br/>
- Palun uurige nende plakatite sisu ja vormi.
- <br/>
- Õppige, õppige, õppige! Kas tajute, millisesse kümnendisse iga plakat kuulub?
- <br/> <br/>
- <strong>
- Mõelge plakatitele välja uus, kaasaega sobiv lööklause. Samuti kaunistage ja täiendage plakatit kaasaegsete kunsiliste detailidega. Ka huumor on lubatud!
- </strong>
-
- </div>
-
- </div>
- </div>
- </div>
-
-
-
-
- <script src="./main.js"></script>
-
- <!-- JavaScript Bundle with Popper -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
-</body>
-</html>
diff --git a/rannak/mangud/partorg/plakat.bak/main.js b/rannak/mangud/partorg/plakat.bak/main.js
deleted file mode 100644
index 11809cb..0000000
--- a/rannak/mangud/partorg/plakat.bak/main.js
+++ /dev/null
@@ -1,224 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
- let btn = document.querySelector('.modalButton');
- btn.click();
-});
-
-
-console.log("FAAAAK");
-
-/* Inital Setup*/
-
-const canvas = document.getElementById('drawing-board');
-const toolbar = document.getElementById('toolbar');
-const ctx = canvas.getContext('2d');
-
-let canvasOffsetX = canvas.offsetLeft;
-let canvasOffsetY = canvas.offsetTop;
-
-let CurImage = document.getElementById("stalin");
-
-canvas.width = window.innerWidth - canvasOffsetX;
-canvas.height = window.innerHeight - canvasOffsetY;
-
-
-
-function copyImageToCanvas(image, x, y) {
- ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
-}
-
-
-
-
-// Initial Drawring
-setTimeout(() => {
- copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
-}, 300);
-
-
-
-window.onresize = () => {
- canvasOffsetX = canvas.offsetLeft;
- canvasOffsetY = canvas.offsetTop;
- canvas.width = window.innerWidth - canvasOffsetX;
- canvas.height = window.innerHeight - canvasOffsetY;
- copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
-}
-
-
-
-
-/* EventHandlers and stuff*/
-
-let addOnHasBeenAdded = false;
-let addOnActive = false;
-let newAddOn;
-let hasPainted = false;
-
-let isPainting = false;
-let lineWidth = 5;
-let startX;
-let startY;
-
-const pildid = new Array();
-const addOns = new Array();
-
-toolbar.addEventListener('click', e => {
-
-
- //Plakatid
- const stalinImg = document.getElementById("stalin");
- const veekogudImg = document.getElementById("veekogud");
- const testing = document.getElementById("testing");
-
- pildid.push(stalinImg);
- pildid.push(veekogudImg);
- pildid.push(testing);
-
-
- //Addons
-
- const naziImg = document.getElementById("nazi");
- const lenin = document.getElementById("lenin");
- const redStar = document.getElementById("redStar");
- const stalinAddOn = document.getElementById("stalinAddOn");
-
- addOns.push(naziImg);
- addOns.push(lenin);
- addOns.push(redStar);
- addOns.push(stalinAddOn);
-
-
-
-
- if (e.target.id === "stalin" || e.target.id === "veekogud" || e.target.id === "testing") {
- for (el in pildid) {
- pildid[el].classList.remove("picked");
- }
- let newPicked = document.getElementById(e.target.id);
- newPicked.classList.add("picked");
-
- // Draw New Pick
- CurImage = newPicked;
- copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
- moveOnDisable();
- }
-
-
- else if (e.target.id === 'clear') {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY);
- moveOnDisable();
- }
-
-
- else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') {
- addOnActive = true;
- document.body.style.cursor = "url('img/normalSelect.cur'), auto";
-
- for (el in addOns) {
- addOns[el].classList.remove("addOnPicked");
- }
-
- newAddOn = document.getElementById(e.target.id);
- newAddOn.classList.add("addOnPicked");
- }
-
-
-});
-
-
-
-canvas.addEventListener('click', e => {
-
- if(addOnActive == true){
- addOnActive = false;
- document.body.style.cursor = "auto";
-
- for (el in addOns) {
- addOns[el].classList.remove("addOnPicked");
- }
-
- let xCord = e.offsetX - (newAddOn.clientWidth / 2)
- let yCord = e.offsetY - (newAddOn.clientHeight / 2)
- ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight);
-
-
- addOnHasBeenAdded = true;
- if (hasPainted)
- moveOnEnable();
- }
-});
-
-
-
-
-
-
-
-
-/* Drawing stuff from here */
-
-toolbar.addEventListener('change', e => {
- if(e.target.id === 'stroke') {
- ctx.strokeStyle = e.target.value;
- }
-
- if(e.target.id === 'lineWidth') {
- lineWidth = e.target.value;
- }
-
-});
-
-
-
-const draw = (e) => {
- if(!isPainting) {
- return;
- }
-
- ctx.lineWidth = lineWidth;
- ctx.lineCap = 'round';
-
- ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
- //ctx.lineTo(e.clientX - abiOffset, e.clientY);
- ctx.stroke();
-
- hasPainted = true;
- if (addOnHasBeenAdded)
- moveOnEnable();
-}
-
-
-
-canvas.addEventListener('mousedown', (e) => {
- isPainting = true;
- startX = e.clientX;
- startY = e.clientY;
-});
-
-
-
-canvas.addEventListener('mouseup', e => {
- isPainting = false;
- ctx.stroke();
- ctx.beginPath();
-});
-
-
-canvas.addEventListener('mousemove', draw);
-
-
-
-
-// Move On Stuff
-
-function moveOnEnable(){
- const btn = document.querySelector(".moveOn");
- btn.disabled = false;
- btn.onclick = () => location.href = "../sonaragastik";
-}
-
-function moveOnDisable(){
- const btn = document.querySelector(".moveOn");
- btn.disabled = true;
-}
diff --git a/rannak/mangud/partorg/plakat.bak/style.css b/rannak/mangud/partorg/plakat.bak/style.css
deleted file mode 100644
index 215c073..0000000
--- a/rannak/mangud/partorg/plakat.bak/style.css
+++ /dev/null
@@ -1,188 +0,0 @@
-body {
- height: 100%;
- overflow: hidden;
- color: white;
- background-color: #43464b;
-}
-
-h1 {
- color: #a1000e;
- font-weight: bold;
-}
-
-
-/* Move on ja Sissejuhatus Button */
-
-.avatar {
- border-radius: 20px;
- width: 100%;
- max-width: 15rem;
-}
-
-
-.modalHeaderWrapper{
- text-align: center;
- margin: 0;
- width: 100%;
-}
-
-button:disabled{
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-.moveOn{
- display: inline-block;
- border: none;
- padding: 6px 12px;
- margin-botton: 0;
- font-size: 1rem;
- font-weight: normal;
- text-align: center;
- cursor: pointer;
- border-radius: 4px;
- background-color: #4BB543;
- color: white;
-}
-
-/* Modal Stuff */
-
-
-.closeModalButton {
- border-radius: 50px;
-}
-
-.modalButton{
- background-color: rgba(0,136,169,1);
- border: none;
- border-radius: 50px;
- cursor: pointer;
- transition: all 0.3 ease 0;
- font-size: 1.2rem;
- text-align: center;
- margin-left: 30px;
-}
-
-.modalButton:hover{
- background-color: rgba(0,136,169,0.8);
-}
-
-
-
-/* Main */
-
-.wrapper {
- height: 100%;
- display: flex;
-}
-
-/* Toolbar */
-.intro{
- text-align: center;
- border-bottom: 2px solid gray;
- padding: 7px;
-}
-
-
-#toolbar {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 5px;
- width: 20%;
- min-width:350px;
- background-color: #43464b;
-}
-
-#clear{
- background-color: #1565c0;
- border: none;
- border-radius: 4px;
- font-size:1.3rem;
- color:white;
- padding: 2px;
-}
-
-#toolbar * {margin-bottom: 6px;}
-#toolbar input {width: 4rem;}
-
-.toolbarDiv {width: 100%;}
-
-form {
- display: flex;
- align-items: center;
-}
-
-label {
- display: table-cell;
- font-size: 1.2rem;
-}
-
-
-
-/* Img Picker */
-.pickingSec {
- height: 50%;
- overflow: hidden;
- overflow-y: scroll;
-}
-
-
-.valiTxt {
- border-bottom: 4px solid gray;
- padding-top: 10px;
-}
-
-
-.picked{
- border: 2px solid lime;
-}
-
-
-.addOnPicked{
- border: 2px solid aqua;
-}
-
-
-
-.pickImg {
- width: 50%;
- height: auto;
- padding: 10px;
- margin-left: calc(25% - 5px);
-}
-
-
-
-/* Canvas */
-canvas{
- display: block;
- margin: 0 auto;
-}
-
-
-
-
-
-/* Responsivness */
-
-@media screen and (max-width: 1400px) {
- .pickImg {
- width: 30%;
- height: auto;
- padding: 7px;
- margin-left: calc(7% - 21px);
- }
-
-}
-
-
-@media screen and (max-width: 900px) {
- .pickImg {
- width: 24%;
- height: auto;
- padding: 3px;
- margin-left: calc(1% - 10px);
- }
-
-}
diff --git a/rannak/mangud/partorg/plakat/img/malevBlank.png b/rannak/mangud/partorg/plakat/img/malevBlank.png
new file mode 100644
index 0000000..85c10f1
Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/malevBlank.png differ
diff --git a/rannak/mangud/partorg/plakat/img/stalinBlank.png b/rannak/mangud/partorg/plakat/img/stalinBlank.png
new file mode 100644
index 0000000..7efdc4e
Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/stalinBlank.png differ
diff --git a/rannak/mangud/partorg/plakat/img/veekogudBlank.png b/rannak/mangud/partorg/plakat/img/veekogudBlank.png
new file mode 100644
index 0000000..85570b1
Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/veekogudBlank.png differ
diff --git a/rannak/mangud/partorg/plakat/img/viisAastakBlank.png b/rannak/mangud/partorg/plakat/img/viisAastakBlank.png
new file mode 100644
index 0000000..fc0215c
Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/viisAastakBlank.png differ
diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html
index 85bb6bc..0ac5e90 100644
--- a/rannak/mangud/partorg/plakat/index.html
+++ b/rannak/mangud/partorg/plakat/index.html
@@ -14,10 +14,10 @@
<div class="container text-center text-white align-items-center pb-5">
<h1>Plakatid</h1>
- <p>Leia iga plakati õige ajastu, ning muuda ka plakati teksti.
- <br/>
- Kui oled valinud õige ajastu ja muutunud plakati lause, muutub see roheliseks,
- näitamaks, et sellega on kõik korras.
+ <p>
+ Leia iga plakati õige ajastu, ning muuda ka plakati teksti.
+ <br>
+ NB: Uut loosungit saad lisada pärast seda, kui oled valinud õige ajastu.
</p>
<div class="row">
@@ -102,31 +102,36 @@
<div class="tab-pane fade show active p-3 text-white" id="nav-60ndad" role="tabpanel" aria-labelledby="nav-60ndad-tab">
<div class="wrapper">
- <div class="plakatWrapper stalin">
- <span class="addedText">Testing Testing</span>
- </div>
-
- <div class="innerWrapper">
+ <div class="plakatWrapper stalin"></div>
- <select>
+ <div id="stalin" class="inputWrapper">
+ <select id="stalin" class="50">
<option disabled hidden selected>Vali</option>
- <option value="1950ndad">1950. aastad</option>
- <option value="1960ndad">1960. aastad</option>
- <option value="1960ndad">1970. aastad</option>
- <option value="1970ndad">1980. aastad</option>
+ <option value="50">1950ndad</option>
+ <option value="60">1960ndad</option>
+ <option value="70">1970ndad</option>
+ <option value="80">1980ndad</option>
</select>
+
<strong><label for="stalin">Lisa Tekst</label></strong>
- <input name="stalin" type="text" value=""/>
- <button class="muuda">Muuda</button>
+ <input disabled name="stalin" type="text" value=""/>
+ <button disabled class="muuda">Lisa</button>
<div>
- <button class="ules">↑</button>
- <button class="alla">↓</button>
- <button class="vasak">←</button>
- <button class="parem">→</button>
+ <button disabled class="ules">↑</button>
+ <button disabled class="alla">↓</button>
+ <button disabled class="vasak">←</button>
+ <button disabled class="parem">→</button>
+ <button disabled class="pluss">+</button>
+ <button disabled class="miinus">-</button>
</div>
+ <label for="color">Värv:</label>
+ <input disabled size="1" type="color" id="color" value="#ffffff"/>
+
+ <button disabled class="reset">Taasta</button>
+
</div>
</div>
@@ -137,30 +142,35 @@
<div class="tab-pane fade p-3 text-white" id="nav-70ndad" role="tabpanel" aria-labelledby="nav-70ndad-tab">
<div class="wrapper">
- <div class="plakatWrapper veekogud">
- <span class="addedText">Veekogud</span>
- </div>
+ <div class="plakatWrapper veekogud"></div>
- <div class="innerWrapper">
- <select>
+ <div id="veekogud" class="inputWrapper">
+ <select id="veekogud" class="60">
<option disabled hidden selected>Vali</option>
- <option value="1950ndad">1950ndad</option>
- <option value="1960ndad">1960ndad</option>
- <option value="1960ndad">1970ndad</option>
- <option value="1970ndad">1980ndad</option>
+ <option value="50">1950ndad</option>
+ <option value="60">1960ndad</option>
+ <option value="70">1970ndad</option>
+ <option value="80">1980ndad</option>
</select>
<strong><label for="veekogud">Lisa Tekst</label></strong>
- <input name="veekogud" type="text" value=""/>
- <button class="muuda" >Muuda</button>
+ <input disabled name="veekogud" type="text" value=""/>
+ <button disabled class="muuda">Lisa</button>
<div>
- <button class="ules">↑</button>
- <button class="alla">↓</button>
- <button class="vasak">←</button>
- <button class="parem">→</button>
+ <button disabled class="ules">↑</button>
+ <button disabled class="alla">↓</button>
+ <button disabled class="vasak">←</button>
+ <button disabled class="parem">→</button>
+ <button disabled class="pluss">+</button>
+ <button disabled class="miinus">-</button>
</div>
+ <label for="color">Värv:</label>
+ <input disabled size="1" type="color" id="color" value="#ffffff"/>
+
+ <button disabled class="reset">Taasta</button>
+
</div>
</div>
@@ -176,30 +186,34 @@
<div class="tab-pane fade p-3 text-white" id="nav-80ndad" role="tabpanel" aria-labelledby="nav-80ndad-tab">
<div class="wrapper">
- <div class="plakatWrapper malev pikkPlakat">
- <span class="addedText">Malev</span>
- </div>
+ <div class="plakatWrapper malev pikkPlakat"></div>
- <div class="innerWrapper">
- <select>
+ <div id="malev" class="inputWrapper">
+ <select id="malev" class="70">
<option disabled hidden selected>Vali</option>
- <option value="1950ndad">1950ndad</option>
- <option value="1960ndad">1960ndad</option>
- <option value="1960ndad">1970ndad</option>
- <option value="1970ndad">1980ndad</option>
+ <option value="50">1950ndad</option>
+ <option value="60">1960ndad</option>
+ <option value="70">1970ndad</option>
+ <option value="80">1980ndad</option>
</select>
<strong><label for="malev">Lisa Tekst</label></strong>
- <input name="malev" type="text" value=""/>
- <button class="muuda">Muuda</button>
+ <input disabled name="malev" type="text" value=""/>
+ <button disabled class="muuda">Lisa</button>
<div>
- <button class="ules">↑</button>
- <button class="alla">↓</button>
- <button class="vasak">←</button>
- <button class="parem">→</button>
+ <button disabled class="ules">↑</button>
+ <button disabled class="alla">↓</button>
+ <button disabled class="vasak">←</button>
+ <button disabled class="parem">→</button>
+ <button disabled class="pluss">+</button>
+ <button disabled class="miinus">-</button>
</div>
+ <label for="color">Värv:</label>
+ <input disabled size="1" type="color" id="color" value="#ffffff"/>
+
+ <button disabled class="reset">Taasta</button>
</div>
@@ -211,30 +225,34 @@
<div class="tab-pane fade p-3 text-white" id="nav-90ndad" role="tabpanel" aria-labelledby="nav-90ndad-tab">
<div class="wrapper">
- <div class="plakatWrapper viisAastak pikkPlakat">
- <span class="addedText">ViisAastak</span>
- </div>
+ <div class="plakatWrapper viisAastak pikkPlakat"></div>
- <div class="innerWrapper">
- <select>
+ <div id="viisAastak" class="inputWrapper">
+ <select id="viisAastak" class="80">
<option disabled hidden selected>Vali</option>
- <option value="1950ndad">1950ndad</option>
- <option value="1960ndad">1960ndad</option>
- <option value="1960ndad">1970ndad</option>
- <option value="1970ndad">1980ndad</option>
+ <option value="50">1950ndad</option>
+ <option value="60">1960ndad</option>
+ <option value="70">1970ndad</option>
+ <option value="80">1980ndad</option>
</select>
<strong><label for="viisAastak">Lisa Tekst</label></strong>
- <input name="viisAastak" type="text" value=""/>
- <button class="muuda" >Muuda</button>
+ <input disabled name="viisAastak" type="text" value=""/>
+ <button disabled class="muuda">Lisa</button>
<div>
- <button class="ules">↑</button>
- <button class="alla">↓</button>
- <button class="vasak">←</button>
- <button class="parem">→</button>
+ <button disabled class="ules">↑</button>
+ <button disabled class="alla">↓</button>
+ <button disabled class="vasak">←</button>
+ <button disabled class="parem">→</button>
+ <button disabled class="pluss">+</button>
+ <button disabled class="miinus">-</button>
</div>
+ <label for="color">Värv:</label>
+ <input disabled size="1" type="color" id="color" value="#ffffff"/>
+
+ <button disabled class="reset">Taasta</button>
</div>
diff --git a/rannak/mangud/partorg/plakat/script.js b/rannak/mangud/partorg/plakat/script.js
index 4d4ee36..7ec4b7e 100644
--- a/rannak/mangud/partorg/plakat/script.js
+++ b/rannak/mangud/partorg/plakat/script.js
@@ -5,30 +5,220 @@ document.addEventListener('DOMContentLoaded', () => {
+let ajastudCounter = 0
+let addedTexts = new Array();
+
+
+// New Text Adding
+let newTextBtns = document.querySelectorAll(".muuda");
+
+newTextBtns.forEach(btn => {
+ btn.addEventListener("click" , e => {
+
+
+ for (el of e.target.parentElement.parentElement.childNodes[1].childNodes) {
+ console.log(el);
+ if (el.classList != undefined && el.classList.contains("addedText")){
+ el.classList.remove("addedText");
+ console.log('dingdong');
+ }
+ }
+
+
+ let inputText = e.target.parentElement.childNodes[5].value;
+
+ let mySpan = document.createElement('span');
+ mySpan.classList.add('addedText');
+ mySpan.classList.add('oldAddedText');
+ mySpan.innerHTML = inputText;
+
+
+ let parentEl= e.target.parentElement.parentElement.childNodes[1];
+ parentEl.appendChild(mySpan);
+
+ mySpan.style.top = "50%";
+ mySpan.style.left = "35%";
+
+ e.target.parentElement.childNodes[5].value = '';
+
+
+ if (!addedTexts.includes(parentEl.classList[1]))
+ addedTexts.push(parentEl.classList[1]);
+
+
+
+ // Check If Done
+ if (addedTexts.length >= 4)
+ checkIfAllGood();
+
+
+ });
+})
+
+
+
+
+// Start Text Edit
+
+let selectors = document.querySelectorAll("select");
+selectors.forEach(el => {
+ el.addEventListener("change", () => {
+ if(el.className == el.value)
+ enableEditing(el);
+ });
+});
+
+
+
+function enableEditing(el){
+ ajastudCounter += 1;
+
+ el.style.backgroundColor = 'lime';
+ el.style.border = 'none';
+ el.style.borderRadius = '7px';
+ el.disabled = true;
+
+
+ let imgDiv = el.parentElement.parentElement.childNodes[1];
+ let blankImgLoc = `img/${el.id}Blank.png`;
+
+ imgDiv.style.background = "url(" + blankImgLoc + ") no-repeat center";
+ imgDiv.style.backgroundSize = "100% 100%";
+
+ let parent = el.parentElement.id;
+
+ // Enable buttons
+ let btns = document.querySelectorAll(`#${parent} button`);
+ btns.forEach(btn => {
+ btn.disabled = false;
+ });
+
+
+ // Enable inputs
+ let inputs = document.querySelectorAll(`#${parent} input`);
+ inputs.forEach(input => {
+ input.disabled = false;
+ });
+
+
+}
+
+
+
+// Reset Button
+let resetBtns = document.querySelectorAll(".reset");
+resetBtns.forEach(btn => {
+ btn.addEventListener("click", () => {
+
+ let imgDiv = btn.parentElement.parentElement.childNodes[1];
+ imgDiv.innerHTML = '';
+
+ addedTexts = new Array();
+ ajastudCounter = 0;
+
+
+ });
+});
+
+
+
+// Color Changer
+
+let colorPickers = document.querySelectorAll("#color");
+colorPickers.forEach(el => {
+
+ el.addEventListener("change", () => {
+
+ for (text of el.parentElement.parentElement.childNodes[1].childNodes){
+ if (text.classList != undefined && text.classList.contains("addedText")){
+
+
+ let pickedColor = el.value;
+ text.style.color = pickedColor;
+
+
+ }
+ }
+ });
+});
+
+
+
+
+
+// fontSize
+
+let fontIncs = document.querySelectorAll(".pluss");
+fontIncs.forEach(el => {
+ el.addEventListener("click", (e) => {
+
+ for (text of el.parentElement.parentElement.parentElement.childNodes[1].childNodes){
+ if (text.classList != undefined && text.classList.contains("addedText")){
+
+
+ var font = window.getComputedStyle(text, null).getPropertyValue('font-size');
+ var fontSize = parseFloat(font);
+
+ text.style.fontSize = (fontSize + 1) + 'px';
+
+
+ }
+ }
+ });
+});
+
+
+
+let fontDecs = document.querySelectorAll(".miinus");
+fontDecs.forEach(el => {
+ el.addEventListener("click", (e) => {
+
+ for (text of el.parentElement.parentElement.parentElement.childNodes[1].childNodes){
+ if (text.classList != undefined && text.classList.contains("addedText")){
+
+
+ var font = window.getComputedStyle(text, null).getPropertyValue('font-size');
+ var fontSize = parseFloat(font);
+
+ text.style.fontSize = (fontSize - 1) + 'px';
+
+
+ }
+ }
+ });
+});
+
+
-// FROM HERE TODO
-// Init Setup - to access later
-let dingDong = document.querySelector(".addedText");
-dingDong.style.top = "50%";
-dingDong.style.left = "50%";
// Position
-const ules = document.querySelectorAll(".ules");
-const alla = document.querySelectorAll(".alla");
+const ules = document.querySelectorAll(".ules");
+const alla = document.querySelectorAll(".alla");
const vasak = document.querySelectorAll(".vasak");
const parem = document.querySelectorAll(".parem");
+
+
ules.forEach(el => {
el.addEventListener("click" , e => {
- let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+ //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+ let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes;
+
+ let theText;
+ for (el of texts){
+ if (el.classList != undefined && el.classList.contains("addedText"))
+ theText = el;
+ }
+
+
let curTop = theText.style["top"];
curTop = curTop.substring(0, curTop.length-1)
@@ -37,9 +227,20 @@ ules.forEach(el => {
});
})
+
+
alla.forEach(el => {
el.addEventListener("click" , e => {
- let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+ //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
+ let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes;
+
+ let theText;
+ for (el of texts){
+ if (el.classList != undefined && el.classList.contains("addedText"))
+ theText = el;
+ }
+
+
let curTop = theText.style["top"];
curTop = curTop.substring(0, curTop.length-1)
@@ -48,70 +249,71 @@ alla.forEach(el => {
});
})
+
+
vasak.forEach(el => {
el.addEventListener("click", e => {
- let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
- let curLeft = theText.style["left"];
- curLeft = curLeft.substring(0, curLeft.length-1)
+ //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
- console.log("Vasak");
- console.log(theText.innerHTML);
+ let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes;
- if (Number(curLeft) >= 5)
- theText.style["left"] = Number(curLeft)-5+"%";
- });
-})
+ let theText;
+ for (el of texts){
+ if (el.classList != undefined && el.classList.contains("addedText"))
+ theText = el;
+ }
+
+
-parem.forEach(el => {
- el.addEventListener("click", e => {
- let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
let curLeft = theText.style["left"];
curLeft = curLeft.substring(0, curLeft.length-1)
if (Number(curLeft) >= 5)
- theText.style["left"] = Number(curLeft)+5+"%";
+ theText.style["left"] = Number(curLeft)-5+"%";
});
})
-// Muuda Text button
-const muudaBtn = document.querySelector(".muuda");
+parem.forEach(el => {
+ el.addEventListener("click", e => {
+ //let theText = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes[1];
-muudaBtn.addEventListener("click", e => {
- console.log(e);
-});
+ let texts = e.target.parentElement.parentElement.parentElement.childNodes[1].childNodes;
+
+ let theText;
+ for (el of texts){
+ if (el.classList != undefined && el.classList.contains("addedText"))
+ theText = el;
+ }
+ let curLeft = theText.style["left"];
+ curLeft = curLeft.substring(0, curLeft.length-1)
+
+ // Get the width of text itself and add the "left".
+ let offWi = theText.offsetWidth;
+ let parentWi = theText.parentElement.clientWidth;
+ let textWi = (offWi/parentWi)*100;
+ if (Number(curLeft)+textWi <= 95)
+ theText.style["left"] = Number(curLeft)+5+"%";
+
+
+ });
+})
function checkIfAllGood(){
- let rightDone = [];
-
- for (let j=0; j < lists.length; j++){
- const list = lists[j];
- if (list.className.includes("startBasket"))
- continue;
- else if (list.children.length == 1){
- if (list.id == list.children[0].id){
- if (!rightDone.includes(list.id))
- rightDone.push(list.id);
- }
- }
- } // For loop end
-
- if (rightDone.length == 6) {
- const btn = document.querySelector(".moveOn");
- btn.disabled = false;
- btn.onclick = () => location.href = "";
- }
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ btn.onclick = () => location.href = "";
}
diff --git a/rannak/mangud/partorg/plakat/styles.css b/rannak/mangud/partorg/plakat/styles.css
index 67f8bbe..b2405f9 100644
--- a/rannak/mangud/partorg/plakat/styles.css
+++ b/rannak/mangud/partorg/plakat/styles.css
@@ -28,7 +28,9 @@ button:disabled{
cursor: not-allowed;
}
-
+input[type=text] {
+ width: 100%;
+}
@@ -48,11 +50,6 @@ button:disabled{
-
-.closeModalButton {
- border-radius: 50px;
-}
-
.modalButton{
display: inline-block;
padding: 6px 12px;
@@ -89,20 +86,27 @@ button:disabled{
justify-content: center;
}
-.plakatWrapper, .innerWrapper{
- width: 48%;
-}
-.innerWrapper{
- padding: 2rem;
+.plakatWrapper{
+ width: 60%;
+ overflow-wrap: break-word;
+ position: relative;
+ overflow: hidden;
+ clear: both;
+}
+
+.inputWrapper{
+ padding-left: 2rem;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: right;
align-items: center;
}
+
+
/* Input stuff*/
select{
@@ -112,7 +116,6 @@ select{
label{
padding: 1rem;
- padding-top: 4rem;
font-size: 1.2rem;
}
@@ -121,11 +124,11 @@ input {
width: 75%;
}
-.innerWrapper button {
+.inputWrapper button {
margin-top: 1rem;
}
-.innerWrapper button {
+.inputWrapper button {
background-color: #596B6E;
border: none;
border-radius: 4px;
@@ -135,9 +138,21 @@ input {
}
+.inputWrapper button:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+select:disabled{cursor: not-allowed}
+input:disabled{
+ cursor: not-allowed
+ opacity: 0.5;
+}
+.reset{
+ background-color: red !important;
+}
@@ -145,8 +160,8 @@ input {
.stalin {
background: url("img/stalin.jpg") no-repeat center;
- background-size: 100%;
- font-size: 2rem;
+ background-size: 100% 100%;
+ font-size: 1rem;
text-align: center;
color: black;
}
@@ -154,8 +169,8 @@ input {
.veekogud {
background: url("img/veekogud.jpg") no-repeat center;
- background-size: 100%;
- font-size: 2rem;
+ background-size: 100% 100%;
+ font-size: 1rem;
text-align: center;
color: black;
}
@@ -164,7 +179,7 @@ input {
.malev {
background: url("img/malev.jpg") no-repeat center;
background-size: 100% 100%;
- font-size: 2rem;
+ font-size: 1rem;
text-align: center;
color: black;
}
@@ -173,7 +188,7 @@ input {
.viisAastak {
background: url("img/viisAastak.jpg") no-repeat center;
background-size: 100% 100%;
- font-size: 2rem;
+ font-size: 1rem;
text-align: center;
color: black;
}
@@ -182,12 +197,7 @@ input {
height: 78vh;
}
-.plakatWrapper{
- position: relative;
- overflow: hidden;
- clear: both;
-}
-.addedText {
+.addedText, .oldAddedText {
position: absolute;
}
--
cgit v1.2.3