Merge pull request #228 from HBO-i/feat/update-methods-per-phase

Update method per phase page

src/content/methods/text/workshop/brainstorm.md

@@ -10,6 +10,6 @@ ingredients: [
 ]
 category: "workshop"
 phases: [
-"realisation", "problem-definition"
+"realisation", "problem definition"
 ]
 ---

src/content/methods/text/workshop/gap-analysis.md

@@ -10,6 +10,8 @@ ingredients: [
 ]
 category: "workshop"
 phases: [
-"needs update"
+"problem definition",
+"analysis",
+"evaluation"
 ]
 ---

src/error.html

@@ -25,7 +25,8 @@ <h1>An error occured</h1>
 			<a
 				href="https://github.com/jochemvogel/ictmethods.nl/issues/new?assignees=&labels=&template=bug_report.yml"
 				>what happened</a
-			>and go back <a href="/">to the home page</a>
+			>
+			and go back <a href="/">to the home page</a>
 		</p>
 	</body>
 </html>

src/lib/components/layout/sidebar/Sidebar.svelte

@@ -4,32 +4,43 @@
 	import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
 
 	import { isMenuOpen } from '$lib/stores';
-	import { sidebarRoutes, categoryRoutes } from '$lib/routes';
+	import { sidebarRoutes, categoryRoutes, phaseRoutes } from '$lib/routes';
 	import { page } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
 
-	import type { CategoryRoute } from '$lib/types';
+	import type { CategoryRoute, PhaseRoute } from '$lib/types';
 
 	afterNavigate(() => {
 		isMenuOpen.set(false);
 	});
 
 	$: pathName = $page.url.pathname;
 
-	$: categoryName = $page.url.pathname.slice(1, -1); // pathName without the '/'
-	$: checkName = (route: CategoryRoute) => route.category == categoryName; // Check if the current route matches a route in the array
+	$: categoryName = pathName.endsWith('/') ? pathName.slice(1, -1) : pathName.slice(1);
+	$: phaseName = pathName.startsWith('/phases/') ? pathName.split('/')[2] : '';
 
