bétatesztre kész
This commit is contained in:
commit
512c3915b1
83
index.php
Normal file
83
index.php
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Fotófal</title>
|
||||
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/socket.js"></script>
|
||||
<script src="js/slider.js"></script>
|
||||
<script src="js/phw.js"></script>
|
||||
|
||||
<link href="phw.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- MEGJELENÍTŐ -->
|
||||
<section id="display">
|
||||
|
||||
</section>
|
||||
|
||||
<!-- FELTÖLTŐABLAK MEGNYITÁSA gomb -->
|
||||
<section class="upload-btn" style="float: right;bottom: 1em;position: fixed;right: 1em;" onclick="open_upload_pup();">
|
||||
<img src="media/upload_glyph_white.svg" style="height: 2em;">
|
||||
</section>
|
||||
|
||||
<!-- FELTÖLTŐABLAK -->
|
||||
<section class="upload-popup" id="uploadpup" shown="false">
|
||||
<section class="upload-popup-closebtn" onclick="close_upload_pup();">⊠</section>
|
||||
<section class="upload-popup-slider" id="pupslider">
|
||||
<section class="upload-popup-inner-container" id="uploadtype">
|
||||
<section style="margin: 3em 0em; text-align: center;">
|
||||
Húzd az ablakra, vagy tallózással töltsd fel a képet!<br><br>
|
||||
|
||||
A feltöltendő kép JPG- vagy PNG-formátumú, illetve legalább egyik dimenziójában minimum 2000 pixel
|
||||
méretű
|
||||
kell legyen!
|
||||
</section>
|
||||
<input type="file" id="fileselector"><br><br>
|
||||
<section style="text-align: right">
|
||||
<section class="btn" onclick="upload_from_device()">Feltöltés</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="upload-popup-inner-container" id="uploadform">
|
||||
<section style="text-align: center; display: block; margin-top: 130px;">
|
||||
<img src="media/loading.svg" style="width: 148px; height: 148px;"><br>
|
||||
Feltöltés folyamatban...
|
||||
</section>
|
||||
</section>
|
||||
<section class="upload-popup-inner-container" id="infoform">
|
||||
<section style="margin: 3em 0em;">
|
||||
<label for="author">Alkotó:*</label><br>
|
||||
<input type="text" id="author" style="width: 440px;" placeholder="Arthur Dent"><br><br>
|
||||
<label for="imgtitle">Cím:*</label><br>
|
||||
<input type="text" id="imgtitle" style="width: 440px;" placeholder="Negyvenkettő"><br><br>
|
||||
<label for="description">Leírás:</label><br>
|
||||
<textarea id="description" style="width: 440px; height: 5em;"
|
||||
placeholder="A válasz az életet, a világmindenséget, meg mindent érintő kérdésre."></textarea><br><br>
|
||||
</section>
|
||||
<section style="text-align: right;">
|
||||
<section class="btn" onclick="publish()" id="publishbtn">Mehet!</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 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">
|
||||
<section class="art-captions" id="artcaptions">
|
||||
<span class="art-title" id="arttitle">Negyvenkettő</span>
|
||||
<span class="art-author" id="artauthor">Arthur Dent</span>
|
||||
<span class="art-desc" id="artdesc">A válasz az életet, a világmindenséget, meg mindent érintő kérdésre.</span>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
init_photowall();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
233
interface.php
Normal file
233
interface.php
Normal file
@ -0,0 +1,233 @@
|
||||
<?php
|
||||
ini_set("display_errors", "On");
|
||||
|
||||
// könyvtárak
|
||||
define("ARTWORKS_DIR", "ARTWORKS");
|
||||
define("INCOMING_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "incoming");
|
||||
define("PUBLISHED_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "published");
|
||||
define("THUMBNAIL_DIR", ARTWORKS_DIR . DIRECTORY_SEPARATOR . "thumbnails");
|
||||
|
||||
// SQL-paraméterek
|
||||
define("SQL_USER", "photowall_user");
|
||||
define("SQL_PASS", "photowpwd");
|
||||
define("SQL_DB", "photowall_db");
|
||||
define("SQL_IP", "172.28.0.6");
|
||||
|
||||
// olyan szöveget ad vissza, amibe csak angol ABC betűi és számok szerepelnek (KL)
|
||||
function only_alpha_numeric($input){
|
||||
return preg_replace("/[^a-zA-Z0-9_]+/", "", $input);
|
||||
}
|
||||
|
||||
// csatlakozás az adatbázishoz
|
||||
function open_sql_connection()
|
||||
{
|
||||
return mysqli_connect(SQL_IP, SQL_USER, SQL_PASS, SQL_DB);
|
||||
}
|
||||
|
||||
// Globális SQL-kapcsolat
|
||||
$dbconn = open_sql_connection();
|
||||
|
||||
// incoming fájl elérési útvonala UID-ből
|
||||
function incoming_from_uid($uid)
|
||||
{
|
||||
return INCOMING_DIR . DIRECTORY_SEPARATOR . $uid;
|
||||
}
|
||||
|
||||
// feltöltött fájl feldolgozása
|
||||
// RET:
|
||||
// -2: MIME-hiba
|
||||
// -3: mérethiba
|
||||
// pozitív: egyedi azonosító, a feltöltés sikerült
|
||||
|
||||
define("MIME_ERROR", -2);
|
||||
define("SIZE_ERROR", -3);
|
||||
|
||||
function process_uploaded_file($file_info)
|
||||
{
|
||||
$ACCEPTED_MIME_TYPES = ["image/png", "image/jpeg"]; // elfogadott MIME-típusok
|
||||
$MINIMUM_SIZE_BY_DIM = 2000; // minimális oldalméret
|
||||
|
||||
$tmp_filename = $file_info["tmp_name"];
|
||||
$img_info = getimagesize($tmp_filename);
|
||||
|
||||
// MIME-ellenőrzés
|
||||
$mime_type = $img_info["mime"];
|
||||
if (!in_array($mime_type, $ACCEPTED_MIME_TYPES)) { // ha nem megfelelő a fájltípus, akkor visszatérünk -1-gyel
|
||||
return MIME_ERROR;
|
||||
}
|
||||
|
||||
// méretellenőrzés
|
||||
if ($img_info[0] < $MINIMUM_SIZE_BY_DIM || $img_info[1] < $MINIMUM_SIZE_BY_DIM) {
|
||||
return SIZE_ERROR;
|
||||
}
|
||||
|
||||
// ha itt tartunk, akkor a fájl biztosan jó
|
||||
$tmp_uid = substr(basename($tmp_filename), 3); // "php" előtag levágása
|
||||
$incoming_filename = incoming_from_uid($tmp_uid);
|
||||
$ret = move_uploaded_file($tmp_filename, $incoming_filename);
|
||||
|
||||
return $tmp_uid;
|
||||
}
|
||||
|
||||
// kép publikálása
|
||||
define("THUMB_LARGEST_SIDE", 400);
|
||||
function publish_image($artwork_details)
|
||||
{
|
||||
$MAX_LARGE_IMAGE_FILESIZE = 2000000; // nagyméretű kép maximális mérete
|
||||
$MAX_LARGE_IMAGE_FILESIZE_STR = "2M"; // ...stringként
|
||||
$MAX_THUMB_IMAGE_FILESIZE_STR = "100k"; // bélyegkép maximális mérete
|
||||
$THUMB_IMAGE_LARGEST_DIM = THUMB_LARGEST_SIDE; // bélyegkép hosszabb oldalának mérete
|
||||
|
||||
$incoming_filename = incoming_from_uid($artwork_details["uid"]);
|
||||
$final_filename = date("Y_m_d_H_i_s") . random_int(1E6, 1E7 - 1) . ".jpg";
|
||||
|
||||
// nagyméretű kép elkészítése
|
||||
$large_filename = PUBLISHED_DIR . DIRECTORY_SEPARATOR . $final_filename;
|
||||
|
||||
// ha a fájl nagyobb, mint 2MB, akkor visszatömörítjük
|
||||
$filesize = filesize($incoming_filename);
|
||||
if ($filesize > $MAX_LARGE_IMAGE_FILESIZE) {
|
||||
$cmd = "convert -define jpeg:extent=$MAX_LARGE_IMAGE_FILESIZE_STR $incoming_filename $large_filename";
|
||||
shell_exec($cmd);
|
||||
unlink($incoming_filename); // törlés az incoming-ból
|
||||
} else { //...ha nem volt túl nagy a fájl
|
||||
shell_exec("mv $incoming_filename $large_filename");
|
||||
}
|
||||
|
||||
// bélyegkép elkészítése
|
||||
$thumb_filename = THUMBNAIL_DIR . DIRECTORY_SEPARATOR . $final_filename;
|
||||
$cmd = "convert -define jpeg:extent=$MAX_THUMB_IMAGE_FILESIZE_STR -resize \"$THUMB_IMAGE_LARGEST_DIM>\" $large_filename $thumb_filename";
|
||||
shell_exec($cmd);
|
||||
|
||||
// átlagszín kiszámítása
|
||||
$cmd = "convert $thumb_filename -resize 1x1\! -format \"rgb(%[fx:int(255*r+.5)],%[fx:int(255*g+.5)],%[fx:int(255*b+.5)])\" info:-";
|
||||
$color_mean = shell_exec($cmd);
|
||||
|
||||
// beírás az adatbázisba
|
||||
global $dbconn;
|
||||
|
||||
//echo mysqli_error($dbconn);
|
||||
|
||||
$img_info = getimagesize($thumb_filename);
|
||||
|
||||
$author = mysqli_real_escape_string($dbconn, $artwork_details["author"]);
|
||||
$title = mysqli_real_escape_string($dbconn, $artwork_details["title"]);
|
||||
$desc = mysqli_real_escape_string($dbconn, $artwork_details["desc"]);
|
||||
$uid = md5_file($thumb_filename); // valami random...
|
||||
$aspect_ratio = $img_info[0] / $img_info[1];
|
||||
$query = "INSERT INTO publish_table (Author,Title,Description,Image_FileName,AspectRatio,ColorMean,Approved,UID,TS) VALUES('$author', '$title', '$desc', '$final_filename', $aspect_ratio, '$color_mean', TRUE, '$uid', CURRENT_TIMESTAMP);";
|
||||
|
||||
$res = mysqli_query($dbconn, $query);
|
||||
|
||||
// megnézzük, hogy volt-e már ilyen kép feltöltve
|
||||
if ($res === false) {
|
||||
unlink($large_filename);
|
||||
unlink($thumb_filename);
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
/* $accented_chars = explode(",","ç,æ,œ,á,é,í,ó,ú,à,è,ì,ò,ù,ä,ë,ï,ö,ü,ÿ,â,ê,î,ô,û,å,e,i,ø,u");
|
||||
$accented_alternatives = explode(",","c,ae,oe,a,e,i,o,u,a,e,i,o,u,a,e,i,o,u,y,a,e,i,o,u,a,e,i,o,u");
|
||||
|
||||
$title = $artwork_details["title"];
|
||||
$title_conforming = str_replace(" ", "_", $title);
|
||||
$title_conforming = strtolower($title_conforming);
|
||||
$title_conforming = str_replace($accented_chars, $accented_alternatives, $title_conforming);*/
|
||||
|
||||
// általános információk lekérése
|
||||
function get_general_info()
|
||||
{
|
||||
global $dbconn;
|
||||
|
||||
$info = [];
|
||||
|
||||
// összes kép számának lekérdezése
|
||||
$query = "SELECT COUNT(No) FROM publish_table WHERE Approved;";
|
||||
$ret = (int)mysqli_query($dbconn, $query)->fetch_assoc()["COUNT(No)"];
|
||||
$info["total_artwork_count"] = $ret;
|
||||
|
||||
// bélyegképek hosszabb oldalának nagysága
|
||||
$info["thumb_largest_side"] = THUMB_LARGEST_SIDE;
|
||||
|
||||
return $info;
|
||||
}
|
||||
|
||||
// egy adagnyi képinformáció szolgáltalása
|
||||
function get_batch($offset, $n)
|
||||
{
|
||||
global $dbconn;
|
||||
|
||||
$batch = [];
|
||||
|
||||
// kívánt mennyiségű képinformáció lekérdezése
|
||||
$query = "SELECT Image_FileName,AspectRatio,ColorMean,Author,Title,Description,UID FROM publish_table WHERE Approved ORDER BY No DESC Limit $n OFFSET $offset;";
|
||||
$ret = mysqli_query($dbconn, $query);
|
||||
while (($row = $ret->fetch_assoc()) != NULL) {
|
||||
$batch[] = $row;
|
||||
}
|
||||
|
||||
return $batch;
|
||||
}
|
||||
|
||||
// az utolsó ismert UID-óta keletkezett sorokat kéri le
|
||||
function get_update_batch($last_uid)
|
||||
{
|
||||
global $dbconn;
|
||||
|
||||
$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')";
|
||||
$ret = mysqli_query($dbconn, $query);
|
||||
while (($row = $ret->fetch_assoc()) != NULL) {
|
||||
$batch[] = $row;
|
||||
}
|
||||
|
||||
return $batch;
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
|
||||
if (!isset($_POST["action"])) {
|
||||
exit(0);
|
||||
}
|
||||
|
||||
$action = only_alpha_numeric($_POST["action"]);
|
||||
|
||||
$ret = -1;
|
||||
|
||||
// parancs kiválasztása
|
||||
switch ($action) {
|
||||
case "upload": // fájl feltöltése
|
||||
if (isset($_FILES["image"]) && $_FILES["image"]["error"] === 0) {
|
||||
$ret = process_uploaded_file($_FILES["image"]);
|
||||
}
|
||||
break;
|
||||
case "publish": // kép publikálása
|
||||
if (isset($_POST["details"])) {
|
||||
$details = json_decode($_POST["details"], true);
|
||||
$ret = publish_image($details);
|
||||
}
|
||||
break;
|
||||
case "general_info": // általános információ lekérése
|
||||
$ret = json_encode(get_general_info());
|
||||
break;
|
||||
case "batch": // egy adagnyi kép lekérése
|
||||
if (isset($_POST["offset"]) && isset($_POST["n"])) {
|
||||
$ret = json_encode(get_batch($_POST["offset"], $_POST["n"]));
|
||||
}
|
||||
break;
|
||||
case "update": // új képek betöltése
|
||||
if (isset($_POST["last_uid"])) {
|
||||
$ret = json_encode(get_update_batch(json_decode($_POST["last_uid"])));
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// válasz küldése
|
||||
echo $ret;
|
||||
|
||||
mysqli_close($dbconn);
|
||||
8
js/o.js
Executable file
8
js/o.js
Executable file
@ -0,0 +1,8 @@
|
||||
function o(input) {
|
||||
var o;
|
||||
if (typeof input === "string")
|
||||
o = document.getElementById(input);
|
||||
else if (typeof input === "object")
|
||||
o = input;
|
||||
return o;
|
||||
}
|
||||
477
js/phw.js
Normal file
477
js/phw.js
Normal file
@ -0,0 +1,477 @@
|
||||
// megjelenítés / eltüntetés
|
||||
function show(obj) {
|
||||
o(obj).setAttribute("shown", "true");
|
||||
}
|
||||
|
||||
function hide(obj) {
|
||||
o(obj).setAttribute("shown", "false");
|
||||
}
|
||||
|
||||
function toggle_show(obj) {
|
||||
o(obj).setAttribute("shown", o(obj).getAttribute("shown") === "false");
|
||||
}
|
||||
|
||||
function scroll_enable(on) {
|
||||
document.body.style.overflow = on ? "auto" : "hidden";
|
||||
}
|
||||
|
||||
// -----------------------------------------
|
||||
|
||||
var slide_unit = 504;
|
||||
var slider_id = "pupslider";
|
||||
var upload_popup_id = "uploadpup";
|
||||
var publish_btn_id = "publishbtn";
|
||||
|
||||
var image_uid = null;
|
||||
|
||||
|
||||
function pup_slide(units) {
|
||||
slider_slide(slider_id, -slide_unit * units);
|
||||
}
|
||||
|
||||
function pup_reset() {
|
||||
hide(upload_popup_id); // ablak eltüntetése
|
||||
reset_slider(slider_id); // slider visszaállítása
|
||||
o(publish_btn_id).innerText = "Mehet!"; // gombfelirat visszaállítása
|
||||
}
|
||||
|
||||
// kép publikálása
|
||||
function publish() {
|
||||
if (image_uid == null) { // csak, ha érvényes...
|
||||
return;
|
||||
}
|
||||
|
||||
// mezők kinyerése
|
||||
let author = o("author").value;
|
||||
let title = o("imgtitle").value;
|
||||
let desc = o("description").value;
|
||||
|
||||
// ha a kötelező mezők nincsenek kitöltve, akkor nem lehet beküldeni
|
||||
if (author.trim() === "" || title.trim() === "") {
|
||||
alert("Alkotó és cím megadása kötelező!");
|
||||
return;
|
||||
}
|
||||
|
||||
// struktúra összeállítása
|
||||
let details = {
|
||||
uid: image_uid,
|
||||
author: author,
|
||||
title: title,
|
||||
desc: desc
|
||||
}
|
||||
|
||||
// küldés
|
||||
let formData = new FormData();
|
||||
formData.append("action", "publish");
|
||||
formData.append("details", JSON.stringify(details));
|
||||
|
||||
let req = new XMLHttpRequest();
|
||||
|
||||
req.onreadystatechange = state => {
|
||||
if (req.status === 200 && req.readyState === 4) {
|
||||
pup_reset(); // popup resetelése
|
||||
|
||||
if (Number(req.response) === 0) {
|
||||
alert("Sikeres feltöltés!");
|
||||
req_update();
|
||||
} else {
|
||||
alert("Ugyanezt képet már korábban feltöltötték!");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
req.open("POST", "interface.php");
|
||||
req.send(formData);
|
||||
|
||||
// UID elfelejtése
|
||||
image_uid = null;
|
||||
o(publish_btn_id).innerText = "Türelem..."
|
||||
}
|
||||
|
||||
// feltöltés után kapott válasz feldolgozása
|
||||
function process_upload_response(resp) {
|
||||
if (!isNaN(Number(resp))) { // ha szám a válasz, akkor biztosan hibás az eredmény
|
||||
let resp_num = Number(resp);
|
||||
switch (resp_num) {
|
||||
case -1:
|
||||
alert("Hiba a feldolgozás során!");
|
||||
break;
|
||||
case -2:
|
||||
alert("A feltöltött fájl formátuma nem megfelelő, csak JPG- vagy PNG-képek elfogadottak!")
|
||||
break;
|
||||
case -3:
|
||||
alert("Mérethiba: a kép hosszabb oldalának legalább 2000 pixel szélesnek kell lennie!");
|
||||
break;
|
||||
}
|
||||
|
||||
pup_slide(-1); // visszalépés
|
||||
} else { // ha kaptunk UID-t
|
||||
image_uid = resp;
|
||||
pup_slide(1); // előrelépés
|
||||
}
|
||||
}
|
||||
|
||||
// fájl feltöltése
|
||||
function upload_file(f) {
|
||||
let formData = new FormData();
|
||||
formData.append("image", f);
|
||||
formData.append("action", "upload");
|
||||
let req = new XMLHttpRequest();
|
||||
|
||||
req.onreadystatechange = state => {
|
||||
if (req.status === 200 && req.readyState === 4) {
|
||||
process_upload_response(req.response);
|
||||
}
|
||||
};
|
||||
|
||||
req.open("POST", "interface.php");
|
||||
req.send(formData);
|
||||
}
|
||||
|
||||
// feltöltés eszközről
|
||||
function upload_from_device() {
|
||||
let file_selector = o("fileselector");
|
||||
if (file_selector.files.length > 0) {
|
||||
pup_slide(1); // görgetés jobbra
|
||||
upload_file(file_selector.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// feltöltőablak megnyitása
|
||||
function open_upload_pup() {
|
||||
show(upload_popup_id);
|
||||
let display = o("display");
|
||||
display.style.filter = "blur(10px)";
|
||||
scroll_enable(false);
|
||||
}
|
||||
|
||||
// feltöltőablak bezárása
|
||||
function close_upload_pup() {
|
||||
hide(upload_popup_id);
|
||||
let display = o("display");
|
||||
display.style.filter = "";
|
||||
scroll_enable(true);
|
||||
}
|
||||
|
||||
|
||||
// -----------------
|
||||
|
||||
function async_req(action, cb, add_data = null) {
|
||||
xhr = new XMLHttpRequest();
|
||||
fd = new FormData();
|
||||
fd.append("action", action);
|
||||
|
||||
xhr.onreadystatechange = state => {
|
||||
if (xhr.status === 200 && xhr.readyState === 4 && cb != null) {
|
||||
cb(state, xhr.response);
|
||||
}
|
||||
};
|
||||
|
||||
// további adatok hozzáfűzése a kéréshez
|
||||
if (add_data != null) {
|
||||
for (let prop in add_data) {
|
||||
if (Object.prototype.hasOwnProperty.call(add_data, prop)) {
|
||||
fd.append(prop, JSON.stringify(add_data[prop]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
xhr.open("POST", "interface.php");
|
||||
xhr.send(fd)
|
||||
}
|
||||
|
||||
var total_artwork_count = 0; // összes kép alkotás száma
|
||||
var thumb_largest_side = 400; // a bélyegkép hosszabb oldala 400 pixel
|
||||
var batch_loading_quantity = 10; // egyszerre betöltött képek mennyisége
|
||||
var autoload_enabled = false; // automatikus betöltés
|
||||
var artworks_loaded_n = 0; // ennyi kép van betöltve a megjelenítőbe
|
||||
var thumbnail_padding = 8; // kép körüli margó
|
||||
var extra_margin = 10; // extra margó, amire számítani kell a fal generálásakor
|
||||
var last_uid = ""; // utolsó UID
|
||||
var wall_height = 0; // a fal magassága, pixelben
|
||||
var dynamic_load_distance = 200; // ennyi pixellel a fal alja előtt indítja a dinamikus betöltést
|
||||
var dynamic_loading_under_way = false; // dinamikus töltés folyamatban, ne indítsunk új requestet
|
||||
|
||||
var thumbnails = [];
|
||||
|
||||
// fotófal inicializálása
|
||||
function init_photowall() {
|
||||
init_drag_and_drop();
|
||||
req_general_info();
|
||||
init_dynamic_loading();
|
||||
init_viewer();
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
compose_wall();
|
||||
}, false);
|
||||
}
|
||||
|
||||
// inicializálási lánc
|
||||
function req_general_info() {
|
||||
async_req("general_info", recv_general_info);
|
||||
}
|
||||
|
||||
function recv_general_info(state, resp) {
|
||||
// általános adatok mentése
|
||||
let resp_obj = JSON.parse(resp);
|
||||
total_artwork_count = resp_obj["total_artwork_count"];
|
||||
thumb_largest_side = resp_obj["thumb_largest_side"];
|
||||
|
||||
// első adag képe betöltése
|
||||
req_batch();
|
||||
}
|
||||
|
||||
// egy adag kép lekérése
|
||||
function req_batch() {
|
||||
async_req("batch", recv_batch, {offset: artworks_loaded_n, n: batch_loading_quantity});
|
||||
}
|
||||
|
||||
function recv_batch(state, resp) {
|
||||
let img_batch = JSON.parse(resp);
|
||||
|
||||
// utolsó UID mentése, ha most történt az első letöltés
|
||||
if (artworks_loaded_n === 0) {
|
||||
last_uid = img_batch[0].UID;
|
||||
}
|
||||
|
||||
// betöltött művek számának növelése
|
||||
artworks_loaded_n += img_batch.length;
|
||||
|
||||
// ha van még mit letölteni, akkor engedélyezzük az automatikus betöltést
|
||||
autoload_enabled = total_artwork_count > artworks_loaded_n;
|
||||
|
||||
// újonnan kapott képek befűzése a lista ELEJÉRE!
|
||||
thumbnails = thumbnails.concat(img_batch);
|
||||
|
||||
// fotófal összeállítása
|
||||
compose_wall();
|
||||
|
||||
// ha nem töltődött be elég kép... VIGYÁZAT: rekurzív, mint állat!
|
||||
if (wall_height < window.innerHeight) {
|
||||
req_batch();
|
||||
}
|
||||
|
||||
// töltés kész
|
||||
dynamic_loading_under_way = false;
|
||||
}
|
||||
|
||||
// fotófal összeállítása
|
||||
function compose_wall() {
|
||||
// görgetési pozíció mentése
|
||||
let scroll_pos = window.scrollY;
|
||||
|
||||
// nézőfelület szélessége és magassága
|
||||
let display = o("display");
|
||||
display.innerHTML = ""; // fal törlése
|
||||
wall_height = 0;
|
||||
|
||||
let width = display.clientWidth;
|
||||
//let height = display.clientHeight;
|
||||
|
||||
// bélyegképek méreteinek meghatározása
|
||||
for (let i = 0; i < thumbnails.length; i++) {
|
||||
let thumbnail = thumbnails[i];
|
||||
|
||||
// ha kell, akkor kiszámoljuk a kép méretét
|
||||
if (!(thumbnail.hasOwnProperty("width") && thumbnail.hasOwnProperty("height"))) {
|
||||
let ar = Number(thumbnail["AspectRatio"]);
|
||||
if (ar >= 1.0) { // a kép fekvő vagy négyzet, ezért a SZÉLESSÉG a nagyobb
|
||||
thumbnail.width = thumb_largest_side;
|
||||
thumbnail.height = thumb_largest_side / ar;
|
||||
} else { // a kép álló, ezért a MAGASSÁG a nagyobb
|
||||
thumbnail.height = thumb_largest_side;
|
||||
thumbnail.width = thumb_largest_side * ar;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sorok előállítása
|
||||
let processed_n = 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 = [];
|
||||
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
|
||||
|
||||
// maximális hossz növelése
|
||||
total_width += thumbnails[i].width;
|
||||
|
||||
// (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;
|
||||
}
|
||||
|
||||
// 2. lépés: a maximális magasságnál kisebb képek felskálázása
|
||||
let total_scaled_width = 0;
|
||||
for (let i = 0; i < line_entries.length; i++) {
|
||||
let thumbnail = line_entries[i];
|
||||
|
||||
// skálafaktor
|
||||
let K = max_thumbnail_height / thumbnail.height;
|
||||
thumbnail.scale_factor = K;
|
||||
|
||||
// skálázott méret kiszámítása
|
||||
thumbnail.scaledHeight = thumbnail.height * K;
|
||||
thumbnail.scaledWidth = thumbnail.width * K;
|
||||
|
||||
total_scaled_width += thumbnail.scaledWidth;
|
||||
}
|
||||
|
||||
// 3. lépés: visszaskálázás a sor hosszára
|
||||
let summed_padding = (line_entries.length + 1) * thumbnail_padding + extra_margin; // sorhossz kiszámítása margókkal együtt
|
||||
|
||||
// a képeknek az ablakszélesség-összes margó helyre be kell férni, ezért:
|
||||
let k = (width - summed_padding) / total_scaled_width;
|
||||
|
||||
for (let i = 0; i < line_entries.length; i++) {
|
||||
line_entries[i].scale_factor *= k;
|
||||
line_entries[i].scale_factor = Math.round(line_entries[i].scale_factor * 1000) / 1000; // kerekítés ezredekre
|
||||
}
|
||||
|
||||
// képek elhelyzése
|
||||
for (let i = 0; i < line_entries.length; i++) {
|
||||
let container_section = document.createElement("section");
|
||||
container_section.style.backgroundColor = line_entries[i].ColorMean;
|
||||
container_section.classList.add("thumbnail-container");
|
||||
|
||||
console.log(line_entries[i]);
|
||||
|
||||
let img = document.createElement("img");
|
||||
img.classList.add("thumbnail");
|
||||
container_section.style.width = img.style.width = `${line_entries[i].width * line_entries[i].scale_factor}px`;
|
||||
container_section.style.height = img.style.height = `${line_entries[i].height * line_entries[i].scale_factor}px`;
|
||||
img.src = `ARTWORKS/thumbnails/${line_entries[i].Image_FileName}`;
|
||||
img.addEventListener("load", (e) => {
|
||||
img.style.opacity = "100%";
|
||||
}, false);
|
||||
img.details = line_entries[i];
|
||||
img.addEventListener("click", (e) => {
|
||||
open_viewer(img.details);
|
||||
}, false);
|
||||
|
||||
container_section.appendChild(img);
|
||||
display.appendChild(container_section);
|
||||
}
|
||||
|
||||
// falmagasság számítása
|
||||
wall_height += 2 * thumbnail_padding + max_thumbnail_height * k;
|
||||
|
||||
// feldolgozottság léptetése
|
||||
processed_n += line_entries.length;
|
||||
}
|
||||
|
||||
// görgetés oda, ahol eredetileg álltunk
|
||||
window.scrollTo(0, scroll_pos);
|
||||
}
|
||||
|
||||
// frissítés lekérése
|
||||
function req_update() {
|
||||
async_req("update", recv_update, {last_uid: last_uid});
|
||||
}
|
||||
|
||||
// frissítés fogadása
|
||||
function recv_update(state, resp) {
|
||||
let img_update_batch = JSON.parse(resp);
|
||||
|
||||
// növeljük az összes és a betöltött művek számát
|
||||
artworks_loaded_n += img_update_batch.length;
|
||||
total_artwork_count += img_update_batch.length;
|
||||
|
||||
// ha van még mit letölteni, akkor engedélyezzük az automatikus betöltést
|
||||
autoload_enabled = total_artwork_count > artworks_loaded_n;
|
||||
|
||||
// újonnan kapott képek befűzése a lista ELEJÉRE!
|
||||
thumbnails = img_update_batch.concat(thumbnails);
|
||||
|
||||
// utolsó UID mentése
|
||||
last_uid = thumbnails[0].UID;
|
||||
|
||||
// fal összeállítása
|
||||
compose_wall();
|
||||
}
|
||||
|
||||
|
||||
// DnD inicializálása
|
||||
function init_drag_and_drop() {
|
||||
let drop_area = o("uploadtype");
|
||||
drop_area.addEventListener("dragover", (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
|
||||
drop_area.addEventListener("drop", (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (e.dataTransfer.files.length > 0) {
|
||||
pup_slide(1);
|
||||
upload_file(e.dataTransfer.files[0]);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
// dinamikus betöltés inicializálása
|
||||
function init_dynamic_loading() {
|
||||
document.addEventListener("scroll", (e) => {
|
||||
if (autoload_enabled && !dynamic_loading_under_way) { // ha az automatikus töltés engedélyezett
|
||||
if (window.scrollY + window.innerHeight > wall_height - dynamic_load_distance) {
|
||||
dynamic_loading_under_way = true;
|
||||
req_batch();
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
// képnézegető inicializálása
|
||||
function init_viewer() {
|
||||
let img = o("viewerimg");
|
||||
let caption_sect = o("artcaptions");
|
||||
|
||||
// betöltéskor a felirat megjelenítése
|
||||
img.addEventListener("load", (e) => {
|
||||
img.style.opacity='100%'
|
||||
place_artcaptions();
|
||||
show(caption_sect);
|
||||
}, false);
|
||||
|
||||
window.addEventListener("resize", (e) => {
|
||||
setTimeout(() => {
|
||||
place_artcaptions();
|
||||
}, 400);
|
||||
}, false);
|
||||
|
||||
// TODO görgetéskor nagyítás
|
||||
}
|
||||
|
||||
// feliratok elhelyezése
|
||||
function place_artcaptions() {
|
||||
let img = o("viewerimg");
|
||||
let caption_sect = o("artcaptions");
|
||||
let brect = img.getBoundingClientRect();
|
||||
caption_sect.style.left = brect.x + "px";
|
||||
caption_sect.style.width = img.clientWidth + "px";
|
||||
}
|
||||
|
||||
// képnézegető megynitása
|
||||
function open_viewer(details) {
|
||||
let img = o("viewerimg");
|
||||
img.style.opacity = "0";
|
||||
img.src = "ARTWORKS/published/" + details.Image_FileName;
|
||||
|
||||
// feliratok kiírása
|
||||
o("arttitle").innerText = details.Title;
|
||||
o("artauthor").innerText = details.Author;
|
||||
o("artdesc").innerText = details.Description;
|
||||
|
||||
// ...
|
||||
scroll_enable(false);
|
||||
show("viewersect");
|
||||
}
|
||||
|
||||
// képnézegető bezárása
|
||||
function close_viewer() {
|
||||
scroll_enable(true);
|
||||
hide("viewersect");
|
||||
hide("artcaptions");
|
||||
}
|
||||
11
js/slider.js
Normal file
11
js/slider.js
Normal file
@ -0,0 +1,11 @@
|
||||
function slider_slide(slider, d) {
|
||||
let slider_obj = o(slider);
|
||||
let left = slider_obj.style.left;
|
||||
let left_px = Number(left.substr(0, left.length - 2));
|
||||
left_px += d;
|
||||
slider_obj.style.left = left_px + "px";
|
||||
}
|
||||
|
||||
function reset_slider(slider) {
|
||||
o(slider).style.left = "0px";
|
||||
}
|
||||
46
js/socket.js
Executable file
46
js/socket.js
Executable file
@ -0,0 +1,46 @@
|
||||
/*
|
||||
* Epagris, 2016-2017
|
||||
*/
|
||||
|
||||
/*AJAX socket, mindent url-encodedként [key]=adat formában küld, data csak string lehet*/
|
||||
|
||||
class ESocket {
|
||||
/*url-re rááll*/
|
||||
constructor(url) {
|
||||
this.url = url;
|
||||
this.ajaxObject = new XMLHttpRequest();
|
||||
this.lastResponse = "";
|
||||
}
|
||||
init() {
|
||||
this.ajaxObject.open("POST", this.url, false); //szinkron!!
|
||||
this.ajaxObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
}
|
||||
/*írás parancsot ad ki*/
|
||||
send(data) {
|
||||
this.init(); //meg kell nyitni a kapcsolatot
|
||||
this.ajaxObject.send(data);
|
||||
this.lastResponse = this.ajaxObject.responseText;
|
||||
return this.lastResponse;
|
||||
}
|
||||
/*átállítja a foglalat url-jét*/
|
||||
setURL(url) {
|
||||
this.url = url;
|
||||
}
|
||||
}
|
||||
|
||||
/*socket, ami data-t EPS-be konvertálja*/
|
||||
|
||||
/*class EPSSocket extends ESocket {
|
||||
constructor(url, key) {
|
||||
super(url, key);
|
||||
}
|
||||
// adatot küld, objektumot EPS-be konvertál, ha respondingEPS = true, akkor a választ visszakonvertálja is EPS-ből
|
||||
send(data, respondingEPS = true) {
|
||||
data = EPS_encode(data);
|
||||
var escdata = data.replace(/&/g, "%26");
|
||||
var result = super.send(escdata);
|
||||
if (respondingEPS === true)
|
||||
result = EPS_decode(result);
|
||||
return result;
|
||||
}
|
||||
}*/
|
||||
14
media/loading.svg
Executable file
14
media/loading.svg
Executable file
@ -0,0 +1,14 @@
|
||||
<svg width="148" height="148" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="71" cy="71" r="62" stroke="#198786" stroke-width="15" fill="none" />
|
||||
<path d="M 9 78
|
||||
A 62 62 0 0 1 75 9"
|
||||
fill="none" stroke="#90dedd" stroke-width="15">
|
||||
<animateTransform attributeType="xml"
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 71 71"
|
||||
to="360 71 71"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 594 B |
1
media/upload_glyph.svg
Normal file
1
media/upload_glyph.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?> <!--?xml version="1.0" encoding="UTF-8" standalone="no"?--> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 16" class="si-glyph si-glyph-inbox-upload"><!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch --><title>843</title><defs></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(1.000000, 0.000000)" fill="#434343"><path d="M10.768,2.757 L8.579,0.244 C8.264,-0.07 7.753,-0.07 7.436,0.244 L5.247,2.757 C4.932,3.072 4.884,3.633 5.198,3.947 L7,3.947 L7,5.869 C7,6.428 7.434,6.879 7.969,6.879 C8.504,6.879 8.938,6.428 8.938,5.869 L8.938,3.947 L10.719,3.947 C11.034,3.632 11.083,3.072 10.768,2.757 L10.768,2.757 Z" class="si-glyph-fill"></path><path d="M13.993,1.006 L10.703,1.006 L11.594,1.981 L13.177,1.981 L14.54,9.01 L1.505,9.01 L2.912,1.981 L4.594,1.981 L5.36,1.006 L2.073,1.006 L0.013,9.761 L0.013,13.931 C0.013,15.265 0.485,15.959 1.817,15.959 L14.097,15.959 C15.343,15.959 15.982,15.432 15.982,13.848 L15.982,9.761 L13.993,1.006 L13.993,1.006 Z M10.016,11 L5.985,11 L5.985,9.969 L10.016,9.969 L10.016,11 L10.016,11 Z" class="si-glyph-fill"></path></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
83
media/upload_glyph_white.svg
Normal file
83
media/upload_glyph_white.svg
Normal file
@ -0,0 +1,83 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 0 15.969 15.9505"
|
||||
class="si-glyph si-glyph-inbox-upload"
|
||||
version="1.1"
|
||||
id="svg14"
|
||||
sodipodi:docname="upload_glyph_white.svg"
|
||||
width="15.969"
|
||||
height="15.9505"
|
||||
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
|
||||
<metadata
|
||||
id="metadata18">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>843</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1680"
|
||||
inkscape:window-height="984"
|
||||
id="namedview16"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="20.85965"
|
||||
inkscape:cx="19.810335"
|
||||
inkscape:cy="10.309202"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="150"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g10" />
|
||||
<!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
|
||||
<title
|
||||
id="title2">843</title>
|
||||
<defs
|
||||
id="defs4" />
|
||||
<g
|
||||
id="g12"
|
||||
style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
|
||||
transform="translate(-1.013,-0.0085)">
|
||||
<g
|
||||
transform="translate(1)"
|
||||
id="g10"
|
||||
style="fill:#434343">
|
||||
<path
|
||||
d="M 10.768,2.757 8.579,0.244 C 8.264,-0.07 7.753,-0.07 7.436,0.244 L 5.247,2.757 C 4.932,3.072 4.884,3.633 5.198,3.947 H 7 v 1.922 c 0,0.559 0.434,1.01 0.969,1.01 0.535,0 0.969,-0.451 0.969,-1.01 V 3.947 h 1.781 c 0.315,-0.315 0.364,-0.875 0.049,-1.19 z"
|
||||
class="si-glyph-fill"
|
||||
id="path6"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff" />
|
||||
<path
|
||||
d="m 13.993,1.006 h -3.29 l 0.891,0.975 h 1.583 L 14.54,9.01 H 1.505 L 2.912,1.981 H 4.594 L 5.36,1.006 H 2.073 l -2.06,8.755 v 4.17 c 0,1.334 0.472,2.028 1.804,2.028 h 12.28 c 1.246,0 1.885,-0.527 1.885,-2.111 V 9.761 Z M 10.016,11 H 5.985 V 9.969 h 4.031 z"
|
||||
class="si-glyph-fill"
|
||||
id="path8"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
243
phw.css
Normal file
243
phw.css
Normal file
@ -0,0 +1,243 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Texturina:ital,wght@0,200;1,200&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Texturina', serif;
|
||||
|
||||
--PUP-BGCOLOR: #EFEFEF;
|
||||
--PAGE-BGCOLOR: #EFEFEF;
|
||||
--BTN-INACT-BGCOLOR: #28C1C0;
|
||||
--BTN-HOV-BGCOLOR: #198786;
|
||||
--BTN-ACT-BGCOLOR: #90dedd;
|
||||
--INPUT-INACT-BORDERCOLOR: lightgray;
|
||||
--INPUT-ACT-BORDERCOLOR: var(--BTN-HOV-BGCOLOR);
|
||||
--INPUT-BGCOLOR: var(--PUP-BGCOLOR);
|
||||
--LABEL-TCOLOR: #0d4c4b;
|
||||
|
||||
--TITLE-COLOR: white;
|
||||
--AUTHOR-COLOR: lightgray;
|
||||
--DESC-COLOR: white;
|
||||
|
||||
background-color: var(--PAGE-BGCOLOR);
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-family: 'Texturina', serif;
|
||||
font-size: 16px;
|
||||
background-color: var(--INPUT-BGCOLOR);
|
||||
}
|
||||
|
||||
label {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
section.upload-popup {
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
left: calc(50vw - 250px);
|
||||
top: calc(50vh - 250px);
|
||||
background-color: var(--PUP-BGCOLOR);
|
||||
overflow: hidden;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
section.upload-popup-slider {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1600px;
|
||||
height: 500px;
|
||||
background-color: var(--PUP-BGCOLOR);
|
||||
left: 0px;
|
||||
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
section.upload-popup-inner-container {
|
||||
display: inline-block;
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
background-color: var(--PUP-BGCOLOR);
|
||||
}
|
||||
|
||||
section.btn,
|
||||
section.upload-btn {
|
||||
padding: 0.8em 1.2em;
|
||||
background-color: var(--BTN-INACT-BGCOLOR);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
section.btn:hover,
|
||||
section.upload-btn:hover {
|
||||
background-color: var(--BTN-HOV-BGCOLOR);
|
||||
}
|
||||
|
||||
section.btn:active,
|
||||
section.upload-btn:active {
|
||||
background-color: var(--BTN-ACT-BGCOLOR);
|
||||
}
|
||||
|
||||
section.upload-btn {
|
||||
padding: 1em 1em;
|
||||
background-color: gray;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
height: 2.4em;
|
||||
width: 2.4em;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
*[shown="false"] {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
opacity: 0%;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
*[shown="true"] {
|
||||
opacity: 100%;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--LABEL-TCOLOR);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea {
|
||||
margin-left: 20px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid var(--INPUT-INACT-BORDERCOLOR);
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
textarea:focus {
|
||||
border-bottom-color: var(--INPUT-ACT-BORDERCOLOR);
|
||||
}
|
||||
|
||||
section.upload-popup-closebtn {
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
float: right;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
text-align: center;
|
||||
right: 0.5em;
|
||||
color: #c15353;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
section.display {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc(100vw - 10px);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
img.thumbnail {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
/*max-width: 600px;*/
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
img.thumbnail:hover {
|
||||
filter: brightness(130%);
|
||||
}
|
||||
|
||||
section.thumbnail-container {
|
||||
margin: 4px 4px;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
section.viewer {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
text-align: center;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
section.viewer[shown="true"]
|
||||
{
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
img.viewer {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
z-index: 3000;
|
||||
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
span.art-title,
|
||||
span.art-author,
|
||||
span.art-desc {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
span.art-title {
|
||||
left: 1em;
|
||||
color: var(--TITLE-COLOR);
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
span.art-author {
|
||||
left: 2.5em;
|
||||
top: 45px;
|
||||
color: var(--AUTHOR-COLOR);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
span.art-desc {
|
||||
left: 2.2em;
|
||||
right: 1em;
|
||||
top: 85px;
|
||||
color: var(--DESC-COLOR);
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
section.art-captions {
|
||||
display: block;
|
||||
z-index: 4000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 200px;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
section[shown="true"] {
|
||||
opacity: 100%;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user