This commit is contained in:
Flummi 2019-05-15 17:51:11 +00:00
parent be29734fa4
commit f790514cc3
17 changed files with 504 additions and 439 deletions

56
package-lock.json generated
View File

@ -4,12 +4,6 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"commander": {
"version": "2.20.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
"integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
"optional": true
},
"cuffeo": {
"version": "git+https://gitfap.de/keinBot/cuffeo.git#d55586ce5520d4119fa0900ef15ce8736fc62364",
"from": "git+https://gitfap.de/keinBot/cuffeo.git"
@ -19,17 +13,6 @@
"resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
"integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
},
"handlebars": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
"integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
"requires": {
"neo-async": "^2.6.0",
"optimist": "^0.6.1",
"source-map": "^0.6.1",
"uglify-js": "^3.1.4"
}
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -53,49 +36,10 @@
"long": "^4.0.0"
}
},
"minimist": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
},
"neo-async": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
"integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA=="
},
"optimist": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
"requires": {
"minimist": "~0.0.1",
"wordwrap": "~0.0.2"
}
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"uglify-js": {
"version": "3.5.8",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.8.tgz",
"integrity": "sha512-GFSjB1nZIzoIq70qvDRtWRORHX3vFkAnyK/rDExc0BN7r9+/S+Voz3t/fwJuVfjppAMz+ceR2poE7tkhvnVwQQ==",
"optional": true,
"requires": {
"commander": "~2.20.0",
"source-map": "~0.6.1"
}
},
"wordwrap": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
"integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
}
}
}

View File

@ -12,7 +12,6 @@
"license": "ISC",
"dependencies": {
"cuffeo": "git+https://gitfap.de/keinBot/cuffeo.git",
"handlebars": "^4.1.2",
"mariadb": "^2.0.3"
}
}

View File

@ -1,9 +1,3 @@
/* f0ck.me Stylesheet v2 */
/* Created in April of 2019 by the notorious and super sexy Alman Abu Ottermann */
/* This style makes use of the Milligram CSS framework and might not work as expected without! */
/* Contact: sirx @ f0ck . it */
/* This style is not meant to be used anywhere else than on f0ck.me or any other f0ck related website! */
/*Theming*/
:root {
--primary-color: #302AE6;
@ -22,108 +16,26 @@
}
/*End of Theming*/
/* Body */
body {
html, body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
background-color: var(--bg-color);
color: var(--font-color);
overflow: hidden;
}
div.pageWrapper {
height: 100%;
margin: 0;
padding: 0;
}
/* End of Body */
/* Fieldset & Legend
legend {
border-radius: 2px;
background: black;
font-family: monospace;
border: 1px white solid;
color: white;
}
fieldset {
border: 1px solid white;
padding: 20px;
background: black;
}
End of Fieldset & Legend */
/* NAV */
button {
background: #000101;
border: 1px solid white;
border-radius: 0px;
vertical-align: bottom !important;
}
/* END OF NAV */
/* MISC */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
/* Flummikram lol */
footer {
position: fixed;
bottom: 0;
}
div.content {
position: absolute;
top: 54px;
left: 8px;
bottom: 25px;
right: 8px;
margin-top: 25px;
overflow: hidden;
}
div.posts {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0.2fr 2.6fr 0fr;
}
div.posts > a {
width: 128px;
height: 128px;
box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
margin: 4px;
float: left;
outline: none;
box-shadow: inset 0 0 10px #4c4a4a;
}
div.posts > a > img.thumb {
border: 2px solid black;
transition: .1s ease-out;
}
div.posts > a > img.thumb:hover {
box-shadow: 0px 0px 0px 2px #dac8d2;
border-radius: 5px;
transition: .1s ease-in;
}
/* fml */
div#header {
height: 65px;
left: 8px;
right: 8px;
top: 0;
position: absolute;
div#header, div#footer {
z-index: 9999;
background-color: #292922;
}
#logoHead {
margin: 6px 0 0 4px;
padding: 0;
@ -147,7 +59,7 @@ div#header {
#pagePosition, #itemPosition {
position: absolute;
right: 8px;
bottom: 6px;
top: 6px;
padding: 0;
color: #7d7b6a;
background-color: #333;
@ -162,32 +74,21 @@ div#header {
display: none;
}
div#wrapper {
display: block;
div#content {
position: relative;
}
div#itemview {
z-index: 999;
background-color: rgba(0,0,0,0.8);
div.wrapper {
display: none;
flex-direction: row;
width: 100%;
}
div.items {
/*position: relative;*/
flex: 1 1 0px;
width: 100%;
height: 100%;
}
img.item {
position: absolute;
max-height: 100%;
max-width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
div#howtowrapper {
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
z-index: 999;
}

