feat(search): scrollable search result

1. Handles keyboard events 2. Regains scroll position after closing of results due to blur/select event 3. Variation classes added such as scrolling, short, long, very short and very long
fomantic · May 14, 2020 · 7cca9f3 · 7cca9f3
1 parent 8bb477b
commit 7cca9f3
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 0 deletions.
diff --git a/src/definitions/modules/search.js b/src/definitions/modules/search.js
@@ -250,6 +250,25 @@ $.fn.search = function(parameters) {
             }
           }
         },
+        ensureVisible: function ensureVisible($el) {
+          var elTop, elBottom, resultsScrollTop, resultsHeight;
+
+          elTop = $el.position().top;
+          elBottom = elTop + $el.outerHeight(true);
+
+          resultsScrollTop = $results.scrollTop();
+          resultsHeight = $results.height()
+            parseInt($results.css('paddingTop'), 0) +
+            parseInt($results.css('paddingBottom'), 0);
+
+          if (elTop < 0) {
+            $results.scrollTop(resultsScrollTop + elTop);
+          }
+
+          else if (resultsHeight < elBottom) {
+            $results.scrollTop(resultsScrollTop + (elBottom - resultsHeight));
+          }
+        },
         handleKeyboard: function(event) {
           var
             // force selector refresh
@@ -301,6 +320,7 @@ $.fn.search = function(parameters) {
                   .closest($category)
                     .addClass(className.active)
               ;
+              module.ensureVisible($result.eq(newIndex));
               event.preventDefault();
             }
             else if(keyCode == keys.downArrow) {
@@ -319,6 +339,7 @@ $.fn.search = function(parameters) {
                   .closest($category)
                     .addClass(className.active)
               ;
+              module.ensureVisible($result.eq(newIndex));
               event.preventDefault();
             }
           }
@@ -952,6 +973,12 @@ $.fn.search = function(parameters) {
                   debug      : settings.debug,
                   verbose    : settings.verbose,
                   duration   : settings.duration,
+                  onShow     : function() {
+                    var $firstResult = $module.find(selector.result).eq(0);
+                    if($firstResult.length > 0) {
+                      module.ensureVisible($firstResult);
+                    }
+                  },
                   onComplete : function() {
                     callback();
                   },

diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less
@@ -390,6 +390,121 @@
            Variations
 *******************************/
 
+& when (@variationSearchScrolling),
+  (@variationSearchShort),
+  (@variationSearchLong) {
+
+  /*-------------------
+       Scrolling
+  --------------------*/
+
+  .ui.scrolling.search > .results,
+    .ui.search.long > .results,
+      .ui.search.short > .results {
+    overflow-x: hidden;
+    overflow-y: auto;
+    backface-visibility: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+
+& when (@variationSearchScrolling) {
+  @media only screen and (max-width : @largestMobileScreen) {
+    .ui.scrolling.search > .results {
+      max-height: @scrollingMobileMaxResultsHeight;
+    }
+  }
+  @media only screen and (min-width: @tabletBreakpoint) {
+    .ui.scrolling.search > .results {
+      max-height: @scrollingTabletMaxResultsHeight;
+    }
+  }
+  @media only screen and (min-width: @computerBreakpoint) {
+    .ui.scrolling.search > .results {
+      max-height: @scrollingComputerMaxResultsHeight;
+    }
+  }
+  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+    .ui.scrolling.search > .results {
+      max-height: @scrollingWidescreenMaxResultsHeight;
+    }
+  }
+}
+
+@media only screen and (max-width : @largestMobileScreen) {
+  & when (@variationSearchShort) {
+    .ui.search.short > .results {
+      max-height: @scrollingMobileMaxResultsHeight;
+    }
+    .ui.search[class*="very short"] > .results {
+      max-height: @scrollingMobileMaxResultsHeight * 0.75;
+    }
+  }
+  & when (@variationSearchLong) {
+    .ui.search.long > .results {
+      max-height: @scrollingMobileMaxResultsHeight * 2;
+    }
+    .ui.search[class*="very long"] > .results {
+      max-height: @scrollingMobileMaxResultsHeight * 3;
+    }
+  }
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+  & when (@variationSearchShort) {
+    .ui.search.short > .results {
+      max-height: @scrollingTabletMaxResultsHeight;
+    }
+    .ui.search[class*="very short"] > .results {
+      max-height: @scrollingTabletMaxResultsHeight * 0.75;
+    }
+  }
+  & when (@variationSearchLong) {
+    .ui.search.long > .results {
+      max-height: @scrollingTabletMaxResultsHeight * 2;
+    }
+    .ui.search[class*="very long"] > .results {
+      max-height: @scrollingTabletMaxResultsHeight * 3;
+    }
+  }
+}
+@media only screen and (min-width: @computerBreakpoint) {
+  & when (@variationSearchShort) {
+    .ui.search.short > .results {
+      max-height: @scrollingComputerMaxResultsHeight;
+    }
+    .ui.search[class*="very short"] > .results {
+      max-height: @scrollingComputerMaxResultsHeight * 0.75;
+    }
+  }
+  & when (@variationSearchLong) {
+    .ui.search.long > .results {
+      max-height: @scrollingComputerMaxResultsHeight * 2;
+    }
+    .ui.search[class*="very long"] > .results {
+      max-height: @scrollingComputerMaxResultsHeight * 3;
+    }
+  }
+}
+@media only screen and (min-width: @widescreenMonitorBreakpoint) {
+  & when (@variationSearchShort) {
+    .ui.search.short > .results {
+      max-height: @scrollingWidescreenMaxResultsHeight;
+    }
+    .ui.search[class*="very short"] > .results {
+      max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+    }
+  }
+  & when (@variationSearchLong) {
+    .ui.search.long > .results {
+      max-height: @scrollingWidescreenMaxResultsHeight * 2;
+    }
+    .ui.search[class*="very long"] > .results {
+      max-height: @scrollingWidescreenMaxResultsHeight * 3;
+    }
+  }
+}
+
 & when (@variationSearchAligned) {
   /*-------------------
        Left / Right

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -473,6 +473,9 @@
 @variationSearchLoading: true;
 @variationSearchAligned: true;
 @variationSearchFluid: true;
+@variationSearchShort: true;
+@variationSearchLong: true;
+@variationSearchScrolling: true;
 @variationSearchSizes: @variationAllSizes;
 
 /* Shape */

diff --git a/src/themes/default/modules/search.variables b/src/themes/default/modules/search.variables
@@ -56,6 +56,18 @@
 @resultTitleFontSize: @relativeMedium;
 @resultTitleColor: @darkTextColor;
 
+/* Result Scrolling */
+@scrollingMobileMaxResults: 4;
+@scrollingTabletMaxResults: 6;
+@scrollingComputerMaxResults: 8;
+@scrollingWidescreenMaxResults: 12;
+
+@scrollingResultHeight: (@resultVerticalPadding * 2) + @resultLineHeight;
+@scrollingMobileMaxResultsHeight: (@scrollingResultHeight * @scrollingMobileMaxResults);
+@scrollingTabletMaxResultsHeight: (@scrollingResultHeight * @scrollingTabletMaxResults);
+@scrollingComputerMaxResultsHeight: (@scrollingResultHeight * @scrollingComputerMaxResults);
+@scrollingWidescreenMaxResultsHeight: (@scrollingResultHeight * @scrollingWidescreenMaxResults);
+
 /* Description */
 @resultDescriptionFontSize: @relativeSmall;
 @resultDescriptionDistance: 0;