blah

public/css/icons.css

@@ -1,29 +1,29 @@
-.close {
+div.close {
   position: fixed;
-  right: 21px;
+  cursor: pointer;
-  top: 86px;
-  width: 48px;
   height: 48px;
-  opacity: 0.8;
+  width: 48px;
-  background-color: rgba(0,0,0,0.5);
+  opacity: .5;
+  border-radius: 10px;
+  z-index: 90;
+  top: 80px;
+  right: 10px;
 }
-.close:hover {
+div.close:hover {
-  opacity: 1;
+  opacity: .9;
+  box-shadow: 0px 0px 0px 2px #dac8d2;
+  border-radius: 10px;
+  transition: .1s ease-in;
 }
-.close:before, .close:after {
+div.close:before {
+  content: '';
+  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
   position: absolute;
-  left: 23px;
+  top: 7%;
-  top: 3px;
+  right: 7%;
-  content: ' ';
+  height: 41px;
-  height: 40px;
+  width: 41px;
-  width: 2px;
+  background-color: rgba(255, 255, 255, .5);
-  background-color: #333;
-}
-.close:before {
-  transform: rotate(45deg);
-}
-.close:after {
-  transform: rotate(-45deg);
 }
 
 

public/css/itemview.css

@@ -26,3 +26,6 @@ div.i_item {
   max-height: 100%;
   max-width: 100%;
 }
+.item:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}

public/css/pageview.css

@@ -10,7 +10,6 @@ div#p_items {
 }
 div.p_item {
   height: 100%;
-  width: 100%;
 }
 
 

public/js/events.js

@@ -2,15 +2,15 @@ import rt from "./rt.js";
 import lib from "./lib.js";
 
 const events = {};
-events.wheel = {
+events.wheel = async e => {
-  page: async e => {
+  if(rt.tmp.events.page) { // Pageevents
-    if(rt.scroll)
+    if(rt.tmp.scroll)
       return;
-    rt.scroll = true;
     const deltaY = e.target.id === "up" ? -1 : e.deltaY < 0 ? -1: 1; // -1 up, 1 down
     
     if((deltaY === -1 && rt.items.first === rt.items.newest) || (deltaY === 1 && rt.items.last === rt.items.oldest))
-      return rt.scroll = false;
+      return rt.tmp.scroll = false;
+    rt.tmp.scroll = true;
     rt.items.eps = 0;
     await lib.getItems({
       el: rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2],
@@ -19,22 +19,29 @@ events.wheel = {
     rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });
     await new Promise(resolve => setTimeout(resolve, rt.vars.cd));
 
-    rt.ct.wrapper.pages[1].innerHTML = rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].innerHTML;
+    document.querySelector("div#p_items").removeChild(rt.ct.wrapper.pages[deltaY === -1 ? 2 : 0]);
-    rt.ct.wrapper.pages[1].scrollIntoView({ block: rt.vars.block });
+    const newdiv = document.createElement("div");
+    newdiv.classList.add("p_item");
+    document.querySelector("div#p_items").insertAdjacentElement((deltaY === -1 ? "afterbegin" : "beforeend"), newdiv);
+    rt.ct.wrapper.pages = document.querySelectorAll("div.p_item");
+    lib.calcItems();
 
-    rt.scroll = false;
+    lib.scrolltomiddle(rt.ct.wrapper.pages);
-  },
+    rt.ct.wrapper.pages[0].innerHTML = "";
-  item: async e => {
+    rt.ct.wrapper.pages[2].innerHTML = "";
-    if(rt.scroll)
+
+  }
+  if(rt.tmp.events.item) { // Itemevents
+    if(rt.tmp.scroll)
       return;
     const deltaY = e.target.id === "left" ? -1 : e.deltaY < 0 ? -1: 1; // -1 left, 1 right
-    if((deltaY === -1 && rt.items.act === rt.items.first) || (deltaY === 1 && rt.items.act === rt.items.last))
+    if((deltaY === -1 && rt.items.act === rt.items.oldest) || (deltaY === 1 && rt.items.act === rt.items.newest))
-      return rt.scroll = false;
+      return;
-    window.location = `${window.location.pathname}#${rt.items.act - deltaY}`;
+    window.location = `${window.location.pathname}#${deltaY === -1 ? rt.items.next : rt.items.prev}`;
   }
+  rt.tmp.scroll = false;
 };
-events.resize = {
+events.resize = async e => {
-  page: async e => {
   e.preventDefault();
   clearTimeout(rt.tmp.resize);
   lib.calcItems();
@@ -42,10 +49,9 @@ events.resize = {
     el: rt.ct.wrapper.pages[1],
     opt: `id=${rt.items.first + 1}&order=desc`
   }), rt.vars.cd);
-    
   lib.scrolltomiddle(rt.ct.wrapper.pages);
-  },
+
-  item: async e => {
+  if(rt.tmp.events.item) {
     lib.scrolltomiddle(rt.ct.wrapper.items);
   }
 };
@@ -53,19 +59,23 @@ events.volumechange = e => {
   localStorage.setItem("volume", e.target.volume);
 };
 events.hashchange = async e => {
-  if(rt.scroll)
+  if(rt.tmp.scroll || !rt.tmp.hash)
-    return;
-  rt.scroll = true;
-
-  if(!rt.tmp.hash)
     return rt.tmp.hash = true;
+  rt.tmp.scroll = true;
+  console.log("hashchange lol");
+
+  if(rt.tmp.layer !== "item")
+    rt.ct.wrapper.items[1].innerHTML = "";
+  
   const itemid = parseInt((e.newURL?e.newURL:e.detail.newURL).split("#").slice(-1));
   if(!itemid || itemid <= 0) // failover oder so
-    return lib.showLayer("page");
+    return lib.closeItemview();
   
   const next = rt.items.act === null || rt.items.act === itemid ? 1 : rt.items.act > itemid ? 2 : 0;
+  lib.showLayer("item", next === 1);
+  
   rt.ct.header.itempos.innerHTML = `item ${itemid}`;
-  const item = await (await fetch(`${rt.api}/item/${itemid}`)).json();
+  const item = await lib.getItem(itemid);
   item.dest = item.dest.replace(/^\./, "");
   
   rt.ct.header.infos.source.href = item.src;
@@ -74,12 +84,28 @@ events.hashchange = async e => {
   rt.ct.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
   rt.ct.header.infos.nick.innerHTML = item.username;
 
-  lib.showLayer("item", next === 1);
+  // <test>
+  if(itemid > rt.items.first || itemid < rt.items.last) { // Scroll to next Page
+    rt.items.eps = 0;
+    await lib.getItems({
+      el: rt.ct.wrapper.pages[1],
+      opt: next === 0 ? `id=${itemid-1}&order=asc` : `id=${itemid+1}&order=desc`
+    });
 
-  rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(e => {
+    /*rt.tmp.scroll = false;
-    e.style.boxShadow = null;
+    events.wheel.page({
-    e.style.borderRadius = null;
+      target: {
-    e.style.transition = ".1s ease-out";
+        id: next === 0 ? "up" : "down"
+      }
+    });
+    rt.tmp.scroll = true;*/
+  }
+  // </test>
+
+  rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(f => {
+    f.style.boxShadow = null;
+    f.style.borderRadius = null;
+    f.style.transition = ".1s ease-out";
   });
   setTimeout(() => {
     rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.boxShadow = "0px 0px 0px 2px #dac8d2";
@@ -100,7 +126,7 @@ events.hashchange = async e => {
       el.controls = true;
       el.loop = true;
       el.volume = localStorage.getItem("volume") || 1;
-      el.addEventListener("volumechange", events.volumechange);
+      el.addEventListener("volumechange", ev => events.volumechange(ev));
     break;
     case "image/gif":
     case "image/jpeg":
@@ -119,7 +145,7 @@ events.hashchange = async e => {
       el.controls = true;
       el.loop = true;
       el.volume = localStorage.getItem("volume") || 1;
-      el.addEventListener("volumechange", events.volumechange);
+      el.addEventListener("volumechange", ev => events.volumechange(ev));
     break;
     default:
       alert("lol hacker");
@@ -127,9 +153,7 @@ events.hashchange = async e => {
   }
 
   el.classList.add("item");
-
   rt.ct.wrapper.items[next].insertAdjacentElement("afterbegin", el);
-
   rt.ct.wrapper.items[next].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });
 
   rt.items.prev = item.prev;
@@ -143,7 +167,6 @@ events.hashchange = async e => {
     const newdiv = document.createElement("div");
     newdiv.classList.add("i_item");
     document.querySelector("div#i_items").insertAdjacentElement((next === 0 ? "afterbegin" : "beforeend"), newdiv);
-    
     rt.ct.wrapper.items = document.querySelectorAll("div.i_item");
   }
   
@@ -151,7 +174,7 @@ events.hashchange = async e => {
   rt.ct.wrapper.items[0].innerHTML = "";
   rt.ct.wrapper.items[2].innerHTML = "";
 
-  rt.scroll = false;
+  rt.tmp.scroll = false;
 };
 
 export default events;

public/js/f0ck.js

@@ -2,31 +2,39 @@ import rt from "./rt.js";
 import events from "./events.js";
 import lib from "./lib.js";
 
+if(rt.debug) {
+  window.d = {
+    rt: rt,
+    events: events,
+    lib: lib
+  };
+}
+
 (async () => {
   lib.showLayer("page");
   window.addEventListener("hashchange", events.hashchange);
+  document.addEventListener("wheel", events.wheel);
+  window.addEventListener("resize", events.resize);
+  [...rt.ct.arrows] // add pagebuttons
+    .forEach(p => p.addEventListener("click", events.wheel));
   
   const debug = document.querySelectorAll("span#debug > a");
-  debug[0].addEventListener("click", () => { // page
+  debug[0].addEventListener("click", async () => { // random
-    lib.showLayer("page");
+    const random = await (await fetch(`${rt.api}/random`)).json();
-  });
+    window.location = `${window.location.pathname}#${random.id}`;
-  debug[1].addEventListener("click", () => { // item
-    lib.showLayer("item");
-  });
-  debug[2].addEventListener("click", () => { // item
-    lib.showLayer("howto");
   });
   
   setTimeout(() => {
     const pn = parseInt(document.location.pathname.split("/").splice(-1));
     const hash = document.location.hash;
-    lib.scrolltomiddle(rt.ct.wrapper.pages);
+    if(!hash) {
       lib.getItems({
         el: rt.ct.wrapper.pages[1],
         opt: pn > 0 ? `id=${pn + 1}&order=desc` : ""
       });
-
+      lib.scrolltomiddle(rt.ct.wrapper.pages);
-    if(hash)
+    }
+    else
       window.dispatchEvent(new CustomEvent("hashchange", { detail: { newURL: hash } }));
   }, 300);
 

public/js/f0ck.min.js

@@ -1 +1 @@
-import rt from"./rt.js";import events from"./events.js";import lib from"./lib.js";(async()=>{lib.showLayer("page"),window.addEventListener("hashchange",events.hashchange);const e=document.querySelectorAll("span#debug > a");e[0].addEventListener("click",()=>{lib.showLayer("page")}),e[1].addEventListener("click",()=>{lib.showLayer("item")}),e[2].addEventListener("click",()=>{lib.showLayer("howto")}),setTimeout(()=>{const e=parseInt(document.location.pathname.split("/").splice(-1)),t=document.location.hash;lib.scrolltomiddle(rt.ct.wrapper.pages),lib.getItems({el:rt.ct.wrapper.pages[1],opt:e>0?`id=${e+1}&order=desc`:""}),t&&window.dispatchEvent(new CustomEvent("hashchange",{detail:{newURL:t}}))},300)})();
+import rt from"./rt.js";import events from"./events.js";import lib from"./lib.js";rt.debug&&(window.d={rt,events,lib}),(async()=>{lib.showLayer("page"),window.addEventListener("hashchange",events.hashchange),document.addEventListener("wheel",events.wheel),window.addEventListener("resize",events.resize),[...rt.ct.arrows].forEach(e=>e.addEventListener("click",events.wheel)),document.querySelectorAll("span#debug > a")[0].addEventListener("click",async()=>{const e=await(await fetch(`${rt.api}/random`)).json();window.location=`${window.location.pathname}#${e.id}`}),setTimeout(()=>{const e=parseInt(document.location.pathname.split("/").splice(-1)),t=document.location.hash;t?window.dispatchEvent(new CustomEvent("hashchange",{detail:{newURL:t}})):(lib.getItems({el:rt.ct.wrapper.pages[1],opt:e>0?`id=${e+1}&order=desc`:""}),lib.scrolltomiddle(rt.ct.wrapper.pages))},300)})();

public/js/lib.js

@@ -10,7 +10,7 @@ const calcItems = () => {
   
   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";
+    e.style.paddingTop = Math.max((height - (rows * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) * 3 + "px";
   });
 
   return {
@@ -53,38 +53,44 @@ const getItems = async ({ el, opt = "" }) => {
   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";
-  // remove all events for reassigning
+
-  document.removeEventListener("wheel", events.wheel.item);
+  rt.tmp.events.page = false;
-  document.removeEventListener("wheel", events.wheel.page);
+  rt.tmp.events.item = false;
-  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.tmp.events.page = true;
-      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);
 
@@ -94,11 +100,9 @@ const showLayer = (layer, scroll = true) => {
     break;
     case "item":
       rt.ct.tabs.item.style.display = "block";
-      document.addEventListener("wheel", events.wheel.item);
+      rt.tmp.events.item = true;
-      window.addEventListener("resize", events.resize.item);
+
-      [...rt.ct.arrows] // add itembuttons
+      rt.ct.tabs.item.addEventListener("click", closeItemview);
-        .filter(e => ["left", "right"].includes(e.id))
-        .forEach(p => p.addEventListener("click", events.wheel.item));
 
       if(scroll)
         scrolltomiddle(rt.ct.wrapper.items);
@@ -111,11 +115,14 @@ const showLayer = (layer, scroll = true) => {
       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
+  scrolltomiddle: scrolltomiddle,
+  closeItemview: closeItemview
 };

public/js/rt.js

@@ -1,4 +1,5 @@
 export default {
+  debug: true,
   layout: {
     margin: 6,
     min_cols: 3,
@@ -8,13 +9,22 @@ export default {
   url: "//f0ck.me",
   api: "//dev.f0ck.me/api",
   vars: {
-    cd: 700,
+    cd: 600,
-    block: "start"
+    block: "center"
   },
   tmp: {
-    scroll: false,
+    layer: null,
+    _scroll: false,
+    get scroll() { console.log("get scroll"); return this._scroll; },
+    set scroll(val) { console.log("set scroll: " + val); this._scroll = val; },
+    events: {
+      page: true,
+      item: false
+    },
     resize: null,
-    hash: true
+    _hash: true,
+    get hash() { console.log("get hash"); return this._hash; },
+    set hash(val) { console.log("set hash: " + val); this._hash = val; }
   },
   items: {
     first: null,

views/index.html

@@ -25,7 +25,7 @@
         <div class="infoText">
           <span id="itemTime" time=""></span> by
           <span id="itemNick">blah</span> on
-          <span id="itemChannel">#f0ck</a>
+          <span id="itemChannel">#f0ck</span>
         </div>
       </div>
     </div>
@@ -47,7 +47,7 @@
           <div class="i_item">Item 3</div>
         </div>
         <div class="arrow right" id="right"></div>
-        <a href="#" class="close"></a>
+        <div class="close"></div>
       </div>
       <div class="wrapper" id="howtowrapper">
         <h4>irc.n0xy.net +6697 (ssl only) #f0ck</h4>
@@ -73,7 +73,7 @@
     </div>
     <div class="page" id="footer">Made with 666 souls in mind and 2 liters of fresh virgin blood
       <span id="debug">
-        <a href="#">page</a> - <a href="#">item</a> - <a href="#">howto</a>
+        <a>random</a>
       </span>
     </div>
   </div>