mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-25 07:49:37 +02:00
Merge pull request #550 from lkiesow/collection-browser-navigation
Enable Browser Navigation in Collections
This commit is contained in:
commit
0ce101594f
1 changed files with 28 additions and 22 deletions
|
@ -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
|
||||
|
||||
|
@ -297,6 +297,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;
|
||||
|
@ -328,11 +339,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>) {
|
||||
|
@ -766,41 +778,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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue