Photowall/Photowall_WebApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobilos nagyjából kész, színkezelés hozzáadva

Browse Source
This commit is contained in:
Wiesner András 2021-01-17 13:45:57 +01:00
parent 512c3915b1
commit d2f1075601
4 changed files with 317 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.php
View File

@ -2,19 +2,22 @@
<html lang="hu"> <html lang="hu">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>Fotófal</title> <title>Fotófal</title>
<script src="js/o.js"></script> <script src="js/o.js"></script>
<script src="js/socket.js"></script> <script src="js/socket.js"></script>
<script src="js/slider.js"></script> <script src="js/slider.js"></script>
<script src="js/phw.js"></script> <script src="js/phw.js"></script>
<script src="js/color.js"></script>
<link href="phw.css" rel="stylesheet"> <link href="phw.css" rel="stylesheet">
</head> </head>
<body> <body>
<!-- MEGJELENÍTŐ --> <!-- MEGJELENÍTŐ -->
<section id="display"> <section class="display" id="display">
</section> </section>
@ -55,6 +58,7 @@
<label for="description">Leírás:</label><br> <label for="description">Leírás:</label><br>
<textarea id="description" style="width: 440px; height: 5em;" <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> placeholder="A válasz az életet, a világmindenséget, meg mindent érintő kérdésre."></textarea><br><br>
<input type="checkbox" id="respchkbox">A feltöltött tartalmamért <i>teljes</i> felelősséget vállalok.
</section> </section>
<section style="text-align: right;"> <section style="text-align: right;">
<section class="btn" onclick="publish()" id="publishbtn">Mehet!</section> <section class="btn" onclick="publish()" id="publishbtn">Mehet!</section>
@ -75,6 +79,9 @@
</section> </section>
</section> </section>
<!-- TESZTVERZIÓ -->
<section class="testversion-sign">TESZTVERZIÓ</section>
<script> <script>
init_photowall(); init_photowall();
</script> </script>

110
js/color.js Normal file
View File

@ -0,0 +1,110 @@
class Color {
constructor() {
this.r = this.g = this.b = 0;
this.a = 1.0;
this.components = [ "r", "g", "b", "a" ];
}
// komponensek korlátozása az értelmezési tartományra
clip_components() {
for (let i = 0; i < 4; i++) {
let orig_val = this[this.components[i]];
this[this.components[i]] = Math.round(Math.min(255, Math.max(this[this.components[i]], 0)));
if (orig_val !== this[this.components[i]]) {
console.log(`Warning: channel ${this.components[i]} clipped!`);
}
}
}
// rgb(r,g,b) vagy rgba(r,g,b,a) formátumot feldolgoz
from_cssrgb(rgb_str) {
let parts = rgb_str.split("(");
// ha érvénytelen az eredmény
if (parts === null || parts.length < 2) {
return;
}
// ha érvényes, akkor levágjuk a végéről a zárójelet
parts = parts[1].split(")");
if (parts === null || parts.length < 1) {
return;
}
let components_str = parts[0];
// whitespace-ek kiütése
components_str = components_str.replace(/[ ]/, '');
// komponensek kigyűjtése
let components = components_str.split(",");
// ha nincs elég komponens, akkor érvénytelen
if (components === null || components.length < 3) {
return;
}
// csonkolás a megfelelő tartományra
for (let i = 0; i < components.length; i++) {
components[i] = Math.round(Math.min(255, Math.max(components[i], 0)));
}
// komponensek előállítása
this.r = Number(components[0]);
this.g = Number(components[1]);
this.b = Number(components[2]);
if (components.length <= 4) {
this.a = Number(components[3]);
}
}
// rgb(r,g,b) formátumban kiadja a színt
to_cssrgb() {
return `rgb(${this.r},${this.g},${this.b})`;
}
// rgba(r,g,b,a) formátumban kiadja a színt
to_rgba() {
return `rgb(${this.r},${this.g},${this.b},${this.a})`;
}
// #RRGGBB vagy #RRGGBBAA formátum befogadása
from_hexa(hexa_str) {
let val = hexa_str.trim();
if (hexa_str.charAt(0) === '#') {
val = val.substr(1);
}
this.r = parseInt(val.substr(0,2), 16);
this.g = parseInt(val.substr(2,2), 16);
this.b = parseInt(val.substr(4,2), 16);
// ha van alpha-csatorna is...
if (val.length >= 8) {
this.a = parseInt(val.substr(6,2), 16);
}
}
// alpha-csatornával együtt kiadja hex-formátumban
to_hexa() {
return `#${this.r.toString(16)}${this.g.toString(16)}${this.b.toString(16)}${this.a.toString(16)}`;
}
// szín kiadása hex-formátumban alpha-csatorna nélkül
to_hex() {
return `#${this.r.toString(16)}${this.g.toString(16)}${this.b.toString(16)}`;
}
// szín szorzása konstanssal
mul(c) {
for (let i = 0; i < 4; i++) {
this[this.components[i]] *= c;
}
// clip...
this.clip_components();
}
}

