diff --git a/public/css/icons.css b/public/css/icons.css
index b1cf306..f0dcb00 100644
--- a/public/css/icons.css
+++ b/public/css/icons.css
@@ -1,29 +1,29 @@
-.close {
+div.close {
position: fixed;
- right: 21px;
- top: 86px;
- width: 48px;
+ cursor: pointer;
height: 48px;
- opacity: 0.8;
- background-color: rgba(0,0,0,0.5);
+ width: 48px;
+ opacity: .5;
+ border-radius: 10px;
+ z-index: 90;
+ top: 80px;
+ right: 10px;
}
-.close:hover {
- opacity: 1;
+div.close:hover {
+ 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: 3px;
- content: ' ';
- height: 40px;
- width: 2px;
- background-color: #333;
-}
-.close:before {
- transform: rotate(45deg);
-}
-.close:after {
- transform: rotate(-45deg);
+ top: 7%;
+ right: 7%;
+ height: 41px;
+ width: 41px;
+ background-color: rgba(255, 255, 255, .5);
}
diff --git a/public/css/itemview.css b/public/css/itemview.css
index fdec8d6..b59397b 100644
--- a/public/css/itemview.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/public/css/pageview.css b/public/css/pageview.css
index 3369c53..2649418 100644
--- a/public/css/pageview.css
+++ b/public/css/pageview.css
@@ -10,7 +10,6 @@ div#p_items {
}
div.p_item {
height: 100%;
- width: 100%;
}
diff --git a/public/js/events.js b/public/js/events.js
index dfffc6a..6e84c66 100644
--- a/public/js/events.js
+++ b/public/js/events.js
@@ -2,15 +2,15 @@ import rt from "./rt.js";
import lib from "./lib.js";
const events = {};
-events.wheel = {
- page: async e => {
- if(rt.scroll)
+events.wheel = async e => {
+ if(rt.tmp.events.page) { // Pageevents
+ 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],
@@ -18,34 +18,40 @@ 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;
- rt.ct.wrapper.pages[1].scrollIntoView({ block: rt.vars.block });
-
- rt.scroll = false;
- },
- item: async e => {
- if(rt.scroll)
+
+ document.querySelector("div#p_items").removeChild(rt.ct.wrapper.pages[deltaY === -1 ? 2 : 0]);
+ 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();
+
+ lib.scrolltomiddle(rt.ct.wrapper.pages);
+ rt.ct.wrapper.pages[0].innerHTML = "";
+ rt.ct.wrapper.pages[2].innerHTML = "";
+
+ }
+ 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))
- return rt.scroll = false;
- window.location = `${window.location.pathname}#${rt.items.act - deltaY}`;
+ if((deltaY === -1 && rt.items.act === rt.items.oldest) || (deltaY === 1 && rt.items.act === rt.items.newest))
+ return;
+ window.location = `${window.location.pathname}#${deltaY === -1 ? rt.items.next : rt.items.prev}`;
}
+ rt.tmp.scroll = false;
};
-events.resize = {
- page: async e => {
- e.preventDefault();
- clearTimeout(rt.tmp.resize);
- lib.calcItems();
- rt.tmp.resize = setTimeout(() => lib.getItems({
- 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 => {
+events.resize = async e => {
+ e.preventDefault();
+ clearTimeout(rt.tmp.resize);
+ lib.calcItems();
+ rt.tmp.resize = setTimeout(() => lib.getItems({
+ el: rt.ct.wrapper.pages[1],
+ opt: `id=${rt.items.first + 1}&order=desc`
+ }), rt.vars.cd);
+ lib.scrolltomiddle(rt.ct.wrapper.pages);
+
+ 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)
- return;
- rt.scroll = true;
-
- if(!rt.tmp.hash)
+ if(rt.tmp.scroll || !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);
+ //
+ 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 => {
- e.style.boxShadow = null;
- e.style.borderRadius = null;
- e.style.transition = ".1s ease-out";
+ /*rt.tmp.scroll = false;
+ events.wheel.page({
+ target: {
+ id: next === 0 ? "up" : "down"
+ }
+ });
+ rt.tmp.scroll = true;*/
+ }
+ //
+
+ 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;
diff --git a/public/js/f0ck.js b/public/js/f0ck.js
index 2ac3897..d1e3ee9 100644
--- a/public/js/f0ck.js
+++ b/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
- lib.showLayer("page");
- });
- debug[1].addEventListener("click", () => { // item
- lib.showLayer("item");
- });
- debug[2].addEventListener("click", () => { // item
- lib.showLayer("howto");
+ debug[0].addEventListener("click", async () => { // random
+ const random = await (await fetch(`${rt.api}/random`)).json();
+ window.location = `${window.location.pathname}#${random.id}`;
});
setTimeout(() => {
const pn = parseInt(document.location.pathname.split("/").splice(-1));
const hash = document.location.hash;
- lib.scrolltomiddle(rt.ct.wrapper.pages);
- lib.getItems({
- el: rt.ct.wrapper.pages[1],
- opt: pn > 0 ? `id=${pn + 1}&order=desc` : ""
- });
-
- if(hash)
+ if(!hash) {
+ lib.getItems({
+ el: rt.ct.wrapper.pages[1],
+ opt: pn > 0 ? `id=${pn + 1}&order=desc` : ""
+ });
+ lib.scrolltomiddle(rt.ct.wrapper.pages);
+ }
+ else
window.dispatchEvent(new CustomEvent("hashchange", { detail: { newURL: hash } }));
}, 300);
diff --git a/public/js/f0ck.min.js b/public/js/f0ck.min.js
index 532df62..903b616 100644
--- a/public/js/f0ck.min.js
+++ b/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)})();
\ No newline at end of file
+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)})();
\ No newline at end of file
diff --git a/public/js/lib.js b/public/js/lib.js
index db33b48..41b646f 100644
--- a/public/js/lib.js
+++ b/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);
- 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));
+
+ rt.tmp.events.page = false;
+ rt.tmp.events.item = false;
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));
-
+ rt.tmp.events.page = true;
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);
- 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));
+ rt.tmp.events.item = true;
+
+ rt.ct.tabs.item.addEventListener("click", closeItemview);
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
};
diff --git a/public/js/rt.js b/public/js/rt.js
index fcd9326..b09a42c 100644
--- a/public/js/rt.js
+++ b/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,
- block: "start"
+ cd: 600,
+ 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,
diff --git a/views/index.html b/views/index.html
index a225f6d..e4ed9f6 100644
--- a/views/index.html
+++ b/views/index.html
@@ -25,7 +25,7 @@
by
blah on
- #f0ck
+ #f0ck
@@ -47,7 +47,7 @@
Item 3
-
+
irc.n0xy.net +6697 (ssl only) #f0ck
@@ -73,7 +73,7 @@