diff --git a/release-notes.md b/release-notes.md index ac0ef603f4..37653b3b94 100644 --- a/release-notes.md +++ b/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 diff --git a/styleguide/source/assets/js/modules/locationListing.js b/styleguide/source/assets/js/modules/locationListing.js index 2d0a0b75ad..9a625daad1 100644 --- a/styleguide/source/assets/js/modules/locationListing.js +++ b/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) { diff --git a/styleguide/source/assets/scss/03-organisms/_location-listing.scss b/styleguide/source/assets/scss/03-organisms/_location-listing.scss index f245b7abf9..b2ebf5de27 100644 --- a/styleguide/source/assets/scss/03-organisms/_location-listing.scss +++ b/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 { diff --git a/styleguide/source/assets/scss/06-theme/03-organisms/_location-listing.scss b/styleguide/source/assets/scss/06-theme/03-organisms/_location-listing.scss index 0e8f2f1613..657a2b4db7 100644 --- a/styleguide/source/assets/scss/06-theme/03-organisms/_location-listing.scss +++ b/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); } }