From 40ee3b38e065e759bb81787c730feed28a2e6129 Mon Sep 17 00:00:00 2001
From: Arthur Refslund <arthur@refzlund.com>
Date: Sat, 12 Nov 2022 01:22:10 +0100
Subject: [PATCH] Added `updateHeight` and classes for .v-thumb based on last
 action (for transitioning based on said action)

---
 README.md            | 47 ++++++++++++++++++++++
 src/Svrollbar.svelte | 93 +++++++++++++++++++++++++++++++++++++++++---
 src/Svroller.svelte  |  8 +++-
 3 files changed, 142 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index cf17068..501a305 100644
--- a/README.md
+++ b/README.md
@@ -287,3 +287,50 @@ you can customize scrollbar visibility with `alwaysVisible` and `initiallyVisibl
 | ---------------- | ------- | ------------------------------------ |
 | alwaysVisible    | false   | scrollbar is always visible          |
 | initiallyVisible | false   | scrollbar is visible until scrolling |
+
+## working with absolute divs
+
+the `Observer WebAPI` may not recognize a resize change when working with absolute divs.
+
+you can therefore manually trigger an update calculation, which will update the height of the scrollthumb
+
+```js
+/**
+  * @type {(divElement: HTMLElement | undefined, minScrollHeight: HTMLElement | undefined) => void} 
+  * @param divElement - Will base the new height of this elements scrollheight.
+  * This may be wanted if you're working with absolute divs
+  * @param minScrollHeight - A reference to an element, which makes up for the minimum scrollheight.
+  * (computed: min-height + top,bottom margins + top,bottom border widths)
+*/
+export async function updateHeight(divElement = undefined, minScrollHeight = undefined)
+```
+
+in this example, we transition from *div A* to *div B*.
+
+at the start of the transition, both elements will be absolute, and therefore we trigger an update to the thumb height, so it can transition **with** the contents.<br>
+when the content has finished the transition, the thumb will therefore have smoothly transitioned aswell
+
+the `updateHeight` in the transitionEnd is just a precaution — but should technically not be necessary
+
+```html
+<div class='my-content'>
+  <!-- Using the let: directive for updateHeight function -->
+  <Svroller(width='100%' height='100%' alwaysVisible!='{true}' let:updateHeight)>
+    <MyComponent 
+      on:transitionStart={() => updateHeight(elements.divA, elements.view)} 
+      on:transitionEnd={updateHeight}
+    >
+      <div bind:this={elements.view} class='view' style='position: relative; min-height: 400px;'>
+        <!-- Transitioning to -->
+        <div bind:this={elements.divA} style='position: absolute; left: 500;'>
+        <!-- Transitioning from -->
+        <div bind:this={elements.divB} style='position: absolute; left: 0;'>
+...
+
+<style>
+  .my-content :global .v-thumb {
+    transition: top .25s ease, height .25s ease;
+  }
+...
+
+```
\ No newline at end of file
diff --git a/src/Svrollbar.svelte b/src/Svrollbar.svelte
index 0dbe9c7..43a0073 100644
--- a/src/Svrollbar.svelte
+++ b/src/Svrollbar.svelte
@@ -1,6 +1,7 @@
+<svelte:options accessors/>
 <script>
   import { fade } from 'svelte/transition'
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { createEventDispatcher, onDestroy, onMount, tick } from 'svelte'
 
   /**
    * the scrolling host element.
@@ -88,6 +89,10 @@
   let windowScrollEnabled = false
   let interacted = false
 
+  let thumbDown = false
+  let thumbResize = false
+  let thumbWheel = false
+
   $: teardownViewport = setupViewport(viewport)
   $: teardownContents = setupContents(contents)
   $: teardownTrack = setupTrack(vTrack)
@@ -104,8 +109,77 @@
   $: thumbHeight = wholeHeight > 0 ? (trackHeight / wholeHeight) * trackHeight : 0
   $: thumbTop = wholeHeight > 0 ? (scrollTop / wholeHeight) * trackHeight : 0
 
+
+
   $: scrollable = wholeHeight > trackHeight
   $: visible = scrollable && (alwaysVisible || initiallyVisible)
+  $: if(!visible) thumbResize = false
+  
+  /** updateHeight variable — ensuring only one while() loop at any given time */
+  let uH = 0
+  /**
+   * @type {(divElement: HTMLElement | undefined, minScrollHeight: HTMLElement | undefined) => void} 
+   * @param divElement - Will base the new height of this elements scrollheight.
+   * This may be wanted if you're working with absolute divs
+   * @param minScrollHeight - A reference to an element, which makes up for the minimum scrollheight.
+   * (computed: min-height + top,bottom margins + top,bottom border widths)
+  */
+  export async function updateHeight(
+    divElement = undefined,
+    minScrollHeight = undefined
+  ) {
+    if(divElement?.nodeType !== Node.ELEMENT_NODE)
+      divElement = undefined
+    
+    // Determining scroll height (basing a minimum height of `minScorllHeight`)
+    wholeHeight = (divElement || viewport).scrollHeight ?? 0
+    if(minScrollHeight) {
+      const computed = getComputedStyle(minScrollHeight)
+      const minHeight =
+        parseFloat(computed.minHeight)
+        + parseFloat(computed.marginTop)
+        + parseFloat(computed.marginBottom)
+        + parseFloat(computed.borderTopWidth)
+        + parseFloat(computed.borderBottomWidth)
+      if(wholeHeight < minHeight)
+        wholeHeight = minHeight
+    }
+    
+	  trackHeight = viewport.clientHeight - (marginTop + marginBottom) ?? 0
+    thumbHeight = wholeHeight > 0 ? (trackHeight / wholeHeight) * trackHeight : 0
+    
+    // Determining scroll position
+    scrollTop = viewport.scrollTop ?? 0
+    const maxScrollTop = wholeHeight - trackHeight
+    if(scrollTop > maxScrollTop)
+      scrollTop = maxScrollTop
+    thumbTop = wholeHeight > 0 ? (scrollTop / wholeHeight) * trackHeight : 0
+    
+    scrollable = wholeHeight > trackHeight
+
+    thumbResize = true
+
+    // This neat trick "saves" the state of the scroll.
+    if(!divElement) {
+      viewport.scrollBy({ top: -1, behavior: 'auto' })
+      await tick()
+      viewport.scrollBy({ top: 1, behavior: 'auto' })
+    }
+
+    if(scrollable) {
+      uH++
+      let _uH = uH
+      // Checking if thumbHeight has »transitioned« to new height
+      let parse = (v) => parseInt(parseFloat(v).toFixed(0))
+      let parsedHeight = parse(thumbHeight)
+      while(parse(getComputedStyle(vThumb).height) != parsedHeight) {
+        await new Promise(r => requestAnimationFrame(r))
+        if(uH != _uH) return
+      }
+      uH = 0
+    }
+    thumbResize = false
+  }
 
   function setupViewport(viewport) {
     if (!viewport) return
@@ -126,8 +200,7 @@
 
     const observer = new ResizeObserver((entries) => {
       for (const _entry of entries) {
-        wholeHeight = viewport?.scrollHeight ?? 0
-        trackHeight = viewport?.clientHeight - (marginTop + marginBottom) ?? 0
+        updateHeight()
       }
     })
 
@@ -206,6 +279,7 @@
 
   function onScroll() {
     if (!scrollable) return
+    if (thumbDown) return
 
     clearTimer()
     setupTimer()
@@ -213,6 +287,7 @@
     visible = alwaysVisible || (initiallyVisible && !interacted) || true
     scrollTop = viewport?.scrollTop ?? 0
 
+    thumbWheel = true
     interacted = true
 
     dispatch('show')
@@ -229,7 +304,9 @@
 
   function onThumbDown(event) {
     event.stopPropagation()
-    event.preventDefault()
+
+    thumbDown = true
+    thumbWheel = false
 
     startTop = viewport.scrollTop
     startY = event.changedTouches ? event.changedTouches[0].clientY : event.clientY
@@ -254,6 +331,8 @@
     event.stopPropagation()
     event.preventDefault()
 
+    thumbDown = false
+
     startTop = 0
     startY = 0
 
@@ -292,7 +371,11 @@
       class="v-thumb"
       style="height: {thumbHeight}px; top: {thumbTop}px"
       in:vThumbIn
-      out:vThumbOut />
+      out:vThumbOut
+    class:down={thumbDown}
+    class:wheel={thumbWheel}
+    class:resize={thumbResize}
+  />
   </div>
 {/if}
 
diff --git a/src/Svroller.svelte b/src/Svroller.svelte
index 234754a..118769b 100644
--- a/src/Svroller.svelte
+++ b/src/Svroller.svelte
@@ -1,3 +1,4 @@
+<svelte:options accessors/>
 <script>
   import { fade } from 'svelte/transition'
   import Svrollbar from './Svrollbar.svelte'
@@ -44,15 +45,20 @@
 
   let viewport
   let contents
+  
+  export let svrollbar
+  /** @type {(divElement: HTMLElement | undefined, minScrollHeight: HTMLElement | undefined) => void} */
+  export const updateHeight = async (...args) => svrollbar.updateHeight(...args)
 </script>
 
 <div class="svlr-wrapper" style="width: {width}; height: {height}">
   <div bind:this={viewport} class="svlr-viewport" style="width: {width}; height: {height}">
     <div bind:this={contents} class="svlr-contents">
-      <slot />
+      <slot {updateHeight} />
     </div>
   </div>
   <Svrollbar
+    bind:this={svrollbar}
     {viewport}
     {contents}
     {hideAfter}