f0ckv2/public/js/lib.js
2019-05-15 17:51:11 +00:00

122 lines
4.2 KiB
JavaScript

import rt from "./rt.js";
import events from "./events.js";
const calcItems = () => {
const cs = window.getComputedStyle(rt.ct.content);
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.ct.wrapper.pages.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 + "px";
e.style.paddingTop = Math.max((height - (rows * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) + "px";
});
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(`${rt.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;
rt.tmp.hash = false;
window.history.pushState(rt.items.first, `f0ck.me! page ${rt.items.first}`, `/page/${rt.items.first}${(window.location.hash?window.location.hash:"")}`);
rt.tmp.hash = true;
rt.ct.header.pagepos.innerHTML = `items ${rt.items.first} - ${rt.items.last}`;
};
const scrolltomiddle = el => {
el[0].scrollIntoView({ block: rt.vars.block });
el[2].scrollIntoView({ block: rt.vars.block });
el[1].scrollIntoView({ block: rt.vars.block });
};
const showLayer = (layer, scroll = true) => {
// hide all pages
for(let e in rt.ct.tabs)
rt.ct.tabs[e].style.display = "none";
// remove all events for reassigning
document.removeEventListener("wheel", events.wheel.item);
document.removeEventListener("wheel", events.wheel.page);
window.removeEventListener("resize", events.resize.item);
window.removeEventListener("resize", events.resize.page);
[...rt.ct.arrows] // remove itembuttons
.filter(e => ["left", "right"].includes(e.id))
.forEach(p => p.removeEventListener("click", events.wheel.item));
[...rt.ct.arrows] // remove pagebuttons
.filter(e => ["up", "down"].includes(e.id))
.forEach(p => p.removeEventListener("click", events.wheel.page));
switch(layer) {
case "page":
rt.ct.tabs.item.style.display = "none";
rt.ct.tabs.howto.style.display = "none";
document.addEventListener("wheel", events.wheel.page);
window.addEventListener("resize", events.resize.page);
[...rt.ct.arrows] // add pagebuttons
.filter(e => ["up", "down"].includes(e.id))
.forEach(p => p.addEventListener("click", events.wheel.page));
if(scroll)
scrolltomiddle(rt.ct.wrapper.pages);
rt.ct.header.pagepos.style.display = "block";
rt.ct.header.itempos.style.display = "none";
rt.ct.header.iteminfo.style.display = "none";
break;
case "item":
rt.ct.tabs.item.style.display = "block";
document.addEventListener("wheel", events.wheel.item);
window.addEventListener("resize", events.resize.item);
[...rt.ct.arrows] // add itembuttons
.filter(e => ["left", "right"].includes(e.id))
.forEach(p => p.addEventListener("click", events.wheel.item));
if(scroll)
scrolltomiddle(rt.ct.wrapper.items);
rt.ct.header.pagepos.style.display = "none";
rt.ct.header.itempos.style.display = "block";
rt.ct.header.iteminfo.style.display = "block";
break;
case "howto":
rt.ct.tabs.howto.style.display = "block";
break;
}
};
export default { // oof
calcItems: calcItems,
getItems: getItems,
showLayer: showLayer,
scrolltomiddle: scrolltomiddle
};