View File

@ -28,7 +28,7 @@
div.arrow {
position: fixed;
position: absolute;
cursor: pointer;
height: 70px;
width: 70px;
@ -67,22 +67,25 @@ div.right:before {
}
div.arrow.top {
top: 80px;
top: 10px;
left: 50%;
transform: translateX(-50%);
}
div.arrow.bottom {
bottom: 80px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
div.arrow.left {
left: 20px;
position: fixed !important;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
div.arrow.right {
right: 20px;
position: fixed !important;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

28
public/css/itemview.css Normal file
View File

@ -0,0 +1,28 @@
div#itemwrapper {
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
z-index: 999;
}
div#i_items {
width: 300%;
height: 100%;
overflow: hidden;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-template-areas: ". . .";
}
div.i_item {
overflow: hidden;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.item {
max-height: 100%;
max-width: 100%;
}

File diff suppressed because one or more lines are too long

34
public/css/pageview.css Normal file
View File

@ -0,0 +1,34 @@
div#pagewrapper {
display: block;
overflow: hidden;
}
div#p_items {
overflow: hidden;
height: 100%;
width: 100%;
}
div.p_item {
height: 100%;
width: 100%;
}
div.p_item > a {
width: 128px;
height: 128px;
box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
margin: 4px;
float: left;
outline: none;
box-shadow: inset 0 0 10px #4c4a4a;
}
div.p_item > a > img.thumb {
border: 2px solid black;
transition: .1s ease-out;
}
div.p_item > a > img.thumb:hover {
box-shadow: 0px 0px 0px 2px #dac8d2;
border-radius: 5px;
transition: .1s ease-in;
}

150
public/js/events.js Normal file
View File

@ -0,0 +1,150 @@
import rt from "./rt.js";
import lib from "./lib.js";
const events = {};
events.wheel = {
page: async e => {
if(rt.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;
rt.items.eps = 0;
await lib.getItems({
el: rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2],
opt: deltaY === -1 ? `id=${rt.items.first}&order=asc` : `id=${rt.items.last}&order=desc`
});
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)
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}`;
}
};
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 => {
lib.scrolltomiddle(rt.ct.wrapper.items);
}
};
events.hashchange = async e => {
if(rt.scroll)
return;
rt.scroll = true;
if(!rt.tmp.hash)
return rt.tmp.hash = true;
const itemid = parseInt((e.newURL?e.newURL:e.detail.newURL).split("#").slice(-1));
if(!itemid || itemid <= 0) // failover oder so
return lib.showLayer("page");
const next = rt.items.act === null || rt.items.act === itemid ? 1 : rt.items.act > itemid ? 2 : 0;
rt.ct.header.itempos.innerHTML = `item ${itemid}`;
const item = await (await fetch(`${rt.api}/item/${itemid}`)).json();
item.dest = item.dest.replace(/^\./, "");
rt.ct.header.infos.source.href = item.src;
rt.ct.header.infos.source.innerHTML = item.srchost;
rt.ct.header.infos.channel.innerHTML = `${item.usernetwork} ${item.userchannel}`;
rt.ct.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
rt.ct.header.infos.nick.innerHTML = item.username;
lib.showLayer("item", next === 1);
rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(e => {
e.style.boxShadow = null;
e.style.borderRadius = null;
e.style.transition = ".1s ease-out";
});
setTimeout(() => {
rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.boxShadow = "0px 0px 0px 2px #dac8d2";
rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.borderRadius = "5px";
rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.transition = ".1s ease-in";
}, 50);
let el;
switch(item.mime) {
case "audio/flac":
case "audio/mpeg":
case "audio/ogg":
case "audio/x-flac": // audios
el = document.createElement("audio");
el.src = `${rt.url}${item.dest}`;
el.type = item.mime;
el.autoplay = true;
el.controls = true;
el.loop = true;
break;
case "image/gif":
case "image/jpeg":
case "image/png": // images
el = document.createElement("img");
el.src = `${rt.url}${item.dest}`;
break;
case "video/mp4":
case "video/quicktime":
case "video/webm":
case "video/ogv": // videos
el = document.createElement("video");
el.src = `${rt.url}${item.dest}`;
el.type = item.mime;
el.autoplay = true;
el.controls = true;
el.loop = true;
break;
default:
alert("lol hacker");
break;
}
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;
rt.items.next = item.next;
rt.items.act = item.id;
await new Promise(resolve => setTimeout(resolve, rt.vars.cd));
if(next !== 1) {
document.querySelector("div#i_items").removeChild(rt.ct.wrapper.items[next === 0 ? 2 : 0]);
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");
}
lib.scrolltomiddle(rt.ct.wrapper.items);
rt.ct.wrapper.items[0].innerHTML = "";
rt.ct.wrapper.items[2].innerHTML = "";
rt.scroll = false;
};
export default events;

View File

@ -1,170 +1,33 @@
/* Todo:
* - Event tracker (rt.events)
* - Functions und Events in Module auslagern
*/
import rt from "./rt.js";
import "./test.js";
import events from "./events.js";
import lib from "./lib.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();
(async () => {
lib.showLayer("page");
window.addEventListener("hashchange", events.hashchange);
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);
const debug = document.querySelectorAll("span#debug > a");
debug[0].addEventListener("click", () => { // page
lib.showLayer("page");
});
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`
debug[1].addEventListener("click", () => { // item
lib.showLayer("item");
});
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.arrow")].filter(e => ["up", "down"].includes(e.id)).forEach(p => p.addEventListener("click", scroll));
document.addEventListener("wheel", scroll);
(() => { // init
window.addEventListener("resize", resize);
debug[2].addEventListener("click", () => { // item
lib.showLayer("howto");
});
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],
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)
window.dispatchEvent(new CustomEvent("hashchange", { detail: { newURL: hash } }));
}, 300);
})();
window.addEventListener("hashchange", async e => {
const itemid = parseInt(e.newURL.split("#").slice(-1));
if(itemid <= 0) { // failover
rt.container.itemview.style.display = "none";
return false;
}
rt.container.itemview.style.display = "flex"; // show itemview
rt.container.header.itempos.style.display = "block";
rt.container.header.pagepos.style.display = "none";
rt.container.header.iteminfo.style.display = "block";
rt.container.header.itempos.innerHTML = `item ${itemid}`;
const item = await (await fetch(`/api/item/${itemid}`)).json();
console.log(item);
rt.container.header.infos.source.href = item.src;
rt.container.header.infos.source.innerHTML = item.srchost;
rt.container.header.infos.channel.innerHTML = `${item.usernetwork} ${item.userchannel}`;
rt.container.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
rt.container.header.infos.nick.innerHTML = item.username;
rt.container.items[1].innerHTML = `<img src="${rt.url}${item.dest}" class="item" />`;
rt.container.items[1].scrollIntoView({ block: rt.st.block }); // mitte
// remove page events
document.removeEventListener("wheel", scroll);
console.log(itemid);
});

