webui: add pull to refresh

Author: KOWX712

webui/page/exclude.js

@@ -1,6 +1,7 @@
 import { listPackages, getPackagesInfo, exec } from 'kernelsu-alt';
 import { modDir, persistDir } from '../index.js';
 import { getString } from '../language.js';
+import { setupPullToRefresh } from '../pull-to-refresh.js';
 import fallbackIcon from '../icon.png';
 
 let allApps = [];
@@ -311,6 +312,11 @@ function initExcludePage() {
         refreshAppList();
     };
 
+    setupPullToRefresh(document.querySelector('#exclude-page .page-content'), async () => {
+        appItemMap.clear();
+        await refreshAppList();
+    });
+
     // init render
     refreshAppList();
 }

webui/page/kpm.js

@@ -1,6 +1,7 @@
 import { exec, spawn, toast } from 'kernelsu-alt';
 import { modDir, persistDir, initInfo, MAX_CHUNK_SIZE, linkRedirect } from '../index.js';
 import { getString } from '../language.js';
+import { setupPullToRefresh } from '../pull-to-refresh.js';
 
 let allKpms = [];
 let searchQuery = '';
@@ -425,6 +426,11 @@ export function initKPMPage() {
     });
 
     document.getElementById('load').onclick = () => uploadAndLoadModule();
+
+    setupPullToRefresh(document.querySelector('#kpm-page .page-content'), async () => {
+        kpmItemMap.clear();
+        await refreshKpmList();
+    });
 }
 
 export { loadModule, refreshKpmList, handleFileUpload, uploadFile }

webui/pull-to-refresh.js

@@ -0,0 +1,77 @@
+export function setupPullToRefresh(element, onRefresh) {
+    let startY = 0;
+    let currentY = 0;
+    let pulling = false;
+    let refreshing = false;
+    const threshold = 130;
+    const maxPull = 170;
+
+    const container = document.createElement('div');
+    container.className = 'ptr-indicator';
+    container.innerHTML = `
+        <div class="ptr-indicator-wrapper">
+            <md-circular-progress value="0" class="ptr-progress"></md-circular-progress>
+        </div>
+    `;
+
+    element.parentElement.insertBefore(container, element);
+
+    const progress = container.querySelector('.ptr-progress');
+
+    element.addEventListener('touchstart', (e) => {
+        if (element.scrollTop <= 0 && !refreshing) {
+            startY = e.touches[0].pageY;
+            pulling = true;
+            container.style.transition = 'none';
+        }
+    }, { passive: true });
+
+    element.addEventListener('touchmove', (e) => {
+        if (!pulling) return;
+        currentY = e.touches[0].pageY;
+        const diff = currentY - startY;
+
+        if (diff > 0) {
+            if (e.cancelable) e.preventDefault();
+
+            const pullDistance = Math.min(diff * 0.5, maxPull);
+            const scale = Math.min(diff / 50, 1);
+            container.style.transform = `translateY(${pullDistance}px) scale(${scale})`;
+            container.style.opacity = Math.min(diff / 50, 1);
+            const progressValue = Math.max(0, Math.min((diff - 50) / (threshold - 50), 1));
+            progress.value = progressValue;
+        } else {
+            pulling = false;
+            container.style.opacity = '0';
+            container.style.transform = `translateY(0) scale(0)`;
+        }
+    }, { passive: false });
+
+    element.addEventListener('touchend', async () => {
+        if (!pulling) return;
+        pulling = false;
+        const diff = currentY - startY;
+
+        if (diff > threshold) {
+            refreshing = true;
+            progress.indeterminate = true;
+            container.style.transition = 'all 0.3s ease';
+            container.style.transform = `translateY(${threshold * 0.5}px) scale(1)`;
+            container.style.opacity = '1';
+
+            try {
+                await onRefresh();
+            } finally {
+                refreshing = false;
+                progress.indeterminate = false;
+                progress.value = 0;
+                container.style.transform = `translateY(0) scale(0)`;
+                container.style.opacity = '0';
+            }
+        } else {
+            container.style.transition = 'all 0.3s ease';
+            container.style.transform = `translateY(0) scale(0)`;
+            container.style.opacity = '0';
+        }
+    });
+}

webui/styles.css

@@ -162,6 +162,33 @@ body {
     padding: 16px 0;
     box-sizing: border-box;
     scroll-behavior: smooth;
+    overscroll-behavior-y: contain;
+}
+
+.ptr-indicator {
+    position: absolute;
+    top: -48px;
+    left: 0;
+    right: 0;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+}
+
+.ptr-indicator-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    width: 48px;
+    background-color: var(--md-sys-color-surface-container-high);
+    border-radius: 50%;
+
+    --md-circular-progress-size: 36px;
 }
 
 .page.active {