add swipe browsing

files/assets/css/main.css

@@ -7618,3 +7618,8 @@ blink {
 	font-weight: 700 !important;
 	animation: 60s linear 0s infinite move-colors;
 }
+
+#main-content-col {
+	--n: 1;
+	transform: translate(calc(var(--i, 0)/var(--n)*-100%));
+}

files/assets/js/post.js

@@ -32,3 +32,117 @@ if (fake_textarea) {
 		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);

files/assets/js/post_ids.js

@@ -0,0 +1,2 @@
+const post_ids = document.getElementById('post_ids').value.slice(1, -1)
+localStorage.setItem("post_ids", post_ids);

files/routes/front.py

@@ -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}
 
-	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:
 		cache.set(f'frontpage_{sort}_{t}_{page}_{hole}_{pins}', result, timeout=900)

files/templates/home.html

@@ -128,4 +128,7 @@
 	{% if FP and request.path == '/' and v and not v.fp %}
 		<script defer src="{{'js/fp.js' | asset}}"></script>
 	{% endif %}
+
+	<input hidden id="post_ids" value="{{post_ids}}">
+	<script defer src="{{'js/post_ids.js' | asset}}"></script>	
 {% endblock %}