From: PhiTux <redacted>
Date: Sun, 27 Apr 2025 17:54:06 +0000 (+0200)
Subject: bugfix: close sidenav when switching pages
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=24acabd9c973fe68dc835f915deac48dc6c431fb;p=DailyTxT.git

bugfix: close sidenav when switching pages
---

diff --git a/frontend/src/lib/Datepicker.svelte b/frontend/src/lib/Datepicker.svelte
index c6a10f6..90d4a7d 100644
--- a/frontend/src/lib/Datepicker.svelte
+++ b/frontend/src/lib/Datepicker.svelte
@@ -85,6 +85,20 @@
 		}
 	};
 
+	$effect(() => {
+		if (window.location.href) {
+			setTimeout(() => {
+				oc = document.querySelector('.offcanvas');
+				oc.addEventListener('hidden.bs.offcanvas', () => {
+					$offcanvasIsOpen = false;
+				});
+				oc.addEventListener('shown.bs.offcanvas', () => {
+					$offcanvasIsOpen = true;
+				});
+			}, 500);
+		}
+	});
+
 	onMount(() => {
 		days = updateCalendar();
 
diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index 25e42d5..1224385 100644
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -9,8 +9,10 @@
 	import * as bootstrap from 'bootstrap';
 	import Tag from './Tag.svelte';
 	import { offcanvasIsOpen } from '$lib/helpers.js';
+	import { API_URL } from '$lib/APIurl.js';
+	import axios from 'axios';
 
-	let { searchForString, searchForTag } = $props();
+	let oc;
 
 	onMount(() => {
 		const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
@@ -51,6 +53,71 @@
 		}
 	}
 
+	$effect(() => {
+		if (window.location.href) {
+			setTimeout(() => {
+				oc = document.querySelector('.offcanvas');
+				oc.addEventListener('hidden.bs.offcanvas', () => {
+					$offcanvasIsOpen = false;
+				});
+				oc.addEventListener('shown.bs.offcanvas', () => {
+					$offcanvasIsOpen = true;
+				});
+			}, 1000);
+		}
+	});
+
+	function searchForString() {
+		if ($isSearching) {
+			return;
+		}
+		$isSearching = true;
+
+		axios
+			.get(API_URL + '/logs/searchString', {
+				params: {
+					searchString: $searchString
+				}
+			})
+			.then((response) => {
+				$searchResults = [...response.data];
+				$isSearching = false;
+			})
+			.catch((error) => {
+				$searchResults = [];
+				console.error(error);
+				$isSearching = false;
+
+				// toast
+				const toast = new bootstrap.Toast(document.getElementById('toastErrorSearching'));
+				toast.show();
+			});
+	}
+
+	function searchForTag() {
+		$searchString = '';
+		if ($isSearching) {
+			return;
+		}
+		$isSearching = true;
+
+		axios
+			.get(API_URL + '/logs/searchTag', { params: { tag_id: $searchTag.id } })
+			.then((response) => {
+				$searchResults = [...response.data];
+				$isSearching = false;
+			})
+			.catch((error) => {
+				$isSearching = false;
+				$searchResults = [];
+
+				console.error(error);
+				// toast
+				const toast = new bootstrap.Toast(document.getElementById('toastErrorSearching'));
+				toast.show();
+			});
+	}
+
 	let showTagDropdown = $state(false);
 	let filteredTags = $state([]);
 	let selectedTagIndex = $state(0);
@@ -138,7 +205,7 @@
 		$searchResults = [];
 	}
 
-	let oc;
+	// selects a search result
 	function selectDate(date) {
 		$selectedDate = date;
 
@@ -280,6 +347,20 @@
 	</div>
 </div>
 
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+	<div
+		id="toastErrorSearching"
+		class="toast align-items-center text-bg-danger"
+		role="alert"
+		aria-live="assertive"
+		aria-atomic="true"
+	>
+		<div class="d-flex">
+			<div class="toast-body">Fehler beim Suchen!</div>
+		</div>
+	</div>
+</div>
+
 <style>
 	.btnSearchPopover {
 		border-bottom-left-radius: 0px;
@@ -295,6 +376,7 @@
 		color: #ccc;
 		text-align: center;
 		padding: 1rem;
+		user-select: none;
 	}
 
 	:global(.kbd) {
diff --git a/frontend/src/lib/settingsStore.js b/frontend/src/lib/settingsStore.js
index e052fac..77d0867 100644
--- a/frontend/src/lib/settingsStore.js
+++ b/frontend/src/lib/settingsStore.js
@@ -1,6 +1,6 @@
 import {writable} from 'svelte/store';
 
-export const readingMode = writable(false);
+export const readingMode = writable('');
 
 // old, to be deleted
 export const useTrianglify = writable(true);
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 807a541..b3368ed 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -20,9 +20,8 @@
 	import trianglify from 'trianglify';
 	import { tags } from '$lib/tagStore.js';
 	import TagModal from '$lib/TagModal.svelte';
-	import { alwaysShowSidenav } from '$lib/helpers.js';
+	import { alwaysShowSidenav, offcanvasIsOpen } from '$lib/helpers.js';
 	import { templates } from '$lib/templateStore';
-
 	import {
 		faRightFromBracket,
 		faGlasses,
@@ -37,10 +36,40 @@
 	let inDuration = 150;
 	let outDuration = 150;
 
+	axios.interceptors.request.use((config) => {
+		config.withCredentials = true;
+		return config;
+	});
+
+	axios.interceptors.response.use(
+		(response) => {
+			return response;
+		},
+		(error) => {
+			if (
+				error.response &&
+				error.response.status &&
+				(error.response.status == 401 || error.response.status == 440)
+			) {
+				// logout
+				axios
+					.get(API_URL + '/users/logout')
+					.then((response) => {
+						localStorage.removeItem('user');
+						goto(`/login?error=${error.response.status}`);
+					})
+					.catch((error) => {
+						console.error(error);
+					});
+			}
+			return Promise.reject(error);
+		}
+	);
+
 	$effect(() => {
-		if ($readingMode) {
+		if ($readingMode === true && page.url.pathname !== '/read') {
 			goto('/read');
-		} else {
+		} else if ($readingMode === false) {
 			goto('/write');
 		}
 	});
@@ -171,6 +200,12 @@
 		getUserSettings();
 		getTemplates();
 
+		if (page.url.pathname === '/read') {
+			$readingMode = true;
+		} else if (page.url.pathname === '/write') {
+			$readingMode = false;
+		}
+
 		document.getElementById('settingsModal').addEventListener('shown.bs.modal', function () {
 			const height = document.getElementById('modal-body').clientHeight;
 			document.getElementById('settings-content').style.height = 'calc(' + height + 'px - 2rem)';
@@ -542,7 +577,7 @@
 								id="settings-content"
 							>
 								<div id="appearance">
-									<h3 id="" class="text-primary">Aussehen</h3>
+									<h3 class="text-primary">Aussehen</h3>
 									<div id="lightdark">
 										<h5>Light/Dark-Mode</h5>
 										Bla<br />
@@ -575,7 +610,7 @@
 								</div>
 
 								<div id="functions">
-									<h3 id="" class="text-primary">Funktionen</h3>
+									<h3 class="text-primary">Funktionen</h3>
 
 									<div id="autoLoadImages">
 										{#if $tempSettings.setAutoloadImagesPerDevice !== $settings.setAutoloadImagesPerDevice || $tempSettings.autoloadImagesByDefault !== $settings.autoloadImagesByDefault}
diff --git a/frontend/src/routes/read/+page.svelte b/frontend/src/routes/read/+page.svelte
index a37e7c8..1cff304 100644
--- a/frontend/src/routes/read/+page.svelte
+++ b/frontend/src/routes/read/+page.svelte
@@ -9,11 +9,17 @@
 	import Tag from '$lib/Tag.svelte';
 	import { tags } from '$lib/tagStore.js';
 	import FileList from '$lib/FileList.svelte';
-	import { autoLoadImages } from '$lib/settingsStore';
+	import { autoLoadImagesThisDevice, settings } from '$lib/settingsStore';
 	import { faCloudArrowDown } from '@fortawesome/free-solid-svg-icons';
 	import { Fa } from 'svelte-fa';
 	import { fade, slide } from 'svelte/transition';
 	import ImageViewer from '$lib/ImageViewer.svelte';
+	import { alwaysShowSidenav } from '$lib/helpers.js';
+
+	axios.interceptors.request.use((config) => {
+		config.withCredentials = true;
+		return config;
+	});
 
 	marked.use({
 		breaks: true,
@@ -93,7 +99,7 @@
 						) {
 							log.images = [...log.images, file];
 
-							if ($autoLoadImages) {
+							if (autoLoadImages) {
 								loadImage(file.uuid_filename);
 							}
 						}
@@ -103,6 +109,11 @@
 		}
 	});
 
+	let autoLoadImages = $derived(
+		($settings.setAutoloadImagesPerDevice && $autoLoadImagesThisDevice) ||
+			(!$settings.setAutoloadImagesPerDevice && $settings.autoloadImagesByDefault)
+	);
+
 	function loadImage(uuid) {
 		for (let i = 0; i < logs.length; i++) {
 			let log = logs[i];
@@ -315,7 +326,7 @@
 <DatepickerLogic />
 
 <!-- shown on small Screen, when triggered -->
-<div class="offcanvas-md d-md-none offcanvas-start p-3" id="sidenav" tabindex="-1">
+<div class="offcanvas offcanvas-start p-3" id="sidenav" tabindex="-1">
 	<div class="offcanvas-header">
 		<button
 			type="button"
@@ -325,68 +336,80 @@
 			aria-label="Close"
 		></button>
 	</div>
-	<Sidenav {search} />
+	<Sidenav />
 </div>
 
 <div class="d-flex flex-row justify-content-between h-100">
 	<!-- shown on large Screen -->
-	<div class="d-md-block d-none sidenav p-3">
-		<Sidenav {search} />
-	</div>
+	{#if $alwaysShowSidenav}
+		<div class="sidenav p-3">
+			<Sidenav />
+		</div>
+	{/if}
 
 	<!-- Center -->
 	<div class="d-flex flex-column my-4 ms-4 flex-fill overflow-y-auto" id="scrollArea">
 		{#each logs as log (log.day)}
 			<!-- Log-Area -->
-			<div class="log mb-3 p-3 d-flex flex-row" data-log-day={log.day}>
-				<div class="date me-3 d-flex flex-column align-items-center">
-					<p class="dateNumber">{log.day}</p>
-					<p class="dateDay">
-						<b>
-							{new Date($cal.currentYear, $cal.currentMonth, log.day).toLocaleDateString('locale', {
-								weekday: 'long'
-							})}
-						</b>
-					</p>
-				</div>
-				<div class="flex-grow-1 middle">
-					{#if log.text && log.text !== ''}
-						<div class="text">
-							{@html marked.parse(log.text)}
-						</div>
-					{/if}
-					{#if log.tags?.length > 0}
-						<div class="tags d-flex flex-row flex-wrap">
-							{#each log.tags as t}
-								<Tag tag={$tags.find((tag) => tag.id === t)} />
-							{/each}
-						</div>
-					{/if}
-					{#if log.images?.length > 0}
-						{#if !$autoLoadImages && log.images.find((image) => !image.src && !image.loading)}
-							<div class="d-flex flex-row">
-								<button type="button" class="loadImageBtn" onclick={() => loadImages()}>
-									<Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
-									Bilder laden
-								</button>
+			{#if ('text' in log && log.text !== '') || log.tags?.length > 0 || log.files?.length > 0}
+				<div class="log mb-3 p-3 d-flex flex-row" data-log-day={log.day}>
+					<div class="date me-3 d-flex flex-column align-items-center">
+						<p class="dateNumber">{log.day}</p>
+						<p class="dateDay">
+							<b>
+								{new Date($cal.currentYear, $cal.currentMonth, log.day).toLocaleDateString(
+									'locale',
+									{
+										weekday: 'long'
+									}
+								)}
+							</b>
+						</p>
+					</div>
+					<div class="flex-grow-1 middle">
+						{#if log.text && log.text !== ''}
+							<div class="text">
+								{@html marked.parse(log.text)}
 							</div>
-						{:else}
-							<ImageViewer images={log.images} />
 						{/if}
+						{#if log.tags?.length > 0}
+							<div class="tags d-flex flex-row flex-wrap">
+								{#each log.tags as t}
+									<Tag tag={$tags.find((tag) => tag.id === t)} />
+								{/each}
+							</div>
+						{/if}
+						{#if log.images?.length > 0}
+							{#if !autoLoadImages && log.images.find((image) => !image.src && !image.loading)}
+								<div class="d-flex flex-row">
+									<button type="button" class="loadImageBtn" onclick={() => loadImages()}>
+										<Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
+										Bilder laden
+									</button>
+								</div>
+							{:else}
+								<ImageViewer images={log.images} />
+							{/if}
+						{/if}
+					</div>
+
+					{#if log.files && log.files.length > 0}
+						<div class="d-flex flex-column ms-3 files">
+							<FileList files={log.files} {downloadFile} />
+						</div>
 					{/if}
 				</div>
-
-				{#if log.files && log.files.length > 0}
-					<div class="d-flex flex-column ms-3 files">
-						<FileList files={log.files} {downloadFile} />
-					</div>
-				{/if}
-			</div>
+			{/if}
 		{/each}
 	</div>
 </div>
 
 <style>
+	.sidenav {
+		width: 380px;
+		min-width: 380px;
+	}
+
 	.files {
 		max-width: 350px;
 	}
diff --git a/frontend/src/routes/write/+page.svelte b/frontend/src/routes/write/+page.svelte
index 75a7990..dcb57d6 100644
--- a/frontend/src/routes/write/+page.svelte
+++ b/frontend/src/routes/write/+page.svelte
@@ -6,7 +6,7 @@
 	import axios from 'axios';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import { searchString, searchTag, searchResults, isSearching } from '$lib/searchStore.js';
+	import { searchString, searchResults } from '$lib/searchStore.js';
 	import * as TinyMDE from 'tiny-markdown-editor';
 	import '../../../node_modules/tiny-markdown-editor/dist/tiny-mde.css';
 	import { API_URL } from '$lib/APIurl.js';
@@ -33,31 +33,6 @@
 		return config;
 	});
 
-	axios.interceptors.response.use(
-		(response) => {
-			return response;
-		},
-		(error) => {
-			if (
-				error.response &&
-				error.response.status &&
-				(error.response.status == 401 || error.response.status == 440)
-			) {
-				// logout
-				axios
-					.get(API_URL + '/users/logout')
-					.then((response) => {
-						localStorage.removeItem('user');
-						goto(`/login?error=${error.response.status}`);
-					})
-					.catch((error) => {
-						console.error(error);
-					});
-			}
-			return Promise.reject(error);
-		}
-	);
-
 	let cancelDownload = new AbortController();
 
 	let tinyMDE;
@@ -359,57 +334,6 @@
 		}
 	});
 
-	function searchForString() {
-		if ($isSearching) {
-			return;
-		}
-		$isSearching = true;
-
-		axios
-			.get(API_URL + '/logs/searchString', {
-				params: {
-					searchString: $searchString
-				}
-			})
-			.then((response) => {
-				$searchResults = [...response.data];
-				$isSearching = false;
-			})
-			.catch((error) => {
-				$searchResults = [];
-				console.error(error);
-				$isSearching = false;
-
-				// toast
-				const toast = new bootstrap.Toast(document.getElementById('toastErrorSearching'));
-				toast.show();
-			});
-	}
-
-	function searchForTag() {
-		$searchString = '';
-		if ($isSearching) {
-			return;
-		}
-		$isSearching = true;
-
-		axios
-			.get(API_URL + '/logs/searchTag', { params: { tag_id: $searchTag.id } })
-			.then((response) => {
-				$searchResults = [...response.data];
-				$isSearching = false;
-			})
-			.catch((error) => {
-				$isSearching = false;
-				$searchResults = [];
-
-				console.error(error);
-				// toast
-				const toast = new bootstrap.Toast(document.getElementById('toastErrorSearching'));
-				toast.show();
-			});
-	}
-
 	function triggerFileInput() {
 		document.getElementById('fileInput').click();
 	}
@@ -773,7 +697,6 @@
 <DatepickerLogic />
 <svelte:window onkeydown={on_key_down} onkeyup={on_key_up} />
 
-<!-- offcanvas-md d-md-none -->
 <!-- shown on small Screen, when triggered -->
 <div class="offcanvas offcanvas-start p-3" id="sidenav" tabindex="-1">
 	<div class="offcanvas-header">
@@ -785,15 +708,14 @@
 			aria-label="Close"
 		></button>
 	</div>
-	<Sidenav {searchForString} {searchForTag} />
+	<Sidenav />
 </div>
 
 <div class="d-flex flex-row justify-content-between h-100 main-row">
 	<!-- shown on large Screen -->
 	{#if $alwaysShowSidenav}
-		<!-- d-md-block d-none-->
 		<div class="sidenav p-3">
-			<Sidenav {searchForString} {searchForTag} />
+			<Sidenav />
 		</div>
 	{/if}
 
@@ -1018,18 +940,6 @@
 			</div>
 		</div>
 
-		<div
-			id="toastErrorSearching"
-			class="toast align-items-center text-bg-danger"
-			role="alert"
-			aria-live="assertive"
-			aria-atomic="true"
-		>
-			<div class="d-flex">
-				<div class="toast-body">Fehler beim Suchen!</div>
-			</div>
-		</div>
-
 		<div
 			id="toastErrorSavingFile"
 			class="toast align-items-center text-bg-danger"
@@ -1244,7 +1154,6 @@
 
 	#editor {
 		height: 400px;
-		overflow-y: scroll;
 		word-break: break-word;
 	}
 
@@ -1271,7 +1180,6 @@
 	}
 
 	.sidenav {
-		/* max-width: 430px; */
 		width: 380px;
 		min-width: 380px;
 	}