Fix: Maintain search container position when scrolling or closing dra…

…wer (fixes #68) (#69)
adaptlearning · Apr 3, 2023 · f8e202f · f8e202f
1 parent f617737
commit f8e202f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 89 deletions.
diff --git a/js/adapt-contrib-glossaryView.js b/js/adapt-contrib-glossaryView.js
@@ -19,11 +19,9 @@ export default class GlossaryView extends Backbone.View {
 
   initialize() {
     this.itemViews = null;
-    this.prevScrollPos = 0;
     this.isSearchActive = false;
     this.listenTo(Adapt, 'remove drawer:closed', this.remove);
     this.setupModel();
-    this.onScroll = _.debounce(this.onScroll.bind(this), 200);
     this.onInputTextBoxValueChange = _.debounce(this.onInputTextBoxValueChange.bind(this), 200);
     _.defer(this.render.bind(this));
   }
@@ -102,38 +100,9 @@ export default class GlossaryView extends Backbone.View {
         _group: group
       }));
     });
-    this.prevScrollPos = $('.js-drawer-holder').scrollTop();
-    $('.js-drawer-holder').on('scroll', this.onScroll);
     this.$('.js-glossary-index-link').on('click', this.scrollToPosition);
   }
 
-  onScroll() {
-    const currentScrollPos = $('.js-drawer-holder').scrollTop();
-    const indexDisplay = this.$('.js-glossary-index-container').css('display');
-    const isIndexVisible = indexDisplay !== 'none';
-
-    if (!isIndexVisible) {
-      this.prevScrollPos = currentScrollPos;
-      return;
-    }
-
-    if (this.prevScrollPos > currentScrollPos) {
-      this.$('.js-glossary-index-container')
-        .addClass('scrolling-up')
-        .removeClass('scrolling-down');
-      const indexOuterHeight = this.$('.js-glossary-index-container').outerHeight(true);
-      this.$('.js-glossary-items-container').css('top', indexOuterHeight + 'px');
-      return;
-    }
-
-    this.$('.js-glossary-index-container')
-      .addClass('scrolling-down')
-      .removeClass('scrolling-up');
-    this.$('.js-glossary-items-container').css('top', '0');
-
-    this.prevScrollPos = currentScrollPos;
-  }
-
   scrollToPosition(event) {
     if (event && event.preventDefault) event.preventDefault();
     const selector = $(event.currentTarget).attr('href');
@@ -180,52 +149,14 @@ export default class GlossaryView extends Backbone.View {
   }
 
   postRender() {
-    const widthExclScrollbar = $('.drawer').prop('clientWidth');
-    $('.drawer__toolbar').css({
-      width: widthExclScrollbar + 'px',
-      'z-index': '2'
-    });
-
     this.listenTo(Adapt, {
       'drawer:openedItemView': this.remove,
       'drawer:triggerCustomView': this.remove
     });
 
-    this.configureContainers();
     this.checkForTermToShow();
   }
 
-  configureContainers() {
-    const isSearchEnabled = this.model.get('_isSearchEnabled');
-    const isIndexEnabled = this.model.get('_isIndexEnabled');
-    const glossaryWidth = this.$('.js-glossary-inner').width();
-    const searchOuterHeight = this.$('.js-glossary-search-container').outerHeight(true);
-
-    if (isSearchEnabled) {
-      this.$('.js-glossary-search-container')
-        .css('width', glossaryWidth);
-      this.$('.js-glossary-item-not-found').css('top', searchOuterHeight + 'px');
-    }
-
-    if (isIndexEnabled) {
-      this.$('.js-glossary-index-container')
-        .css('margin-top', searchOuterHeight)
-        .css('width', glossaryWidth);
-    }
-
-    if (isSearchEnabled && !isIndexEnabled) {
-      this.$('.js-glossary-items-container').css('top', searchOuterHeight + 'px');
-    }
-
-    if (isSearchEnabled && isIndexEnabled) {
-      this.$('.js-glossary-items-container').css('top', 'unset');
-    }
-
-    if (this.isSearchActive && isIndexEnabled) {
-      this.$('.js-glossary-items-container').css('top', searchOuterHeight);
-    }
-  }
-
   onInputTextBoxValueChange() {
     this.showItemNotFoundMessage(false);
     this.isSearchActive = true;
@@ -239,14 +170,13 @@ export default class GlossaryView extends Backbone.View {
 
     if (searchResults) {
       const filteredItems = this.getFilteredGlossaryItems(searchItem, shouldSearchInDescription);
-      this.$('.js-glossary-alert').html(Handlebars.compile(searchItemsAlert)({ filteredItems: filteredItems }));
+      this.$('.js-glossary-alert').html(Handlebars.compile(searchItemsAlert)({ filteredItems }));
       this.showFilterGlossaryItems(filteredItems);
     } else {
       this.isSearchActive = false;
       this.showGlossaryItems(true);
     }
 
-    this.configureContainers();
     $('.js-drawer-holder').animate({ scrollTop: '0' });
   };
 

diff --git a/less/glossary.less b/less/glossary.less
@@ -1,4 +1,14 @@
+.drawer__toolbar {
+  z-index: 2;
+}
+
 .glossary {
+  &__header {
+    position: sticky;
+    top: 0rem;
+    z-index: 1;
+  }
+
   &__textbox-container {
     position: relative;
   }
@@ -23,14 +33,14 @@
   &__search-icon {
     position: absolute;
     top: 50%;
-    right: @item-padding / 2;
+    right: @item-padding * 2;
     padding: 0;
     .transform(translateY(-50%));
     background-color: transparent;
 
     .dir-rtl & {
       right: inherit;
-      left: @item-padding / 2;
+      left: @item-padding * 2;
     }
   }
 
@@ -42,12 +52,6 @@
     .icon-cross;
   }
 
-  &__search-container {
-    position: fixed;
-    top: @navigation-height;
-    z-index: 2;
-  }
-
   &__index-container {
     position: relative;
     z-index: 1;
@@ -56,16 +60,6 @@
     justify-content: space-around;
   }
 
-  &__index-container.scrolling-up {
-    position: fixed;
-    z-index: 1;
-  }
-
-  &__index-container.scrolling-down {
-    position: relative;
-    z-index: 0;
-  }
-
   &__items-container,
   &__item-not-found {
     position: relative;