f0ckv2/public/js/f0ck.js

/* 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);
});