JAVASCRIPT   43

map events scroller js

Guest on 8th June 2022 09:11:44 AM

  1. /**
  2.  * Makes sure we have all the required levels on the Tribe Object
  3.  *
  4.  * @since 4.7.7
  5.  *
  6.  * @type   {PlainObject}
  7.  */
  8. tribe.events = tribe.events || {};
  9. tribe.events.views = tribe.events.views || {};
  10.  
  11. /**
  12.  * Configures Map Events Scroller Object in the Global Tribe variable
  13.  *
  14.  * @since 4.7.7
  15.  *
  16.  * @type  {PlainObject}
  17.  */
  18. tribe.events.views.mapEventsScroller = {};
  19.  
  20. /**
  21.  * Initializes in a Strict env the code that manages the Event Views
  22.  *
  23.  * @since 4.7.7
  24.  *
  25.  * @param  {PlainObject} $   jQuery
  26.  * @param  {PlainObject} obj tribe.events.views.manager
  27.  *
  28.  * @return {void}
  29.  */
  30. ( function( $, obj ) {
  31.         'use strict';
  32.         var $document = $( document );
  33.  
  34.         /**
  35.          * Selectors used for configuration and setup
  36.          *
  37.          * @since 4.7.7
  38.          *
  39.          * @type {PlainObject}
  40.          */
  41.         obj.selectors = {
  42.                 mapEventCardsOuterWrapper: '[data-js="tribe-events-pro-map-event-cards-wrapper"]',
  43.                 mapEventCardsWrapper: '[data-js="tribe-events-pro-map-event-cards"]',
  44.                 mapEventCardsWrapperClass: '.tribe-events-pro-map__event-cards',
  45.                 mapEventCardsWrapperActiveClass: '.tribe-events-pro-map__event-cards--active',
  46.                 mapEventCardsPaneClass: '.tribe-events-pro-map__event-cards-scroll-pane',
  47.                 mapEventCardsSliderClass: '.tribe-events-pro-map__event-cards-scroll-slider',
  48.         };
  49.  
  50.         /**
  51.          * Scroll to element
  52.          *
  53.          * @since 5.0.0
  54.          *
  55.          * @param {jQuery} $container jQuery object of view container.
  56.          * @param {jQuery} $element   jQuery object of element to scroll to.
  57.          *
  58.          * @return {void}
  59.          */
  60.         obj.scrollTo = function( $container, $element ) {
  61.                 var $wrapper = $container.find( obj.selectors.mapEventCardsWrapperClass );
  62.                 var offset = $element.offset().top - $wrapper.offset().top + $wrapper.scrollTop();
  63.                 $wrapper.animate( { scrollTop: offset }, 'fast' );
  64.         };
  65.  
  66.         /**
  67.          * Check whether element is within view of scroller
  68.          *
  69.          * @since 5.0.0
  70.          *
  71.          * @param {jQuery} $container jQuery object of view container.
  72.          * @param {jQuery} $element   jQuery object of element to scroll to.
  73.          *
  74.          * @return {bool}
  75.          */
  76.         obj.isWithinScrollView = function( $container, $element ) {
  77.                 var $wrapper = $container.find( obj.selectors.mapEventCardsWrapperClass );
  78.  
  79.                 // calculate offsets, all offset should be positive or 0 to be within scroller view
  80.                 var offsetTop = $element.offset().top - $wrapper.offset().top;
  81.                 var offsetBottom = $wrapper.offset().top + $wrapper.height() - $element.offset().top - $element.height();
  82.  
  83.                 return 0 <= offsetTop && 0 <= offsetBottom;
  84.         };
  85.  
  86.         /**
  87.          * Deinitialize scroller
  88.          *
  89.          * @since 4.7.7
  90.          *
  91.          * @param {jQuery} $container jQuery object of view container.
  92.          *
  93.          * @return {void}
  94.          */
  95.         obj.deinitScroller = function( $container ) {
  96.                 $container
  97.                         .find( obj.selectors.mapEventCardsOuterWrapper )
  98.                         .nanoScroller( { destroy: true } );
  99.         };
  100.  
  101.         /**
  102.          * Initialize scroller
  103.          *
  104.          * @since 4.7.7
  105.          *
  106.          * @param {jQuery} $container jQuery object of view container.
  107.          *
  108.          * @return {void}
  109.          */
  110.         obj.initScroller = function( $container ) {
  111.                 $container
  112.                         .find( obj.selectors.mapEventCardsOuterWrapper )
  113.                         .nanoScroller( {
  114.                                 paneClass: obj.selectors.mapEventCardsPaneClass.className(),
  115.                                 sliderClass: obj.selectors.mapEventCardsSliderClass.className(),
  116.                                 contentClass: obj.selectors.mapEventCardsWrapperClass.className(),
  117.                                 iOSNativeScrolling: true,
  118.                                 alwaysVisible: false,
  119.                         } )
  120.                         .find( obj.selectors.mapEventCardsWrapper )
  121.                         .addClass( obj.selectors.mapEventCardsWrapperActiveClass.className() );
  122.         };
  123.  
  124.         /**
  125.          * Deinitialize map events scroller.
  126.          *
  127.          * @since 4.7.7
  128.          *
  129.          * @param  {Event}       event    event object for 'afterSetup.tribeEvents' event
  130.          * @param  {jqXHR}       jqXHR    Request object
  131.          * @param  {PlainObject} settings Settings that this request was made with
  132.          *
  133.          * @return {void}
  134.          */
  135.         obj.deinit = function( event, jqXHR, settings ) {
  136.                 var $container = event.data.container;
  137.                 obj.deinitScroller( $container );
  138.                 $container.off( 'beforeAjaxSuccess.tribeEvents', obj.deinit );
  139.         };
  140.  
  141.         /**
  142.          * Initialize map events scroller.
  143.          *
  144.          * @since 4.7.7
  145.          *
  146.          * @param {Event}   event      JS event triggered.
  147.          * @param {integer} index      jQuery.each index param from 'afterSetup.tribeEvents' event.
  148.          * @param {jQuery}  $container jQuery object of view container.
  149.          * @param {object}  data       data object passed from 'afterSetup.tribeEvents' event.
  150.          *
  151.          * @return {void}
  152.          */
  153.         obj.init = function( event, index, $container, data ) {
  154.                 if ( 'map' !== data.slug ) {
  155.                         return;
  156.                 }
  157.  
  158.                 obj.initScroller( $container );
  159.                 $container.on( 'beforeAjaxSuccess.tribeEvents', { container: $container }, obj.deinit );
  160.         };
  161.  
  162.         /**
  163.          * Handles the initialization of the map events scroller when Document is ready
  164.          *
  165.          * @since 4.7.7
  166.          *
  167.          * @return {void}
  168.          */
  169.         obj.ready = function() {
  170.                 $document.on( 'afterSetup.tribeEvents', tribe.events.views.manager.selectors.container, obj.init );
  171.         };
  172.  
  173.         // Configure on document ready
  174.         $( obj.ready );
  175. } )( jQuery, tribe.events.views.mapEventsScroller );

Raw Paste


Login or Register to edit or fork this paste. It's free.