blah
This commit is contained in:
Flummi
15
test5/index.html
Normal file
15
test5/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!doctype blah>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>f0ck-fe test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="./style.css" rel="stylesheet" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<section id="wall"></section>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
95
test5/script.js
Normal file
95
test5/script.js
Normal file
@ -0,0 +1,95 @@
|
||||
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);
|
||||
};
|
||||
341
test5/style.css
Normal file
341
test5/style.css
Normal file
@ -0,0 +1,341 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
body {
|
||||
background: #333;
|
||||
color: white;
|
||||
font-family: "Noto Sans", Tahoma, sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
section {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
section article {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
padding: 5px;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
}
|
||||
section article:nth-child(2n+1) .info {
|
||||
left: 0;
|
||||
}
|
||||
section article:nth-child(2n+2) .info {
|
||||
left: -100%;
|
||||
}
|
||||
section img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
section .info {
|
||||
width: 180%;
|
||||
padding: 2em 0;
|
||||
margin: 0 10%;
|
||||
position: relative;
|
||||
float: left;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
section .info h1 {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
section .info p,
|
||||
section .info ol {
|
||||
margin-bottom: 2em;
|
||||
line-height: 140%;
|
||||
}
|
||||
section .info ol {
|
||||
margin-left: 20px;
|
||||
}
|
||||
section .info li {
|
||||
list-style: decimal;
|
||||
line-height: 140%;
|
||||
}
|
||||
section .info .purchase {
|
||||
display: block;
|
||||
margin-top: .4em;
|
||||
padding: .4em;
|
||||
background: #006699;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
-webkit-transition: 0.5s background-color;
|
||||
-moz-transition: 0.5s background-color;
|
||||
-ms-transition: 0.5s background-color;
|
||||
-o-transition: 0.5s background-color;
|
||||
transition: 0.5s background-color;
|
||||
}
|
||||
section .info .purchase:hover {
|
||||
background: #0066CC;
|
||||
}
|
||||
section article:target .info {
|
||||
height: auto;
|
||||
font-size: 100%;
|
||||
opacity: 1;
|
||||
-webkit-transition: .5s .5s opacity;
|
||||
-moz-transition: .5s .5s opacity;
|
||||
-ms-transition: .5s .5s opacity;
|
||||
-o-transition: .5s .5s opacity;
|
||||
transition: .5s .5s opacity;
|
||||
}
|
||||
section article:target img {
|
||||
-webkit-box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
|
||||
-moz-box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
|
||||
box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
-webkit-transition: .5s;
|
||||
-moz-transition: .5s;
|
||||
-ms-transition: .5s;
|
||||
-o-transition: .5s;
|
||||
transition: .5s;
|
||||
}
|
||||
footer {
|
||||
min-height: 400px;
|
||||
padding: 4em 1em;
|
||||
background: black;
|
||||
font-size: 1em;
|
||||
word-break: break-word;
|
||||
}
|
||||
footer .credits {
|
||||
width: 250px;
|
||||
}
|
||||
footer .credits li {
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
}
|
||||
footer a {
|
||||
color: white;
|
||||
}
|
||||
footer h2 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
footer h1,
|
||||
footer h2,
|
||||
footer p,
|
||||
footer ul {
|
||||
line-height: 140%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 400px) {
|
||||
section article {
|
||||
width: 33.333333%;
|
||||
}
|
||||
section article .info {
|
||||
width: 280%;
|
||||
}
|
||||
section article .purchase {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: auto;
|
||||
margin-top: 2em 0 0 0;
|
||||
}
|
||||
section article .description {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
section article ol {
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
section article:nth-child(3n+1) .info {
|
||||
left: 0;
|
||||
}
|
||||
section article:nth-child(3n+2) .info {
|
||||
left: -100%;
|
||||
}
|
||||
section article:nth-child(3n+3) .info {
|
||||
left: -200%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
section article .info {
|
||||
width: 380%;
|
||||
}
|
||||
section article {
|
||||
width: 25%;
|
||||
}
|
||||
section article:nth-child(4n+1) .info {
|
||||
left: 0;
|
||||
}
|
||||
section article:nth-child(4n+2) .info {
|
||||
left: -100%;
|
||||
}
|
||||
section article:nth-child(4n+3) .info {
|
||||
left: -200%;
|
||||
}
|
||||
section article:nth-child(4n+4) .info {
|
||||
left: -300%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 800px) {
|
||||
section article .info {
|
||||
width: 480%;
|
||||
}
|
||||
section article {
|
||||
width: 20%;
|
||||
}
|
||||
section article:nth-child(5n+1) .info {
|
||||
left: 0;
|
||||
}
|
||||
section article:nth-child(5n+2) .info {
|
||||
left: -100%;
|
||||
}
|
||||
section article:nth-child(5n+3) .info {
|
||||
left: -200%;
|
||||
}
|
||||
section article:nth-child(5n+4) .info {
|
||||
left: -300%;
|
||||
}
|
||||
section article:nth-child(5n+5) .info {
|
||||
left: -400%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
section article .info {
|
||||
width: 580%;
|
||||
}
|
||||
section article {
|
||||
width: 16.6666667%;
|
||||
}
|
||||
section article:nth-child(6n+1) .info {
|
||||
left: 0;
|
||||
}
|
||||
section article:nth-child(6n+2) .info {
|
||||
left: -100%;
|
||||
}
|
||||
section article:nth-child(6n+3) .info {
|
||||
left: -200%;
|
||||
}
|
||||
section article:nth-child(6n+4) .info {
|
||||
left: -300%;
|
||||
}
|
||||
section article:nth-child(6n+5) .info {
|
||||
left: -400%;
|
||||
}
|
||||
section article:nth-child(6n+6) .info {
|
||||
left: -500%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
section article .info {
|
||||
width: 680%;
|
||||
}
|
||||
section article {
|
||||
width: 14.2857143%;
|
||||
}
|
||||
section article:nth-child(7n+1) .info {
|
||||
left: 0;
|
||||
}
|
||||
section article:nth-child(7n+2) .info {
|
||||
left: -100%;
|
||||
}
|
||||
section article:nth-child(7n+3) .info {
|
||||
left: -200%;
|
||||
}
|
||||
section article:nth-child(7n+4) .info {
|
||||
left: -300%;
|
||||
}
|
||||
section article:nth-child(7n+5) .info {
|
||||
left: -400%;
|
||||
}
|
||||
section article:nth-child(7n+6) .info {
|
||||
left: -500%;
|
||||
}
|
||||
section article:nth-child(7n+7) .info {
|
||||
left: -600%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
section article .info {
|
||||
width: 780%;
|
||||
}
|
||||
section article {
|
||||
width: 12.5%;
|
||||
}
|
||||
section article:nth-child(8n+1) .info {
|
||||
left: 0;
|
||||
}
|
||||
section article:nth-child(8n+2) .info {
|
||||
left: -100%;
|
||||
}
|
||||
section article:nth-child(8n+3) .info {
|
||||
left: -200%;
|
||||
}
|
||||
section article:nth-child(8n+4) .info {
|
||||
left: -300%;
|
||||
}
|
||||
section article:nth-child(8n+5) .info {
|
||||
left: -400%;
|
||||
}
|
||||
section article:nth-child(8n+6) .info {
|
||||
left: -500%;
|
||||
}
|
||||
section article:nth-child(8n+7) .info {
|
||||
left: -600%;
|
||||
}
|
||||
section article:nth-child(8n+8) .info {
|
||||
left: -700%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user