diff --git a/index.php b/index.php
index 545904e..b69e92c 100644
--- a/index.php
+++ b/index.php
@@ -2,19 +2,22 @@
+
+
Fotófal
+
-
+
+
+
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