.
This commit is contained in:
Flummi
parent
be29734fa4
commit
f790514cc3
56
package-lock.json
generated
56
package-lock.json
generated
|
|
@ -4,12 +4,6 @@
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"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": {
|
"cuffeo": {
|
||||||
"version": "git+https://gitfap.de/keinBot/cuffeo.git#d55586ce5520d4119fa0900ef15ce8736fc62364",
|
"version": "git+https://gitfap.de/keinBot/cuffeo.git#d55586ce5520d4119fa0900ef15ce8736fc62364",
|
||||||
"from": "git+https://gitfap.de/keinBot/cuffeo.git"
|
"from": "git+https://gitfap.de/keinBot/cuffeo.git"
|
||||||
|
|
@ -19,17 +13,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
|
||||||
"integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
|
"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": {
|
"iconv-lite": {
|
||||||
"version": "0.4.24",
|
"version": "0.4.24",
|
||||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||||
|
|
@ -53,49 +36,10 @@
|
||||||
"long": "^4.0.0"
|
"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": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
"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="
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cuffeo": "git+https://gitfap.de/keinBot/cuffeo.git",
|
"cuffeo": "git+https://gitfap.de/keinBot/cuffeo.git",
|
||||||
"handlebars": "^4.1.2",
|
|
||||||
"mariadb": "^2.0.3"
|
"mariadb": "^2.0.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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*/
|
/*Theming*/
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #302AE6;
|
--primary-color: #302AE6;
|
||||||
|
|
@ -22,108 +16,26 @@
|
||||||
}
|
}
|
||||||
/*End of Theming*/
|
/*End of Theming*/
|
||||||
|
|
||||||
/* Body */
|
html, body {
|
||||||
body {
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
|
}
|
||||||
overflow: hidden;
|
div.pageWrapper {
|
||||||
height: 100%;
|
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%;
|
width: 100%;
|
||||||
height: 100%;
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 0.2fr 2.6fr 0fr;
|
||||||
}
|
}
|
||||||
|
div#header, div#footer {
|
||||||
div.posts > a {
|
z-index: 9999;
|
||||||
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;
|
|
||||||
background-color: #292922;
|
background-color: #292922;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logoHead {
|
#logoHead {
|
||||||
margin: 6px 0 0 4px;
|
margin: 6px 0 0 4px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -147,7 +59,7 @@ div#header {
|
||||||
#pagePosition, #itemPosition {
|
#pagePosition, #itemPosition {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
bottom: 6px;
|
top: 6px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #7d7b6a;
|
color: #7d7b6a;
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
|
@ -162,32 +74,21 @@ div#header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#wrapper {
|
div#content {
|
||||||
display: block;
|
position: relative;
|
||||||
}
|
}
|
||||||
div#itemview {
|
|
||||||
z-index: 999;
|
div.wrapper {
|
||||||
background-color: rgba(0,0,0,0.8);
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.items {
|
|
||||||
/*position: relative;*/
|
|
||||||
flex: 1 1 0px;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
img.item {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
height: 100%;
|
||||||
margin: auto;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#howtowrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
|
|
||||||
div.arrow {
|
div.arrow {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
|
|
@ -67,22 +67,25 @@ div.right:before {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.arrow.top {
|
div.arrow.top {
|
||||||
top: 80px;
|
top: 10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
div.arrow.bottom {
|
div.arrow.bottom {
|
||||||
bottom: 80px;
|
bottom: 10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
div.arrow.left {
|
div.arrow.left {
|
||||||
left: 20px;
|
position: fixed !important;
|
||||||
|
left: 10px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
div.arrow.right {
|
div.arrow.right {
|
||||||
right: 20px;
|
position: fixed !important;
|
||||||
|
right: 10px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
28
public/css/itemview.css
Normal file
28
public/css/itemview.css
Normal 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%;
|
||||||
|
}
|
||||||
3
public/css/milligram.min.css
vendored
3
public/css/milligram.min.css
vendored
File diff suppressed because one or more lines are too long
34
public/css/pageview.css
Normal file
34
public/css/pageview.css
Normal 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
150
public/js/events.js
Normal 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;
|
||||||
|
|
@ -1,170 +1,33 @@
|
||||||
/* Todo:
|
|
||||||
* - Event tracker (rt.events)
|
|
||||||
* - Functions und Events in Module auslagern
|
|
||||||
*/
|
|
||||||
import rt from "./rt.js";
|
import rt from "./rt.js";
|
||||||
import "./test.js";
|
import events from "./events.js";
|
||||||
|
import lib from "./lib.js";
|
||||||
|
|
||||||
const calcItems = () => {
|
(async () => {
|
||||||
const cs = window.getComputedStyle(rt.container.posts[0]);
|
lib.showLayer("page");
|
||||||
const height = parseInt(cs.height.replace("px", ""));
|
window.addEventListener("hashchange", events.hashchange);
|
||||||
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);
|
const debug = document.querySelectorAll("span#debug > a");
|
||||||
items.forEach(item => {
|
debug[0].addEventListener("click", () => { // page
|
||||||
const _a = document.createElement("a");
|
lib.showLayer("page");
|
||||||
_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;
|
debug[1].addEventListener("click", () => { // item
|
||||||
rt.items.last = items[items.length - 1].id;
|
lib.showLayer("item");
|
||||||
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" });
|
debug[2].addEventListener("click", () => { // item
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
lib.showLayer("howto");
|
||||||
|
});
|
||||||
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);
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const pn = parseInt(document.location.pathname.split("/").splice(-1));
|
const pn = parseInt(document.location.pathname.split("/").splice(-1));
|
||||||
rt.container.posts[1].scrollIntoView({ block: rt.st.block }); // mitte
|
const hash = document.location.hash;
|
||||||
getItems({
|
lib.scrolltomiddle(rt.ct.wrapper.pages);
|
||||||
el: rt.container.posts[1],
|
lib.getItems({
|
||||||
|
el: rt.ct.wrapper.pages[1],
|
||||||
opt: pn > 0 ? `id=${pn + 1}&order=desc` : ""
|
opt: pn > 0 ? `id=${pn + 1}&order=desc` : ""
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if(hash)
|
||||||
|
window.dispatchEvent(new CustomEvent("hashchange", { detail: { newURL: hash } }));
|
||||||
}, 300);
|
}, 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
1
public/js/f0ck.min.js
vendored
Normal 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
121
public/js/lib.js
Normal 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
|
||||||
|
};
|
||||||
|
|
@ -5,18 +5,38 @@ export default {
|
||||||
min_rows: 4,
|
min_rows: 4,
|
||||||
itemsize: 130
|
itemsize: 130
|
||||||
},
|
},
|
||||||
st: {
|
|
||||||
behavior: "smooth",
|
|
||||||
block: "center"
|
|
||||||
},
|
|
||||||
url: "//f0ck.me",
|
url: "//f0ck.me",
|
||||||
|
api: "//dev.f0ck.me/api",
|
||||||
|
vars: {
|
||||||
|
cd: 700,
|
||||||
|
block: "start"
|
||||||
|
},
|
||||||
tmp: {
|
tmp: {
|
||||||
scroll: false,
|
scroll: false,
|
||||||
resize: null
|
resize: null,
|
||||||
|
hash: true
|
||||||
},
|
},
|
||||||
container: {
|
items: {
|
||||||
wrapper: document.querySelector("div#wrapper"),
|
first: null,
|
||||||
itemview: document.querySelector("div#itemview"),
|
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: {
|
header: {
|
||||||
iteminfo: document.querySelector("div#itemInfo"),
|
iteminfo: document.querySelector("div#itemInfo"),
|
||||||
pagepos: document.querySelector("div#pagePosition"),
|
pagepos: document.querySelector("div#pagePosition"),
|
||||||
|
|
@ -28,15 +48,6 @@ export default {
|
||||||
nick: document.querySelector("span#itemNick"),
|
nick: document.querySelector("span#itemNick"),
|
||||||
channel: document.querySelector("span#itemChannel")
|
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
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export const queries = {
|
|
||||||
items: "select id, mime from items order by id desc limit 72"
|
|
||||||
};
|
|
||||||
|
|
@ -1,25 +1,10 @@
|
||||||
import router from "../router";
|
import router from "../router";
|
||||||
import fs from "fs";
|
import fs from "fs";
|
||||||
import sql from "../sql";
|
|
||||||
import handlebars from "handlebars";
|
|
||||||
|
|
||||||
import { queries } from "./inc/index";
|
const tpl = fs.readFileSync("./views/index.html", "utf-8");
|
||||||
|
|
||||||
const template = fs.readFileSync("./views/index.hbs", "utf-8");
|
|
||||||
|
|
||||||
router.get(/^\/(page\/[0-9]+)?$/, async (req, res) => {
|
router.get(/^\/(page\/[0-9]+)?$/, async (req, res) => {
|
||||||
const db = await sql.getConnection();
|
res
|
||||||
|
.writeHead(200, { 'Content-Type': 'text/html' })
|
||||||
try {
|
.end(tpl);
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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"> </div>
|
|
||||||
<div id="item" class="items"> </div>
|
|
||||||
<div id="item_2" class="items"> </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
81
views/index.html
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user