bronku/piekarnikgosipl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile layout work

Browse source
This commit is contained in:
bronku 2026-06-09 19:02:42 +02:00
parent 9ff9e59a8c
commit 94bc964e34
11 changed files with 348 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

81
js/portfolio.js
View file

@ -1,12 +1,12 @@
(function () {
var grid = document.getElementById('portfolio-grid');
var grid = document.getElementById("portfolio-grid");
if (!grid) return;
var items = Array.from(grid.children);
if (!items.length) return;
var lb = document.createElement('div');
lb.id = 'lightbox';
var lb = document.createElement("div");
lb.id = "lightbox";
lb.innerHTML =
'<button id="lb-close" aria-label="Zamknij"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>' +
'<button id="lb-prev" aria-label="Poprzednie"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>' +
@ -14,21 +14,21 @@
'<button id="lb-next" aria-label="Następne"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>';
document.body.appendChild(lb);
var lbImg = lb.querySelector('img');
var lbImg = lb.querySelector("img");
var current = -1;
function open(idx) {
current = idx;
var img = items[current].querySelector('img');
lbImg.removeAttribute('src');
lbImg.alt = '';
lb.classList.add('open');
var img = items[current].querySelector("img");
lbImg.removeAttribute("src");
lbImg.alt = "";
lb.classList.add("open");
lbImg.src = img.src;
lbImg.alt = img.alt;
}
function close() {
lb.classList.remove('open');
lb.classList.remove("open");
current = -1;
}
@ -43,21 +43,62 @@
}
items.forEach(function (item, i) {
item.addEventListener('click', function () { open(i); });
item.addEventListener("click", function () {
open(i);
});
});
lb.querySelector('#lb-close').addEventListener('click', close);
lb.querySelector('#lb-prev').addEventListener('click', function (e) { e.stopPropagation(); prev(); });
lb.querySelector('#lb-next').addEventListener('click', function (e) { e.stopPropagation(); next(); });
document.addEventListener('keydown', function (e) {
if (!lb.classList.contains('open')) return;
if (e.key === 'Escape') { close(); e.preventDefault(); }
if (e.key === 'ArrowLeft') { prev(); e.preventDefault(); }
if (e.key === 'ArrowRight') { next(); e.preventDefault(); }
lb.querySelector("#lb-close").addEventListener("click", close);
lb.querySelector("#lb-prev").addEventListener("click", function (e) {
e.stopPropagation();
prev();
});
lb.querySelector("#lb-next").addEventListener("click", function (e) {
e.stopPropagation();
next();
});
lb.addEventListener('click', function (e) {
document.addEventListener("keydown", function (e) {
if (!lb.classList.contains("open")) return;
if (e.key === "Escape") {
close();
e.preventDefault();
}
if (e.key === "ArrowLeft") {
prev();
e.preventDefault();
}
if (e.key === "ArrowRight") {
next();
e.preventDefault();
}
});
lb.addEventListener("click", function (e) {
if (e.target === lb) close();
});
var touchStartX = 0;
var touchStartY = 0;
lb.addEventListener(
"touchstart",
function (e) {
touchStartX = e.changedTouches[0].screenX;
touchStartY = e.changedTouches[0].screenY;
},
{ passive: true },
);
lb.addEventListener(
"touchend",
function (e) {
var dx = e.changedTouches[0].screenX - touchStartX;
var dy = e.changedTouches[0].screenY - touchStartY;
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
if (dx < 0) next();
else prev();
}
},
{ passive: true },
);
})();