blah
This commit is contained in:
Flummi
parent
a9116a52d9
commit
0399fa9e51
175
test1/f0ck.js
Normal file
175
test1/f0ck.js
Normal file
@ -0,0 +1,175 @@
|
||||
class f0ck {
|
||||
constructor(hash = "") {
|
||||
/*this.tpl = {
|
||||
row: ({ rowid, items }) => `<div class="row" data-row="${rowid}">${items}</div>`,
|
||||
item: ({ id, title, stamp }) => `<a href="//f0ck.me/${id}" data-stamp="${stamp}" class="thumb" style="background-image:url('//f0ck.me/t/${id}.png')"></a>`,
|
||||
};*/
|
||||
|
||||
this.tpl = {
|
||||
row: ({ rowid, items }) => `<div class="row" data-row="${rowid}">${items}</div>`,
|
||||
item: ({ stamp }) => `<a href="#" data-stamp="${stamp}" class="thumb" style="background-color: #0f0;"></a>`,
|
||||
};
|
||||
this._layout = {
|
||||
items: {
|
||||
size: 128,
|
||||
gutter: 8
|
||||
},
|
||||
min_margin: 16,
|
||||
min_rows: 2,
|
||||
min_cols: 3
|
||||
};
|
||||
this.tmp = {
|
||||
first: 0,
|
||||
last: 0
|
||||
}
|
||||
this._lastmode = "desc";
|
||||
this.scrollrows = 4;
|
||||
this._dims = null;
|
||||
this.init_events();
|
||||
this._scroll = false;
|
||||
this._items = new Map();
|
||||
this.tmphash = null;
|
||||
this.hash = hash; //setter
|
||||
}
|
||||
|
||||
render(tmp = null) {
|
||||
if(tmp !== null) {
|
||||
tmp.forEach(e => {
|
||||
this._items.set(e.stamp, e);
|
||||
});
|
||||
|
||||
/*let tmprow = "";
|
||||
for(let rows = 0; rows < this._dims.rows; rows++) {
|
||||
tmprow += [{ }]
|
||||
for(let cols = 0; cols < this._dims.cols; cols++) {
|
||||
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
init_events() {
|
||||
let that = this;
|
||||
function resize() {
|
||||
let rows = Math.max(~~((window.innerHeight - that._layout.min_margin + that._layout.items.size) / (that._layout.items.size + that._layout.items.gutter)), that._layout.min_rows);
|
||||
let cols = Math.max(~~((window.innerWidth - that._layout.min_margin) / (that._layout.items.size + that._layout.items.gutter)), that._layout.min_cols);
|
||||
let pageWidth = cols * (that._layout.items.size + that._layout.items.gutter);
|
||||
let margin = Math.max((window.innerWidth - pageWidth + that._layout.items.gutter) / that._layout.min_rows, 0);
|
||||
let page = document.querySelector("div#page");
|
||||
page.style.width = pageWidth;
|
||||
page.style.marginLeft = margin;
|
||||
that._dims = {
|
||||
rows: rows,
|
||||
cols: cols,
|
||||
eps: rows * cols,
|
||||
pageWidth: pageWidth,
|
||||
margin: margin
|
||||
};
|
||||
that.render();
|
||||
}
|
||||
resize();
|
||||
|
||||
function scroll(e) {
|
||||
if(e.preventDefault)
|
||||
e.preventDefault();
|
||||
let deltaY = e.deltaY < 0?-1:1; // - up, + down
|
||||
|
||||
}
|
||||
window.addEventListener('resize', resize); // onresize
|
||||
document.addEventListener("wheel", scroll); // mousewheel
|
||||
document.querySelectorAll("div.pscroll").forEach(elem => elem.addEventListener("click", e => scroll({ deltaY: e.target.id === "up"?-1:1 }))); // buttons
|
||||
window.addEventListener("hashchange", () => { this.hash = window.location.hash }, false); // hashchange
|
||||
}
|
||||
|
||||
set hash(val) {
|
||||
console.log("hash changed");
|
||||
this.tmphash = this.getlink(val);
|
||||
this.firstrun = false;
|
||||
fetch(`/api/`, {
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
method: 'POST',
|
||||
body: JSON.stringify(this.tmphash)
|
||||
})
|
||||
.then(res => {
|
||||
if(res.status === 200)
|
||||
return res.json();
|
||||
else
|
||||
return { error: true };
|
||||
})
|
||||
.then(data => {
|
||||
if(!data.error) {
|
||||
this.tmp = {
|
||||
first: data.meta.atFirst,
|
||||
last: data.meta.atLast
|
||||
};
|
||||
//const tmpmap = new Map();
|
||||
//data.items.forEach(e => tmpmap.set(e.stamp, e));
|
||||
//this.render(tmpmap);
|
||||
this.render(data.items);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getlink(tmp) {
|
||||
const tpl = {
|
||||
user: ({ user, mime, last }) => `user,${user},${mime},${last}`,
|
||||
mime: ({ user, mime, last }) => `mime,${mime},${user},${last}`,
|
||||
new: ({ user, mime, last }) => `items,${last}`,
|
||||
};
|
||||
let blah = {
|
||||
mode: "",
|
||||
user: "",
|
||||
mime: "",
|
||||
last: 0,
|
||||
post: 0
|
||||
};
|
||||
let api = "/api/";
|
||||
|
||||
if(!tmp.match(/\,/)) {
|
||||
tmp = "#new";
|
||||
}
|
||||
|
||||
tmp = (tmp.match(/,/)?tmp:`${tmp},`).substr(1).split(",");
|
||||
const args = {
|
||||
l: tmp[0].split("/"),
|
||||
r: tmp[1].split("/")
|
||||
};
|
||||
|
||||
blah.mode = ( args.l[0].length === 0 )? "new" : args.l[0];
|
||||
blah.last = parseInt(args.r[0]) || 0;
|
||||
blah.post = parseInt(args.r[1]) || 0;
|
||||
switch(blah.mode) {
|
||||
case "user":
|
||||
blah.user = ( args.l[1] )? args.l[1] : "";
|
||||
blah.mime = ( args.l[2] )? args.l[2] : "";
|
||||
break;
|
||||
case "mime":
|
||||
blah.user = ( args.l[2] )? args.l[2] : "";
|
||||
blah.mime = ( args.l[1] )? args.l[1] : "";
|
||||
break;
|
||||
}
|
||||
console.log(this._lastmode);
|
||||
return {
|
||||
mode: blah.mode,
|
||||
user: blah.user,
|
||||
stamp: blah.last,
|
||||
mime: blah.mime,
|
||||
eps: this._dims.eps,
|
||||
sort: this._lastmode
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function getKey(_map, _search) {
|
||||
let i = 0;
|
||||
for(let [key] of _map) {
|
||||
if(key === _search)
|
||||
return i;
|
||||
i++;
|
||||
}
|
||||
}
|
||||
31
test1/index.html
Normal file
31
test1/index.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!doctype blah>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test 1</title>
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
<link href="./style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<a href="./">reload</a> |
|
||||
<a href="#" data-id="1">debug 1</a> |
|
||||
<a href="#" data-id="2">page 2</a> |
|
||||
<a href="#" data-id="3">page 3</a>
|
||||
</div>
|
||||
|
||||
<div class="pscroll" id="up"></div>
|
||||
|
||||
<div id="page">
|
||||
<div id="thumbs" style="top: 0;"></div>
|
||||
</div>
|
||||
|
||||
<div class="pscroll" id="down"></div>
|
||||
|
||||
<script src="./f0ck.js"></script>
|
||||
<script>
|
||||
window.onload = () => {
|
||||
let f = new f0ck(window.location.hash);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
test1/script.js
Normal file
26
test1/script.js
Normal file
@ -0,0 +1,26 @@
|
||||
$(document).ready(() => {
|
||||
$(window).on('resize', () => {
|
||||
let rows = Math.max(Math.floor(($(window).height() - 16 + 128) / (128 + 8)), 2);
|
||||
let cols = Math.max(Math.floor(($(window).width() - 16) / (128 + 8)), 3);
|
||||
let pageWidth = cols * (128 + 8);
|
||||
let margin = Math.max(($(window).width() - pageWidth + 8) / 2, 0);
|
||||
$("div#page").css({
|
||||
'width': pageWidth,
|
||||
'margin-left': margin
|
||||
});
|
||||
}).resize();
|
||||
|
||||
var scroll = false;
|
||||
$("body").on('DOMMouseScroll mousewheel', function(e) {
|
||||
e.preventDefault();
|
||||
if(!scroll) {
|
||||
scroll = true;
|
||||
$("#thumbs").animate({
|
||||
top: `${(parseInt($("#thumbs").css("top").replace("px","")) + (e.deltaY * 128))}px`
|
||||
}, 200, () => {
|
||||
scroll = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
96
test1/style.css
Normal file
96
test1/style.css
Normal file
@ -0,0 +1,96 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #262626;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
div#page {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
top: 22px;
|
||||
bottom: 16px;
|
||||
}
|
||||
div#thumbs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
div.pscroll {
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
margin-left: -36px;
|
||||
z-index: 999;
|
||||
}
|
||||
div.pscroll:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
div#up {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyP///8iIiLm5uY3NzdKSkpAQEAqKipZf6aEAAAACnRSTlOxIfAAKvPn6quuQpaxIgAAAMZJREFUeF7t17uOwjAYROHjOMCuL0l4/5ddbQU0M4p/RIE8/flkyY1NTr/XNrjrT8qsSwtsWaGFBpcYcKEF9xFgAhMo9xIBytFrP8owUPb6v10JmN4K6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4LiN4LD2Cv53c8AaUPAL08AXVk9zeeoG3nhb69XuP5fdkLZQITmED840kMIP75zonbaH4j5T8NALtW477R3QAAAABJRU5ErkJggg==');
|
||||
top: 3.2em;
|
||||
}
|
||||
div#down {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyMiIiLm5uY3NzcqKipAQED///9KSkpHtWFIAAAACnRSTlMqACGx8/Cu6uerGsmyTAAAAM9JREFUeF7t1zkOwzAMBVEt3kLK2/0vm3KQivhWigTQ7+dBpZhyeW3+cNtSckqzd2xOafGu1TT1AVPyzv0YMIABDMD0fQB7u9S1HcCNXhAM4CAQZl98gZ8PgNsB3G69NwAEqQdAUHoABKUHQNB6AAStB0DQegAErQdA0HoABK0HQNB6AAShBwgE+gBACHuAWKCPAIS4B4gEegFAoHcFQKBXAAR6BUCgVwAEehlAoNcBt7Nd7TTXAYjD/uKDMYAB9B+etQ+o/cd3Lsv6NF9ryW9/v8EFMSsbFgAAAABJRU5ErkJggg==');
|
||||
bottom: 56px;
|
||||
}
|
||||
25
test2/index.html
Normal file
25
test2/index.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!doctype blah>
|
||||
<html>
|
||||
<head>
|
||||
<title>f0ckdev</title>
|
||||
<link rel="stylesheet" type="text/css" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<span>Page 0</span>
|
||||
<a href="/">reload</a> |
|
||||
<a href="#" data-id="1">page 1</a> |
|
||||
<a href="#" data-id="2">page 2</a> |
|
||||
<a href="#" data-id="3">page 3</a>
|
||||
</div>
|
||||
|
||||
<div class="pscroll" id="up"></div>
|
||||
<div id="con"></div>
|
||||
<div class="pscroll" id="down"></div>
|
||||
|
||||
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script src="./lib/jquery.ba-hashchange.js"></script>
|
||||
<script src="./lib/f0ck.js"></script>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
13
test2/lib/events.js
Normal file
13
test2/lib/events.js
Normal file
@ -0,0 +1,13 @@
|
||||
$(document).ready(() => {
|
||||
$(window).on("resize", () => f.render());
|
||||
$(window).bind('mousewheel DOMMouseScroll MozMousePixelScroll', event => {
|
||||
f.page = (event.originalEvent.wheelDelta / 120 > 0)?-1:1;
|
||||
});
|
||||
|
||||
$("div#up").on("click", () => {
|
||||
f.page = -1;
|
||||
});
|
||||
$("div#down").on("click", () => {
|
||||
f.page = 1;
|
||||
});
|
||||
});
|
||||
178
test2/lib/f0ck.js
Normal file
178
test2/lib/f0ck.js
Normal file
@ -0,0 +1,178 @@
|
||||
class f0ck {
|
||||
constructor(hash = "") {
|
||||
this.debug();
|
||||
this.tpl = {
|
||||
row: ({ items }) => `<ul class="posts">${items}</ul>`,
|
||||
item: ({ id, title, stamp }) => `<li class="post"><a href="https://f0ck.me/${id}" title="${title} ; ${stamp}"><img class="thumb" src="https://f0ck.me/t/${id}.png" /></a></li>`,
|
||||
};
|
||||
this.numitems = this.sumItems();
|
||||
this.items = {
|
||||
items: [],
|
||||
last: null,
|
||||
first: null
|
||||
};
|
||||
this.tmphash = null;
|
||||
this.hash = hash;
|
||||
}
|
||||
|
||||
loadItems(init=false) {
|
||||
this.getItems().then(
|
||||
resolve => {
|
||||
console.log("resolved", this.items);
|
||||
//if(init) this.render(init);
|
||||
},
|
||||
reject => {
|
||||
console.error("REJECTED!");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getItems() {
|
||||
return new Promise((resolve, reject) => {
|
||||
$.getJSON(`${this.tmphash.link},${(this.numitems.ipp*2)}`, data => {
|
||||
console.log("received data", data);
|
||||
this.items.last = data.meta.last;
|
||||
this.items.first = data.meta.first;
|
||||
|
||||
for(let item in data.items) {
|
||||
this.items.items[data.items[item].stamp] = data.items[item];
|
||||
}
|
||||
|
||||
return resolve();
|
||||
}).fail(err => {
|
||||
return reject();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
sumItems() {
|
||||
let h = $(window).innerHeight();
|
||||
let w = $(window).innerWidth();
|
||||
let itemsize = 128;
|
||||
let spacing = 10;
|
||||
let header = 90;
|
||||
let ipr = Math.floor( w / ( itemsize + spacing ) );
|
||||
let rpp = Math.floor( ( h - header ) / ( itemsize + spacing ) );
|
||||
let ipp = Math.floor( ipr * rpp );
|
||||
return {
|
||||
ipr: ipr, // items per row
|
||||
rpp: rpp, // rows per page
|
||||
ipp: ipp // items per page
|
||||
};
|
||||
}
|
||||
|
||||
render(init=false) {
|
||||
let tmpnum = this.sumItems();
|
||||
let container = $("div#con");
|
||||
if(this.numitems.ipp !== tmpnum.ipp || init) {
|
||||
console.log("rendering from", this.current);
|
||||
if(typeof this.current !== "number")
|
||||
return;
|
||||
container.html("");
|
||||
this.numitems = tmpnum;
|
||||
let rowtpl = "";
|
||||
let j, tmplast = 0;
|
||||
for(var i = this.current+1; j < this.numitems.ipp; i--) {
|
||||
if(this.items[i]) {
|
||||
rowtpl += [{ id: this.items[i].id, title: this.items[i].mime, stamp: this.items[i].stamp }].map(this.tpl.item).join``;
|
||||
j++;
|
||||
tmplast = this.items[i].stamp;
|
||||
}
|
||||
if(this.items.length < i) {
|
||||
j = this.numitems.ipp;
|
||||
}
|
||||
}
|
||||
this.scope.last = tmplast;
|
||||
console.log("finished rendering", container.length);
|
||||
container.append( [{ items: rowtpl }].map(this.tpl.row).join`` );
|
||||
}
|
||||
}
|
||||
|
||||
set hash(val) {
|
||||
console.log("hash changed");
|
||||
let tmp = this.getlink(val);
|
||||
this.tmphash = tmp;
|
||||
|
||||
//if(tmp.last < this.scope.first) {
|
||||
this.current = tmp.last;
|
||||
this.loadItems(true);
|
||||
//}
|
||||
//else if(tmp.last > this.scope.last || this.scope.last === 0) {
|
||||
// this.current = tmp.last;
|
||||
// this.loadItems(true);
|
||||
//}
|
||||
}
|
||||
|
||||
gethash() {
|
||||
return this.tmphash;
|
||||
}
|
||||
|
||||
debug() {
|
||||
$(".navbar a").on("click", event => {
|
||||
switch(event.target.innerText) {
|
||||
case "page 1":
|
||||
this.currentpage = 0;
|
||||
this.render(true);
|
||||
break;
|
||||
case "page 2":
|
||||
this.currentpage = 1;
|
||||
this.render(true);
|
||||
break;
|
||||
case "page 3":
|
||||
this.currentpage = 2;
|
||||
this.render(true);
|
||||
break;
|
||||
default:
|
||||
console.log("nope");
|
||||
break;
|
||||
}
|
||||
$(".navbar span").html(`Page ${this.currentpage}`);
|
||||
});
|
||||
}
|
||||
|
||||
getlink(tmp) {
|
||||
const tpl = {
|
||||
user: ({ user, mime, last, eps }) => `user,${user},${mime},${last}`,
|
||||
mime: ({ user, mime, last, eps }) => `mime,${mime},${user},${last}`,
|
||||
new: ({ user, mime, last, eps }) => `items,${last}`,
|
||||
};
|
||||
let blah = {
|
||||
mode: "",
|
||||
user: "",
|
||||
mime: "",
|
||||
last: 0,
|
||||
post: 0
|
||||
};
|
||||
let api = "/api/?";
|
||||
|
||||
if(!tmp.match(/\//)) {
|
||||
tmp = "#new/";
|
||||
}
|
||||
|
||||
|
||||
tmp = (tmp.match(/,/)?tmp:`${tmp},`).substr(1).split(",");
|
||||
console.log(tmp);
|
||||
const args = {
|
||||
l: tmp[0].split("/"),
|
||||
r: tmp[1].split("/")
|
||||
};
|
||||
|
||||
blah.mode = ( args.l[0].length === 0 )? "new" : args.l[0];
|
||||
blah.last = parseInt(args.r[0]) || 0;
|
||||
blah.post = parseInt(args.r[1]) || 0;
|
||||
switch(blah.mode) {
|
||||
case "user":
|
||||
blah.user = ( args.l[1].length === 0 )? "" : args.l[1];
|
||||
blah.mime = ( args.l[2].length === 0 )? "" : args.l[2];
|
||||
break;
|
||||
case "mime":
|
||||
blah.user = ( args.l[2].length === 0 )? "" : args.l[2];
|
||||
blah.mime = ( args.l[1].length === 0 )? "" : args.l[1];
|
||||
break;
|
||||
}
|
||||
return {
|
||||
link: api + [{ user: blah.user, mime: blah.mime, last: blah.last, eps: this.numitems.ipp }].map(tpl[blah.mode]).join``,
|
||||
args: blah
|
||||
};
|
||||
}
|
||||
}
|
||||
299
test2/lib/jquery.ba-hashchange.js
Normal file
299
test2/lib/jquery.ba-hashchange.js
Normal file
@ -0,0 +1,299 @@
|
||||
/*!
|
||||
* jQuery hashchange event - v1.3 - 7/21/2010
|
||||
* http://benalman.com/projects/jquery-hashchange-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://benalman.com/about/license/
|
||||
*/
|
||||
|
||||
// Script: jQuery hashchange event
|
||||
//
|
||||
// *Version: 1.3, Last updated: 7/21/2010*
|
||||
//
|
||||
// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
|
||||
// GitHub - http://github.com/cowboy/jquery-hashchange/
|
||||
// Source - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
|
||||
// (Minified) - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
|
||||
//
|
||||
// About: License
|
||||
//
|
||||
// Copyright (c) 2010 "Cowboy" Ben Alman,
|
||||
// Dual licensed under the MIT and GPL licenses.
|
||||
// http://benalman.com/about/license/
|
||||
//
|
||||
// About: Examples
|
||||
//
|
||||
// These working examples, complete with fully commented code, illustrate a few
|
||||
// ways in which this plugin can be used.
|
||||
//
|
||||
// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
|
||||
// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
|
||||
//
|
||||
// About: Support and Testing
|
||||
//
|
||||
// Information about what version or versions of jQuery this plugin has been
|
||||
// tested with, what browsers it has been tested in, and where the unit tests
|
||||
// reside (so you can test it yourself).
|
||||
//
|
||||
// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
|
||||
// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
|
||||
// Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
|
||||
// Unit Tests - http://benalman.com/code/projects/jquery-hashchange/unit/
|
||||
//
|
||||
// About: Known issues
|
||||
//
|
||||
// While this jQuery hashchange event implementation is quite stable and
|
||||
// robust, there are a few unfortunate browser bugs surrounding expected
|
||||
// hashchange event-based behaviors, independent of any JavaScript
|
||||
// window.onhashchange abstraction. See the following examples for more
|
||||
// information:
|
||||
//
|
||||
// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
|
||||
// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
|
||||
// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
|
||||
// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
|
||||
//
|
||||
// Also note that should a browser natively support the window.onhashchange
|
||||
// event, but not report that it does, the fallback polling loop will be used.
|
||||
//
|
||||
// About: Release History
|
||||
//
|
||||
// 1.3 - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
|
||||
// "removable" for mobile-only development. Added IE6/7 document.title
|
||||
// support. Attempted to make Iframe as hidden as possible by using
|
||||
// techniques from http://www.paciellogroup.com/blog/?p=604. Added
|
||||
// support for the "shortcut" format $(window).hashchange( fn ) and
|
||||
// $(window).hashchange() like jQuery provides for built-in events.
|
||||
// Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
|
||||
// lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
|
||||
// and <jQuery.fn.hashchange.src> properties plus document-domain.html
|
||||
// file to address access denied issues when setting document.domain in
|
||||
// IE6/7.
|
||||
// 1.2 - (2/11/2010) Fixed a bug where coming back to a page using this plugin
|
||||
// from a page on another domain would cause an error in Safari 4. Also,
|
||||
// IE6/7 Iframe is now inserted after the body (this actually works),
|
||||
// which prevents the page from scrolling when the event is first bound.
|
||||
// Event can also now be bound before DOM ready, but it won't be usable
|
||||
// before then in IE6/7.
|
||||
// 1.1 - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
|
||||
// where browser version is incorrectly reported as 8.0, despite
|
||||
// inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
|
||||
// 1.0 - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
|
||||
// window.onhashchange functionality into a separate plugin for users
|
||||
// who want just the basic event & back button support, without all the
|
||||
// extra awesomeness that BBQ provides. This plugin will be included as
|
||||
// part of jQuery BBQ, but also be available separately.
|
||||
|
||||
(function($,window,undefined){
|
||||
'$:nomunge'; // Used by YUI compressor.
|
||||
|
||||
// Reused string.
|
||||
var str_hashchange = 'hashchange',
|
||||
|
||||
// Method / object references.
|
||||
doc = document,
|
||||
fake_onhashchange,
|
||||
special = $.event.special,
|
||||
|
||||
// Does the browser support window.onhashchange? Note that IE8 running in
|
||||
// IE7 compatibility mode reports true for 'onhashchange' in window, even
|
||||
// though the event isn't supported, so also test document.documentMode.
|
||||
doc_mode = doc.documentMode,
|
||||
supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
|
||||
|
||||
// Get location.hash (or what you'd expect location.hash to be) sans any
|
||||
// leading #. Thanks for making this necessary, Firefox!
|
||||
function get_fragment( url ) {
|
||||
url = url || location.href;
|
||||
return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
|
||||
};
|
||||
|
||||
// Method: jQuery.fn.hashchange
|
||||
//
|
||||
// Bind a handler to the window.onhashchange event or trigger all bound
|
||||
// window.onhashchange event handlers. This behavior is consistent with
|
||||
// jQuery's built-in event handlers.
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// > jQuery(window).hashchange( [ handler ] );
|
||||
//
|
||||
// Arguments:
|
||||
//
|
||||
// handler - (Function) Optional handler to be bound to the hashchange
|
||||
// event. This is a "shortcut" for the more verbose form:
|
||||
// jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
|
||||
// all bound window.onhashchange event handlers will be triggered. This
|
||||
// is a shortcut for the more verbose
|
||||
// jQuery(window).trigger( 'hashchange' ). These forms are described in
|
||||
// the <hashchange event> section.
|
||||
//
|
||||
// Returns:
|
||||
//
|
||||
// (jQuery) The initial jQuery collection of elements.
|
||||
|
||||
// Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
|
||||
// $(elem).hashchange() for triggering, like jQuery does for built-in events.
|
||||
$.fn[ str_hashchange ] = function( fn ) {
|
||||
return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
|
||||
};
|
||||
|
||||
// Property: jQuery.fn.hashchange.delay
|
||||
//
|
||||
// The numeric interval (in milliseconds) at which the <hashchange event>
|
||||
// polling loop executes. Defaults to 50.
|
||||
|
||||
// Property: jQuery.fn.hashchange.domain
|
||||
//
|
||||
// If you're setting document.domain in your JavaScript, and you want hash
|
||||
// history to work in IE6/7, not only must this property be set, but you must
|
||||
// also set document.domain BEFORE jQuery is loaded into the page. This
|
||||
// property is only applicable if you are supporting IE6/7 (or IE8 operating
|
||||
// in "IE7 compatibility" mode).
|
||||
//
|
||||
// In addition, the <jQuery.fn.hashchange.src> property must be set to the
|
||||
// path of the included "document-domain.html" file, which can be renamed or
|
||||
// modified if necessary (note that the document.domain specified must be the
|
||||
// same in both your main JavaScript as well as in this file).
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// jQuery.fn.hashchange.domain = document.domain;
|
||||
|
||||
// Property: jQuery.fn.hashchange.src
|
||||
//
|
||||
// If, for some reason, you need to specify an Iframe src file (for example,
|
||||
// when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
|
||||
// do so using this property. Note that when using this property, history
|
||||
// won't be recorded in IE6/7 until the Iframe src file loads. This property
|
||||
// is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
|
||||
// compatibility" mode).
|
||||
//
|
||||
// Usage:
|
||||
//
|
||||
// jQuery.fn.hashchange.src = 'path/to/file.html';
|
||||
|
||||
$.fn[ str_hashchange ].delay = 50;
|
||||
/*
|
||||
$.fn[ str_hashchange ].domain = null;
|
||||
$.fn[ str_hashchange ].src = null;
|
||||
*/
|
||||
|
||||
// Event: hashchange event
|
||||
//
|
||||
// Fired when location.hash changes. In browsers that support it, the native
|
||||
// HTML5 window.onhashchange event is used, otherwise a polling loop is
|
||||
// initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
|
||||
// see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
|
||||
// compatibility" mode), a hidden Iframe is created to allow the back button
|
||||
// and hash-based history to work.
|
||||
//
|
||||
// Usage as described in <jQuery.fn.hashchange>:
|
||||
//
|
||||
// > // Bind an event handler.
|
||||
// > jQuery(window).hashchange( function(e) {
|
||||
// > var hash = location.hash;
|
||||
// > ...
|
||||
// > });
|
||||
// >
|
||||
// > // Manually trigger the event handler.
|
||||
// > jQuery(window).hashchange();
|
||||
//
|
||||
// A more verbose usage that allows for event namespacing:
|
||||
//
|
||||
// > // Bind an event handler.
|
||||
// > jQuery(window).bind( 'hashchange', function(e) {
|
||||
// > var hash = location.hash;
|
||||
// > ...
|
||||
// > });
|
||||
// >
|
||||
// > // Manually trigger the event handler.
|
||||
// > jQuery(window).trigger( 'hashchange' );
|
||||
//
|
||||
// Additional Notes:
|
||||
//
|
||||
// * The polling loop and Iframe are not created until at least one handler
|
||||
// is actually bound to the 'hashchange' event.
|
||||
// * If you need the bound handler(s) to execute immediately, in cases where
|
||||
// a location.hash exists on page load, via bookmark or page refresh for
|
||||
// example, use jQuery(window).hashchange() or the more verbose
|
||||
// jQuery(window).trigger( 'hashchange' ).
|
||||
// * The event can be bound before DOM ready, but since it won't be usable
|
||||
// before then in IE6/7 (due to the necessary Iframe), recommended usage is
|
||||
// to bind it inside a DOM ready handler.
|
||||
|
||||
// Override existing $.event.special.hashchange methods (allowing this plugin
|
||||
// to be defined after jQuery BBQ in BBQ's source code).
|
||||
special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
|
||||
|
||||
// Called only when the first 'hashchange' event is bound to window.
|
||||
setup: function() {
|
||||
// If window.onhashchange is supported natively, there's nothing to do..
|
||||
if ( supports_onhashchange ) { return false; }
|
||||
|
||||
// Otherwise, we need to create our own. And we don't want to call this
|
||||
// until the user binds to the event, just in case they never do, since it
|
||||
// will create a polling loop and possibly even a hidden Iframe.
|
||||
$( fake_onhashchange.start );
|
||||
},
|
||||
|
||||
// Called only when the last 'hashchange' event is unbound from window.
|
||||
teardown: function() {
|
||||
// If window.onhashchange is supported natively, there's nothing to do..
|
||||
if ( supports_onhashchange ) { return false; }
|
||||
|
||||
// Otherwise, we need to stop ours (if possible).
|
||||
$( fake_onhashchange.stop );
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// fake_onhashchange does all the work of triggering the window.onhashchange
|
||||
// event for browsers that don't natively support it, including creating a
|
||||
// polling loop to watch for hash changes and in IE 6/7 creating a hidden
|
||||
// Iframe to enable back and forward.
|
||||
fake_onhashchange = (function(){
|
||||
var self = {},
|
||||
timeout_id,
|
||||
|
||||
// Remember the initial hash so it doesn't get triggered immediately.
|
||||
last_hash = get_fragment(),
|
||||
|
||||
fn_retval = function(val){ return val; },
|
||||
history_set = fn_retval,
|
||||
history_get = fn_retval;
|
||||
|
||||
// Start the polling loop.
|
||||
self.start = function() {
|
||||
timeout_id || poll();
|
||||
};
|
||||
|
||||
// Stop the polling loop.
|
||||
self.stop = function() {
|
||||
timeout_id && clearTimeout( timeout_id );
|
||||
timeout_id = undefined;
|
||||
};
|
||||
|
||||
// This polling loop checks every $.fn.hashchange.delay milliseconds to see
|
||||
// if location.hash has changed, and triggers the 'hashchange' event on
|
||||
// window when necessary.
|
||||
function poll() {
|
||||
var hash = get_fragment(),
|
||||
history_hash = history_get( last_hash );
|
||||
|
||||
if ( hash !== last_hash ) {
|
||||
history_set( last_hash = hash, history_hash );
|
||||
|
||||
$(window).trigger( str_hashchange );
|
||||
|
||||
} else if ( history_hash !== last_hash ) {
|
||||
location.href = location.href.replace( /#.*/, '' ) + history_hash;
|
||||
}
|
||||
|
||||
timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
|
||||
};
|
||||
return self;
|
||||
})();
|
||||
|
||||
})(jQuery,this);
|
||||
35
test2/lib/lib.js
Normal file
35
test2/lib/lib.js
Normal file
@ -0,0 +1,35 @@
|
||||
var getlink = tmp => {
|
||||
const tpl = {
|
||||
user: ({ user, mime, last, eps }) => `user,${user},${mime},${last},${eps}`,
|
||||
mime: ({ user, mime, last, eps }) => `mime,${mime},${user},${last},${eps}`,
|
||||
new: ({ user, mime, last, eps }) => `items,${last},${eps}`,
|
||||
};
|
||||
|
||||
let api = "/api/?";
|
||||
tmp = (tmp.match(/,/)?tmp:`${tmp},`).substr(1).split(",");
|
||||
const args = {
|
||||
l: tmp[0].split("/"),
|
||||
r: tmp[1].split("/")
|
||||
};
|
||||
tmp = {
|
||||
mode: "",
|
||||
user: "",
|
||||
mime: "",
|
||||
last: 0,
|
||||
post: 0
|
||||
};
|
||||
tmp.mode = ( args.l[0].length === 0 )? "new" : args.l[0];
|
||||
tmp.last = parseInt(args.r[0]) || 0;
|
||||
tmp.post = parseInt(args.r[1]) || 0;
|
||||
switch(tmp.mode) {
|
||||
case "user":
|
||||
tmp.user = ( args.l[1].length === 0 )? "" : args.l[1];
|
||||
tmp.mime = ( args.l[2].length === 0 )? "" : args.l[2];
|
||||
break;
|
||||
case "mime":
|
||||
tmp.user = ( args.l[2].length === 0 )? "" : args.l[2];
|
||||
tmp.mime = ( args.l[1].length === 0 )? "" : args.l[1];
|
||||
break;
|
||||
}
|
||||
return api + [{ user: tmp.user, mime: tmp.mime, last: tmp.last, eps: 3 }].map(tpl[tmp.mode]).join``;
|
||||
};
|
||||
38
test2/script.js
Normal file
38
test2/script.js
Normal file
@ -0,0 +1,38 @@
|
||||
$(document).ready(() => {
|
||||
var f = new f0ck(window.location.hash);
|
||||
|
||||
$(window).hashchange(() => {
|
||||
f.hash = window.location.hash;
|
||||
});
|
||||
|
||||
//$(window).on("resize", () => f.render());
|
||||
//$(window).bind('mousewheel DOMMouseScroll MozMousePixelScroll', event => {
|
||||
// f.page = (event.originalEvent.wheelDelta / 120 > 0)?-1:1;
|
||||
//});
|
||||
|
||||
$("div#up").on("click", () => {
|
||||
return;
|
||||
});
|
||||
$("div#down").on("click", () => {
|
||||
let hash = f.tmphash.args;
|
||||
|
||||
let tmp = hash.mode;
|
||||
switch(hash.mode) {
|
||||
case "user":
|
||||
tmp += (hash.user.length > 1)?`/${hash.user}`:"";
|
||||
tmp += (hash.mime.length > 1)?`/${hash.mime}`:"";
|
||||
break;
|
||||
case "mime":
|
||||
tmp += (hash.mime.length > 1)?`/${hash.mime}`:"";
|
||||
tmp += (hash.user.length > 1)?`/${hash.user}`:"";
|
||||
break;
|
||||
}
|
||||
|
||||
tmp += ",";
|
||||
tmp += `${f.scope.last}`;
|
||||
//tmp += `${f.pages[f.currentpage][f.pages[f.currentpage].length-1][f.pages[f.currentpage][f.pages[f.currentpage].length-1].length-1].stamp}`;
|
||||
|
||||
window.location.hash = tmp;
|
||||
f.hash = window.location.hash;
|
||||
});
|
||||
});
|
||||
81
test2/style.css
Normal file
81
test2/style.css
Normal file
@ -0,0 +1,81 @@
|
||||
* {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0em auto 3em auto;
|
||||
background-color: #262626;
|
||||
color: #fff;
|
||||
font-family: Monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
|
||||
html, body {
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9f0;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #74c100;
|
||||
text-decoration: underline;
|
||||
}
|
||||
div#con {
|
||||
padding-top: 2.2em;
|
||||
height: 100%;
|
||||
}
|
||||
ul {
|
||||
width: 100%;
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
li.post {
|
||||
margin: 0 5px 0 5px;
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
display: inline;
|
||||
}
|
||||
.thumb {
|
||||
border: 2px solid #4c4a4a;
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
}
|
||||
.thumb:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
div#up {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyP///8iIiLm5uY3NzdKSkpAQEAqKipZf6aEAAAACnRSTlOxIfAAKvPn6quuQpaxIgAAAMZJREFUeF7t17uOwjAYROHjOMCuL0l4/5ddbQU0M4p/RIE8/flkyY1NTr/XNrjrT8qsSwtsWaGFBpcYcKEF9xFgAhMo9xIBytFrP8owUPb6v10JmN4K6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4LiN4LD2Cv53c8AaUPAL08AXVk9zeeoG3nhb69XuP5fdkLZQITmED840kMIP75zonbaH4j5T8NALtW477R3QAAAABJRU5ErkJggg==');
|
||||
top: 3.2em;
|
||||
}
|
||||
div#down {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyMiIiLm5uY3NzcqKipAQED///9KSkpHtWFIAAAACnRSTlMqACGx8/Cu6uerGsmyTAAAAM9JREFUeF7t1zkOwzAMBVEt3kLK2/0vm3KQivhWigTQ7+dBpZhyeW3+cNtSckqzd2xOafGu1TT1AVPyzv0YMIABDMD0fQB7u9S1HcCNXhAM4CAQZl98gZ8PgNsB3G69NwAEqQdAUHoABKUHQNB6AAStB0DQegAErQdA0HoABK0HQNB6AAShBwgE+gBACHuAWKCPAIS4B4gEegFAoHcFQKBXAAR6BUCgVwAEehlAoNcBt7Nd7TTXAYjD/uKDMYAB9B+etQ+o/cd3Lsv6NF9ryW9/v8EFMSsbFgAAAABJRU5ErkJggg==');
|
||||
bottom: 56px;
|
||||
}
|
||||
|
||||
div.pscroll {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
left: 50%;
|
||||
margin-left: -36px;
|
||||
}
|
||||
13
test3/index.html
Normal file
13
test3/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="./style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar"> </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
37
test3/promises_fetch.js
Normal 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
120
test3/script.js
Normal 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
73
test3/style.css
Normal 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;
|
||||
}
|
||||
7
test4/README.md
Normal file
7
test4/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
Frontend in Aktion (oder auch nicht) :⁾
|
||||
|
||||
https://dev.f0ck.space/misc/4
|
||||
|
||||
Benötigt wird:
|
||||
Chromium (ab Version 61)
|
||||
oder Firefox mit "dom.moduleScripts.enabled" auf true (about:config)
|
||||
98
test4/css/style.css
Normal file
98
test4/css/style.css
Normal file
@ -0,0 +1,98 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #262626;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
div#page {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
top: 22px;
|
||||
bottom: 16px;
|
||||
}
|
||||
div#thumbs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #040;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
div.pscroll {
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
margin-left: -36px;
|
||||
z-index: 999;
|
||||
}
|
||||
div.pscroll:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
div#up {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyP///8iIiLm5uY3NzdKSkpAQEAqKipZf6aEAAAACnRSTlOxIfAAKvPn6quuQpaxIgAAAMZJREFUeF7t17uOwjAYROHjOMCuL0l4/5ddbQU0M4p/RIE8/flkyY1NTr/XNrjrT8qsSwtsWaGFBpcYcKEF9xFgAhMo9xIBytFrP8owUPb6v10JmN4K6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4LiN4LD2Cv53c8AaUPAL08AXVk9zeeoG3nhb69XuP5fdkLZQITmED840kMIP75zonbaH4j5T8NALtW477R3QAAAABJRU5ErkJggg==');
|
||||
top: 3.2em;
|
||||
}
|
||||
div#down {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyMiIiLm5uY3NzcqKipAQED///9KSkpHtWFIAAAACnRSTlMqACGx8/Cu6uerGsmyTAAAAM9JREFUeF7t1zkOwzAMBVEt3kLK2/0vm3KQivhWigTQ7+dBpZhyeW3+cNtSckqzd2xOafGu1TT1AVPyzv0YMIABDMD0fQB7u9S1HcCNXhAM4CAQZl98gZ8PgNsB3G69NwAEqQdAUHoABKUHQNB6AAStB0DQegAErQdA0HoABK0HQNB6AAShBwgE+gBACHuAWKCPAIS4B4gEegFAoHcFQKBXAAR6BUCgVwAEehlAoNcBt7Nd7TTXAYjD/uKDMYAB9B+etQ+o/cd3Lsv6NF9ryW9/v8EFMSsbFgAAAABJRU5ErkJggg==');
|
||||
bottom: 56px;
|
||||
}
|
||||
17
test4/index.html
Normal file
17
test4/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!doctype blah>
|
||||
<html>
|
||||
<head>
|
||||
<title>f0ckv2 dev</title>
|
||||
<link href="./css/style.css" rel="stylesheet" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar"> </div>
|
||||
<div id="page">
|
||||
<div id="thumbs" style="top: 0;"></div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
43
test4/js/api.js
Normal file
43
test4/js/api.js
Normal file
@ -0,0 +1,43 @@
|
||||
import rt from './runtimes.js';
|
||||
import { render } from './helper.js';
|
||||
|
||||
export const api = {
|
||||
items: new Map(),
|
||||
meta: [],
|
||||
getItems: function() {
|
||||
return fetch("//api.allorigins.win/raw?url=https://f0ck.me/api/p", {
|
||||
headers: {
|
||||
//'Accept': 'application/json',
|
||||
//'Content-Type': 'application/json'
|
||||
},
|
||||
method: 'GET'
|
||||
//method: 'POST',
|
||||
//body: JSON.stringify({ ...rt.events.hash, eps: rt.events.dims.eps })
|
||||
})
|
||||
.then(res => res.status === 200? res.json() : {error:true} )
|
||||
.then(data => {
|
||||
if(!data.error) {
|
||||
this.meta = data.meta;
|
||||
[...data.items.prev, ...data.items.next].forEach(e => this.items.set(e.stamp, e));
|
||||
}
|
||||
return {
|
||||
prev: data.items.prev.sort().reverse(),
|
||||
next: data.items.next.sort().reverse()
|
||||
};
|
||||
})
|
||||
.then(data => {
|
||||
this.items = new Map([...this.items.entries()].sort().reverse());
|
||||
console.log(data);
|
||||
});
|
||||
},
|
||||
get pos() {
|
||||
return {
|
||||
latest: [...this.items][0],
|
||||
first: [...this.items][this.items.size - 1]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
api.getItems().then(() => {
|
||||
render(api.items);
|
||||
});
|
||||
31
test4/js/cfg.js
Normal file
31
test4/js/cfg.js
Normal file
@ -0,0 +1,31 @@
|
||||
export default {
|
||||
layout: {
|
||||
items: {
|
||||
size: 128, // imgsize
|
||||
gutter: 8 // padding
|
||||
},
|
||||
min_margin: 16,
|
||||
min_rows: 2,
|
||||
min_cols: 3
|
||||
},
|
||||
misc: {
|
||||
scrollrows: 4
|
||||
},
|
||||
api: {
|
||||
uri: "//f0ck.me/api/",
|
||||
modes: [
|
||||
"user",
|
||||
"mime",
|
||||
"new"
|
||||
]
|
||||
},
|
||||
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>`
|
||||
},
|
||||
container: {
|
||||
debug: document.querySelector("div.navbar"),
|
||||
page: document.querySelector("div#page"),
|
||||
thumbs: document.querySelector("div#thumbs")
|
||||
}
|
||||
};
|
||||
83
test4/js/events.js
Normal file
83
test4/js/events.js
Normal file
@ -0,0 +1,83 @@
|
||||
import cfg from './cfg.js';
|
||||
import { getposall } from './helper.js';
|
||||
|
||||
export const eventrt = {
|
||||
track: null,
|
||||
scroll: false,
|
||||
dims: null,
|
||||
hash: window.location.hash,
|
||||
};
|
||||
|
||||
// <track>
|
||||
const tracktopevent = new CustomEvent('top', { bubbles: true });
|
||||
Object.defineProperty(cfg.container.thumbs, 'top', {
|
||||
set: function(top) {
|
||||
this.style.top = top;
|
||||
this.dispatchEvent(tracktopevent);
|
||||
}
|
||||
});
|
||||
|
||||
export const tracktop = e => {
|
||||
eventrt.track = getposall(e.target.querySelectorAll("a.thumb"));
|
||||
//console.log(eventrt.track);
|
||||
};
|
||||
// </track>
|
||||
|
||||
// <scroll>
|
||||
export const scroll = e => {
|
||||
if(e.preventDefault)
|
||||
e.preventDefault();
|
||||
const deltaY = e.deltaY < 0?-1:1; // - up, + down
|
||||
|
||||
if(!eventrt.scroll) {
|
||||
eventrt.scroll = true;
|
||||
const dura = 500;
|
||||
const top = parseInt(cfg.container.thumbs.style.top.replace("px",""));
|
||||
const go = `${(top + (-deltaY * ((cfg.layout.items.size + cfg.layout.items.gutter) * cfg.misc.scrollrows)))}`;
|
||||
cfg.container.thumbs.animate( [{ top: `${top}px` }, { top: `${go}px` } ], { duration: dura } );
|
||||
setTimeout(() => { // after scroll
|
||||
cfg.container.thumbs.top = `${go}px`;
|
||||
eventrt.scroll = false;
|
||||
|
||||
console.log( [...new Set([...cfg.container.thumbs.querySelectorAll("a.thumb")].map(e => {
|
||||
return [e.children[0], e.parentNode].reduce((a,b) => a.offsetTop + b.offsetTop);
|
||||
}))] );
|
||||
|
||||
|
||||
}, dura);
|
||||
}
|
||||
};
|
||||
// </scroll>
|
||||
|
||||
// <resize>
|
||||
export const resize = e => {
|
||||
let rows = Math.max(~~((window.innerHeight - cfg.layout.min_margin + cfg.layout.items.size) / (cfg.layout.items.size + cfg.layout.items.gutter)), cfg.layout.min_rows);
|
||||
let cols = Math.max(~~((window.innerWidth - cfg.layout.min_margin) / (cfg.layout.items.size + cfg.layout.items.gutter)), cfg.layout.min_cols);
|
||||
let pageWidth = cols * (cfg.layout.items.size + cfg.layout.items.gutter);
|
||||
let margin = Math.max((window.innerWidth - pageWidth + cfg.layout.items.gutter) / cfg.layout.min_rows, 0);
|
||||
cfg.container.page.style.width = pageWidth;
|
||||
cfg.container.page.style.marginLeft = margin;
|
||||
eventrt.dims = {
|
||||
rows: rows,
|
||||
cols: cols,
|
||||
eps: rows * cols,
|
||||
pageWidth: pageWidth,
|
||||
margin: margin
|
||||
};
|
||||
};
|
||||
// <resize>
|
||||
|
||||
// <hash>
|
||||
export const hash = e => {
|
||||
eventrt.hash = window.location.hash;
|
||||
console.log(eventrt.hash);
|
||||
};
|
||||
// </hash>
|
||||
|
||||
|
||||
// bind events
|
||||
window.addEventListener("resize", resize);
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
document.addEventListener("wheel", scroll);
|
||||
cfg.container.thumbs.addEventListener('top', tracktop);
|
||||
window.addEventListener("hashchange", hash);
|
||||
55
test4/js/helper.js
Normal file
55
test4/js/helper.js
Normal file
@ -0,0 +1,55 @@
|
||||
import cfg from './cfg.js';
|
||||
import rt from './runtimes.js';
|
||||
|
||||
export const getpos = elems => [elems[0], elems[elems.length-1]].map(e => [e.children[0], e.parentNode].reduce((a, b) => a.offsetTop + b.offsetTop));
|
||||
export const getposall = elems => [...new Set([...elems].map(e => [e.children[0], e.parentNode].reduce((a,b) => a.offsetTop + b.offsetTop)))];
|
||||
|
||||
export const getlink = tmp => {
|
||||
const blah = {
|
||||
mode: "",
|
||||
user: "",
|
||||
mime: "",
|
||||
last: 0,
|
||||
post: 0
|
||||
};
|
||||
const api = "./api/";
|
||||
if(!tmp.match(/\,/))
|
||||
tmp = "#new";
|
||||
tmp = (tmp.match(/,/)?tmp:`${tmp},`).substr(1).split(",");
|
||||
const args = {
|
||||
l: tmp[0].split("/"),
|
||||
r: tmp[1].split("/")
|
||||
};
|
||||
blah.mode = ( args.l[0].length === 0 )? "new" : args.l[0];
|
||||
blah.last = parseInt(args.r[0]) || 0;
|
||||
blah.post = parseInt(args.r[1]) || 0;
|
||||
switch(blah.mode) {
|
||||
case "user":
|
||||
blah.user = ( args.l[1] )? args.l[1] : "";
|
||||
blah.mime = ( args.l[2] )? args.l[2] : "";
|
||||
break;
|
||||
case "mime":
|
||||
blah.user = ( args.l[2] )? args.l[2] : "";
|
||||
blah.mime = ( args.l[1] )? args.l[1] : "";
|
||||
break;
|
||||
}
|
||||
return {
|
||||
mode: blah.mode,
|
||||
user: blah.user,
|
||||
stamp: blah.last,
|
||||
mime: blah.mime,
|
||||
eps: this._dims.eps,
|
||||
sort: this._lastmode
|
||||
};
|
||||
};
|
||||
|
||||
export const render = items => {
|
||||
items.forEach(item => {
|
||||
let thumb = document.createElement('a');
|
||||
thumb.className = "thumb";
|
||||
thumb.href = "#";
|
||||
thumb.style.backgroundImage = `url("//f0ck.me/t/${item.id}.png")`;
|
||||
thumb.append(document.createElement('dummy'));
|
||||
cfg.container.thumbs.append(thumb);
|
||||
});
|
||||
};
|
||||
5
test4/js/main.js
Normal file
5
test4/js/main.js
Normal file
@ -0,0 +1,5 @@
|
||||
import './helper.js';
|
||||
import './events.js';
|
||||
import './api.js';
|
||||
|
||||
import './swipe.js';
|
||||
5
test4/js/runtimes.js
Normal file
5
test4/js/runtimes.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { eventrt } from './events.js';
|
||||
|
||||
export default {
|
||||
events: eventrt,
|
||||
};
|
||||
67
test4/js/swipe.js
Normal file
67
test4/js/swipe.js
Normal file
@ -0,0 +1,67 @@
|
||||
import { scroll } from './events.js';
|
||||
import rt from './runtimes.js';
|
||||
|
||||
const eventtmp = {
|
||||
touchTracker: []
|
||||
};
|
||||
|
||||
const copyTouch = touch => {
|
||||
return {
|
||||
identifier: touch.identifier,
|
||||
screenX: touch.screenX,
|
||||
screenY: touch.screenY
|
||||
};
|
||||
};
|
||||
|
||||
const getTrackedTouchIndex = identifier => {
|
||||
for(let i = 0; i < eventtmp.touchTracker.length; i++) {
|
||||
if(eventtmp.touchTracker[i].identifier == identifier)
|
||||
return i;
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
|
||||
const removeTouch = identifier => {
|
||||
let index = getTrackedTouchIndex(ct.item(i).identifier);
|
||||
if(index === -1)
|
||||
return index;
|
||||
eventtmp.touchTracker.splice(index, 1);
|
||||
};
|
||||
|
||||
const touchstart = e => {
|
||||
if(!rt.events.scroll) {
|
||||
const ct = e.changedTouches;
|
||||
for(let i = 0; i < e.changedTouches.length; i++)
|
||||
eventtmp.touchTracker.push(copyTouch(ct.item(i)));
|
||||
}
|
||||
};
|
||||
|
||||
const touchmove = e => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const touchend = e => {
|
||||
e.preventDefault();
|
||||
if(!rt.events.scroll) {
|
||||
let ct = e.changedTouches;
|
||||
for(let i = 0; i < ct.length; i++) {
|
||||
let index = getTrackedTouchIndex(ct.item(i).identifier);
|
||||
if(index !== -1) {
|
||||
let t = copyTouch(eventtmp.touchTracker[index]);
|
||||
if(Math.abs(Math.atan((ct.item(i).screenX - t.screenX) / (ct.item(i).screenY - t.screenY))) < 30)
|
||||
scroll({ deltaY: t.screenY > ct.item(i).screenY?1:-1 });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const touchcancel = e => {
|
||||
e.preventDefault();
|
||||
const ct = e.changedTouches;
|
||||
ct.forEach(e => removeTouch(ct.item(ct).identifier));
|
||||
};
|
||||
|
||||
window.addEventListener("touchstart", touchstart);
|
||||
window.addEventListener("touchmove", touchmove);
|
||||
window.addEventListener("touchend", touchend);
|
||||
window.addEventListener("touchcancel", touchcancel);
|
||||
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%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user