-	$: if (categoryRoutes.some(checkName)) {
-		pathName = '/';
-	}
+	$: checkCategory = (route: CategoryRoute) => route.category === categoryName;
+	$: checkPhase = (route: PhaseRoute) => route.phase === phaseName;
+
+	$: isActive = (routePath: string) => {
+		if (
+			routePath === '/' &&
+			(categoryRoutes.some(checkCategory) || pathName.startsWith('/phases/'))
+		) {
+			return true;
+		} else if (pathName.startsWith('/phases/') && phaseRoutes.some(checkPhase)) {
+			return pathName === routePath;
+		}
+		return pathName === routePath;
+	};
 </script>
 
 <nav class:visible={$isMenuOpen}>
 	<ul class="non-style">
 		{#each sidebarRoutes as route}
 			<li>
 				<a
-					class:active={pathName === route.path}
+					class:active={isActive(route.path)}
 					href={route.path}
 					target={route.icon === 'external' ? '_blank' : ''}
 				>

src/lib/components/method/MethodCard.svelte

@@ -40,7 +40,7 @@
 		<div class="tag-container">
 			{#if method.phases}
 				{#each method.phases as phase}
-					<a href="/methods-per-project-phase/">
+					<a href={'/phases/' + encodeURI(phase.replace(/\s+/g, '-'))}>
 						<Tag theme={method.category} value={phase} tooltipText="Project phase of use" />
 					</a>
 				{/each}

src/lib/components/tabs/CategoryTab.svelte

@@ -7,12 +7,6 @@
 	let ul: HTMLElement;
 	let activeTab = $page.url.pathname.slice(1, -1);
 
-	/*
-		I've no idea how this is working, but somehow it works.
-		Will have a better look later on.
-
-		@TODO: Have a look at this function
-	*/
 	const updateSelectedTab = (category: string, event: Event) => {
 		if (event) {
 			const buttonElement = event.target as HTMLElement;

src/lib/components/tabs/PhaseTab.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import TabButton from '$lib/components/tabs/TabButton.svelte';
+
+	import { phaseRoutes } from '$lib/routes';
+
+	let ul: HTMLElement;
+	let activeTab = $page.url.pathname.slice(1, -1);
+
+	const updateSelectedTab = (phase: string, event: Event) => {
+		if (event) {
+			const buttonElement = event.target as HTMLElement;
+
+			if (buttonElement) {
+				const linkElement = buttonElement.parentElement;
+
+				if (linkElement) {
+					const li = linkElement.parentElement;
+
+					if (li) {
+						// 1). Find the active element
+						const activeLi = li;
+
+						// 2). Get the center of active element
+						const centerOfLi = activeLi.offsetWidth / 2;
+
+						// 3). Get left position + center position
+						const leftBorderPositionOfLi = activeLi.offsetLeft;
+						const positionOfCenterLi = leftBorderPositionOfLi + centerOfLi;
+
+						// 4). Get current scroll position
+						const currentScrollPosition = ul.scrollLeft; // 0 - 527
+
+						// 5). Get container width
+						const containerWidth = ul.offsetWidth; // 351
+						const centerOfContainer = containerWidth / 2; // 175.5
+
+						// 6). Set position
+						const position = positionOfCenterLi + currentScrollPosition - centerOfContainer;
+
+						// 7. Set scrollLeft
+						ul.scrollLeft = position / 2; // Doesn't work correctly, yet
+						// ul.scrollLeft = position / 2 + 10; // Works one way => left to right
+						// ul.scrollLeft = position / 2 - 10; // Works one way => right to left
+
+						activeTab = phase;
+					}
+				}
+			}
+		}
+	};
+</script>
+
+<ul class="non-style phase-tab" bind:this={ul}>
+	{#each phaseRoutes as route}
+		<li
+			class:active={activeTab === route.phase}
+			on:click={(event) => updateSelectedTab(route.phase, event)}
+		>
+			<TabButton phase={route.phase} content={route.title} />
+		</li>
+	{/each}
+</ul>
+
+<style lang="scss">
+	ul.phase-tab {
+		background-color: var(--color-white);
+		border-radius: 1.5em;
+		max-width: fit-content;
+		overflow-x: auto;
+		display: flex;
+		gap: 2em;
+		padding: 0.5em 1.25em;
+		scroll-snap-type: x mandatory;
+
+		@include tablet {
+			padding: 0.25rem;
+		}
+
+		@include desktop-small {
+			box-sizing: border-box;
+			min-height: 3rem;
+			justify-content: center;
+			padding: 0 1rem;
+			border-radius: 0.75rem;
+			gap: 5px;
+			overflow-y: hidden;
+		}
+	}
+</style>

src/lib/components/tabs/TabButton.svelte

@@ -6,17 +6,27 @@
 		currentPaginationPage.set(1);
 	}
 
-	$: pathName = $page.url.pathname;
-	$: isCategorySelected = pathName.slice(1, -1) === category;
+	$: isCategorySelected =
+		category !== undefined ? new RegExp(`^/${category}/?$`).test($page.url.pathname) : false;
+	$: isPhaseSelected =
+		phase !== undefined ? new RegExp(`^/${phase}/?$`).test($page.url.pathname) : false;
 
-	export let category: string;
+	export let category: string | undefined;
+	export let phase: string | undefined;
 	export let content: string;
 </script>
 
-<a href={'/' + category} title={'category ' + category}>
-	<button tabindex="-1" class:selected={isCategorySelected} on:click={() => resetPagination()}
-		>{content}</button
+<a
+	href={'/' + (category || phase || '')}
+	title={(category !== undefined ? 'category ' : 'phase ') + (category || phase || 'All')}
+>
+	<button
+		tabindex="-1"
+		class:selected={isCategorySelected || isPhaseSelected}
+		on:click={resetPagination}
 	>
+		{content}
+	</button>
 </a>
 
 <style lang="scss">
@@ -43,13 +53,4 @@
 			border-bottom: 3px solid var(--color-primary);
 		}
 	}
-
-	// $categories: library, field, lab, showroom, workshop, extra;
-
-	// @each $category in $categories {
-	// 	a[title='category #{$category}'] button.selected {
-	// 		color: var(--color-#{$category});
-	// 		border-color: var(--color-#{$category});
-	// 	}
-	// }
 </style>

src/lib/components/utils/Switch.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	export let label: string;
+	export let fontSize = 16;
+	export let checked = true;
+
+	const uniqueID = Math.floor(Math.random() * 100);
+
+	function handleClick(event: MouseEvent) {
+		const target = event.target;
+
+		const state = target.getAttribute('aria-checked');
+
+		checked = state === 'true' ? false : true;
+	}
+</script>
+
+<div class="switch" style="font-size:{fontSize}px">
+	<label for="switch" id={`switch-${uniqueID}`}>{label}</label>
+	<button
+		id="switch"
+		role="switch"
+		aria-checked={checked}
+		aria-labelledby={`switch-${uniqueID}`}
+		on:click={handleClick}
+	/>
+</div>
+
+<style>
+	.switch {
+		display: flex;
+		align-items: center;
+	}
+
+	.switch button {
+		width: 3em;
+		height: 1.6em;
+		position: relative;
+		margin: 0 0 0 0.5em;
+		background: var(--color-grey);
+		border: none;
+	}
+
+	.switch button::before {
+		content: '';
+		position: absolute;
+		width: 1.3em;
+		height: 1.3em;
+		background: #fff;
+		top: 0.13em;
+		right: 1.5em;
+		transition: transform 0.3s;
+	}
+
+	.switch button[aria-checked='true'] {
+		background-color: var(--color-blue);
+	}
+
+	.switch button[aria-checked='true']::before {
+		transform: translateX(1.3em);
+		transition: transform 0.3s;
+	}
+
+	.switch button:focus {
+		box-shadow: 0 0px 0px 1px var(--color-blue);
+	}
+
+	.switch label {
+		font-weight: bold;
+	}
+
+	.switch button {
+		border-radius: 1.5em;
+	}
+
+	.switch button::before {
+		border-radius: 100%;
+	}
+
+	.switch button:focus {
+		box-shadow: 0 0px 8px var(--color-blue);
+		border-radius: 1.5em;
+	}
+</style>

src/lib/routes.ts

@@ -29,17 +29,44 @@ export const categoryRoutes = [
 	}
 ];
 
+export const phaseRoutes = [
+	{
+		title: 'All Methods',
+		phase: ''
+	},
+	{
+		title: 'Problem definition',
+		phase: 'phases/problem-definition'
+	},
+	{
+		title: 'Analysis',
+		phase: 'phases/analysis'
+	},
+	{
+		title: 'Design',
+		phase: 'phases/design'
+	},
+	{
+		title: 'Realisation',
+		phase: 'phases/realisation'
+	},
+
+	{
+		title: 'Evaluation',
+		phase: 'phases/evaluation'
+	},
+	{
+		title: 'Machine Learning',
+		phase: 'phases/machine-learning'
+	}
+];
+
 export const sidebarRoutes = [
 	{
 		title: 'Methods',
 		path: '/',
 		icon: 'dashboard'
 	},
-	{
-		title: 'Per phase',
-		path: '/methods-per-project-phase/',
-		icon: 'list'
-	},
 	{
 		title: 'Patterns',
 		path: '/research-pattern-navigator/',

src/lib/stores/index.ts

@@ -8,3 +8,4 @@ export const showSearchField = writable(false);
 export const isJavaScriptDisabled = writable(true);
 export const isMenuOpen = writable(false);
 export const isMacDevice = writable(false);
+export const isGroupedByPhase = writable(false);

src/lib/types.d.ts

@@ -14,6 +14,11 @@ export interface CategoryRoute {
 	category: string;
 }
 
+export interface PhaseRoute {
+	title: string;
+	phase: string;
+}
+
 export interface SidebarRoute {
 	title: string;
 	path: string;