Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New scroll to top button and functions.

Browse Source
This commit is contained in:
Scott Idem
2025-06-25 18:29:33 -04:00
parent c947e9e77a
commit 55dc2ab48c
3 changed files with 204 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/routes/idaa/(idaa)/recovery_meetings/+page.svelte
View File

@@ -401,6 +401,36 @@ function add_activity_log(
log_lvl: log_lvl
});
}
// let hide_scroll_btn = $state(true); // This is to hide the scroll to top button initially
// let scroll_y = $state(75);
// function go_top() {
// document.body.scrollIntoView();
// }
// function scroll_container() {
// console.log('Element', document.getElementById('ae_idaa__recovery_meetings'))
// return document.getElementById('ae_idaa__recovery_meetings') || document.documentElement || document.body;
// // return document.documentElement || document.body;
// }
// function handle_on_scroll() {
// if (!scroll_container()) {
// return;
// }
// console.log(`Scroll position: ${scroll_container().scrollTop}`);
// let show_on_px = 500; // The scroll position at which the button will be shown
// if (scroll_container().scrollTop > show_on_px) {
// hide_scroll_btn = false;
// } else {
// hide_scroll_btn = true;
// }
// }
</script>
@@ -413,6 +443,7 @@ function add_activity_log(
</svelte:head>
<div
class="
ae_idaa__recovery_meetings
@@ -617,3 +648,6 @@ function add_activity_log(
</Modal>

15
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
View File

@@ -179,7 +179,20 @@ function add_activity_log(
$idaa_sess.recovery_meetings.show__modal_view = true;
$idaa_sess.recovery_meetings.show__modal_view__event_id = idaa_event_obj?.event_id;
$idaa_sess.recovery_meetings.show__modal_edit = false;
$idaa_sess.recovery_meetings.show__modal_edit__event_id
$idaa_sess.recovery_meetings.show__modal_edit__event_id;
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (is_safari) {
console.log('Safari detected, using forced scroll to top...');
// Safari does not support smooth scroll, so we use a regular scroll
document.getElementById('ae_idaa')?.scrollTo(0, 0);
// document.getElementById('ae_idaa')?.scrollTo({
// top: 0,
// behavior: 'smooth'
// });
}
}}
class="novi_btn btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
title={`Open to see details: ${idaa_event_obj?.name}`}

163
src/routes/idaa/+layout.svelte
View File

@@ -13,7 +13,7 @@ import {
RefreshCw,
Satellite
} from '@lucide/svelte';
import { AppBar } from '@skeletonlabs/skeleton-svelte';
// import { AppBar } from '@skeletonlabs/skeleton-svelte';
import type {
ModalComponent
} from '@skeletonlabs/skeleton-svelte';
@@ -97,6 +97,90 @@ function add_activity_log(
});
}
let box: any;
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);
function parse_scroll() {
// console.log(`parse_scroll() called`);
xLeft = box.scrollLeft;
xScroll = box.scrollWidth;
xWidth = box.clientWidth;
yTop = box.scrollTop;
yHeight = box.clientHeight;
yScroll = box.scrollHeight;
// console.log(`parse_scroll() called: ${yTop}`);
}
let is_safari = $state(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
let hide_scroll_btn = $state(true); // This is to hide the scroll to top button initially
let scroll_y = $state(0);
function go_top() {
// document.body.scrollIntoView();
scroll_container().scrollIntoView();
}
function scroll_container() {
// console.log('Element', document.getElementById('ae_idaa__recovery_meetings'))
// return document.documentElement || document.body;
return document.getElementById('ae_idaa') || document.documentElement || document.body;
}
// function handle_on_scroll() {
// if (!scroll_container()) {
// return;
// }
// console.log(`Scroll position: ${scroll_container().scrollTop}`);
// let show_on_px = 500; // The scroll position at which the button will be shown
// if (scroll_container().scrollTop > show_on_px) {
// hide_scroll_btn = false;
// } else {
// hide_scroll_btn = true;
// }
// }
$effect(() => {
// console.log(`idaa_root_layout.svelte`);
// if (scroll_y) {
// console.log(`Scroll position: ${scroll_y}`);
// // handle_on_scroll();
// }
// if (yTop) {
// console.log(`Scroll container top diff: ${yTop}`);
// }
// else {
// hide_scroll_btn = true; // Hide the button if scroll_y is 0
// }
// if (log_lvl > 1) {
// console.log(`idaa_root_layout.svelte: data:`, data);
// }
// // If the browser is Safari, we need to handle the scroll differently
// if (is_safari) {
// console.log('Safari detected, using special scroll handling');
// // Add any Safari-specific logic here if needed
// }
// // Initial scroll position
// scroll_y = scroll_container().scrollTop;
// // Set up the scroll event listener
// window.addEventListener('scroll', () => {
// scroll_y = scroll_container().scrollTop;
// handle_on_scroll();
// });
});
</script>
@@ -104,14 +188,13 @@ function add_activity_log(
<title>IDAA - {$idaa_loc?.title ?? 'Æ loading...'}</title>
</svelte:head>
<!-- <Modal components={modalRegistry}
regionBackdrop=''
regionBody=''
regionHeader='modal-header card-header text-2xl font-bold'
regionFooter='modal-footer flex justify-between space-x-2'
/> -->
<!-- <svelte:window onscroll={handle_on_scroll} /> -->
<!-- <svelte:window bind:scrollY={scroll_y} /> -->
<div
id="ae_idaa"
bind:this={box}
onscroll={parse_scroll}
class:iframe={$ae_loc?.iframe}
class="ae_idaa h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto"
>
@@ -215,3 +298,69 @@ function add_activity_log(
</div>
<!-- </AppShell> -->
<button
class="ae_idaa__recovery_meetings__scroll_top_btn btn btn-sm btn-secondary preset-tonal-surface fixed bottom-4 right-24 z-50 opacity-75 hover:opacity-100"
class:hidden={yTop < 600}
class:ae_btn_warning_outlined={is_safari}
class:ae_btn_success_outlined={!is_safari}
onclick={() => {
log_lvl = 1;
if (log_lvl) {
console.log(`Scroll to top button clicked. scroll_y: ${scroll_y} scrollTop: ${scroll_container().scrollTop}`, scroll_container());
// document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
// document.body.scrollTop = 0; // For Safari
}
// var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (is_safari) {
console.log('Safari detected, not using smooth scroll to top');
document.getElementById('ae_idaa')?.scrollTo(0, 0);
// document.documentElement?.scrollTo(0, 0);
// document.body?.scrollTo(0, 0); // For Safari
// if ($ae_loc.edit_mode) {
// // If in edit mode, scroll to the top of the page
// document.getElementById('ae_idaa')?.scrollTo(0, 0);
// } else {
// // If not in edit mode, scroll to the top of document element
// document.documentElement?.scrollTo(0, 0);
// }
} else {
console.log('Not Safari, using smooth scroll to top');
document.getElementById('ae_idaa')?.scrollTo({
top: 0,
behavior: 'smooth'
});
// if ($ae_loc.edit_mode) {
// document.getElementById('ae_idaa')?.scrollTo({
// top: 0,
// behavior: 'smooth'
// });
// } else {
// document.documentElement?.scrollTo({
// top: 0,
// behavior: 'smooth'
// });
// }
}
// go_top();
// window.scrollTo({ top: 0, behavior: 'smooth' });
// window.scrollTo({ top: 0, behavior: 'smooth' });
// document.body.scrollIntoView();
// document.body.scrollTop = 0; // For Safari
// console.l
// scroll_y = 0;
}}
title="Scroll to top"
>
<span class="fas fa-arrow-up"></span>
Scroll to Top
</button>