blah
This commit is contained in:
Flummi
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;
|
||||
}
|
||||
Reference in New Issue
Block a user