f0ck/f0ck-fe-old
Archived
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

blah

Browse Source
This commit is contained in:
Flummi
2021-12-31 07:18:41 +01:00
parent a9116a52d9
commit 0399fa9e51
28 changed files with 2102 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
test3/index.html Normal file
View File

@ -0,0 +1,13 @@
<html>
<head>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<div class="navbar">&nbsp;</div>
<div id="page">
<div id="thumbs" style="top: 0;">
</div>
</div>
<script src="./script.js"></script>
</body>
</html>

37
test3/promises_fetch.js Normal file
View File

@ -0,0 +1,37 @@
/*let rt = {
user: "Flummi",
mime: "",
stamp: 1506717559,
eps: 20,
act: 0,
items: new Map(),
last: 0,
first: 0,
};
(function getitems() {
Promise.all([
fetch(`/api/test/?user=${rt.user}&mime=${rt.mime}&stamp=${rt.stamp}&eps=${rt.eps}`),
fetch(`/api/test/?user=${rt.user}&mime=${rt.mime}&stamp=${rt.stamp}&eps=${rt.eps}&get=meta`)
])
.then(res => Promise.all(res.map(muh => muh.json())))
.then(data => {
return {
act: data[0].items[0][0],
items: data[0].items[1].concat(data[0].items[0]),
items: [...data[0].items[1], ...data[0].items[0]],
meta: data[1].meta
};
})
.then(final => render(final));
})();
function render(data=null) {
if(data !== null) {
data.items.forEach(e => rt.items.set(e.stamp, e));
rt.act = data.act.stamp;
rt.last = data.meta.last;
rt.first = data.meta.first;
}
console.log(rt);
}*/

120
test3/script.js Normal file
View File

@ -0,0 +1,120 @@
let _layout = {
items: {
size: 128,
gutter: 8
},
min_margin: 16,
min_rows: 2,
min_cols: 3
};
_tpl = {
row: ({ rowid, items }) => `<div class="row" data-row="${rowid}">${items}</div>`,
item: ({ id, }) => `<a href="//f0ck.me/${id}" class="thumb" style="background-image:url('//f0ck.me/t/${id}.png')"></a>`,
};
let rt = {
user: "Flummi",
mime: "",
stamp: 1506717559,
act: 0,
items: new Map(),
last: 0,
first: 0,
};
let _cache = [];
let _dims = null;
let _scroll = false;
let _scrollrows = 4;
let _container = {
debug: document.querySelector("div.navbar"),
page: document.querySelector("div#page"),
thumbs: document.querySelector("div#thumbs")
};
window.onload = () => {
function resize() {
let rows = Math.max(~~((window.innerHeight - _layout.min_margin + _layout.items.size) / (_layout.items.size + _layout.items.gutter)), _layout.min_rows);
let cols = Math.max(~~((window.innerWidth - _layout.min_margin) / (_layout.items.size + _layout.items.gutter)), _layout.min_cols);
let pageWidth = cols * (_layout.items.size + _layout.items.gutter);
let margin = Math.max((window.innerWidth - pageWidth + _layout.items.gutter) / _layout.min_rows, 0);
let page = _container.page;
page.style.width = pageWidth;
page.style.marginLeft = margin;
_dims = {
rows: rows,
cols: cols,
eps: rows * cols,
pageWidth: pageWidth,
margin: margin
};
render();
}
function scroll(e) {
if(e.preventDefault)
e.preventDefault();
let deltaY = e.deltaY < 0?-1:1; // - up, + down
if(!_scroll) {
_scroll = true;
let dura = 500;
let top = parseInt(_container.thumbs.style.top.replace("px",""));
let go = `${(top + (-deltaY * ((_layout.items.size + _layout.items.gutter) * _scrollrows)))}`;
_container.thumbs.animate( [{ top: `${top}px` }, { top: `${go}px` } ], { duration: dura } );
setTimeout(() => { // after scroll
_container.thumbs.style.top = `${go}px`;
_scroll = false;
//console.log( getpos( thumbs.querySelectorAll("div.row") ) );
console.log( getposall( thumbs.querySelectorAll("div.row") ) );
}, dura);
}
}
resize();
window.addEventListener("resize", resize);
document.addEventListener("wheel", scroll);
function render() {
let items = new Array(_dims.eps).fill({id: 25788}, 0, _dims.eps);
let rowtpl = "";
let blah = "";
let rowid = 0;
let j = 0;
items.forEach(e => {
rowtpl += [{ id: e.id }].map(_tpl.item).join``;
if(++j % _dims.cols === 0) {
blah += [{ rowid: rowid++, items: rowtpl }].map(_tpl.row).join``;
rowtpl = "";
}
});
_container.thumbs.innerHTML = blah;
//console.log( getpos( thumbs.querySelectorAll("div.row") ) );
console.log( getposall( thumbs.querySelectorAll("div.row") ) );
}
function getpos(elems) {
return [elems[0], elems[elems.length-1]].map(e => [e.children[0], e.parentNode].reduce((a, b) => a.offsetTop + b.offsetTop));
}
function getposall(elems) {
return [...elems].map(e => [e.children[0], e.parentNode].reduce((a,b) => a.offsetTop + b.offsetTop));
}
function getItems(sum = 0, pos = "bottom") { // top/bottom
sum = sum===0?_dims.eps:sum;
Promise.all([
fetch(`/api/test/?user=${rt.user}&mime=${rt.mime}&stamp=${rt.stamp}&eps=${sum}`),
fetch(`/api/test/?user=${rt.user}&mime=${rt.mime}&stamp=${rt.stamp}&eps=${sum}&get=meta`)
])
.then(res => Promise.all(res.map(muh => muh.json())))
.then(data => {
_cache = data[0].items[1].concat(data[0].items[0]).sort().reverse();
/*return {
act: data[0].items[0][0],
items: data[0].items[1].concat(data[0].items[0]),
items: [...data[0].items[1], ...data[0].items[0]],
meta: data[1].meta
};*/
});
}
getItems();
setTimeout(() => { console.log(_cache); }, 1000);
};

73
test3/style.css Normal file
View File

@ -0,0 +1,73 @@
* {
padding: 0;
margin: 0;
}
html, body {
margin: 0;
padding: 0;
background-color: #262626;
position: relative;
width: 100%;
height: 100%;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
overflow: hidden;
}
body {
margin-top: 0 !important;
padding-top: 0 !important;
}
a {
color: #9f0;
text-decoration: none;
}
a:hover {
color: #74c100;
text-decoration: underline;
}
div#page {
position: absolute;
margin: 0 auto;
overflow: hidden;
top: 22px;
bottom: 16px;
}
div#thumbs {
position: absolute;
background-color: #040;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
a.thumb {
width: 128px;
height: 128px;
margin: 0 8px 8px 0;
float: left;
outline: none;
background-size: cover;
background-position: center center;
box-shadow: inset 0 0 10px #4c4a4a;
}
a.thumb:hover {
opacity: 0.5;
box-shadow: inset 0 0 10px #9f0;
}
.navbar {
margin: 0 auto;
width: 100%;
border: 0;
padding-top: 0;
padding-bottom: 0;
font-weight: bold;
position: fixed;
overflow: visible;
z-index: 999;
background-color: #484747;
border-bottom: 2px solid #9f0;
text-align: center;
}