Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 15:29:36 +02:00
Code Issues Releases Activity

Enable Browser Navigation in Collections

Browse source 
If you are in a collection – e.g on “All Linked Items” – and go into an
adventure, going back will cause you to end up on the itinerary. This is
quite annoying if you have a number of options for a trip linked already
but whenever you go back, you have to scroll up again, click on “All
Linked Items”, and scroll down again to get to the next adventure in
line.

This patch makes AdventureLog remember the tab you were in and going
back and forth in the browser history will actually work.
This commit is contained in:
Lars Kiesow 2025-04-06 21:09:27 +02:00
parent dbd417ca87
commit 8531855f46
1 changed files with 28 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import type { Adventure, Checklist, Collection, Lodging, Note, Transportation } from '$lib/types';
import { onMount } from 'svelte';
import { onMount, onDestroy } from 'svelte';
import type { PageData } from './$types';
import { marked } from 'marked'; // Import the markdown parser
@ -179,6 +179,17 @@
let isShowingTransportationModal: boolean = false;
let isShowingChecklistModal: boolean = false;
function handleHashChange() {
const hash = window.location.hash.replace('#', '');
if (hash) {
currentView = hash
} else if (!collection.start_date) {
currentView = 'all';
} else {
currentView = 'itinerary';
}
}
onMount(() => {
if (data.props.adventure) {
collection = data.props.adventure;
@ -209,11 +220,12 @@
if (collection.checklists) {
checklists = collection.checklists;
}
if (!collection.start_date) {
currentView = 'all';
} else {
currentView = 'itinerary';
}
window.addEventListener('hashchange', handleHashChange);
handleHashChange();
});
onDestroy(() => {
window.removeEventListener('hashchange', handleHashChange);
});
function deleteAdventure(event: CustomEvent<string>) {
@ -647,41 +659,35 @@
<!-- svelte-ignore a11y-missing-attribute -->
{#if collection.start_date}
<a
href="#itinerary"
role="tab"
class="tab {currentView === 'itinerary' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'itinerary')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a
tabindex="0">Itinerary</a
>
{/if}
<a
href="#all"
role="tab"
class="tab {currentView === 'all' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'all')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a
tabindex="0">All Linked Items</a
>
<a
href="#calendar"
role="tab"
class="tab {currentView === 'calendar' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'calendar')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a
tabindex="0">Calendar</a
>
<a
href="#map"
role="tab"
class="tab {currentView === 'map' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'map')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a
tabindex="0">Map</a
>
<a
href="#recommendations"
role="tab"
class="tab {currentView === 'recommendations' ? 'tab-active' : ''}"
tabindex="0"
on:click={() => (currentView = 'recommendations')}
on:keydown={(e) => e.key === 'Enter' && (currentView = 'recommendations')}
>Recommendations</a
tabindex="0">Recommendations</a
>
</div>
</div>