New scroll to top button and functions.

src/routes/idaa/(idaa)/recovery_meetings/+page.svelte

@@ -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>
+
+
+

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte

@@ -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}`}

src/routes/idaa/+layout.svelte

@@ -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}
+<!-- <svelte:window onscroll={handle_on_scroll} /> -->
-    regionBackdrop=''
+<!-- <svelte:window bind:scrollY={scroll_y} /> -->
-    regionBody=''
-    regionHeader='modal-header card-header text-2xl font-bold'
-    regionFooter='modal-footer flex justify-between space-x-2'
-    /> -->
 
 <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>