templates/js/library/month_range_slider_dropdown/month_range_slider_dropdown.js.twig line 1

Open in your IDE?
  1. class MonthRangeSliderDropdown extends Dropdown {
  2.     EVENTS = {
  3.         ON_CHANGE: 'onChange',
  4.         ON_APPLY_BUTTON_CLICK: 'onApplyButtonClick',
  5.         ON_DROPDOWN_SHOW: 'onDropdownShow',
  6.         ON_DROPDOWN_HIDE: 'onDropdownHide',
  7.     };
  9.     options = {
  10.         preventDropdownClose: true,
  11.         monthRangeSliderOptions: {
  12.             minDate: null,
  13.             maxDate: null,
  14.             startDate: null,
  15.             endDate: null,
  16.         },
  17.     };
  19.     /** @type {MonthRangeSlider|null} */
  20.     monthRangeSlider = null;
  21.     $applyButton = null;
  23.     constructor(dropdownElement, options = null) {
  24.         options = { preventDropdownClose: true, ...options };
  25.         super(dropdownElement, options);
  26.         this.options = { ...this.options, ...options };
  28.         this.$dropdown = $(dropdownElement);
  29.         this.$sliderContainer = this.$dropdown.find('.month-range-slider-wrapper').first();
  31.         if (!this.$sliderContainer.length) {
  32.             return;
  33.         }
  35.         const containerId = this.$sliderContainer.attr('id') || ('monthRange_' + Date.now());
  36.         if (!this.$sliderContainer.attr('id')) {
  37.             this.$sliderContainer.attr('id', containerId);
  38.         }
  40.         const parseDate = (str) => {
  41.             if (!str) return null;
  42.             const p = str.split('-');
  43.             return new Date(parseInt(p[0]), parseInt(p[1]) - 1, 1);
  44.         };
  46.         const sliderOpts = this.options.monthRangeSliderOptions || {};
  47.         const sliderMinDate = (sliderOpts.minDate instanceof Date ? sliderOpts.minDate : null)
  48.             || parseDate(this.$sliderContainer.data('min-date'))
  49.             || new Date(2025, 0, 1);
  50.         const sliderMaxDate = (sliderOpts.maxDate instanceof Date ? sliderOpts.maxDate : null)
  51.             || parseDate(this.$sliderContainer.data('max-date'))
  52.             || null;
  53.         const sliderStartDate = (sliderOpts.startDate instanceof Date ? sliderOpts.startDate : null)
  54.             || parseDate(this.$sliderContainer.data('start-date'))
  55.             || null;
  56.         const sliderEndDate = (sliderOpts.endDate instanceof Date ? sliderOpts.endDate : null)
  57.             || parseDate(this.$sliderContainer.data('end-date'))
  58.             || null;
  60.         this.monthRangeSlider = new MonthRangeSlider(
  61.             containerId,
  62.             sliderMinDate,
  63.             sliderMaxDate,
  64.             {
  65.                 onChange: (startDate, endDate) => {
  66.                     const lastDay = new Date(endDate.getFullYear(), endDate.getMonth() + 1, 0);
  67.                     const lastDayStr = `${lastDay.getDate().toString().padStart(2, '0')}.${(lastDay.getMonth() + 1).toString().padStart(2, '0')}.${lastDay.getFullYear()}`;
  68.                     this.setDropdownButtonText(
  69.                         `${startDate.getDate().toString().padStart(2, '0')}.${(startDate.getMonth() + 1).toString().padStart(2, '0')}.${startDate.getFullYear()} – ` + lastDayStr
  70.                     );
  71.                     this.eventDispatcher.emit(this.EVENTS.ON_CHANGE, {
  72.                         startDate,
  73.                         endDate,
  74.                         dropdownElement: this.dropdownElement,
  75.                     });
  76.                 },
  77.                 startDate: sliderStartDate,
  78.                 endDate: sliderEndDate,
  79.             }
  80.         );
  82.         this.$applyButton = this.$dropdown.find('.month-range-slider-apply-btn');
  83.         this.$applyButton.on('click', () => {
  84.             this.eventDispatcher.emit(this.EVENTS.ON_APPLY_BUTTON_CLICK, {
  85.                 startDate: this.monthRangeSlider.getStartDate(),
  86.                 endDate: this.monthRangeSlider.getEndDate(),
  87.                 dropdownElement: this.dropdownElement,
  88.             });
  89.         });
  90.     }
  92.     getStartDate() {
  93.         return this.monthRangeSlider ? this.monthRangeSlider.getStartDate() : null;
  94.     }
  96.     getEndDate() {
  97.         return this.monthRangeSlider ? this.monthRangeSlider.getEndDate() : null;
  98.     }
  99. }