1
public/js/f0ck.min.js vendored Normal file
View File

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

121
public/js/lib.js Normal file
View File

@ -0,0 +1,121 @@
import rt from "./rt.js";
import events from "./events.js";
const calcItems = () => {
const cs = window.getComputedStyle(rt.ct.content);
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.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";
});
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(`${rt.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;
rt.tmp.hash = false;
window.history.pushState(rt.items.first, `f0ck.me! page ${rt.items.first}`, `/page/${rt.items.first}${(window.location.hash?window.location.hash:"")}`);
rt.tmp.hash = true;
rt.ct.header.pagepos.innerHTML = `items ${rt.items.first} - ${rt.items.last}`;
};
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 showLayer = (layer, scroll = true) => {
// hide all pages
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));
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));
if(scroll)
scrolltomiddle(rt.ct.wrapper.pages);
rt.ct.header.pagepos.style.display = "block";
rt.ct.header.itempos.style.display = "none";
rt.ct.header.iteminfo.style.display = "none";
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));
if(scroll)
scrolltomiddle(rt.ct.wrapper.items);
rt.ct.header.pagepos.style.display = "none";
rt.ct.header.itempos.style.display = "block";
rt.ct.header.iteminfo.style.display = "block";
break;
case "howto":
rt.ct.tabs.howto.style.display = "block";
break;
}
};
export default { // oof
calcItems: calcItems,
getItems: getItems,
showLayer: showLayer,
scrolltomiddle: scrolltomiddle
};

View File

@ -5,18 +5,38 @@ export default {
min_rows: 4,
itemsize: 130
},
st: {
behavior: "smooth",
block: "center"
},
url: "//f0ck.me",
api: "//dev.f0ck.me/api",
vars: {
cd: 700,
block: "start"
},
tmp: {
scroll: false,
resize: null
resize: null,
hash: true
},
container: {
wrapper: document.querySelector("div#wrapper"),
itemview: document.querySelector("div#itemview"),
items: {
first: null,
last: null,
newest: null,
oldest: null,
next: null,
prev: null,
act: null,
eps: 0
},
ct: {
content: document.querySelector("div#content"),
wrapper: {
pages: document.querySelectorAll("div.p_item"),
items: document.querySelectorAll("div.i_item")
},
tabs: {
item: document.querySelector("div#itemwrapper"),
howto: document.querySelector("div#howtowrapper")
},
arrows: document.querySelectorAll("div.arrow"),
header: {
iteminfo: document.querySelector("div#itemInfo"),
pagepos: document.querySelector("div#pagePosition"),
@ -28,15 +48,6 @@ export default {
nick: document.querySelector("span#itemNick"),
channel: document.querySelector("span#itemChannel")
}
},
items: document.querySelectorAll("div.items"),
posts: document.querySelectorAll("div.posts")
},
items: {
first: null,
last: null,
newest: null,
oldest: null,
eps: 0
}
}
};

View File

View File

@ -1,3 +0,0 @@
export const queries = {
items: "select id, mime from items order by id desc limit 72"
};

View File

@ -1,25 +1,10 @@
import router from "../router";
import fs from "fs";
import sql from "../sql";
import handlebars from "handlebars";
import { queries } from "./inc/index";
const template = fs.readFileSync("./views/index.hbs", "utf-8");
const tpl = fs.readFileSync("./views/index.html", "utf-8");
router.get(/^\/(page\/[0-9]+)?$/, async (req, res) => {
const db = await sql.getConnection();
try {
const rows = await db.query(queries.items);
const tpl = handlebars.compile(template);
res
.writeHead(200, { 'Content-Type': 'text/html' })
.end(tpl({ items: rows, debug: JSON.stringify(req.url, null, 2) }));
} catch(err) {
res
.writeHead(500)
.end(JSON.stringify(err), 'utf-8');
}
db.end();
res
.writeHead(200, { 'Content-Type': 'text/html' })
.end(tpl);
});

View File

@ -1,50 +0,0 @@
<!doctype inf0ckted>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="f0ck you">
<meta name="author" content="Abu Ottermann, Flummi Mc Doggerstein">
<title>f0ck!</title>
<link rel="stylesheet" type="text/css" href="/css/milligram.min.css">
<link rel="stylesheet" type="text/css" href="/css/f0ck.css">
<link rel="stylesheet" type="text/css" href="/css/icons.css">
</head>
<body>
<div id="header">
<h1 id="logoHead"><a href="/"><img id="logo" src="/img/f0ck_logo.png"></a></h1>
<div id="pagePosition"></div>
<div id="itemPosition"></div>
<div id="itemInfo">
<div class="infoText">
<span id="itemTitle">blah</span> //
<a id="itemSource" href=""></a>
</div>
<div class="infoText">
<span id="itemTime" time=""></span> by
<span id="itemNick">blah</span> on
<span id="itemChannel">#f0ck</a>
</div>
</div>
</div>
<div id="wrapper" class="content">
<div class="arrow top" id="up"></div>
<div id="posts_1" class="posts"></div>
<div id="posts" class="posts"></div>
<div id="posts_2" class="posts"></div>
<div class="arrow bottom" id="down"></div>
</div>
<div id="itemview" class="content">
<div class="arrow left" id="left"></div>
<div id="item_1" class="items">&nbsp;</div>
<div id="item" class="items">&nbsp;</div>
<div id="item_2" class="items">&nbsp;</div>
<div class="arrow right" id="right"></div>
<a href="#" class="close"></a>
</div>
<footer>
<section class="credits">Made with 666 souls in mind and 2 liters of fresh virgin blood</section>
</footer>
<script src="/js/f0ck.js" type="module" defer></script>
</body>
</html>

81
views/index.html Normal file
View File

@ -0,0 +1,81 @@
<!doctype blah>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.7, shrink-to-fit=no, user-scalable=no">
<meta name="description" content="f0ck you">
<meta name="author" content="Abu Ottermann, Flummi Mc Doggerstein">
<title>f0ck lol!</title>
<link rel="stylesheet" href="/css/f0ck.css">
<link rel="stylesheet" href="/css/icons.css">
<link rel="stylesheet" href="/css/pageview.css">
<link rel="stylesheet" href="/css/itemview.css">
</head>
<body>
<div class="pageWrapper">
<div class="page" id="header">
<h1 id="logoHead"><a href="/"><img id="logo" src="/img/f0ck_logo.png"></a></h1>
<div id="pagePosition"></div>
<div id="itemPosition"></div>
<div id="itemInfo">
<div class="infoText">
<span id="itemTitle">blah</span> //
<a id="itemSource" href=""></a>
</div>
<div class="infoText">
<span id="itemTime" time=""></span> by
<span id="itemNick">blah</span> on
<span id="itemChannel">#f0ck</a>
</div>
</div>
</div>
<div class="page" id="content">
<div class="wrapper" id="pagewrapper">
<div class="arrow top" id="up"></div>
<div id="p_items">
<div class="p_item">Seite 1</div>
<div class="p_item">Seite 2</div>
<div class="p_item">Seite 3</div>
</div>
<div class="arrow bottom" id="down"></div>
</div>
<div class="wrapper" id="itemwrapper">
<div class="arrow left" id="left"></div>
<div id="i_items">
<div class="i_item">Item 1</div>
<div class="i_item">Item 2</div>
<div class="i_item">Item 3</div>
</div>
<div class="arrow right" id="right"></div>
</div>
<div class="wrapper" id="howtowrapper">
<h4>irc.n0xy.net +6697 (ssl only) #f0ck</h4>
<p>More information: <a href="https://n0xy.net">n0xy.net</a></p>
<div class="page-header"><h4>IRC Rules</h4></div>
<p>Constitution:</p>
<ul>
<li>§ 1 The dignity of the IRCd is inviolable.</li>
<li>§ 2 The distribution of Child Pornography is strictly prohibited in any of our networks and will lead to an immediate ban.</li>
<li>§ 3 Do not attack users in this network in any way, shape, or form.</li>
<li>§ 4 Do not transmit any personal/financial information without permission.</li>
<li>§ 5 Do not share any malware on this network.</li>
</ul>
<p>f0ck specific rules:</p>
<ul>
<li>Animal cruelty is forbidden and will lead to an immediate ban</li>
</ul>
<h4>how the f0ck to f0ck, you ask?</h4>
<p>f0ck will f0ck any media link posted in the channel ending with: jpg|gif|png|webm|mp3|mp4|ogg|flac</p>
<p>If you don't want f0ck to f0ck it put !ignore behind your link. Example: https://retard-journal.com/stupidshit.png !ignore</a>
<p>f0ck will only f0ck media links with the maximum size of 80MB</p>
</div>
</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>
</span>
</div>
</div>
<script src="/js/f0ck.js" type="module" defer></script>
</body>
</html>