forked from rDrama/rDrama
add swipe browsing
parent
51a25f4e1a
commit
9ebd5c5748
|
@ -7618,3 +7618,8 @@ blink {
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
animation: 60s linear 0s infinite move-colors;
|
animation: 60s linear 0s infinite move-colors;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#main-content-col {
|
||||||
|
--n: 1;
|
||||||
|
transform: translate(calc(var(--i, 0)/var(--n)*-100%));
|
||||||
|
}
|
||||||
|
|
|
@ -32,3 +32,117 @@ if (fake_textarea) {
|
||||||
location.href = fake_textarea.dataset.href;
|
location.href = fake_textarea.dataset.href;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//SWIPING
|
||||||
|
|
||||||
|
|
||||||
|
const post_ids = localStorage.getItem("post_ids").split(', ');
|
||||||
|
const current_index = post_ids.indexOf(pid)
|
||||||
|
const id_after = post_ids[current_index+1]
|
||||||
|
const id_before = post_ids[current_index-1]
|
||||||
|
|
||||||
|
const _C = document.querySelector('.container')
|
||||||
|
const N = _C.children.length
|
||||||
|
const NF = 30
|
||||||
|
|
||||||
|
let i = 0, x0 = null, y0 = null, locked = false, w, ini, fin, rID = null, anf, n;
|
||||||
|
|
||||||
|
function stopAni() {
|
||||||
|
cancelAnimationFrame(rID);
|
||||||
|
rID = null
|
||||||
|
};
|
||||||
|
|
||||||
|
function ani(cf = 0) {
|
||||||
|
_C.style.setProperty('--i', ini + (fin - ini));
|
||||||
|
_C.style.removeProperty('cursor')
|
||||||
|
if(cf === anf) {
|
||||||
|
stopAni();
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
rID = requestAnimationFrame(ani.bind(this, ++cf))
|
||||||
|
};
|
||||||
|
|
||||||
|
function unify(e) { return e.changedTouches ? e.changedTouches[0] : e };
|
||||||
|
|
||||||
|
function lock(e) {
|
||||||
|
x0 = unify(e).clientX;
|
||||||
|
y0 = unify(e).clientY;
|
||||||
|
locked = true
|
||||||
|
};
|
||||||
|
|
||||||
|
function drag(e) {
|
||||||
|
if(locked) {
|
||||||
|
let dx = unify(e).clientX - x0
|
||||||
|
let f = +(dx/w).toFixed(2);
|
||||||
|
|
||||||
|
let dy = unify(e).clientY - y0
|
||||||
|
let fy = +(dy/y).toFixed(2);
|
||||||
|
|
||||||
|
if (!getSelection().toString() && (f > 0.04 || f < -0.04) && (fy < 0.02 && fy > -0.02)) {
|
||||||
|
_C.style.setProperty('cursor', 'grabbing')
|
||||||
|
_C.style.setProperty('--i', i - f)
|
||||||
|
if (id_before && (f > 0.2 || (screen_width > 768 && f > 0.1))) {
|
||||||
|
location.href = `/post/${id_before}`
|
||||||
|
}
|
||||||
|
if (id_after && (f < -0.2 || (screen_width > 768 && f < -0.1))) {
|
||||||
|
location.href = `/post/${id_after}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
_C.style.setProperty('--i', ini + (fin - ini));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function move(e) {
|
||||||
|
if(locked) {
|
||||||
|
let dx = unify(e).clientX - x0,
|
||||||
|
s = Math.sign(dx),
|
||||||
|
f = +(s*dx/w).toFixed(2);
|
||||||
|
|
||||||
|
ini = i - s*f;
|
||||||
|
|
||||||
|
if((i > 0 || s < 0) && (i < N - 1 || s > 0) && f > .2) {
|
||||||
|
i -= s;
|
||||||
|
f = 1 - f
|
||||||
|
}
|
||||||
|
|
||||||
|
fin = i;
|
||||||
|
anf = Math.round(f*NF);
|
||||||
|
n = 2 + Math.round(f)
|
||||||
|
ani();
|
||||||
|
x0 = null;
|
||||||
|
y0 = null;
|
||||||
|
locked = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function size() {
|
||||||
|
w = window.innerWidth
|
||||||
|
y = window.innerHeight
|
||||||
|
};
|
||||||
|
|
||||||
|
size();
|
||||||
|
_C.style.setProperty('--n', N);
|
||||||
|
|
||||||
|
addEventListener('resize', size, false);
|
||||||
|
|
||||||
|
_C.addEventListener('mousedown', lock, false);
|
||||||
|
_C.addEventListener('touchstart', lock, false);
|
||||||
|
|
||||||
|
_C.addEventListener('mousemove', drag, false);
|
||||||
|
_C.addEventListener('touchmove', drag, false);
|
||||||
|
|
||||||
|
_C.addEventListener('mouseup', move, false);
|
||||||
|
_C.addEventListener('touchend', move, false);
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
const post_ids = document.getElementById('post_ids').value.slice(1, -1)
|
||||||
|
localStorage.setItem("post_ids", post_ids);
|
|
@ -80,7 +80,7 @@ def front_all(v, hole=None):
|
||||||
|
|
||||||
if v and v.client: return {"data": [x.json for x in posts], "total": total}
|
if v and v.client: return {"data": [x.json for x in posts], "total": total}
|
||||||
|
|
||||||
result = render_template("home.html", v=v, listing=posts, total=total, sort=sort, t=t, page=page, hole=hole, home=True, pins=pins, size=size)
|
result = render_template("home.html", v=v, listing=posts, total=total, sort=sort, t=t, page=page, hole=hole, home=True, pins=pins, size=size, post_ids=ids)
|
||||||
|
|
||||||
if not v:
|
if not v:
|
||||||
cache.set(f'frontpage_{sort}_{t}_{page}_{hole}_{pins}', result, timeout=900)
|
cache.set(f'frontpage_{sort}_{t}_{page}_{hole}_{pins}', result, timeout=900)
|
||||||
|
|
|
@ -128,4 +128,7 @@
|
||||||
{% if FP and request.path == '/' and v and not v.fp %}
|
{% if FP and request.path == '/' and v and not v.fp %}
|
||||||
<script defer src="{{'js/fp.js' | asset}}"></script>
|
<script defer src="{{'js/fp.js' | asset}}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<input hidden id="post_ids" value="{{post_ids}}">
|
||||||
|
<script defer src="{{'js/post_ids.js' | asset}}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue