Swipe the mobile navigation toolbar to switch between tabs

Using CodeScript ToolKit[1], you can make it so mobile Obsidian switches between tabs based on what direction you swipe the navigation toolbar[2].

Save this as a .js file and point CodeScript Toolkit to it as your “Startup script path.”

exports.invoke = async (app) => {
	const mobilenavbar = app?.mobileNavbar?.containerEl;
	let touchstartX = 0;
	let touchendX = 0;
    
    if (mobilenavbar) {
		function checkDirection() {
			if (touchendX < touchstartX) app.commands.executeCommandById('workspace:next-tab');
			if (touchendX > touchstartX) app.commands.executeCommandById('workspace:previous-tab');
		}
	
		mobilenavbar.addEventListener('touchstart', e => {
			touchstartX = e.changedTouches[0].screenX
		})
	
		mobilenavbar.addEventListener('touchend', e => {
			touchendX = e.changedTouches[0].screenX
			checkDirection()
		})
	}
}

Thanks to Damjan Pavlica’s answer on Stack Overflow.

Related feature request:


  1. You can also use QuickAdd or any other plugin that lets you run JavaScript on Obsidian startup. ↩︎

  2. Kinda like some browser apps. ↩︎

2 Likes

Updated the checkDirection() function to not keep switching through tabs in a circle and also vibrate slightly when switching tabs. Here’s just the function itself, you can replace the old one. Or pick and choose the parts you want in case you don’t want vibration or something.

function checkDirection() {
	const lastTabIndex = app.workspace.activeTabGroup.children.length - 1;
	const currTabIndex = app.workspace.activeTabGroup.currentTab;
	let wantedTabIndex = currTabIndex;
	if (touchendX < touchstartX) wantedTabIndex++;
	if (touchendX > touchstartX) wantedTabIndex--;
	if (wantedTabIndex > lastTabIndex || wantedTabIndex < 0 || Math.abs(touchstartX-touchendX) <= 5) return;
	app.workspace.activeTabGroup.selectTabIndex(wantedTabIndex);
	window.Capacitor?.Plugins?.Haptics.vibrate({ duration: 50 });
}

Edit:

Actually, I like switching in a circle… Now switches in a circle again, but vibrates a little longer when you loop.

function checkDirection() {
	if (Math.abs(touchstartX-touchendX) <= 5) return;
	const lastTabIndex = app.workspace.activeTabGroup.children.length - 1;
	if (lastTabIndex == 0) return;
	const currTabIndex = app.workspace.activeTabGroup.currentTab;
	let wantedTabIndex = currTabIndex;
	let vibeDuration = 50;
	if (touchendX < touchstartX) wantedTabIndex++;
	if (touchendX > touchstartX) wantedTabIndex--;
	if (wantedTabIndex > lastTabIndex || wantedTabIndex < 0) vibeDuration = 500;
	if (wantedTabIndex > lastTabIndex) wantedTabIndex = 0; 
	if (wantedTabIndex < 0) wantedTabIndex = lastTabIndex;
	app.workspace.activeTabGroup.selectTabIndex(wantedTabIndex);
	window.Capacitor?.Plugins?.Haptics.vibrate({ duration: vibeDuration });
}
1 Like