mobilos képnézegető kész, Esc-kel gépen bezárható

index.php

@@ -70,8 +70,8 @@
 <!-- KÉPMEGJELENÍTŐ -->
 <section id="viewersect" class="viewer" shown="false" onclick="close_viewer()">
     <img src="media/loading.svg"
-         style="display: block; position: absolute; left: calc(50% - 74px); top: calc(50% - 74px);">
+         style="display: block; position: absolute; left: calc(50% - 74px); top: calc(50% - 74px);" id="viewerloadanim">
-    <img src="" id="viewerimg" class="viewer">
+    <img src="" id="viewerimg" class="viewer" draggable="false">
     <section class="art-captions" id="artcaptions">
         <span class="art-title" id="arttitle">Negyvenkettő</span>
         <span class="art-author" id="artauthor">Arthur Dent</span>

interface.php

@@ -14,7 +14,8 @@ define("PUBLISHED_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "published");
 define("THUMBNAIL_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "thumbnails");
 
 // olyan szöveget ad vissza, amibe csak angol ABC betűi és számok szerepelnek (KL)
-function only_alpha_numeric($input){
+function only_alpha_numeric($input)
+{
     return preg_replace("/[^a-zA-Z0-9_]+/", "", $input);
 }
 
@@ -226,7 +227,7 @@ function get_update_batch($last_uid)
     $batch = [];
 
     // az utolsó UID óta érkezett sorok kiválogatása
-    $query = "SELECT Image_FileName,AspectRatio,ColorMean,Author,Description,Title,UID FROM publish_table WHERE No > (SELECT No FROM publish_table WHERE UID = '$last_uid')";
+    $query = "SELECT Image_FileName,AspectRatio,ColorMean,Author,Description,Title,UID FROM publish_table WHERE No > (SELECT No FROM publish_table WHERE UID = '$last_uid') AND Approved";
     $ret = mysqli_query($dbconn, $query);
     while (($row = $ret->fetch_assoc()) != NULL) {
         $batch[] = $row;

js/phw.js

@@ -329,11 +329,13 @@ function compose_wall() {
 
     // sorok előállítása
     let processed_n = 0;
+    let last_line_height = 0;
     while (processed_n < artworks_loaded_n) { // amíg van még kép
         // egy sornyi kép összegyűjtése
         let total_width = 0;
         let max_thumbnail_height = 0; // maximális bélyegkép-magasság
         let line_entries = [];
+        let not_full_line = false; // nem teljes sor
         for (let i = processed_n; i < artworks_loaded_n && total_width < width; i++) { // futtatás a lista végéig, vagy amíg be nem telik a sok
             line_entries.push(thumbnails[i]); // hozzáadás a listához
 
@@ -342,6 +344,11 @@ function compose_wall() {
 
             // (1. lépés) maximális magasság keresése
             max_thumbnail_height = thumbnails[i].height > max_thumbnail_height ? thumbnails[i].height : max_thumbnail_height;
+
+            // nem teljes sor jelzése
+            if ((i + 1) === artworks_loaded_n && total_width < width) {
+                not_full_line = true;
+            }
         }
 
         // 2. lépés: a maximális magasságnál kisebb képek felskálázása
@@ -377,14 +384,14 @@ function compose_wall() {
             let thumb_width = line_entries[i].width * line_entries[i].scale_factor;
             let thumb_height = line_entries[i].height * line_entries[i].scale_factor;
 
-            // ha bármelyik nagyobb, mint max_scaled_size_factor * hosszabb_oldal pixel, akkor visszaskálázzuk;
+            // ha a sor nem teljes, és a képek az utolsó teljes sor magasságánál nagyobbak lennének, akkor visszaskálázunk
-            let bigger_dim = Math.max(thumb_width, thumb_height);
+            if (not_full_line) {
-            let max_scaled_size = max_scaled_size_factor * thumb_largest_side;
+                if (thumb_height > last_line_height) {
-            if (bigger_dim > max_scaled_size) {
+                    let s = last_line_height / thumb_height;
-                let s = max_scaled_size / bigger_dim;
                     thumb_width *= s;
                     thumb_height *= s;
                 }
+            }
 
             // képet tároló elem
             let container_section = document.createElement("section");
@@ -423,10 +430,14 @@ function compose_wall() {
         }
 
         // falmagasság számítása
-        wall_height += 2 * thumbnail_padding + max_thumbnail_height * k;
+        let thumbnail_height = max_thumbnail_height * k;
+        wall_height += 2 * thumbnail_padding + thumbnail_height;
 
         // feldolgozottság léptetése
         processed_n += line_entries.length;
+
+        // falmagasság mentése
+        last_line_height = thumbnail_height;
     }
 
     // görgetés oda, ahol eredetileg álltunk
@@ -496,6 +507,13 @@ function init_dynamic_loading() {
     }, false);
 }
 
+var magnification_sensitivity = 0.05; // nagyítási érzékenység, skálafaktor a görgetés mértékére
+var touch_magnification_sensitivity = 0.01; // nagyítási érzékenység érintőképernyő esetén
+var viewer_original_mouse_coords = {x: 0, y: 0}; // egér indulópozíciója a kép mozgatásakor
+var viewer_original_offset_coords = {x: 0, y: 0}; // mozgatás kezdeti offset
+var viewer_grabbing = false; // mozgatják épp a képet?
+var last_touch_distance = 0; // előző érintési távolság
+
 // képnézegető inicializálása
 function init_viewer() {
     let img = o("viewerimg");
@@ -503,9 +521,10 @@ function init_viewer() {
 
     // betöltéskor a felirat megjelenítése
     img.addEventListener("load", (e) => {
-        img.style.opacity="1";
+        img.style.opacity = "1";
         place_artcaptions();
         show(caption_sect);
+        hide("viewerloadanim");
     }, false);
 
     window.addEventListener("resize", (e) => {
@@ -514,7 +533,88 @@ function init_viewer() {
         }, 400);
     }, false);
 
-    // TODO görgetéskor nagyítás
+    img.addEventListener("wheel", (e) => {
+        change_viewer_magnification(-e.deltaY * magnification_sensitivity);
+    }, false);
+
+    // a képre kattintáskor ne záródjon be a nézegető
+    img.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+    }, false);
+
+    // nézegető billentyű-kombinációk
+    window.addEventListener("keyup", (e) => {
+        switch (e.key) {
+            case "Escape":
+                close_viewer();
+                break;
+        }
+    }, false);
+
+    // kép mozgatása
+    img.addEventListener("mousedown", (e) => {
+        viewer_original_offset_coords = img.offset;
+        viewer_original_mouse_coords = {x: e.clientX, y: e.clientY};
+        viewer_grabbing = true;
+        img.style.cursor = "grabbing";
+    }, false);
+
+    img.addEventListener("mousemove", (e) => {
+        if (viewer_grabbing) {
+            let offset = {
+                x: e.clientX - viewer_original_mouse_coords.x + viewer_original_offset_coords.x,
+                y: e.clientY - viewer_original_mouse_coords.y + viewer_original_offset_coords.y
+            };
+            change_viewer_offset(offset, true);
+        }
+    }, false);
+
+    let end_grab = (e) => {
+        viewer_grabbing = false;
+        img.style.cursor = "grab";
+    };
+
+    img.addEventListener("mouseup", end_grab, false);
+
+    img.addEventListener("mouseleave", end_grab, false);
+
+    img.addEventListener("touchstart", (e) => {
+        let t = e.touches;
+        viewer_original_offset_coords = img.offset;
+        viewer_original_mouse_coords = { x: t[0].screenX, y: t[0].screenY };
+        viewer_grabbing = true;
+    }, false);
+
+    img.addEventListener("touchmove", (e) => {
+        let t = e.touches;
+        if (t.length >= 2) {
+            let d = Math.sqrt((t[0].screenX - t[1].screenX) * (t[0].screenX - t[1].screenX) + (t[0].screenY - t[1].screenY) * (t[0].screenY - t[1].screenY));
+
+            // TODO szűrés
+            let d_filtered = d;
+
+            // nagyítás
+            if (last_touch_distance !== 0) {
+                change_viewer_magnification(touch_magnification_sensitivity * (d_filtered - last_touch_distance));
+            }
+
+            last_touch_distance = d_filtered;
+        } else if (t.length === 1) {
+            if (viewer_grabbing) {
+                let offset = {
+                    x: t[0].screenX - viewer_original_mouse_coords.x + viewer_original_offset_coords.x,
+                    y: t[0].screenY - viewer_original_mouse_coords.y + viewer_original_offset_coords.y
+                };
+                change_viewer_offset(offset, true);
+            }
+        }
+    }, false);
+
+    img.addEventListener("touchend", (e) => {
+        viewer_grabbing = false;
+    }, false);
 }
 
 // feliratok elhelyezése
@@ -526,6 +626,8 @@ function place_artcaptions() {
     caption_sect.style.width = img.clientWidth + "px";
 }
 
+var viewer_open = false;
+
 // képnézegető megynitása
 function open_viewer(details) {
     let img = o("viewerimg");
@@ -543,9 +645,16 @@ function open_viewer(details) {
     captions_bgcolor.a = 0.6;
     o("artcaptions").style.backgroundColor = captions_bgcolor.to_rgba();*/
 
+    // nézegető visszaállítása
+    change_viewer_magnification(1.0, true);
+    change_viewer_offset({x: 0, y: 0}, true);
+
     // ...
     scroll_enable(false);
+    show("viewerloadanim");
     show("viewersect");
+
+    viewer_open = true;
 }
 
 // képnézegető bezárása
@@ -553,4 +662,39 @@ function close_viewer() {
     scroll_enable(true);
     hide("viewersect");
     hide("artcaptions");
+
+    viewer_open = false;
+}
+
+// kép nagyítása a képnézegetőben
+function change_viewer_magnification(c, absolute = false) {
+    let img = o("viewerimg");
+
+    // ha nagyítás mezője a képnek, akkor most létrehozzuk
+    if (!img.hasOwnProperty("magnification")) {
+        img.magnification = 1.0;
+    }
+
+    // nagyítás értékének meghatározása
+    img.magnification = Math.min(Math.max(1.0, absolute ? c : (img.magnification + c)), 5.0);
+
+    // visszaírás
+    img.style.transform = `scale(${img.magnification})`;
+}
+
+// kép helyének megváltoztatása
+function change_viewer_offset(offset, absolute = false) {
+    let img = o("viewerimg");
+
+    // ha nincs eltolás mezője a képnek, akkor most létrehozzuk
+    if (!img.hasOwnProperty("offset")) {
+        img.offset = {x: 0, y: 0};
+    }
+
+    // az eltolás értékének meghatározása
+    img.offset = absolute ? offset : ({x: img.offset.x + offset.x, y: img.offset.y + offset.y})
+
+    // visszaírás
+    img.style.left = img.offset.x + "px";
+    img.style.top = img.offset.y + "px";
 }

phw.css

@@ -4,6 +4,7 @@ body {
     font-family: 'Texturina', serif;
 
     --PUP-BGCOLOR: #EFEFEF;
+    --PUP-BORDERCOLOR: gray;
     --PAGE-BGCOLOR: #EFEFEF;
     --BTN-INACT-BGCOLOR: #28C1C0;
     --BTN-HOV-BGCOLOR: #198786;
@@ -44,6 +45,7 @@ section.upload-popup {
     top: calc(50vh - 250px);
     background-color: var(--PUP-BGCOLOR);
     overflow: hidden;
+    border: 1px dashed var(--PUP-BORDERCOLOR);
     border-radius: 0.5em;
 }
 
@@ -253,8 +255,15 @@ img.viewer {
     max-width: 100%;
     max-height: 100%;
     z-index: 3000;
+    cursor: grab;
 
-    transition: 0.3s ease;
+    transition: opacity, transform 0.3s ease;
+}
+
+@media only screen and (max-width: 600px) {
+    img.viewer {
+        transition: opacity 0.3s ease;
+    }
 }
 
 span.art-title,