mobilos nagyjából kész, színkezelés hozzáadva
This commit is contained in:
parent
512c3915b1
commit
d2f1075601
@ -2,19 +2,22 @@
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<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>
|
||||
|
||||
<script src="js/o.js"></script>
|
||||
<script src="js/socket.js"></script>
|
||||
<script src="js/slider.js"></script>
|
||||
<script src="js/phw.js"></script>
|
||||
<script src="js/color.js"></script>
|
||||
|
||||
<link href="phw.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- MEGJELENÍTŐ -->
|
||||
<section id="display">
|
||||
<section class="display" id="display">
|
||||
|
||||
</section>
|
||||
|
||||
@ -55,6 +58,7 @@
|
||||
<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>
|
||||
<input type="checkbox" id="respchkbox">A feltöltött tartalmamért <i>teljes</i> felelősséget vállalok.
|
||||
</section>
|
||||
<section style="text-align: right;">
|
||||
<section class="btn" onclick="publish()" id="publishbtn">Mehet!</section>
|
||||
@ -75,6 +79,9 @@
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- TESZTVERZIÓ -->
|
||||
<section class="testversion-sign">TESZTVERZIÓ</section>
|
||||
|
||||
<script>
|
||||
init_photowall();
|
||||
</script>
|
||||
|
||||
110
js/color.js
Normal file
110
js/color.js
Normal 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
66
js/phw.js
@ -12,7 +12,7 @@ function toggle_show(obj) {
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
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) {
|
||||
slider_slide(slider_id, -slide_unit * units);
|
||||
@ -33,6 +40,12 @@ 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
|
||||
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
|
||||
@ -52,6 +65,11 @@ function publish() {
|
||||
return;
|
||||
}
|
||||
|
||||
// checkbox ellenőrzése
|
||||
if (!o("respchkbox").checked) {
|
||||
return;
|
||||
}
|
||||
|
||||
// struktúra összeállítása
|
||||
let details = {
|
||||
uid: image_uid,
|
||||
@ -73,7 +91,7 @@ function publish() {
|
||||
|
||||
if (Number(req.response) === 0) {
|
||||
alert("Sikeres feltöltés!");
|
||||
req_update();
|
||||
close_upload_pup();
|
||||
} else {
|
||||
alert("Ugyanezt képet már korábban feltöltötték!");
|
||||
}
|
||||
@ -151,6 +169,7 @@ function close_upload_pup() {
|
||||
let display = o("display");
|
||||
display.style.filter = "";
|
||||
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 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 extra_margin = 0; // 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 update_interval = 10000; // automatikus frissítés 10 másodpercenként
|
||||
|
||||
var thumbnails = [];
|
||||
|
||||
// fotófal inicializálása
|
||||
function init_photowall() {
|
||||
scroll_enable(true);
|
||||
determine_sliding_unit();
|
||||
init_drag_and_drop();
|
||||
req_general_info();
|
||||
init_dynamic_loading();
|
||||
init_viewer();
|
||||
|
||||
// újrakompozitálás átméretezés esetén
|
||||
window.addEventListener("resize", () => {
|
||||
compose_wall();
|
||||
}, false);
|
||||
|
||||
window.addEventListener("orientationchange", (e) => {
|
||||
determine_sliding_unit();
|
||||
});
|
||||
|
||||
// automatikus frissítés
|
||||
setInterval(() => {
|
||||
req_update();
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
// inicializálási lánc
|
||||
@ -331,12 +363,12 @@ function compose_wall() {
|
||||
|
||||
// képek elhelyzése
|
||||
for (let i = 0; i < line_entries.length; i++) {
|
||||
// képet tároló elem
|
||||
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]);
|
||||
|
||||
// a bélyegkép
|
||||
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`;
|
||||
@ -350,7 +382,20 @@ function compose_wall() {
|
||||
open_viewer(img.details);
|
||||
}, 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(title_span);
|
||||
display.appendChild(container_section);
|
||||
}
|
||||
|
||||
@ -374,6 +419,11 @@ function req_update() {
|
||||
function recv_update(state, 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
|
||||
artworks_loaded_n += 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("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);
|
||||
show("viewersect");
|
||||
|
||||
150
phw.css
150
phw.css
@ -18,6 +18,11 @@ body {
|
||||
--DESC-COLOR: white;
|
||||
|
||||
background-color: var(--PAGE-BGCOLOR);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@ -61,6 +66,29 @@ section.upload-popup-inner-container {
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
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,
|
||||
@ -119,6 +147,13 @@ textarea {
|
||||
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,
|
||||
textarea:focus {
|
||||
border-bottom-color: var(--INPUT-ACT-BORDERCOLOR);
|
||||
@ -139,8 +174,16 @@ section.upload-popup-closebtn {
|
||||
section.display {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc(100vw - 10px);
|
||||
margin: 5px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
section.display {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img.thumbnail {
|
||||
@ -160,12 +203,13 @@ img.thumbnail:hover {
|
||||
}
|
||||
|
||||
section.thumbnail-container {
|
||||
position: relative;
|
||||
margin: 4px 4px;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
section.viewer {
|
||||
/*section.viewer {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 2000;
|
||||
@ -178,6 +222,24 @@ section.viewer {
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -198,30 +260,36 @@ img.viewer {
|
||||
span.art-title,
|
||||
span.art-author,
|
||||
span.art-desc {
|
||||
position: absolute;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span.art-title {
|
||||
left: 1em;
|
||||
color: var(--TITLE-COLOR);
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
text-align: left;
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
span.art-author {
|
||||
left: 2.5em;
|
||||
top: 45px;
|
||||
color: var(--AUTHOR-COLOR);
|
||||
font-size: 20px;
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
span.art-desc {
|
||||
left: 2.2em;
|
||||
right: 1em;
|
||||
top: 85px;
|
||||
color: var(--DESC-COLOR);
|
||||
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 {
|
||||
@ -231,13 +299,71 @@ section.art-captions {
|
||||
left: 0;
|
||||
right: 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;
|
||||
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
section[shown="true"] {
|
||||
section.thumbnail-container:hover > span.thumb-title {
|
||||
opacity: 100%;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user