MET-6236 Scroll Behaviour Tweaks

europeana · Nov 19, 2024 · 726bcfa · 726bcfa
1 parent 63e7e57
commit 726bcfa
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 11 deletions.
diff --git a/projects/sandbox/src/app/debias/debias.component.scss b/projects/sandbox/src/app/debias/debias.component.scss
@@ -8,7 +8,7 @@ $transition-time-open: 0.3s;
 
 .debias {
   color: $gray-light;
-  height: calc($modal-content-max-height - 2em);
+  height: calc($modal-content-max-height - 2rem);
   margin: -1rem -1rem -1rem -1rem;
   position: relative;
 
@@ -140,7 +140,7 @@ $transition-time-open: 0.3s;
   height: 100%;
   margin-bottom: -1em;
   margin-right: -100%;
-  max-height: $modal-content-max-height;
+  max-height: calc($modal-content-max-height - 2rem);
   overflow-x: hidden;
   overflow-y: auto;
   padding: 1em 1.5em;
@@ -222,6 +222,6 @@ $transition-time-open: 0.3s;
   &.active {
     left: $debias-header-width;
     opacity: 0.5;
-    z-index: 1;
+    z-index: 3;
   }
 }
diff --git a/projects/sandbox/src/app/skip-arrows/skip-arrows.component.scss b/projects/sandbox/src/app/skip-arrows/skip-arrows.component.scss
@@ -1,8 +1,4 @@
-@import 'shared-styles/assets/sass/pandora/settings/metis-variables-modal';
-
 .skip-arrow-pane {
-  max-height: $modal-content-max-height;
-  min-height: 20vh;
   overflow-y: auto;
   overflow-x: hidden;
 

diff --git a/projects/sandbox/src/app/skip-arrows/skip-arrows.component.spec.ts b/projects/sandbox/src/app/skip-arrows/skip-arrows.component.spec.ts
@@ -21,6 +21,16 @@ describe('SkipArrowsComponent', () => {
   const getFakeElementList = (): QueryList<ElementRef> => {
     return Object.assign(new QueryList(), {
       _results: [
+        {
+          nativeElement: {
+            offsetTop: 100,
+            parentNode: {
+              scrollTop: 10,
+              offsetHeight: 10,
+              scrollHeight: 100
+            }
+          }
+        },
         {
           nativeElement: {
             offsetTop: 100,
@@ -58,10 +68,10 @@ describe('SkipArrowsComponent', () => {
   }));
 
   it('should get the scrollable parent', () => {
-    expect(component.getScrollableParent()).toBeFalsy();
-    component.elementList = getFakeElementList();
     expect(component.getScrollableParent()).toBeFalsy();
     component.ready = true;
+    expect(component.getScrollableParent()).toBeFalsy();
+    component.elementList = getFakeElementList();
     expect(component.getScrollableParent()).toBeTruthy();
   });
 
@@ -74,11 +84,47 @@ describe('SkipArrowsComponent', () => {
   });
 
   it('should determine if scrollDown is possible', () => {
-    expect(component.canScrollDown()).toBeFalsy();
+    component.ready = true;
     component.elementList = getFakeElementList();
+    component.viewerVisibleIndex = -2;
+
+    let scrollHeight = 0;
+    let scrollTop = 0;
+    let offsetHeight = 0;
+
+    spyOn(component, 'getScrollableParent').and.callFake((_: number) => {
+      return ({
+        scrollHeight: scrollHeight,
+        scrollTop: scrollTop,
+        offsetHeight: offsetHeight
+      } as unknown) as HTMLElement;
+    });
+
     expect(component.canScrollDown()).toBeFalsy();
-    component.ready = true;
+
+    scrollHeight = 100;
     expect(component.canScrollDown()).toBeTruthy();
+
+    scrollTop = 100;
+    expect(component.canScrollDown()).toBeFalsy();
+
+    scrollTop = 50;
+    expect(component.canScrollDown()).toBeTruthy();
+
+    offsetHeight = 50;
+    expect(component.canScrollDown()).toBeFalsy();
+
+    offsetHeight = 25;
+    expect(component.canScrollDown()).toBeTruthy();
+
+    scrollTop = 75;
+    expect(component.canScrollDown()).toBeFalsy();
+
+    scrollTop = 0;
+    expect(component.canScrollDown()).toBeTruthy();
+
+    component.viewerVisibleIndex = 0;
+    expect(component.canScrollDown()).toBeFalsy();
   });
 
   it('should skip to the item', () => {

diff --git a/projects/sandbox/src/app/skip-arrows/skip-arrows.component.ts b/projects/sandbox/src/app/skip-arrows/skip-arrows.component.ts
@@ -74,6 +74,10 @@ export class SkipArrowsComponent extends SubscriptionManager implements AfterVie
   }
 
   canScrollDown(): boolean {
+    if (this.elementList && this.elementList.length <= this.viewerVisibleIndex + 1) {
+      return false;
+    }
+
     const scrollEl = this.getScrollableParent();
     if (scrollEl && scrollEl.scrollHeight > 0) {
       return scrollEl.scrollTop + scrollEl.offsetHeight < scrollEl.scrollHeight;

diff --git a/projects/sandbox/src/assets/sass/debias.scss b/projects/sandbox/src/assets/sass/debias.scss
@@ -1,3 +1,10 @@
+@import 'shared-styles/assets/sass/pandora/settings/metis-variables-modal';
+
+.skip-arrow-pane {
+  max-height: calc($modal-content-max-height - 2rem);
+  min-height: 20vh;
+}
+
 .external-link-debias::after {
   content: '';
   height: 0.875em;