Frontend lol

public/js/f0ck.js

@@ -0,0 +1,151 @@
+/* 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);
+});

public/js/rt.js

@@ -0,0 +1,29 @@
+export default {
+  layout: {
+    margin: 6,
+    min_cols: 3,
+    min_rows: 4,
+    itemsize: 130
+  },
+  st: {
+    behavior: "smooth",
+    block: "center"
+  },
+  url: "//f0ck.me",
+  tmp: {
+    scroll: false,
+    resize: null
+  },
+  container: {
+    wrapper: document.querySelector("div#wrapper"),
+    itemview: document.querySelector("div#itemview"),
+    posts: document.querySelectorAll("div.posts")
+  },
+  items: {
+    first: null,
+    last: null,
+    newest: null,
+    oldest: null,
+    eps: 0
+  }
+};