From 402f21e5c60e4aba315e73e25b23b24422613de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kov=C3=A1ts=20Levente?= <tovask59@gmail.com>
Date: Sat, 23 Jan 2021 22:04:10 +0100
Subject: [PATCH] =?UTF-8?q?Hibajav=C3=ADt=C3=A1sok?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

escapeHtml, color parsing, képnéző betöltés/megjelenítés
---
 approve.php | 18 ++++++++++++++----
 js/color.js |  2 +-
 js/phw.js   |  8 ++++++--
 phw.css     |  7 ++++++-
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/approve.php b/approve.php
index 0fbc4e4..df0317c 100644
--- a/approve.php
+++ b/approve.php
@@ -176,6 +176,16 @@ if ($logged_in) {
                 });
             }
 
+            // html-be biztonságosan beilleszthető string gyártása
+            // https://stackoverflow.com/a/6234804
+            function escapeHtml(unsafe) {
+                return unsafe
+                     .replace(/&/g, "&amp;")
+                     .replace(/</g, "&lt;")
+                     .replace(/>/g, "&gt;")
+                     .replace(/"/g, "&quot;")
+                     .replace(/'/g, "&#039;");
+             }
         </script>
         <script>
             const MAX_TABLE_ROWS = 10;
@@ -224,10 +234,10 @@ if ($logged_in) {
                 <img src="ARTWORKS/thumbnails/${image_data["Image_FileName"]}" style="vertical-align: top" />
                 <section style="display: inline-block; margin-left: 1em;">
                     <section style="display: block">
-                        <span class="label">Alkotó:</span><span class="fill-in-content" style="margin-right: 0.5em;"><input type="text" class="f-author-c" name="f_author" value="${image_data["Author"]}">,</span>
-                        <span class="label">Csoport:</span><input type="text" class="f-author-group-c" name="f_author_group" value="${image_data["AuthorGroup"]}"></span><br />
-                        <span class="label">Cím:</span><span class="fill-in-content"><input type="text" class="f-title-c" name="f_title" value="${image_data["Title"]}"></span><br />
-                        <span class="label">Leírás:</span><span class="fill-in-content"><textarea placeholder="(nincs)" class="f-desc-c" style="vertical-align: baseline;" name="f_details">${image_data["Description"]}</textarea></span><br />
+                        <span class="label">Alkotó:</span><span class="fill-in-content" style="margin-right: 0.5em;"><input type="text" class="f-author-c" name="f_author" value="${escapeHtml(image_data["Author"])}">,</span>
+                        <span class="label">Csoport:</span><input type="text" class="f-author-group-c" name="f_author_group" value="${escapeHtml(image_data["AuthorGroup"])}"></span><br />
+                        <span class="label">Cím:</span><span class="fill-in-content"><input type="text" class="f-title-c" name="f_title" value="${escapeHtml(image_data["Title"])}"></span><br />
+                        <span class="label">Leírás:</span><span class="fill-in-content"><textarea placeholder="(nincs)" class="f-desc-c" style="vertical-align: baseline;" name="f_details">${escapeHtml(image_data["Description"])}</textarea></span><br />
                         <span class="label">Feltöltés ideje:</span><span class="fill-in-content">${image_data["TS"]}</span><br />
                     </section>
                     <section style="display: block; margin-top: 1em;">
diff --git a/js/color.js b/js/color.js
index 546a6d0..82ec5c5 100644
--- a/js/color.js
+++ b/js/color.js
@@ -55,7 +55,7 @@ class Color {
         this.g = Number(components[1]);
         this.b = Number(components[2]);
 
-        if (components.length <= 4) {
+        if (components.length >= 4) {
             this.a = Number(components[3]);
         }
     }
diff --git a/js/phw.js b/js/phw.js
index 4ac8df1..b41414a 100644
--- a/js/phw.js
+++ b/js/phw.js
@@ -564,7 +564,7 @@ function init_viewer() {
 
     // betöltéskor a felirat megjelenítése
     img.addEventListener("load", (e) => {
-        img.style.opacity = "1";
+        img.classList.remove("loading");
         place_artcaptions();
         show(caption_sect);
         hide("viewerloadanim");
@@ -679,7 +679,7 @@ var group_logo_repository = "https://mkkozi.hu/user/plugins/mkk-groups/logos";
 // képnézegető megynitása
 function open_viewer(details) {
     let img = o("viewerimg");
-    img.style.opacity = "0";
+    img.classList.add("loading");
     img.style.left = img.style.top = "0px";
     img.src = "ARTWORKS/published/" + details.Image_FileName;
 
@@ -719,6 +719,10 @@ function close_viewer() {
     hide("viewersect");
     hide("artcaptions");
 
+    // kép eltávolítása
+    let img = o("viewerimg");
+    img.src = "";
+
     viewer_open = false;
 }
 
diff --git a/phw.css b/phw.css
index f0620cc..2429b73 100644
--- a/phw.css
+++ b/phw.css
@@ -267,7 +267,12 @@ img.viewer {
     z-index: 3000;
     cursor: grab;
 
-    transition: opacity, transform 0.3s ease;
+    transition: opacity 0.3s, transform 0.3s ease;
+}
+
+img.viewer.loading {
+    transition: opacity 0s;
+    opacity: 0;
 }
 
 @media only screen and (max-width: 600px) {