122 lines
4.2 KiB
JavaScript
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
|
|
};
|