66
js/phw.js
View File

@ -12,7 +12,7 @@ function toggle_show(obj) {
} }
function scroll_enable(on) { function scroll_enable(on) {
document.body.style.overflow = on ? "auto" : "hidden"; document.body.style.overflowY = on ? "scroll" : "hidden";
} }
// ----------------------------------------- // -----------------------------------------
@ -24,6 +24,13 @@ var publish_btn_id = "publishbtn";
var image_uid = null; var image_uid = null;
function determine_sliding_unit() {
if (window.innerWidth > 600) { // számítógépes megjelenítés
slide_unit = 504;
} else { // mobilos megjelenítés
slide_unit = ((window.orientation % 90) === 0) ? window.innerWidth : window.innerHeight; // deprecated, de működik...
}
}
function pup_slide(units) { function pup_slide(units) {
slider_slide(slider_id, -slide_unit * units); slider_slide(slider_id, -slide_unit * units);
@ -33,6 +40,12 @@ function pup_reset() {
hide(upload_popup_id); // ablak eltüntetése hide(upload_popup_id); // ablak eltüntetése
reset_slider(slider_id); // slider visszaállítása reset_slider(slider_id); // slider visszaállítása
o(publish_btn_id).innerText = "Mehet!"; // gombfelirat visszaállítása o(publish_btn_id).innerText = "Mehet!"; // gombfelirat visszaállítása
o("respchkbox").checked = false; // pipa kivétele
// mezők törlése
o("author").value = "";
o("imgtitle").value = "";
o("description").value = "";
} }
// kép publikálása // kép publikálása
@ -52,6 +65,11 @@ function publish() {
return; return;
} }
// checkbox ellenőrzése
if (!o("respchkbox").checked) {
return;
}
// struktúra összeállítása // struktúra összeállítása
let details = { let details = {
uid: image_uid, uid: image_uid,
@ -73,7 +91,7 @@ function publish() {
if (Number(req.response) === 0) { if (Number(req.response) === 0) {
alert("Sikeres feltöltés!"); alert("Sikeres feltöltés!");
req_update(); close_upload_pup();
} else { } else {
alert("Ugyanezt képet már korábban feltöltötték!"); alert("Ugyanezt képet már korábban feltöltötték!");
} }
@ -151,6 +169,7 @@ function close_upload_pup() {
let display = o("display"); let display = o("display");
display.style.filter = ""; display.style.filter = "";
scroll_enable(true); scroll_enable(true);
pup_reset();
} }
@ -186,24 +205,37 @@ var batch_loading_quantity = 10; // egyszerre betöltött képek mennyisége
var autoload_enabled = false; // automatikus betöltés var autoload_enabled = false; // automatikus betöltés
var artworks_loaded_n = 0; // ennyi kép van betöltve a megjelenítőbe 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 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 extra_margin = 0; // extra margó, amire számítani kell a fal generálásakor
var last_uid = ""; // utolsó UID var last_uid = ""; // utolsó UID
var wall_height = 0; // a fal magassága, pixelben 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_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 dynamic_loading_under_way = false; // dinamikus töltés folyamatban, ne indítsunk új requestet
var update_interval = 10000; // automatikus frissítés 10 másodpercenként
var thumbnails = []; var thumbnails = [];
// fotófal inicializálása // fotófal inicializálása
function init_photowall() { function init_photowall() {
scroll_enable(true);
determine_sliding_unit();
init_drag_and_drop(); init_drag_and_drop();
req_general_info(); req_general_info();
init_dynamic_loading(); init_dynamic_loading();
init_viewer(); init_viewer();
// újrakompozitálás átméretezés esetén
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
compose_wall(); compose_wall();
}, false); }, false);
window.addEventListener("orientationchange", (e) => {
determine_sliding_unit();
});
// automatikus frissítés
setInterval(() => {
req_update();
}, 10000);
} }
// inicializálási lánc // inicializálási lánc
@ -331,12 +363,12 @@ function compose_wall() {
// képek elhelyzése // képek elhelyzése
for (let i = 0; i < line_entries.length; i++) { for (let i = 0; i < line_entries.length; i++) {
// képet tároló elem
let container_section = document.createElement("section"); let container_section = document.createElement("section");
container_section.style.backgroundColor = line_entries[i].ColorMean; container_section.style.backgroundColor = line_entries[i].ColorMean;
container_section.classList.add("thumbnail-container"); container_section.classList.add("thumbnail-container");
console.log(line_entries[i]); // a bélyegkép
let img = document.createElement("img"); let img = document.createElement("img");
img.classList.add("thumbnail"); img.classList.add("thumbnail");
container_section.style.width = img.style.width = `${line_entries[i].width * line_entries[i].scale_factor}px`; container_section.style.width = img.style.width = `${line_entries[i].width * line_entries[i].scale_factor}px`;
@ -350,7 +382,20 @@ function compose_wall() {
open_viewer(img.details); open_viewer(img.details);
}, false); }, false);
// kép címe
let title_span = document.createElement("span");
title_span.classList.add("thumb-title");
title_span.innerText = line_entries[i].Title;
// sáv színének igazítása a kép domináns színéhez
let title_bgcolor = new Color();
title_bgcolor.from_cssrgb(line_entries[i].ColorMean);
//title_bgcolor.mul(0.8);
title_bgcolor.a = 0.6;
title_span.style.backgroundColor = title_bgcolor.to_rgba();
container_section.appendChild(img); container_section.appendChild(img);
container_section.appendChild(title_span);
display.appendChild(container_section); display.appendChild(container_section);
} }
@ -374,6 +419,11 @@ function req_update() {
function recv_update(state, resp) { function recv_update(state, resp) {
let img_update_batch = JSON.parse(resp); let img_update_batch = JSON.parse(resp);
// ha nem volt semmi újabb, akkor kilépünk
if (img_update_batch.length === 0) {
return;
}
// növeljük az összes és a betöltött művek számát // növeljük az összes és a betöltött művek számát
artworks_loaded_n += img_update_batch.length; artworks_loaded_n += img_update_batch.length;
total_artwork_count += img_update_batch.length; total_artwork_count += img_update_batch.length;
@ -464,6 +514,12 @@ function open_viewer(details) {
o("artauthor").innerText = details.Author; o("artauthor").innerText = details.Author;
o("artdesc").innerText = details.Description; o("artdesc").innerText = details.Description;
// feliratcsík háttérszínének meghatározása a domináns szín alapján
/*let captions_bgcolor = new Color();
captions_bgcolor.from_cssrgb(details.ColorMean);
captions_bgcolor.a = 0.6;
o("artcaptions").style.backgroundColor = captions_bgcolor.to_rgba();*/
// ... // ...
scroll_enable(false); scroll_enable(false);
show("viewersect"); show("viewersect");

150
phw.css
View File

@ -18,6 +18,11 @@ body {
--DESC-COLOR: white; --DESC-COLOR: white;
background-color: var(--PAGE-BGCOLOR); background-color: var(--PAGE-BGCOLOR);
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
} }
input, textarea { input, textarea {
@ -61,6 +66,29 @@ section.upload-popup-inner-container {
padding: 10px; padding: 10px;
vertical-align: bottom; vertical-align: bottom;
background-color: var(--PUP-BGCOLOR); background-color: var(--PUP-BGCOLOR);
overflow-y: auto;
}
@media only screen and (max-width: 600px) {
section.upload-popup {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: unset;
height: unset;
}
section.upload-popup-slider {
width: calc(300% + 100px);
height: 100%;
}
section.upload-popup-inner-container {
width: calc(100vw - 40px);
height: 100%;
}
} }
section.btn, section.btn,
@ -119,6 +147,13 @@ textarea {
border-bottom: 2px solid var(--INPUT-INACT-BORDERCOLOR); border-bottom: 2px solid var(--INPUT-INACT-BORDERCOLOR);
} }
@media only screen and (max-width: 600px) {
input[type="text"],
textarea {
max-width: 80vw;
}
}
input[type="text"]:focus, input[type="text"]:focus,
textarea:focus { textarea:focus {
border-bottom-color: var(--INPUT-ACT-BORDERCOLOR); border-bottom-color: var(--INPUT-ACT-BORDERCOLOR);
@ -139,8 +174,16 @@ section.upload-popup-closebtn {
section.display { section.display {
display: block; display: block;
position: absolute; position: absolute;
width: calc(100vw - 10px); top: 5px;
margin: 5px; left: 5px;
right: 0;
margin: 0;
}
@media only screen and (max-width: 600px) {
section.display {
margin: 0;
}
} }
img.thumbnail { img.thumbnail {
@ -160,12 +203,13 @@ img.thumbnail:hover {
} }
section.thumbnail-container { section.thumbnail-container {
position: relative;
margin: 4px 4px; margin: 4px 4px;
display: inline-block; display: inline-block;
border-radius: 2px; border-radius: 2px;
} }
section.viewer { /*section.viewer {
position: fixed; position: fixed;
display: block; display: block;
z-index: 2000; z-index: 2000;
@ -178,6 +222,24 @@ section.viewer {
opacity: 0; opacity: 0;
transition: 0.3s ease;
}*/
section.viewer {
position: fixed;
display: flex;
z-index: 2000;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.9);
text-align: center;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.3s ease; transition: 0.3s ease;
} }
@ -198,30 +260,36 @@ img.viewer {
span.art-title, span.art-title,
span.art-author, span.art-author,
span.art-desc { span.art-desc {
position: absolute; display: block;
text-align: left;
} }
span.art-title { span.art-title {
left: 1em;
color: var(--TITLE-COLOR); color: var(--TITLE-COLOR);
font-weight: bold; font-weight: bold;
font-size: 32px; font-size: 32px;
text-align: left;
text-indent: 1em;
} }
span.art-author { span.art-author {
left: 2.5em;
top: 45px;
color: var(--AUTHOR-COLOR); color: var(--AUTHOR-COLOR);
font-size: 20px; font-size: 20px;
margin-left: 3em;
} }
span.art-desc { span.art-desc {
left: 2.2em;
right: 1em; right: 1em;
top: 85px;
color: var(--DESC-COLOR); color: var(--DESC-COLOR);
font-size: 16px; font-size: 16px;
text-align: left; margin-left: 3.5em;
margin-top: 0.5em;
}
@keyframes hide-art-caption {
0% { max-height: 100vh; background-color: rgba(0, 0, 0, 0.6); }
80% { max-height: 100vh; background-color: rgba(0, 0, 0, 0.6); }
100% { max-height: 24px; background-color: rgba(0, 0, 0, 0.0); }
} }
section.art-captions { section.art-captions {
@ -231,13 +299,71 @@ section.art-captions {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 200px; padding-bottom: 2em;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0%;
max-height: 24px;
transition: 1s ease;
}
section.art-captions[shown="true"] {
animation-name: hide-art-caption;
animation-duration: 10s;
animation-delay: 0s;
/*animation-fill-mode: forwards;*/
background-color: rgba(0, 0, 0, 0.0);
transition: 1s ease;
}
section.art-captions[shown="true"]:hover {
max-height: 100vh !important;
background-color: rgba(0, 0, 0, 0.6);
transition: 1s ease;
}
section[shown="true"] {
opacity: 100%;
}
@media only screen and (max-width: 600px) {
section.art-captions {
padding-bottom: 5.5em;
}
}
section.testversion-sign {
position: fixed;
display: block;
background-color: #198786;
color: white;
left: -40px;
bottom: 33px;
transform: rotate(45deg);
width: 170px;
text-align: center;
}
span.thumb-title {
display: block;
position: absolute;
left: 0em;
bottom: 0em;
font-size: 24px;
right: 0;
color: white;
background-color: rgba(0,0,0,0.8);
padding-left: 1em;
padding-top: 0.2em;
padding-bottom: 0.2em;
opacity: 0; opacity: 0;
transition: 0.3s ease; transition: 0.3s ease;
} }
section[shown="true"] { section.thumbnail-container:hover > span.thumb-title {
opacity: 100%; opacity: 100%;
} }