@klodd/ds 1.1.0 → 3.0.0

package/js/lucide-init.js

@@ -0,0 +1,27 @@
+/* Lucide-init: scannar DOM efter <i data-lucide="..."> och ersatter
+ * med <svg>-element. Kors vid DOMContentLoaded plus efter Turbo-nav-
+ * swap (om Turbo finns) sa nya element pa nyladdade pages aktiveras.
+ *
+ * Lucide CDN-script laddas separat via cdn.jsdelivr.net (allowed i
+ * Jubbs CSP). Detta init-script ar lokalt sa det forklaras inte av
+ * inline-script-restrict.
+ */
+(function () {
+  'use strict';
+
+  function createIcons() {
+    if (typeof window.lucide !== 'undefined' && window.lucide.createIcons) {
+      window.lucide.createIcons();
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', createIcons);
+  } else {
+    createIcons();
+  }
+
+  // Re-init efter Turbo-swap sa nya ikoner pa swapped DOM aktiveras.
+  document.addEventListener('turbo:swap', createIcons);
+  document.addEventListener('turbo:navigated', createIcons);
+})();

package/js/nav-optimistic.js

@@ -0,0 +1,74 @@
+/*--------------------------------------------------------------
+ Sprint F1 + G4 + I: optimistic active-flytt pa bottom-nav.
+
+ Problem (CE 2026-04-27): tap pa bottom-nav-pod tar ~1s innan
+ podden blir visuellt aktiv. Anvandaren ser inaktiv pod tills
+ hela nya sidan laddats. Native-appar uppdaterar tab-bar
+ omedelbart vid tap, oberoende av content-render.
+
+ Losning: vid click pa nav-pod flytta active-class direkt till
+ tappad pod. Turbo-fetch (Sprint I) eller cross-document VT
+ renderar content parallellt. Failsafe rullar tillbaka active-
+ flytt om navigation inte landar (notification, network-stall
+ etc.).
+
+ Sprint G4: borttagen body.navigating-class + content-fade. Native
+ iOS fadar inte content under nav-byten. Active-flytt ensam ger
+ onskad feedback.
+
+ Sprint I: lyssna pa turbo:navigated istallet for pageshow
+ (pageshow firar inte vid same-document swap). Pageshow-handler
+ behalls for bfcache-restore.
+--------------------------------------------------------------*/
+( function () {
+	const nav = document.querySelector( '.bottom-nav' );
+	if ( ! nav ) return;
+
+	let pendingNav = null;
+	let failsafeTimer = null;
+
+	function reset () {
+		pendingNav = null;
+		clearTimeout( failsafeTimer );
+		failsafeTimer = null;
+	}
+
+	nav.addEventListener( 'click', ( e ) => {
+		// Skippa modifier-clicks (cmd/ctrl/shift -> ny flik) och middle-click.
+		// Browser hanterar dem som "open in new tab" - vi vill INTE flytta active.
+		if ( e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) return;
+		if ( e.button !== undefined && e.button !== 0 ) return;
+
+		const pod = e.target.closest( '.nav-pod' );
+		if ( ! pod || ! nav.contains( pod ) ) return;
+		if ( pod.classList.contains( 'active' ) ) return;
+
+		const previousActive = nav.querySelector( '.nav-pod.active' );
+		previousActive && previousActive.classList.remove( 'active' );
+		pod.classList.add( 'active' );
+
+		pendingNav = { from: previousActive, to: pod };
+
+		// Failsafe: om ny sida inte landar inom 3s, rulla tillbaka. Skyddar
+		// mot edge-cases dar navigation avbryts (notification dragdown,
+		// network-stall, abort etc.).
+		clearTimeout( failsafeTimer );
+		failsafeTimer = setTimeout( () => {
+			if ( pendingNav ) {
+				pendingNav.to.classList.remove( 'active' );
+				pendingNav.from && pendingNav.from.classList.add( 'active' );
+				reset();
+			}
+		}, 3000 );
+	} );
+
+	// Sprint I: turbo-swap rensar pending state och korrigerar active-class
+	// om server-render skiljer sig fran optimistic flytt (turbo-nav.js gor
+	// performSwap.bottom-nav-active-justering vilket overskuggar var optimistic
+	// flytt om server-render landade pa annan route).
+	document.addEventListener( 'turbo:navigated', reset );
+
+	// pageshow firar bade vid fresh load OCH bfcache-restore. Behalls for
+	// fallback-fall (no-turbo, full reload, browser back utan turbo-state).
+	window.addEventListener( 'pageshow', reset );
+} )();

package/js/pull-to-refresh.js

@@ -0,0 +1,162 @@
+/*--------------------------------------------------------------
+ Ekonom - Pull-to-refresh (Sprint E1).
+
+ Pointer Events-baserad pull fran top-of-page nar window.scrollY === 0.
+ Aktiveras pa main routes (avstamning/kategorier/bolanet/jag) via
+ data-ptr-enabled-attribut pa body.
+
+ Fysik:
+ - 1:1 tracking forsta 40px, sen kvadratisk dampning
+ - Threshold: 80px med damping for trigger
+ - Spinner-indikator visas centrerad ovanfor hero
+ - Refresh = location.reload()
+
+ Edge cases (no-op):
+ - Sheet ar oppen
+ - Form har :focus-within
+ - VT-animation pagar (impossible to detect reliably; vi kollar via
+   document.startViewTransition existence + nyligen-startad-flagga)
+ - Aktiv upload (.upload-spinner-overlay.visible)
+--------------------------------------------------------------*/
+(function () {
+	'use strict';
+
+	const THRESHOLD_PX = 80;
+	const LINEAR_PX = 40;
+	const SETTLE_PX = 60;
+	const REFRESH_DELAY_MS = 200;
+
+	function shouldEnable() {
+		return document.body.dataset.ptrEnabled === 'true' ||
+			document.body.hasAttribute('data-ptr-enabled');
+	}
+
+	function isBlocked() {
+		// Sheet/dialog open
+		if (document.querySelector('dialog.sheet[open]')) return true;
+		// Form has focus (keyboard up)
+		if (document.activeElement && document.activeElement.matches &&
+			(document.activeElement.matches('input, textarea, select') ||
+			 document.activeElement.closest('form:focus-within'))) return true;
+		// Upload spinner active
+		const upload = document.getElementById('upload-spinner-overlay');
+		if (upload && upload.classList.contains('visible')) return true;
+		return false;
+	}
+
+	function applyResistance(dy) {
+		if (dy <= LINEAR_PX) return dy;
+		// kvadratisk dampning efter 40px
+		return LINEAR_PX + Math.sqrt(dy - LINEAR_PX) * 4;
+	}
+
+	function ensureIndicator() {
+		let el = document.getElementById('ptr-indicator');
+		if (el) return el;
+		el = document.createElement('div');
+		el.id = 'ptr-indicator';
+		el.className = 'ptr-indicator';
+		el.setAttribute('aria-hidden', 'true');
+		el.innerHTML = '<div class="ptr-spinner"></div>';
+		document.body.appendChild(el);
+		return el;
+	}
+
+	let dragging = false;
+	let startY = 0;
+	let pullY = 0;
+	let pointerId = null;
+	let triggered = false;
+
+	function onPointerDown(e) {
+		if (!shouldEnable()) return;
+		if (isBlocked()) return;
+		if (window.scrollY > 0) return;
+		if (e.pointerType === 'mouse' && e.button !== 0) return;
+		dragging = true;
+		triggered = false;
+		startY = e.clientY;
+		pullY = 0;
+		pointerId = e.pointerId;
+	}
+
+	function onPointerMove(e) {
+		if (!dragging || e.pointerId !== pointerId) return;
+		const dy = e.clientY - startY;
+		if (dy <= 0) {
+			pullY = 0;
+			updateIndicator(0);
+			return;
+		}
+		// Om scrollY har gatt > 0 sen drag-start (t.ex. anvandaren bytte riktning),
+		// avbryt drag.
+		if (window.scrollY > 0) {
+			cancelDrag();
+			return;
+		}
+		pullY = applyResistance(dy);
+		updateIndicator(pullY);
+		// Forhindra default sa browsern inte scrollar (om vi ar pa scrollY=0).
+		if (e.cancelable) e.preventDefault();
+	}
+
+	function onPointerUp(e) {
+		if (!dragging) return;
+		dragging = false;
+		const indicator = document.getElementById('ptr-indicator');
+		if (pullY >= THRESHOLD_PX && !triggered) {
+			triggered = true;
+			// Snap till SETTLE_PX, sedan reload.
+			if (indicator) {
+				indicator.style.transition = 'transform 220ms var(--ease-spring-snappy)';
+				indicator.style.transform = 'translate(-50%, ' + SETTLE_PX + 'px)';
+				indicator.classList.add('ptr-indicator--triggered');
+			}
+			setTimeout(function () { window.location.reload(); }, REFRESH_DELAY_MS);
+		} else {
+			// Spring-back till 0.
+			if (indicator) {
+				indicator.style.transition = 'transform 320ms var(--ease-spring-bounce), opacity 220ms';
+				indicator.style.transform = 'translate(-50%, -40px)';
+				indicator.style.opacity = '0';
+				const onEnd = function () {
+					indicator.removeEventListener('transitionend', onEnd);
+					indicator.style.transition = '';
+					indicator.style.transform = '';
+					indicator.style.opacity = '';
+				};
+				indicator.addEventListener('transitionend', onEnd, { once: true });
+			}
+		}
+		pullY = 0;
+	}
+
+	function cancelDrag() {
+		dragging = false;
+		const indicator = document.getElementById('ptr-indicator');
+		if (indicator) {
+			indicator.style.transition = 'transform 220ms, opacity 180ms';
+			indicator.style.transform = 'translate(-50%, -40px)';
+			indicator.style.opacity = '0';
+		}
+		pullY = 0;
+	}
+
+	function updateIndicator(y) {
+		const el = ensureIndicator();
+		el.style.transition = 'none';
+		// Translate fran -40px (dolt ovanfor viewport) till y px nedat.
+		const translateY = -40 + y;
+		el.style.transform = 'translate(-50%, ' + translateY + 'px)';
+		const progress = Math.min(1, y / THRESHOLD_PX);
+		el.style.opacity = String(progress);
+		// Rotation pa spinnern: hela 360deg vid threshold.
+		const spinner = el.firstChild;
+		if (spinner) spinner.style.transform = 'rotate(' + (progress * 360) + 'deg)';
+	}
+
+	document.addEventListener('pointerdown', onPointerDown, { passive: true });
+	document.addEventListener('pointermove', onPointerMove, { passive: false });
+	document.addEventListener('pointerup', onPointerUp, { passive: true });
+	document.addEventListener('pointercancel', cancelDrag, { passive: true });
+})();

package/js/pwa-register.js

@@ -0,0 +1,132 @@
+/*--------------------------------------------------------------
+ Ekonom PWA register
+ - isNetworkError() - iOS-saker nat-detektering
+ - Service worker registrering med updateViaCache: 'none'
+ - Install-prompt (beforeinstallprompt for Chrome/Android)
+ - iOS install-hint (Safari har ingen beforeinstallprompt)
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+ Natverksfel-detektering
+ navigator.onLine ljuger pa iOS Safari. Triangulera genom att ocksa
+ kolla errortyp och message-text. Returnerar true om ett fetch-fel
+ troligen beror pa natverket (= OK att visa offline-meddelande).
+--------------------------------------------------------------*/
+window.isNetworkError = function ( err ) {
+	if ( ! navigator.onLine ) return true;
+	if ( err instanceof TypeError ) return true;
+	if ( err && err.message ) {
+		return /network|failed to fetch|load failed|offline|cancelled/i.test( err.message );
+	}
+	return false;
+};
+
+/*--------------------------------------------------------------
+ SW-registrering
+--------------------------------------------------------------*/
+if ( 'serviceWorker' in navigator ) {
+	window.addEventListener( 'load', async function () {
+		try {
+			const reg = await navigator.serviceWorker.register( '/sw.js', {
+				scope: '/',
+				updateViaCache: 'none',
+			} );
+			console.log( 'Ekonom SW registered. Scope:', reg.scope );
+		} catch ( err ) {
+			console.warn( 'Ekonom SW registration failed:', err );
+		}
+	} );
+}
+
+/*--------------------------------------------------------------
+ Install-prompt (Android / Chrome / Edge)
+--------------------------------------------------------------*/
+let deferredInstallPrompt = null;
+
+window.addEventListener( 'beforeinstallprompt', function ( e ) {
+	e.preventDefault();
+	deferredInstallPrompt = e;
+	maybeShowInstallChip();
+} );
+
+function maybeShowInstallChip() {
+	// Inte om redan dismissat denna session
+	if ( sessionStorage.getItem( 'ekonom_install_dismissed' ) ) return;
+	// Inte om redan installerad
+	if ( window.matchMedia( '(display-mode: standalone)' ).matches ) return;
+
+	// Bara efter 3+ besok
+	const visits = parseInt( localStorage.getItem( 'ekonom_visits' ) || '0', 10 ) + 1;
+	localStorage.setItem( 'ekonom_visits', String( visits ) );
+	if ( visits < 3 ) return;
+
+	showInstallChip();
+}
+
+function showInstallChip() {
+	if ( document.getElementById( 'ekonom-install-chip' ) ) return;
+
+	const chip = document.createElement( 'div' );
+	chip.className = 'install-chip';
+	chip.id = 'ekonom-install-chip';
+	chip.setAttribute( 'role', 'dialog' );
+	chip.setAttribute( 'aria-label', 'Installera Ekonom' );
+	chip.innerHTML =
+		'<span>Installera Ekonom p\u00e5 hemsk\u00e4rmen</span>' +
+		'<button type="button" data-install>Installera</button>' +
+		'<button type="button" data-dismiss aria-label="St\u00e4ng">\u00D7</button>';
+	document.body.appendChild( chip );
+
+	chip.querySelector( '[data-install]' ).addEventListener( 'click', async function () {
+		if ( ! deferredInstallPrompt ) { chip.remove(); return; }
+		deferredInstallPrompt.prompt();
+		try { await deferredInstallPrompt.userChoice; } catch ( e ) {}
+		deferredInstallPrompt = null;
+		chip.remove();
+	} );
+	chip.querySelector( '[data-dismiss]' ).addEventListener( 'click', function () {
+		sessionStorage.setItem( 'ekonom_install_dismissed', '1' );
+		chip.remove();
+	} );
+}
+
+/*--------------------------------------------------------------
+ iOS install-hint
+ Safari har ingen beforeinstallprompt - anvandaren maste manuellt
+ "Dela" -> "Lagg till pa hemskarmen". Visa en diskret chip efter
+ 3+ besok sa de vet var de ska titta.
+--------------------------------------------------------------*/
+window.addEventListener( 'load', function () {
+	const isIOS = /iPad|iPhone|iPod/.test( navigator.userAgent ) && ! window.MSStream;
+	const inStandalone = window.matchMedia( '(display-mode: standalone)' ).matches
+		|| window.navigator.standalone;
+
+	if ( ! isIOS || inStandalone ) return;
+
+	if ( sessionStorage.getItem( 'ekonom_ios_install_dismissed' ) ) return;
+
+	// Anvand samma besok-rakning som Android-chip:en.
+	const visits = parseInt( localStorage.getItem( 'ekonom_visits' ) || '0', 10 );
+	if ( visits < 3 ) return;
+
+	showIOSInstallHint();
+} );
+
+function showIOSInstallHint() {
+	if ( document.getElementById( 'ekonom-ios-install-hint' ) ) return;
+
+	const hint = document.createElement( 'div' );
+	hint.className = 'install-chip install-chip-ios';
+	hint.id = 'ekonom-ios-install-hint';
+	hint.setAttribute( 'role', 'dialog' );
+	hint.setAttribute( 'aria-label', 'Installera Ekonom pa iOS' );
+	hint.innerHTML =
+		'<span>Tryck <strong>Dela</strong> \u2192 <strong>L\u00e4gg till p\u00e5 hemsk\u00e4rmen</strong></span>' +
+		'<button type="button" data-dismiss aria-label="St\u00e4ng">\u00D7</button>';
+	document.body.appendChild( hint );
+
+	hint.querySelector( '[data-dismiss]' ).addEventListener( 'click', function () {
+		sessionStorage.setItem( 'ekonom_ios_install_dismissed', '1' );
+		hint.remove();
+	} );
+}

package/js/sheet-drag.js

@@ -0,0 +1,163 @@
+/*--------------------------------------------------------------
+ Ekonom - Sheet drag-to-dismiss (Sprint C2).
+
+ Pointer Events-baserad drag fran sheet-handle (eller sheet-toppen
+ nar sheet ar scrollad till topp). 1:1 tracking under drag.
+ Threshold for dismiss: 40% av sheet-hojd ELLER velocity > 0.5 px/ms.
+ Spring-back om under threshold (CSS bounce-easing).
+ Backdrop-opacitet foljer drag-progress.
+
+ Aktiveras automatiskt pa alla <dialog class="sheet"> via MutationObserver
+ (sheets som rendreras dynamiskt fangas in).
+--------------------------------------------------------------*/
+(function () {
+	'use strict';
+
+	const DRAG_THRESHOLD_RATIO = 0.4;       // 40% av sheet-hojd
+	const VELOCITY_THRESHOLD = 0.5;          // px/ms
+	const VELOCITY_WINDOW_MS = 100;          // sliding window
+	const ACTIVE_ATTR = 'data-drag-active';
+
+	function attach(dialog) {
+		if (dialog.dataset.dragAttached) return;
+		dialog.dataset.dragAttached = '1';
+
+		const handle = dialog.querySelector('.sheet-handle');
+		if (!handle) return;
+
+		let dragging = false;
+		let startY = 0;
+		let currentY = 0;
+		let height = 0;
+		let pointerId = null;
+		const samples = []; // {t, y}
+
+		function pushSample(y) {
+			const now = performance.now();
+			samples.push({ t: now, y: y });
+			while (samples.length && now - samples[0].t > VELOCITY_WINDOW_MS) {
+				samples.shift();
+			}
+		}
+
+		function computeVelocity() {
+			if (samples.length < 2) return 0;
+			const first = samples[0];
+			const last = samples[samples.length - 1];
+			const dt = last.t - first.t;
+			if (dt <= 0) return 0;
+			return (last.y - first.y) / dt; // px/ms
+		}
+
+		function setBackdropOpacity(progress) {
+			// progress 0..1: 0 = fully visible backdrop, 1 = fully faded.
+			// Variabeln satts pa documentElement eftersom ::backdrop inte arvs
+			// fran dialog-elementet (separat pseudo-element-tree).
+			document.documentElement.style.setProperty('--drag-progress', progress.toFixed(3));
+		}
+
+		function onStart(e) {
+			// Bara primary pointer.
+			if (e.button !== undefined && e.button !== 0) return;
+			// Ignorera om sheet inte ar oppen.
+			if (!dialog.open) return;
+			dragging = true;
+			pointerId = e.pointerId;
+			startY = e.clientY;
+			currentY = 0;
+			height = dialog.offsetHeight;
+			samples.length = 0;
+			pushSample(0);
+			dialog.style.transition = 'none';
+			dialog.setAttribute(ACTIVE_ATTR, '');
+			try { handle.setPointerCapture(e.pointerId); } catch (_) { /* ignore */ }
+			e.preventDefault();
+		}
+
+		function onMove(e) {
+			if (!dragging || e.pointerId !== pointerId) return;
+			const dy = e.clientY - startY;
+			if (dy < 0) {
+				// Bara nedat (positive dy). Negativ = clamp till 0.
+				currentY = 0;
+				dialog.style.transform = 'translateY(0)';
+				pushSample(0);
+				setBackdropOpacity(0);
+				return;
+			}
+			currentY = dy;
+			dialog.style.transform = 'translateY(' + dy + 'px)';
+			pushSample(dy);
+			setBackdropOpacity(Math.min(1, dy / height));
+		}
+
+		function onEnd(e) {
+			if (!dragging) return;
+			dragging = false;
+			const velocity = computeVelocity();
+			const threshold = height * DRAG_THRESHOLD_RATIO;
+			try { handle.releasePointerCapture(e.pointerId); } catch (_) { /* ignore */ }
+			dialog.removeAttribute(ACTIVE_ATTR);
+
+			if (currentY > threshold || velocity > VELOCITY_THRESHOLD) {
+				// Dismiss med inertia. Duration skalar med velocity (snabbare snart -> kortare anim).
+				const remaining = height - currentY;
+				const baseDuration = 240;
+				const adjusted = velocity > VELOCITY_THRESHOLD
+					? Math.max(120, baseDuration - velocity * 80)
+					: baseDuration;
+				dialog.style.transition = 'transform ' + adjusted + 'ms var(--ease-spring-snappy)';
+				dialog.style.transform = 'translateY(100%)';
+				const onTransitionEnd = function () {
+					dialog.removeEventListener('transitionend', onTransitionEnd);
+					// Reset state innan close sa nasta open-renderar fran 0.
+					dialog.style.transition = '';
+					dialog.style.transform = '';
+					setBackdropOpacity(0);
+					if (typeof dialog.close === 'function') dialog.close();
+				};
+				dialog.addEventListener('transitionend', onTransitionEnd, { once: true });
+			} else {
+				// Snap-back med spring-bounce.
+				dialog.style.transition = 'transform 320ms var(--ease-spring-bounce)';
+				dialog.style.transform = 'translateY(0)';
+				setBackdropOpacity(0);
+				const onTransitionEnd = function () {
+					dialog.removeEventListener('transitionend', onTransitionEnd);
+					dialog.style.transition = '';
+					dialog.style.transform = '';
+				};
+				dialog.addEventListener('transitionend', onTransitionEnd, { once: true });
+			}
+		}
+
+		handle.addEventListener('pointerdown', onStart);
+		document.addEventListener('pointermove', onMove);
+		document.addEventListener('pointerup', onEnd);
+		document.addEventListener('pointercancel', onEnd);
+	}
+
+	function attachAll() {
+		document.querySelectorAll('dialog.sheet').forEach(attach);
+	}
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', attachAll);
+	} else {
+		attachAll();
+	}
+
+	// Fanga sheets som tillkommer dynamiskt (osannolikt i Ekonom men robust).
+	const observer = new MutationObserver(function (mutations) {
+		for (const m of mutations) {
+			for (const node of m.addedNodes) {
+				if (node.nodeType !== 1) continue;
+				if (node.matches && node.matches('dialog.sheet')) attach(node);
+				if (node.querySelectorAll) {
+					node.querySelectorAll('dialog.sheet').forEach(attach);
+				}
+			}
+		}
+	});
+	observer.observe(document.body, { childList: true, subtree: true });
+})();