Add Framework7 Swipe layout with swipeout rows, up-next sheet and mini-bar gestures

This commit is contained in:
Jonathan Sykes
2026-10-06 02:01:56 +08:00
parent 1754933f7e
commit 0bda242a98
9 changed files with 570 additions and 2 deletions

View File

@@ -658,7 +658,7 @@ const DEFAULT_SETTINGS = {
density: 'comfortable', // 'comfortable' | 'compact'
perfMode: false, // disable heavy visual effects for speed
reduceMotion: false, // disable animations
layout: 'classic', // 'classic'|'glass-stage'|'sanctuary-stage'|'liturgical'|'living-hymnal'|'broadcaster'|'contemplative'|'bento-hub'
layout: 'classic', // 'classic'|'glass-stage'|'sanctuary-stage'|'liturgical'|'living-hymnal'|'broadcaster'|'contemplative'|'bento-hub'|'f7-swipe'
autoBackupEnabled: false,
autoBackupIntervalDays: 7,
serviceVideo: false, // show the video panel inside service mode (lyric videos)
@@ -9535,7 +9535,7 @@ async function renderSettings() {
</label>
<label class="set-row">
<span>Layout theme</span>
${sel('setLayout', data.settings.layout || 'classic', [['classic', 'Classic (default)'], ['glass-stage', 'Glass Stage'], ['sanctuary-stage', 'Sanctuary Stage'], ['liturgical', 'Liturgical Chronicle'], ['living-hymnal', 'Living Hymnal'], ['broadcaster', 'Sunday Broadcaster'], ['contemplative', 'Contemplative'], ['bento-hub', 'Bento Hub']])}
${sel('setLayout', data.settings.layout || 'classic', [['classic', 'Classic (default)'], ['glass-stage', 'Glass Stage'], ['sanctuary-stage', 'Sanctuary Stage'], ['liturgical', 'Liturgical Chronicle'], ['living-hymnal', 'Living Hymnal'], ['broadcaster', 'Sunday Broadcaster'], ['contemplative', 'Contemplative'], ['bento-hub', 'Bento Hub'], ['f7-swipe', 'Framework7 Swipe']])}
</label>
<label class="set-row">
<span>Font size</span>
@@ -10128,6 +10128,7 @@ function renderCard(v, index, list) {
const isDownloading = downloading.has(v.id);
card.className = 'card' + (isCached ? ' cached' : '') + (isDownloading ? ' downloading' : '') + (selectedIds.has(v.id) ? ' selected' : '');
card.dataset.id = v.id;
card._video = v; // read by f7-layout.js swipe actions
card.innerHTML = `
<div class="batch-check"></div>
<div class="thumb">