Add pull to refresh on PWA (with Marsey)

files/assets/css/main.css

@@ -7069,6 +7069,19 @@ body *::-webkit-scrollbar {
 	cursor: default !important;
 }
 
+#pulltorefresh {
+	align-content: center;
+	justify-content: center;
+	position: absolute;
+	top: 12px;
+	width: 100%;
+	display: flex;
+}
+
+#pulltorefresh > img {
+	height: 50px;
+}
+
 body > .container {
 	--safe-area-inset-left: env(safe-area-inset-left);
 	--safe-area-inset-right: env(safe-area-inset-right);

files/assets/js/pwa_pulltorefresh.js

@@ -0,0 +1,19 @@
+const standalone = navigator.standalone || window.matchMedia("(display-mode: standalone)").matches;
+if (standalone) {
+	const img = document.getElementById("pulltorefresh-img");
+	const defaultImg = "/e/marseythinkorino.webp";
+	const thresholdImg = "/e/marseythumbsup.webp";
+	const threshold = -100;
+	
+	window.addEventListener("touchend", () => {
+		if (window.scrollY < threshold) {
+			window.location.reload();
+		}
+	});
+	
+	window.addEventListener("scroll", () => {
+		img.setAttribute("src", window.scrollY < threshold ? thresholdImg : defaultImg);
+	});
+} else {
+	document.getElementById("pulltorefresh").remove();
+}

files/templates/default.html

@@ -1,6 +1,11 @@
 {%- extends 'root.html' -%}
 {% block body_attributes %}id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" class="has_header"{% endblock %}
 {% block body %}
+{% block pulltorefresh %}
+<div id="pulltorefresh">
+	<img id="pulltorefresh-img" src="/e/marseyunamused.webp">
+</div>
+{% endblock %}
 {% block banner %}
 	{% include "modals/expanded_image.html" %}
 	{% if err or '@' not in request.path %}

files/templates/root.html

@@ -43,5 +43,6 @@
 			<div id="cursormarsey-heart" class="d-none"></div>
 			<script defer src="{{'js/cursormarsey.js' | asset}}"></script>
 		{% endif %}
+		<script defer src="{{'js/pwa_pulltorefresh.js' | asset}}"></script>
 	</body>
 </html>