mobilos képnézegető kész, Esc-kel gépen bezárható
This commit is contained in:
parent
22a9491201
commit
87463e3a90
@ -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);">
|
||||
<img src="" id="viewerimg" class="viewer">
|
||||
style="display: block; position: absolute; left: calc(50% - 74px); top: calc(50% - 74px);" id="viewerloadanim">
|
||||
<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>
|
||||
|
||||
@ -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;
|
||||
|
||||
164
js/phw.js
164
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");
|
||||
|
||||
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";
|
||||
}
|
||||
11
phw.css
11
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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user