JAVASCRIPT   21

datepicker pro js

Guest on 8th June 2022 09:10:39 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.9
  15.  *
  16.  * @type  {PlainObject}
  17.  */
  18. tribe.events.views.datepickerPro = {};
  19.  
  20. /**
  21.  * Initializes in a Strict env the code that manages the Event Views
  22.  *
  23.  * @since 4.7.9
  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.9
  38.          *
  39.          * @type {PlainObject}
  40.          */
  41.         obj.selectors = {
  42.                 datepickerDays: '.datepicker-days',
  43.                 datepickerDaysRow: '.datepicker-days tbody tr',
  44.                 datepickerDay: '.day',
  45.                 datepickerDayNotDisabled: '.day:not(.disabled)',
  46.                 activeClass: '.active',
  47.                 disabledClass: '.disabled',
  48.                 focusedClass: '.focused',
  49.                 hoveredClass: '.hovered',
  50.                 currentClass: '.current',
  51.         };
  52.  
  53.         /**
  54.          * Toggle hover class
  55.          *
  56.          * @since 4.7.9
  57.          *
  58.          * @param {Event} event event object for 'mouseenter' and 'mouseleave' events
  59.          *
  60.          * @return {void}
  61.          */
  62.         obj.toggleHoverClass = function( event ) {
  63.                 event.data.row.toggleClass( obj.selectors.hoveredClass.className() );
  64.         };
  65.  
  66.         /**
  67.          * Handle disabled day click event
  68.          *
  69.          * @since 4.7.9
  70.          *
  71.          * @param {Event} event event object for 'click' event
  72.          *
  73.          * @return {void}
  74.          */
  75.         obj.handleDisabledDayClick = function( event ) {
  76.                 event.data.row.find( obj.selectors.datepickerDayNotDisabled ).click();
  77.         };
  78.  
  79.         /**
  80.          * Bind datepicker row events
  81.          *
  82.          * @since 4.7.9
  83.          *
  84.          * @param {Event} event event object for 'show' event
  85.          *
  86.          * @return {void}
  87.          */
  88.         obj.bindRowEvents = function( event ) {
  89.                 var $datepickerDays = event.data.container.find( obj.selectors.datepickerDays );
  90.                 var config = { attributes: true, childList: true, subtree: true };
  91.  
  92.                 var $container = event.data.container;
  93.                 var $rows = $container.find( obj.selectors.datepickerDaysRow );
  94.  
  95.                 // for each row, add mouseenter and mouseleave event listeners to toggle hover class
  96.                 $rows.each( function( index, row ) {
  97.                         var $row = $( row );
  98.                         $row
  99.                                 .off( 'mouseenter mouseleave', obj.toggleHoverClass )
  100.                                 .on( 'mouseenter mouseleave', { row: $row }, obj.toggleHoverClass )
  101.                                 .find( obj.selectors.datepickerDay )
  102.                                 .each( function( index, day ) {
  103.                                         var $day = $( day );
  104.  
  105.                                         // if day has disabled class, allow clicking day to select first day of the week
  106.                                         if ( $day.hasClass( obj.selectors.disabledClass.className() ) ) {
  107.                                                 $day
  108.                                                         .off( 'click', obj.handleDisabledDayClick )
  109.                                                         .on( 'click', { row: $row }, obj.handleDisabledDayClick );
  110.                                         }
  111.  
  112.                                         // if day has focused class, add focused class to row
  113.                                         if ( $day.hasClass( obj.selectors.focusedClass.className() ) ) {
  114.                                                 $row.addClass( obj.selectors.focusedClass.className() );
  115.                                         }
  116.  
  117.                                         // if day has active class, add active class to row
  118.                                         if ( $day.hasClass( obj.selectors.activeClass.className() ) ) {
  119.                                                 $row.addClass( obj.selectors.activeClass.className() );
  120.                                         }
  121.  
  122.                                         // if day has current class, add current class to row
  123.                                         if ( $day.hasClass( obj.selectors.currentClass.className() ) ) {
  124.                                                 $row.addClass( obj.selectors.currentClass.className() );
  125.                                         }
  126.                                 } );
  127.                 } );
  128.  
  129.                 event.data.observer.observe( $datepickerDays[ 0 ], config );
  130.         };
  131.  
  132.         /**
  133.          * PRO tasks to run after deinitializing datepicker
  134.          *
  135.          * @since  4.7.9
  136.          *
  137.          * @param  {Event}       event    event object for 'afterDatepickerDeinit.tribeEvents' event
  138.          * @param  {jqXHR}       jqXHR    Request object
  139.          * @param  {PlainObject} settings Settings that this request was made with
  140.          *
  141.          * @return {void}
  142.          */
  143.         obj.afterDeinit = function( event, jqXHR, settings ) {
  144.                 var $container = event.data.container;
  145.                 $container
  146.                         .off( 'afterDatepickerDeinit.tribeEvents', obj.afterDeinit )
  147.                         .off( 'handleMutationMonthChange.tribeEvents', obj.bindRowEvents )
  148.                         .find( obj.selectors.input )
  149.                         .off( 'show', obj.bindRowEvents );
  150.         };
  151.  
  152.         /**
  153.          * PRO tasks to run before initializing datepicker
  154.          *
  155.          * @since  4.7.9
  156.          *
  157.          * @param  {Event}   event      event object for 'beforeDatepickerInit.tribeEvents' event
  158.          * @param  {integer} index      jQuery.each index param from 'beforeDatepickerInit.tribeEvents' event
  159.          * @param  {jQuery}  $container jQuery object of view container
  160.          * @param  {object}  data       data object passed from 'beforeDatepickerInit.tribeEvents' event
  161.          *
  162.          * @return {void}
  163.          */
  164.         obj.beforeInit = function( event, index, $container, data ) {
  165.                 var daysOfWeekDisabled = [];
  166.  
  167.                 if ( 'week' === data.slug ) {
  168.                         [ 0, 1, 2, 3, 4, 5, 6 ].forEach( function( value, index ) {
  169.                                 if ( data.start_of_week == value ) {
  170.                                         return;
  171.                                 }
  172.  
  173.                                 daysOfWeekDisabled.push( value );
  174.                         } );
  175.                 }
  176.  
  177.                 tribe.events.views.datepicker.options.daysOfWeekDisabled = daysOfWeekDisabled;
  178.         };
  179.  
  180.         /**
  181.          * PRO tasks to run after initializing datepicker
  182.          *
  183.          * @since  4.7.9
  184.          *
  185.          * @param  {Event}   event      event object for 'afterDatepickerInit.tribeEvents' event
  186.          * @param  {integer} index      jQuery.each index param from 'afterDatepickerInit.tribeEvents' event
  187.          * @param  {jQuery}  $container jQuery object of view container
  188.          * @param  {object}  data       data object passed from 'afterDatepickerInit.tribeEvents' event
  189.          *
  190.          * @return {void}
  191.          */
  192.         obj.afterInit = function( event, index, $container, data ) {
  193.                 if ( 'week' !== data.slug ) {
  194.                         return;
  195.                 }
  196.  
  197.                 $container
  198.                         .on( 'afterDatepickerDeinit.tribeEvents', { container: $container, viewSlug: data.slug }, obj.afterDeinit )
  199.                         .on( 'handleMutationMonthChange.tribeEvents', { container: $container, observer: tribe.events.views.datepicker.observer }, obj.bindRowEvents )
  200.                         .find( tribe.events.views.datepicker.selectors.input )
  201.                         .on( 'show', { container: $container, observer: tribe.events.views.datepicker.observer }, obj.bindRowEvents );
  202.         };
  203.  
  204.         /**
  205.          * Handles the initialization of the Datepicker when datepicker init events are triggered.
  206.          *
  207.          * @since 4.7.9
  208.          *
  209.          * @return {void}
  210.          */
  211.         obj.ready = function() {
  212.                 $document.on( 'beforeDatepickerInit.tribeEvents', tribe.events.views.manager.selectors.container, obj.beforeInit );
  213.                 $document.on( 'afterDatepickerInit.tribeEvents', tribe.events.views.manager.selectors.container, obj.afterInit );
  214.         };
  215.  
  216.         // Configure on document ready
  217.         $( obj.ready );
  218. } )( jQuery, tribe.events.views.datepickerPro );

Raw Paste

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