toggle js-location-listing class at layout breakpoint

release-notes.md

@@ -17,8 +17,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ### Changed
 
+
 ### Removed
 - DP-5914 - Remove extra padding on callout links
+- DP-5525 - Disable location listing scrolling for mobile
 
 ### Migrate Path
 

styleguide/source/assets/js/modules/locationListing.js

@@ -2,6 +2,7 @@ import sticky from "../helpers/sticky.js";
 import listings from "../helpers/listing.js";
 
 export default function (window,document,$,undefined) {
+
   // Active state classes for location listing rows.
   let activeClass = 'is-active',
     markerActiveClass = 'is-marker-bounce',
@@ -22,7 +23,6 @@ export default function (window,document,$,undefined) {
       $pagination = $el.find('.js-pagination'),
       $locationFilter = $el.find('.js-location-filters');
 
-    sticky.init($mapCol);
 
     // Get the location listing component data (this could be replaced with an api)
     const rawData = ma.locationListing[i]; // Data object created in @organisms/by-author/location-listing.twig
@@ -36,44 +36,65 @@ export default function (window,document,$,undefined) {
     // Listen for Google Map api library load completion, with geocode, geometry, and places libraries
     $(document).on('ma:LibrariesLoaded:GoogleMaps', function(){
       // Set up click handler for location listing rows.
-      $el.on('click', row, function (e) {
-        let index = $(e.currentTarget).index();
-        // trigger map to recenter on this item based on it's index.
-        $map.trigger('ma:GoogleMap:MapRecenter', index);
-        // mark this link as active
-        $el.find(activeLocationListingRow).removeClass(activeClass);
-        $(e.currentTarget).addClass(activeClass); // in case the event is triggered on a child element.
-        // focus on the map - mainly for mobile when it is stacked
-        let position = $map.offset().top;
-        $("html,body").stop(true, true).animate({scrollTop: position}, '750');
-      });
+      const onLocationListingAction = () => {
+        $el.on('click', row, function (e) {
+          let index = $(e.currentTarget).index();
+          // trigger map to recenter on this item based on it's index.
+          $map.trigger('ma:GoogleMap:MapRecenter', index);
+          // mark this link as active
+          $el.find(activeLocationListingRow).removeClass(activeClass);
+          $(e.currentTarget).addClass(activeClass); // in case the event is triggered on a child element.
+          // focus on the map - mainly for mobile when it is stacked
+          let position = $map.offset().top;
+          $("html,body").stop(true, true).animate({scrollTop: position}, '750');
+        });
 
-      // Set up hover / focus event for listing rows.
-      $el.on('mouseenter focusin', row, function (e) {
-        // remove active state from previously selected list item
-        $el.find(activeLocationListingRow).removeClass(activeClass);
+        // Set up hover / focus event for listing rows.
+        $el.on('mouseenter focusin', row, function (e) {
+          // remove active state from previously selected list item
+          $el.find(activeLocationListingRow).removeClass(activeClass);
 
-        // Don't bounce the marker again if focus moves within the same listing.
-        if ($(e.currentTarget).hasClass(markerActiveClass)) {
-          return false;
-        }
+          // Don't bounce the marker again if focus moves within the same listing.
+          if ($(e.currentTarget).hasClass(markerActiveClass)) {
+            return false;
+          }
 
-        // Remove "focus" class from any "focused" location listing row.
-        // ("focus" vs focus because hover doesn't bring focus to element.)
-        $el.find(markerActiveLocationListingRow).removeClass(markerActiveClass);
+          // Remove "focus" class from any "focused" location listing row.
+          // ("focus" vs focus because hover doesn't bring focus to element.)
+          $el.find(markerActiveLocationListingRow).removeClass(markerActiveClass);
 
-        // Focus moved into listing for first time, so flag with class, recenter + bounce marker.
-        $(e.currentTarget).addClass(markerActiveClass);
-        let index = $(e.currentTarget).index();
+          // Focus moved into listing for first time, so flag with class, recenter + bounce marker.
+          $(e.currentTarget).addClass(markerActiveClass);
+          let index = $(e.currentTarget).index();
 
-        // Trigger map to recenter on this item and make the marker bounce
-        $map.trigger('ma:GoogleMap:MarkerBounce', index);
-      });
+          // Trigger map to recenter on this item and make the marker bounce
+          $map.trigger('ma:GoogleMap:MarkerBounce', index);
+        });
 
-      // Remove "focus" class from any "focused" location listing row.
-      $el.on('mouseleave', row, function (e) {
-        $el.find(markerActiveLocationListingRow).removeClass(markerActiveClass);
-      });
+        // Remove "focus" class from any "focused" location listing row.
+        $el.on('mouseleave', row, function (e) {
+          $el.find(markerActiveLocationListingRow).removeClass(markerActiveClass);
+        });
+      }
+
+      const disableLocationListingAction = () => {
+        $el.off('click');
+        $el.off('mouseenter focusin')
+        $el.off('mouseleave')
+      }
+
+      //check window size to render location listing actions, disable actions when map and listing are stacked for mobile
+      const checkWidth = () => {
+        let w = $(window).width()+15;
+        if(w > 910) {
+          sticky.init($mapCol);
+          onLocationListingAction();
+        }else{
+          disableLocationListingAction();
+        }
+      }
+      checkWidth();
+      $(window).resize(checkWidth);
 
       // Handle location listings form interaction (triggered by locationFilters.js).
       $locationFilter.on('ma:LocationFilter:FormSubmitted', function (e, formValues) {

styleguide/source/assets/scss/03-organisms/_location-listing.scss

@@ -23,7 +23,7 @@
     @media ($bp-large-min){
       min-height: 100vh;
       order: 2;
-      width: 40%;    
+      width: 40%;
     }
   }
 
@@ -92,8 +92,10 @@
 
       &.is-active,
       &:hover {
+        @media ($bp-large-min) {
         border-top-width: 3px;
         padding-top: 28px;
+        }
       }
 
       &__link {

styleguide/source/assets/scss/06-theme/03-organisms/_location-listing.scss

@@ -18,9 +18,9 @@
 
     &.is-active,
     &:hover {
-      border-top-color: $c-theme-tertiary;
 
       @media ($bp-large-min) {
+        border-top-color: $c-theme-tertiary;
         box-shadow: 0 0.25rem 0.5rem rgba(1, 1, 1, 0.25);
       }
     }