Build-time minification, image optimization, htmx SPA navigation, and local htmx bundle
This commit is contained in:
bronku
parent
50a5ca2c71
commit
b95d5c2ee5
13 changed files with 186 additions and 115 deletions
1
js/htmx.min.js
vendored
Normal file
1
js/htmx.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
170
js/portfolio.js
170
js/portfolio.js
|
|
@ -1,104 +1,94 @@
|
|||
(function () {
|
||||
var grid = document.getElementById("portfolio-grid");
|
||||
if (!grid) return;
|
||||
window.initPortfolio = function () {
|
||||
var old = document.getElementById('lightbox')
|
||||
if (old) old.remove()
|
||||
|
||||
var items = Array.from(grid.children);
|
||||
if (!items.length) return;
|
||||
var grid = document.getElementById('portfolio-grid')
|
||||
if (!grid) return
|
||||
|
||||
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>' +
|
||||
'<img src="" alt="">' +
|
||||
'<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 items = Array.from(grid.children)
|
||||
if (!items.length) return
|
||||
|
||||
var lbImg = lb.querySelector("img");
|
||||
var current = -1;
|
||||
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>' +
|
||||
'<img src="" alt="">' +
|
||||
'<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)
|
||||
|
||||
function open(idx) {
|
||||
current = idx;
|
||||
var img = items[current].querySelector("img");
|
||||
lbImg.removeAttribute("src");
|
||||
lbImg.alt = "";
|
||||
lb.classList.add("open");
|
||||
lbImg.src = img.src;
|
||||
lbImg.alt = img.alt;
|
||||
}
|
||||
var lbImg = lb.querySelector('img')
|
||||
var current = -1
|
||||
|
||||
function close() {
|
||||
lb.classList.remove("open");
|
||||
current = -1;
|
||||
}
|
||||
|
||||
function prev() {
|
||||
if (current < 0) return;
|
||||
open((current - 1 + items.length) % items.length);
|
||||
}
|
||||
|
||||
function next() {
|
||||
if (current < 0) return;
|
||||
open((current + 1) % items.length);
|
||||
}
|
||||
|
||||
items.forEach(function (item, 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();
|
||||
function open(idx) {
|
||||
current = idx
|
||||
var img = items[current].querySelector('img')
|
||||
lbImg.removeAttribute('src')
|
||||
lbImg.alt = ''
|
||||
lb.classList.add('open')
|
||||
lbImg.src = img.src
|
||||
lbImg.alt = img.alt
|
||||
}
|
||||
if (e.key === "ArrowLeft") {
|
||||
prev();
|
||||
e.preventDefault();
|
||||
|
||||
function close() {
|
||||
lb.classList.remove('open')
|
||||
current = -1
|
||||
}
|
||||
if (e.key === "ArrowRight") {
|
||||
next();
|
||||
e.preventDefault();
|
||||
|
||||
function prev() {
|
||||
if (current < 0) return
|
||||
open((current - 1 + items.length) % items.length)
|
||||
}
|
||||
});
|
||||
|
||||
lb.addEventListener("click", function (e) {
|
||||
if (e.target === lb) close();
|
||||
});
|
||||
function next() {
|
||||
if (current < 0) return
|
||||
open((current + 1) % items.length)
|
||||
}
|
||||
|
||||
var touchStartX = 0;
|
||||
var touchStartY = 0;
|
||||
lb.addEventListener(
|
||||
"touchstart",
|
||||
function (e) {
|
||||
touchStartX = e.changedTouches[0].screenX;
|
||||
touchStartY = e.changedTouches[0].screenY;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
items.forEach(function (item, i) {
|
||||
item.addEventListener('click', function () { open(i) })
|
||||
})
|
||||
|
||||
lb.addEventListener(
|
||||
"touchend",
|
||||
function (e) {
|
||||
var dx = e.changedTouches[0].screenX - touchStartX;
|
||||
var dy = e.changedTouches[0].screenY - touchStartY;
|
||||
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.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();
|
||||
if (dx < 0) next()
|
||||
else prev()
|
||||
}
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
})();
|
||||
}, { passive: true })
|
||||
}
|
||||
|
||||
window.initPortfolio()
|
||||
|
||||
document.addEventListener('htmx:afterSwap', window.initPortfolio)
|
||||
})()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue