From d2f10756019c038035112f1b5bf56ec566a5add5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wiesner=20Andr=C3=A1s?= Date: Sun, 17 Jan 2021 13:45:57 +0100 Subject: [PATCH] =?UTF-8?q?mobilos=20nagyj=C3=A1b=C3=B3l=20k=C3=A9sz,=20sz?= =?UTF-8?q?=C3=ADnkezel=C3=A9s=20hozz=C3=A1adva?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.php | 9 +++- js/color.js | 110 ++++++++++++++++++++++++++++++++++++++ js/phw.js | 66 +++++++++++++++++++++-- phw.css | 150 +++++++++++++++++++++++++++++++++++++++++++++++----- 4 files changed, 317 insertions(+), 18 deletions(-) create mode 100644 js/color.js diff --git a/index.php b/index.php index 545904e..b69e92c 100644 --- a/index.php +++ b/index.php @@ -2,19 +2,22 @@ + + Fotófal + -
+
@@ -55,6 +58,7 @@


+ A feltöltött tartalmamért teljes felelősséget vállalok.
Mehet!
@@ -75,6 +79,9 @@
+ +
TESZTVERZIÓ
+ diff --git a/js/color.js b/js/color.js new file mode 100644 index 0000000..546a6d0 --- /dev/null +++ b/js/color.js @@ -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(); + } + +} \ No newline at end of file diff --git a/js/phw.js b/js/phw.js index 9626402..e02d73d 100644 --- a/js/phw.js +++ b/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"); diff --git a/phw.css b/phw.css index fccceef..6f70c82 100644 --- a/phw.css +++ b/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%; } \ No newline at end of file