f0ckv2/public/js/f0ck.js
2019-05-07 20:23:19 +00:00

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);
});