95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
let _layout = {
|
|
items: {
|
|
size: 128,
|
|
gutter: 8
|
|
},
|
|
min_margin: 16,
|
|
min_rows: 2,
|
|
min_cols: 3
|
|
};
|
|
_tpl = {
|
|
item: ({ id }) => `<article id="id${id}"><a href="#id${id}"><img src="//f0ck.me/t/${id}.png" /></a><div class="info"><div class="description"><h1>${id}</h1><p>Penis</p></div><ol><li>Infos lol</li><li>und so</li></ol></div></article>`
|
|
};
|
|
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 = {
|
|
page: document.querySelector("div#page"),
|
|
wall: document.querySelector("section#wall")
|
|
};
|
|
|
|
window.onload = () => {
|
|
function init() {
|
|
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.wall.style.top.replace("px",""));
|
|
let go = `${(top + (-deltaY * ((_layout.items.size + _layout.items.gutter) * _scrollrows)))}`;
|
|
_container.wall.animate( [{ top: `${top}px` }, { top: `${go}px` } ], { duration: dura } );
|
|
setTimeout(() => { // after scroll
|
|
_container.wall.style.top = `${go}px`;
|
|
_scroll = false;
|
|
}, dura);
|
|
}
|
|
}
|
|
//document.addEventListener("wheel", scroll);
|
|
|
|
function render() {
|
|
let blah = "";
|
|
_cache.forEach(e => {
|
|
blah += [{ id: e.id }].map(_tpl.item).join``;
|
|
});
|
|
_container.wall.innerHTML = blah;
|
|
}
|
|
|
|
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));
|
|
}
|
|
|
|
//api.allorigins.win/raw?url=https:
|
|
function getItems(sum = 0, pos = "bottom") { // top/bottom
|
|
fetch(`//f0ck.me/api/user/${rt.user}`)
|
|
.then(res => res.json())
|
|
.then(data => _cache = data);
|
|
}
|
|
|
|
init();
|
|
getItems();
|
|
setTimeout(() => { render(); }, 500);
|
|
setTimeout(() => { console.log(_cache); }, 1000);
|
|
}; |