129 lines
3.8 KiB
JavaScript
129 lines
3.8 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) * 3 + "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 getItem = async itemid => {
|
|
return await (await fetch(`${rt.api}/item/${itemid}`)).json();
|
|
};
|
|
|
|
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 closeItemview = () => {
|
|
rt.tmp.hash = false;
|
|
window.location.hash = "";
|
|
rt.ct.tabs.item.removeEventListener("click", closeItemview);
|
|
rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(f => {
|
|
f.style.boxShadow = null;
|
|
f.style.borderRadius = null;
|
|
f.style.transition = ".1s ease-out";
|
|
});
|
|
rt.ct.wrapper.items[1].innerHTML = "";
|
|
showLayer("page", true);
|
|
};
|
|
|
|
const showLayer = (layer, scroll = true) => {
|
|
// hide all pages
|
|
console.log(layer, rt.tmp.layer);
|
|
if(layer === rt.tmp.layer)
|
|
return;
|
|
rt.tmp.layer = layer;
|
|
for(let e in rt.ct.tabs)
|
|
rt.ct.tabs[e].style.display = "none";
|
|
|
|
rt.tmp.events.page = false;
|
|
rt.tmp.events.item = false;
|
|
|
|
switch(layer) {
|
|
case "page":
|
|
rt.tmp.events.page = true;
|
|
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";
|
|
rt.tmp.events.item = true;
|
|
|
|
rt.ct.tabs.item.addEventListener("click", closeItemview);
|
|
|
|
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;
|
|
}
|
|
rt.tmp.scroll = false;
|
|
};
|
|
|
|
export default { // oof
|
|
calcItems: calcItems,
|
|
getItems: getItems,
|
|
getItem: getItem,
|
|
showLayer: showLayer,
|
|
scrolltomiddle: scrolltomiddle,
|
|
closeItemview: closeItemview
|
|
};
|