152 lines
4.8 KiB
JavaScript
152 lines
4.8 KiB
JavaScript
/* Todo:
|
|
* - Event tracker (rt.events)
|
|
* - Functions und Events in Module auslagern
|
|
*/
|
|
import rt from "./rt.js";
|
|
import "./test.js";
|
|
|
|
const calcItems = () => {
|
|
const cs = window.getComputedStyle(rt.container.posts[0]);
|
|
const height = parseInt(cs.height.replace("px", ""));
|
|
const width = parseInt(cs.width.replace("px", ""));
|
|
const cols = ~~(width / ( rt.layout.itemsize + rt.layout.margin ));
|
|
const rows = ~~(height / ( rt.layout.itemsize + rt.layout.margin ));
|
|
rt.container.posts.forEach(e => {
|
|
e.style.marginLeft = Math.max((width - (cols * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) * 1.5;
|
|
});
|
|
|
|
return {
|
|
rows: rows,
|
|
cols: cols,
|
|
eps: rows * cols,
|
|
width: width,
|
|
height: height
|
|
};
|
|
};
|
|
const getItems = async ({ el, opt = "" }) => {
|
|
const tmp = calcItems();
|
|
if(tmp.eps === rt.items.eps)
|
|
return;
|
|
rt.items.eps = tmp.eps;
|
|
el.innerHTML = "";
|
|
const i = await (await fetch(`/api/p?eps=${tmp.eps}&${opt}`)).json();
|
|
|
|
const items = i.items.sort((a, b) => b.id - a.id);
|
|
items.forEach(item => {
|
|
const _a = document.createElement("a");
|
|
_a.title = item.mime;
|
|
_a.href = `#${item.id}`;//`${rt.url}/${item.id}`;
|
|
const _img = document.createElement("img");
|
|
_img.classList.add("thumb");
|
|
_img.src = `${rt.url}/t/${item.id}.png`;
|
|
_a.insertAdjacentElement("afterbegin", _img);
|
|
el.insertAdjacentElement("beforeend", _a);
|
|
});
|
|
rt.items.first = items[0].id;
|
|
rt.items.last = items[items.length - 1].id;
|
|
rt.items.oldest = i.oldest;
|
|
rt.items.newest = i.newest;
|
|
window.history.pushState(rt.items.first, `f0ck.me! page ${rt.items.first}`, `/page/${rt.items.first}`);
|
|
|
|
document.querySelector("#pagePosition").innerHTML = `items ${rt.items.first} - ${rt.items.last}`;
|
|
};
|
|
|
|
const scroll = async e => { // uff
|
|
if(rt.tmp.scroll)
|
|
return;
|
|
rt.tmp.scroll = true;
|
|
const direction = e.target.id === "up" ? "up" : e.deltaY < 0 ? "up": "down";
|
|
if((direction === "up" && rt.items.first === rt.items.newest) || (direction === "down" && rt.items.last === rt.items.oldest))
|
|
return rt.tmp.scroll = false;
|
|
rt.items.eps = 0;
|
|
await getItems({
|
|
el: rt.container.posts[direction === "up" ? 0 : 2],
|
|
opt: direction === "up" ? `id=${rt.items.first}&order=asc` : `id=${rt.items.last}&order=desc`
|
|
});
|
|
rt.container.posts[direction === "up" ? 0 : 2].scrollIntoView({ block: rt.st.block, behavior: "smooth" });
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
|
|
rt.container.posts[1].innerHTML = rt.container.posts[direction === "up" ? 0 : 2].innerHTML;
|
|
rt.container.posts[1].scrollIntoView({ block: rt.st.block, behavior: "auto" });
|
|
|
|
rt.tmp.scroll = false;
|
|
};
|
|
|
|
const swiper = {
|
|
touchStartY: 0,
|
|
touchEndY: 0,
|
|
minSwipePixels: 30,
|
|
detectionZone: undefined,
|
|
swiperCallback: () => {},
|
|
init: (detectionZone, callback) => {
|
|
swiper.swiperCallback = callback
|
|
detectionZone.addEventListener("touchstart", event => {
|
|
swiper.touchStartY = event.changedTouches[0].screenY;
|
|
}, false);
|
|
detectionZone.addEventListener("touchend", event => {
|
|
swiper.touchEndY = event.changedTouches[0].screenY;
|
|
swiper.handleSwipeGesture();
|
|
}, false);
|
|
},
|
|
handleSwipeGesture: () => {
|
|
let direction, moved;
|
|
if (swiper.touchEndY <= swiper.touchStartY) {
|
|
moved = swiper.touchStartY - swiper.touchEndY;
|
|
direction = "down";
|
|
}
|
|
if (swiper.touchEndY >= swiper.touchStartY) {
|
|
moved = swiper.touchEndY - swiper.touchStartY;
|
|
direction = "up";
|
|
}
|
|
if (moved > swiper.minSwipePixels && direction !== "undefined")
|
|
swiper.swipe(direction, moved);
|
|
},
|
|
swipe: (direction, movedPixels) => {
|
|
const ret = {};
|
|
ret.direction = direction;
|
|
ret.movedPixels = movedPixels;
|
|
swiper.swiperCallback(ret);
|
|
}
|
|
};
|
|
|
|
const resize = e => {
|
|
e.preventDefault();
|
|
clearTimeout(rt.tmp.resize);
|
|
rt.tmp.resize = setTimeout(() => getItems({
|
|
el: rt.container.posts[1],
|
|
opt: `id=${rt.items.first + 1}&order=desc`
|
|
}), 500);
|
|
};
|
|
|
|
// events
|
|
swiper.init(rt.container.wrapper, e => scroll({ target: { id: e.direction }}));
|
|
document.querySelectorAll("div.pscroll").forEach(p => p.addEventListener("click", scroll));
|
|
document.addEventListener("wheel", scroll);
|
|
|
|
(() => { // init
|
|
window.addEventListener("resize", resize);
|
|
setTimeout(() => {
|
|
const pn = parseInt(document.location.pathname.split("/").splice(-1));
|
|
rt.container.posts[1].scrollIntoView({ block: rt.st.block }); // mitte
|
|
getItems({
|
|
el: rt.container.posts[1],
|
|
opt: pn > 0 ? `id=${pn + 1}&order=desc` : ""
|
|
});
|
|
}, 300);
|
|
})();
|
|
|
|
|
|
|
|
window.addEventListener("hashchange", e => {
|
|
const itemid = parseInt(e.newURL.split("#").slice(-1));
|
|
if(itemid === "NaN")
|
|
return rt.container.itemview.style.display = "none";
|
|
|
|
|
|
rt.container.itemview.style.display = "block"; // show itemview
|
|
// remove page events
|
|
document.removeEventListener("wheel", scroll);
|
|
|
|
console.log(itemid);
|
|
});
|