Fix fullscreen fit gesture clash and double swipe-remove in Framework7 layout

This commit is contained in:
Jonathan Sykes
2026-10-06 04:19:01 +08:00
parent bd80ad1ea0
commit 3be7a7b194
2 changed files with 6 additions and 17 deletions

View File

@@ -53,7 +53,7 @@
// ---- Swipeout cards ---- // ---- Swipeout cards ----
// Framework7 only animates <a> children of the actions box, so these are links acting as buttons. // Framework7 only animates <a> children of the actions box, so these are links acting as buttons.
function actionBtn(a){const b=doc.createElement('a');b.setAttribute('role','button');b.tabIndex=0;b.className='swipeout-action f7s-act'+(a.danger?' f7s-danger swipeout-overswipe':'');b.dataset.act=a.act;b.textContent=a.label;return b;} function actionBtn(a){const b=doc.createElement('a');b.setAttribute('role','button');b.tabIndex=0;b.className='swipeout-action f7s-act'+(a.danger?' f7s-danger':'');b.dataset.act=a.act;b.textContent=a.label;return b;}
function closeRow(li){ function closeRow(li){
if(app){try{app.swipeout.close(li);return;}catch{}} if(app){try{app.swipeout.close(li);return;}catch{}}
li.classList.remove('f7s-touch-open','swipeout-opened');li.querySelector('.swipeout-content')?.style.removeProperty('transform'); li.classList.remove('f7s-touch-open','swipeout-opened');li.querySelector('.swipeout-content')?.style.removeProperty('transform');
@@ -201,11 +201,11 @@
if(rowDrag){const d=rowDrag;rowDrag=null;const dx=t.clientX-d.x,dy=t.clientY-d.y; if(rowDrag){const d=rowDrag;rowDrag=null;const dx=t.clientX-d.x,dy=t.clientY-d.y;
if(Math.abs(dx)>Math.max(56,Math.abs(dy)*1.4)){ if(Math.abs(dx)>Math.max(56,Math.abs(dy)*1.4)){
const card=d.row.querySelector('.card'); const card=d.row.querySelector('.card');
if(dx< -170){const remove=card&&card.querySelector('.card-del');if(remove)remove.click();else {const v=card&&card._video;const del=d.row.querySelector('[data-act="remove"]');if(del)del.click();}} // A long swipe left removes once; F7's own overswipe is not relied on, so this is the only path.
else if(dx<0)openRow(d.row,'right'); if(dx< -170){const remove=card&&card.querySelector('.card-del');if(remove)remove.click();}
else if(dx>0&&d.row.querySelector('.swipeout-actions-left'))openRow(d.row,'left');
else if(dx>0){const v=card&&card._video;v&&root.addToQueue&&root.addToQueue(v);}
else if(dx<0)openRow(d.row,'right'); else if(dx<0)openRow(d.row,'right');
else if(d.row.querySelector('.swipeout-actions-left'))openRow(d.row,'left');
else {const v=card&&card._video;v&&root.addToQueue&&root.addToQueue(v);}
} }
return; return;
} }

View File

@@ -42,18 +42,7 @@
hud.addEventListener('click', revealControls); hud.addEventListener('click', revealControls);
play.onclick = toggle; exit.onclick = leave; play.onclick = toggle; exit.onclick = leave;
fitButton.onclick = () => setFit(settings().fullscreenFit === 'fill' ? 'fit' : 'fill'); fitButton.onclick = () => setFit(settings().fullscreenFit === 'fill' ? 'fit' : 'fill');
let lastTap = 0, pointers = new Set(); // Fit/Fill is only the HUD button: a centre double-tap is play/pause and two fingers pinch-zoom (app.js Gestures).
stage.addEventListener('pointerdown', event => {
if (!active || hud.contains(event.target)) return;
pointers.add(event.pointerId);
if (pointers.size > 1) { setFit(settings().fullscreenFit === 'fill' ? 'fit' : 'fill'); pointers.clear(); return; }
const now = performance.now(), rect = stage.getBoundingClientRect();
const center = Math.abs(event.clientX - rect.left - rect.width / 2) < rect.width * .24 && Math.abs(event.clientY - rect.top - rect.height / 2) < rect.height * .24;
if (center && now - lastTap < 330) { setFit(settings().fullscreenFit === 'fill' ? 'fit' : 'fill'); lastTap = 0; }
else lastTap = center ? now : 0;
}, { passive: true });
stage.addEventListener('pointerup', event => pointers.delete(event.pointerId), { passive: true });
stage.addEventListener('pointercancel', event => pointers.delete(event.pointerId), { passive: true });
function layout() { function layout() {
if (!active) return; if (!active) return;
angle = custom ? rotation(settings().fullscreenOrientation, innerWidth, innerHeight) : 0; angle = custom ? rotation(settings().fullscreenOrientation, innerWidth, innerHeight) : 0;