From 87463e3a90a03a8832ef2609c82001274704c1cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wiesner=20Andr=C3=A1s?= Date: Wed, 20 Jan 2021 08:25:53 +0100 Subject: [PATCH] =?UTF-8?q?mobilos=20k=C3=A9pn=C3=A9zeget=C5=91=20k=C3=A9s?= =?UTF-8?q?z,=20Esc-kel=20g=C3=A9pen=20bez=C3=A1rhat=C3=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.php | 4 +- interface.php | 5 +- js/phw.js | 166 ++++++++++++++++++++++++++++++++++++++++++++++---- phw.css | 11 +++- 4 files changed, 170 insertions(+), 16 deletions(-) diff --git a/index.php b/index.php index b69e92c..cf7df4b 100644 --- a/index.php +++ b/index.php @@ -70,8 +70,8 @@
- + style="display: block; position: absolute; left: calc(50% - 74px); top: calc(50% - 74px);" id="viewerloadanim"> +
Negyvenkettő Arthur Dent diff --git a/interface.php b/interface.php index 37f419a..618ee94 100644 --- a/interface.php +++ b/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; diff --git a/js/phw.js b/js/phw.js index a162290..3a604a3 100644 --- a/js/phw.js +++ b/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,13 +384,13 @@ 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; - let bigger_dim = Math.max(thumb_width, thumb_height); - let max_scaled_size = max_scaled_size_factor * thumb_largest_side; - if (bigger_dim > max_scaled_size) { - let s = max_scaled_size / bigger_dim; - thumb_width *= s; - thumb_height *= s; + // ha a sor nem teljes, és a képek az utolsó teljes sor magasságánál nagyobbak lennének, akkor visszaskálázunk + if (not_full_line) { + if (thumb_height > last_line_height) { + let s = last_line_height / thumb_height; + thumb_width *= s; + thumb_height *= s; + } } // képet tároló elem @@ -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"); -} \ No newline at end of file + + 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"; +} diff --git a/phw.css b/phw.css index 26bde1b..75dec7c 100644 --- a/phw.css +++ b/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,