.

public/js/lib.js

@@ -0,0 +1,121 @@
+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
+};