From 6d54e08d7baee8a2fef0da66ce4f4e99a0e1d495 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Fri, 6 Jan 2023 09:06:40 +0700
Subject: [PATCH] feat(web): visibility offset cancellation after manual scroll
 to corresponding area

---
 .../engine/osk/src/banner/suggestionBanner.ts | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/web/src/engine/osk/src/banner/suggestionBanner.ts b/web/src/engine/osk/src/banner/suggestionBanner.ts
index 08cb0dc34e..dc5b02261e 100644
--- a/web/src/engine/osk/src/banner/suggestionBanner.ts
+++ b/web/src/engine/osk/src/banner/suggestionBanner.ts
@@ -33,7 +33,7 @@ export class BannerSuggestion {
   private _paddingWidth: number;
 
   private fontFamily?: string;
-  private rtl: boolean = false;
+  public readonly rtl: boolean;
 
   private _suggestion: Suggestion;
 
@@ -43,7 +43,7 @@ export class BannerSuggestion {
 
   constructor(index: number, isRTL: boolean) {
     this.index = index;
-    this.rtl = isRTL;
+    this.rtl = isRTL ?? false;
 
     this.constructRoot();
 
@@ -524,8 +524,8 @@ class SuggestionExpandContractAnimation {
   private scrollContainer: HTMLElement | null;
   private option: BannerSuggestion;
 
-  private collapsedScrollLeft: number;
-  private originalScrollLeft: number;
+  private collapsedScrollOffset: number;
+  private rootScrollOffset: number;
 
   private startTimestamp: number;
   private pendingAnimation: number;
@@ -535,12 +535,20 @@ class SuggestionExpandContractAnimation {
   constructor(scrollContainer: HTMLElement, option: BannerSuggestion, forRTL: boolean) {
     this.scrollContainer = scrollContainer;
     this.option = option;
-    this.collapsedScrollLeft = scrollContainer.scrollLeft;
-    this.originalScrollLeft  = scrollContainer.scrollLeft;
+    this.collapsedScrollOffset = scrollContainer.scrollLeft;
+    this.rootScrollOffset  = scrollContainer.scrollLeft;
   }
 
   public setBaseScroll(val: number) {
-    this.collapsedScrollLeft = val;
+    this.collapsedScrollOffset = val;
+
+    // If the user has shifted right to make more of the element visible, we can remove part of the corresponding
+    // scrolling offset permanently; the user's taken action to view that area.
+    if(!this.option.rtl) {
+      if(val < this.rootScrollOffset) {
+        this.rootScrollOffset = val;
+      }
+    } // TODO:  else for the RTL adjustment instead.
 
     // Attempt to sync the banner-scroller's offset update with that of the
     // animation for expansion and collapsing.
@@ -570,7 +578,7 @@ class SuggestionExpandContractAnimation {
     const maxWidthToCounterscroll = this.option.currentWidth - this.option.collapsedWidth;
 
     // How much space existed to the left of the collapsed option in its original position.  May be negative.
-    const originalCounterscrollBuffer = this.option.div.offsetLeft - this.originalScrollLeft;
+    const originalCounterscrollBuffer = this.option.div.offsetLeft - this.rootScrollOffset;
     // TODO:  RTL version
 
     // Only allow a negative buffer in the final positioning if it already existed.
@@ -580,8 +588,8 @@ class SuggestionExpandContractAnimation {
     // Base position for scrollLeft clamped within std element scroll bounds, including:
     // - an adjustment to cover the extra width from expansion
     // - preserving the base expected overflow levels
-    const unclampedExpandingScrollOffset = Math.max(this.collapsedScrollLeft + maxWidthToCounterscroll, 0) - srcCounterscrollOverflow;
-    const srcUnclampedExpandingScrollOffset = Math.max(this.originalScrollLeft + maxWidthToCounterscroll, 0) - srcCounterscrollOverflow;
+    const unclampedExpandingScrollOffset = Math.max(this.collapsedScrollOffset + maxWidthToCounterscroll, 0) - srcCounterscrollOverflow;
+    const srcUnclampedExpandingScrollOffset = Math.max(this.rootScrollOffset + maxWidthToCounterscroll, 0) - srcCounterscrollOverflow;
     // TODO:  RTL versions / calculations + logic
 
     // // Huh - first bugless version didn't actually end up using this.