f0ck/f0ckv2
3
4
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases Wiki Activity

blah

Browse Source
This commit is contained in:
Flummi 2019-05-19 01:45:45 +00:00
parent 1ba52a8361
commit 2a5651c00a
9 changed files with 169 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
public/css/icons.css
View File

@ -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);
}

3
public/css/itemview.css
View File

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

1
public/css/pageview.css
View File

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

119
public/js/events.js
View File

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

38
public/js/f0ck.js
View File

@ -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);

2
public/js/f0ck.min.js vendored
View File

@ -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)})();

59
public/js/lib.js
View File

@ -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
};

18
public/js/rt.js
View File

@ -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,

6
views/index.html
View File

@ -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>