245 lines
15 KiB
JavaScript
245 lines
15 KiB
JavaScript
/* Framework7 Swipe layout: the classic design with Framework7 swipe gestures.
|
|
* Cards become F7 swipeouts, swiping up on the mini bar opens an F7 "Up next"
|
|
* sheet, and the mini bar / screen edge take horizontal swipes. Framework7 is
|
|
* loaded only when this layout is first selected. */
|
|
(function(root){
|
|
'use strict';
|
|
const LAYOUT='f7-swipe',F7_SRC='vendor/framework7-swipe.min.js';
|
|
|
|
// Which swipe actions a card gets in a given view. Pure, so it is testable.
|
|
function cardActions(viewType,canDelete){
|
|
const left=[{act:'queue',label:'Queue'}];
|
|
const right=[{act:'playlist',label:'Playlist'}];
|
|
if(canDelete)right.push({act:'remove',label:'Remove',danger:true});
|
|
return {left,right};
|
|
}
|
|
// Classify a finished drag. Returns 'left'|'right'|'up'|'down'|null.
|
|
function swipeDirection(dx,dy,min){
|
|
min=min||48;const ax=Math.abs(dx),ay=Math.abs(dy);
|
|
if(Math.max(ax,ay)<min)return null;
|
|
if(ax>ay*1.4)return dx<0?'left':'right';
|
|
if(ay>ax*1.4)return dy<0?'up':'down';
|
|
return null;
|
|
}
|
|
function tabSwipeIndex(active,count,direction){
|
|
if(direction!=='left'&&direction!=='right'||count<1)return -1;
|
|
return Math.max(0,Math.min(count-1,active+(direction==='left'?1:-1)));
|
|
}
|
|
|
|
function mount(doc){
|
|
const html=doc.documentElement;let app=null,loading=null,active=false,sheet=null,cardsObserver=null;
|
|
const on=()=>html.dataset.layout===LAYOUT;
|
|
// app.js top-level `let` bindings are shared across classic scripts but are not on window.
|
|
/* global view, queue, queueIndex, queueSource */
|
|
const g=(name)=>{try{switch(name){case 'view':return view;case 'queue':return queue;case 'queueIndex':return queueIndex;case 'queueSource':return queueSource;}}catch(_){}return undefined;};
|
|
|
|
function loadF7(){
|
|
if(root.Framework7)return Promise.resolve(root.Framework7);
|
|
if(!loading)loading=new Promise((res,rej)=>{const s=doc.createElement('script');s.src=F7_SRC;s.onload=()=>res(root.Framework7);s.onerror=()=>{loading=null;rej(new Error('Framework7 failed to load'));};doc.head.append(s);});
|
|
return loading;
|
|
}
|
|
function ensureApp(){
|
|
return loadF7().then((F7)=>{
|
|
if(!app){
|
|
app=new F7({el:'body',theme:'ios',touch:{activeState:false,touchRipple:false,touchHighlight:false,tapHold:false},swipeout:{noFollow:false,removeElements:false},sheet:{backdrop:true,closeByBackdropClick:true}});
|
|
// F7's touch module swallows any click whose target isn't the touched element and
|
|
// cancels the click after a moved touch. app.js relies on programmatic .click()
|
|
// calls, and F7 can't be torn down, so drop those two app-wide handlers.
|
|
app.off('click');app.off('touchend');
|
|
}
|
|
return app;
|
|
});
|
|
}
|
|
|
|
// ---- Swipeout cards ----
|
|
// 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 closeRow(li){
|
|
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.querySelectorAll('.swipeout-actions-opened').forEach(el=>el.classList.remove('swipeout-actions-opened'));
|
|
li.querySelectorAll('.f7s-act').forEach(el=>el.style.removeProperty('transform'));
|
|
}
|
|
function openRow(li,side){
|
|
const box=li.querySelector(`.swipeout-actions-${side}`);if(!box)return;
|
|
doc.querySelectorAll('li.f7s-row.f7s-touch-open').forEach(other=>{if(other!==li)closeRow(other);});
|
|
if(app){try{app.swipeout.open(li,side);if(li.classList.contains('swipeout-opened'))return;}catch{}}
|
|
const width=[...box.children].reduce((sum,el)=>sum+el.offsetWidth,0)+16;
|
|
li.classList.add('f7s-touch-open','swipeout-opened');box.classList.add('swipeout-actions-opened');
|
|
li.querySelector('.swipeout-content').style.transform=`translate3d(${side==='right'?-width:width}px,0,0)`;
|
|
box.querySelectorAll('.f7s-act').forEach(el=>el.style.transform='scale(1)');
|
|
}
|
|
function wrapCard(card){
|
|
if(!card.classList||!card.classList.contains('card')||card.closest('li.swipeout')||card.classList.contains('skeleton-card')||!card._video)return;
|
|
const li=doc.createElement('li');li.className='swipeout f7s-row';
|
|
card.replaceWith(li);card.classList.add('swipeout-content');li.append(card);
|
|
const acts=cardActions(g('view')?.type,!!card.querySelector('.card-del'));
|
|
for(const side of ['left','right']){
|
|
if(!acts[side].length)continue;
|
|
const box=doc.createElement('div');box.className='swipeout-actions-'+side;acts[side].forEach(a=>box.append(actionBtn(a)));li.append(box);
|
|
}
|
|
}
|
|
function unwrapAll(){
|
|
doc.querySelectorAll('li.f7s-row').forEach(li=>{const c=li.querySelector('.swipeout-content');if(c){c.classList.remove('swipeout-content');c.style.transform='';li.replaceWith(c);}else li.remove();});
|
|
}
|
|
function wrapAll(){doc.querySelectorAll('#cards .card').forEach(wrapCard);}
|
|
function onAction(e){
|
|
const btn=e.target.closest('.f7s-act');if(!btn)return;
|
|
const li=btn.closest('li.swipeout'),card=li&&li.querySelector('.card'),v=card&&card._video;
|
|
e.stopPropagation();closeRow(li);if(!v)return;
|
|
if(btn.dataset.act==='queue')root.addToQueue&&root.addToQueue(v);
|
|
else if(btn.dataset.act==='playlist')root.openCardMenu&&root.openCardMenu(v);
|
|
else if(btn.dataset.act==='remove'){const del=card.querySelector('.card-del');if(del)del.click();}
|
|
}
|
|
|
|
// ---- Up next sheet ----
|
|
function upcoming(){const q=g('queue')||[],i=g('queueIndex');return q.slice((typeof i==='number'?i:-1)+1);}
|
|
function renderSheet(){
|
|
const list=sheet.el.querySelector('.f7s-sheet-list'),items=upcoming();
|
|
list.innerHTML='';
|
|
if(!items.length){const p=doc.createElement('p');p.className='f7s-empty';p.textContent='Nothing queued after this song.';list.append(p);return;}
|
|
items.forEach((v,k)=>{
|
|
const li=doc.createElement('li');li.className='f7s-up';
|
|
li.innerHTML='<div class="f7s-up-info"><div class="f7s-up-title"></div><div class="f7s-up-ch"></div></div>';
|
|
if(v.thumbnail){const img=doc.createElement('img');img.alt='';img.loading='lazy';img.decoding='async';img.src=v.thumbnail;li.prepend(img);}
|
|
li.querySelector('.f7s-up-title').textContent=v.title||'';li.querySelector('.f7s-up-ch').textContent=v.channel||'';
|
|
li.addEventListener('click',()=>{const q=g('queue')||[],i=g('queueIndex');sheet.close();root.playFromList&&root.playFromList(q,(typeof i==='number'?i:-1)+1+k,g('queueSource'));});
|
|
list.append(li);
|
|
});
|
|
}
|
|
function openSheet(){
|
|
ensureApp().then((a)=>{
|
|
if(!sheet){
|
|
const el=doc.createElement('div');el.className='sheet-modal f7s-sheet';
|
|
el.innerHTML='<div class="sheet-modal-inner"><div class="f7s-grab" aria-hidden="true"></div><div class="f7s-sheet-head"><span>Up next</span></div><ul class="f7s-sheet-list"></ul></div>';
|
|
doc.body.append(el);
|
|
sheet=a.sheet.create({el,swipeToClose:true,breakpoints:[0.5],backdropBreakpoint:0.5,backdrop:true,closeByBackdropClick:true,swipeHandler:'.f7s-grab, .f7s-sheet-head'});
|
|
}
|
|
renderSheet();sheet.open();
|
|
}).catch(()=>{});
|
|
}
|
|
function closeSheet(){
|
|
const modal=sheet&&sheet.el&&sheet.el.f7Modal;if(!modal)return;
|
|
sheet.el.classList.remove('f7s-full');modal.setBreakpoint(0);
|
|
// F7 emits its initial `opened` transition after the sheet animation. If a
|
|
// very fast drag reaches the handle during that transition, repeat close
|
|
// after that event so its initial breakpoint cannot reopen the sheet.
|
|
setTimeout(()=>{if(modal.opened)modal.setBreakpoint(0);},360);
|
|
}
|
|
|
|
// ---- Mini bar + edge swipes (F7 has no component for these) ----
|
|
let drag=null,swallowClick=false;
|
|
function down(e){
|
|
if(!on()||e.pointerType==='touch'||e.pointerType==='mouse'&&e.button!==0)return;
|
|
const mini=e.target.closest&&e.target.closest('#miniBar');
|
|
const sidebarOpen=!!doc.querySelector('.app.sidebar-open');
|
|
const edge=!mini&&e.clientX<22&&!e.target.closest('.player-stage');
|
|
const inSidebar=sidebarOpen&&e.target.closest&&e.target.closest('#sidebar, #sidebarBackdrop');
|
|
const inRow=!!(e.target.closest&&e.target.closest('.f7s-row, .card, input, textarea, select, button, a, [role="slider"], #seek, #volume'));
|
|
const inPlayer=e.target.closest&&e.target.closest('#playerPane:not(.empty)');
|
|
const inBody=e.target.closest&&e.target.closest('.body');
|
|
if(!mini&&!edge&&!inSidebar&&(!inBody||inRow)&&!(inPlayer&&!inRow))return;
|
|
const kind=mini?'mini':edge?'edge':inSidebar?'sidebar':inPlayer?'player':'tabs';
|
|
drag={x:e.clientX,y:e.clientY,kind};
|
|
}
|
|
function up(e){
|
|
if(!drag)return;const d=drag;drag=null;
|
|
const dir=swipeDirection(e.clientX-d.x,e.clientY-d.y,d.kind==='mini'?36:56);if(!dir)return;
|
|
if(d.kind==='mini'){
|
|
swallowClick=true;setTimeout(()=>{swallowClick=false;},400);
|
|
if(dir==='left')root.playNext&&root.playNext();
|
|
else if(dir==='right')root.playPrev&&root.playPrev();
|
|
else if(dir==='up')openSheet();
|
|
}else if(d.kind==='sheet'){
|
|
if(dir==='up'&&sheet){sheet.el.f7Modal.setBreakpoint(1);sheet.el.classList.add('f7s-full');}
|
|
else if(dir==='down')closeSheet();
|
|
}else if(d.kind==='edge'&&dir==='right')root.openSidebar&&root.openSidebar();
|
|
else if(d.kind==='sidebar'&&dir==='left')root.closeSidebar&&root.closeSidebar();
|
|
else if(d.kind==='tabs'&&(dir==='left'||dir==='right')){
|
|
const tabs=[...doc.querySelectorAll('#bottomNav .bottom-nav-btn')].filter(b=>!b.disabled&&!b.hidden);
|
|
const active=Math.max(0,tabs.findIndex(b=>b.classList.contains('active'))),next=tabSwipeIndex(active,tabs.length,dir);
|
|
if(tabs[next]&&next!==active){swallowClick=true;setTimeout(()=>{swallowClick=false;},400);tabs[next].click();}
|
|
}else if(d.kind==='player'&&dir==='down'&&innerWidth<=860&&!doc.fullscreenElement&&!doc.querySelector('.orientation-fullscreen')){
|
|
const search=doc.querySelector('#bottomNav .bottom-nav-btn[data-view="search"]');if(search)search.click();
|
|
}
|
|
}
|
|
function click(e){if(swallowClick&&e.target.closest&&e.target.closest('#miniBar')){e.stopPropagation();e.preventDefault();swallowClick=false;}}
|
|
let touchDrag=null,rowDrag=null;
|
|
function touchDown(e){
|
|
if(!on()||!e.changedTouches.length)return;
|
|
const t=e.changedTouches[0],target=e.target,mini=target.closest&&target.closest('#miniBar');
|
|
if(target.closest&&target.closest('.f7s-grab, .f7s-sheet-head')){touchDrag={x:t.clientX,y:t.clientY,kind:'sheet'};rowDrag=null;return;}
|
|
const row=target.closest&&target.closest('li.f7s-row');
|
|
if(row){rowDrag={row,x:t.clientX,y:t.clientY};touchDrag=null;return;}
|
|
const sidebarOpen=!!doc.querySelector('.app.sidebar-open'),edge=!mini&&t.clientX<22&&!target.closest('.player-stage');
|
|
const inSidebar=sidebarOpen&&target.closest&&target.closest('#sidebar, #sidebarBackdrop');
|
|
const inRow=!!(target.closest&&target.closest('.f7s-row, .card, input, textarea, select, button, a, [role="slider"], #seek, #volume'));
|
|
const inPlayer=target.closest&&target.closest('#playerPane:not(.empty)'),inBody=target.closest&&target.closest('.body');
|
|
if(!mini&&!edge&&!inSidebar&&(!inBody||inRow)&&!(inPlayer&&!inRow))return;
|
|
touchDrag={x:t.clientX,y:t.clientY,kind:mini?'mini':edge?'edge':inSidebar?'sidebar':inPlayer?'player':'tabs'};
|
|
}
|
|
function finish(d,x,y){
|
|
if(!d)return;const dir=swipeDirection(x-d.x,y-d.y,d.kind==='mini'?36:56);if(!dir)return;
|
|
if(d.kind==='mini'){
|
|
swallowClick=true;setTimeout(()=>{swallowClick=false;},400);
|
|
if(dir==='left')root.playNext&&root.playNext();else if(dir==='right')root.playPrev&&root.playPrev();else if(dir==='up')openSheet();
|
|
}else if(d.kind==='sheet'){
|
|
if(dir==='up'&&sheet){sheet.el.f7Modal.setBreakpoint(1);sheet.el.classList.add('f7s-full');}
|
|
else if(dir==='down')closeSheet();
|
|
}else if(d.kind==='edge'&&dir==='right')root.openSidebar&&root.openSidebar();
|
|
else if(d.kind==='sidebar'&&dir==='left')root.closeSidebar&&root.closeSidebar();
|
|
else if(d.kind==='tabs'&&(dir==='left'||dir==='right')){
|
|
const tabs=[...doc.querySelectorAll('#bottomNav .bottom-nav-btn')].filter(b=>!b.disabled&&!b.hidden);
|
|
const active=Math.max(0,tabs.findIndex(b=>b.classList.contains('active'))),next=tabSwipeIndex(active,tabs.length,dir);
|
|
if(tabs[next]&&next!==active){swallowClick=true;setTimeout(()=>{swallowClick=false;},400);tabs[next].click();}
|
|
}else if(d.kind==='player'&&dir==='down'&&innerWidth<=860&&!doc.fullscreenElement&&!doc.querySelector('.orientation-fullscreen')){
|
|
const search=doc.querySelector('#bottomNav .bottom-nav-btn[data-view="search"]');if(search)search.click();
|
|
}
|
|
}
|
|
function touchUp(e){
|
|
if(!e.changedTouches.length)return;const t=e.changedTouches[0];
|
|
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)){
|
|
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();}}
|
|
else if(dx<0)openRow(d.row,'right');
|
|
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');
|
|
}
|
|
return;
|
|
}
|
|
if(!touchDrag)return;const d=touchDrag;touchDrag=null;finish(d,t.clientX,t.clientY);
|
|
}
|
|
|
|
function activate(){
|
|
active=true;
|
|
ensureApp().then(()=>{if(!active)return;wrapAll();}).catch(()=>{});
|
|
const cards=doc.getElementById('cards');
|
|
if(cards){cardsObserver=new root.MutationObserver(()=>{if(app)wrapAll();});cardsObserver.observe(cards,{childList:true});}
|
|
doc.addEventListener('click',onAction,true);
|
|
}
|
|
function deactivate(){
|
|
active=false;if(cardsObserver){cardsObserver.disconnect();cardsObserver=null;}
|
|
doc.removeEventListener('click',onAction,true);
|
|
if(sheet&&sheet.opened)sheet.close(false);
|
|
unwrapAll();
|
|
}
|
|
function sync(){if(on()&&!active)activate();else if(!on()&&active)deactivate();}
|
|
doc.addEventListener('pointerdown',down,{passive:true});
|
|
doc.addEventListener('pointerup',up,{passive:true});
|
|
doc.addEventListener('pointercancel',()=>{drag=null;},{passive:true});
|
|
doc.addEventListener('touchstart',touchDown,{passive:true,capture:true});
|
|
doc.addEventListener('touchend',touchUp,{passive:true,capture:true});
|
|
doc.addEventListener('touchcancel',()=>{touchDrag=null;rowDrag=null;},{passive:true,capture:true});
|
|
doc.addEventListener('click',click,true);
|
|
doc.addEventListener('click',e=>{if(e.target.classList?.contains('sheet-backdrop'))closeSheet();},true);
|
|
new root.MutationObserver(sync).observe(html,{attributes:true,attributeFilter:['data-layout']});
|
|
sync();
|
|
}
|
|
|
|
const api={cardActions,swipeDirection,tabSwipeIndex};
|
|
if(typeof module!=='undefined')module.exports=api;
|
|
else {root.F7Swipe=api; if(root.document.readyState==='loading')root.document.addEventListener('DOMContentLoaded',()=>mount(root.document),{once:true});else mount(root.document);}
|
|
})(typeof window==='undefined'?globalThis:window);
|