date-picker.js
1 year ago
duplicate-field.js
2 years ago
email-reports.js
2 years ago
notices.js
2 years ago
scroll-to-top.js
2 years ago
sticky-sidebar.js
2 years ago
support.js
2 years ago
user-roles.js
1 year ago
date-picker.js
240 lines
| 1 | const $ = jQuery; |
| 2 | |
| 3 | const DatePicker = { |
| 4 | datePicker: null, |
| 5 | selectingStartDate: true, |
| 6 | inputs: null, |
| 7 | prevMonth: null, |
| 8 | currentMonth: null, |
| 9 | fastTravelButtons: null, |
| 10 | days: null, |
| 11 | setup: function() { |
| 12 | var self = this; |
| 13 | this.datePicker = $('#iawp-date-picker'); |
| 14 | this.inputs = { |
| 15 | 'start': $('#iawp-start-date'), |
| 16 | 'end': $('#iawp-end-date') |
| 17 | }; |
| 18 | this.prevMonth = $('.iawp-calendar-month.iawp-previous'); |
| 19 | this.currentMonth = $('.iawp-calendar-month.iawp-current'); |
| 20 | this.fastTravelButtons = { |
| 21 | 'start': $('.iawp-fast-travel.prev-month'), |
| 22 | 'end': $('.iawp-fast-travel.current-month') |
| 23 | }; |
| 24 | this.days = $('.iawp-day:not(.empty)'); |
| 25 | |
| 26 | this.watchClicksOnDays(); |
| 27 | this.watchClicksOnRelativeRangeButtons(); |
| 28 | this.watchClicksOnNavigationButtons(); |
| 29 | this.watchClicksOnFastTravelButtons(); |
| 30 | this.watchHoverEventsOnDays(); |
| 31 | this.watchChangesToDate(); |
| 32 | $('#dates-button, #cancel-date').on('click', function() { |
| 33 | self.toggleModal(); |
| 34 | }); |
| 35 | $('.modal-background').on('click', function() { |
| 36 | if ($('#modal-dates').hasClass('show')) { |
| 37 | self.toggleModal(); |
| 38 | } |
| 39 | }); |
| 40 | this.datePicker.on('click', '#iawp-start-date, #iawp-end-date', function() { |
| 41 | if ($(this).hasClass('iawp-active')) |
| 42 | return; |
| 43 | self.toggleInputs(); |
| 44 | }); |
| 45 | $('#apply-date').on('click', function() { |
| 46 | self.apply(); |
| 47 | }); |
| 48 | }, |
| 49 | watchClicksOnDays: function(){ |
| 50 | var self = this; |
| 51 | this.datePicker.on('click', '.iawp-day', function() { |
| 52 | if (this.selectingStartDate && $(this).hasClass('iawp-start')) { |
| 53 | self.toggleInputs(); |
| 54 | return; |
| 55 | } |
| 56 | if (!this.selectingStartDate && $(this).hasClass('iawp-end')) { |
| 57 | self.toggleInputs(); |
| 58 | return; |
| 59 | } |
| 60 | self.changeRangeCustomDates($(this)); |
| 61 | }); |
| 62 | }, |
| 63 | watchClicksOnRelativeRangeButtons: function() { |
| 64 | var self = this; |
| 65 | $('.iawp-date-range-buttons button').on('click', function() { |
| 66 | if ($(this).hasClass('active')) |
| 67 | return; |
| 68 | |
| 69 | self.changeRangeRelativeDates($(this)); |
| 70 | }); |
| 71 | }, |
| 72 | watchClicksOnNavigationButtons: function() { |
| 73 | var self = this; |
| 74 | this.datePicker.on('click', '.iawp-prev-month-nav', function() { |
| 75 | self.navigateMonths(false); |
| 76 | }); |
| 77 | this.datePicker.on('click', '.iawp-next-month-nav', function() { |
| 78 | self.navigateMonths(true); |
| 79 | }); |
| 80 | }, |
| 81 | watchClicksOnFastTravelButtons: function() { |
| 82 | var self = this; |
| 83 | $('.iawp-fast-travel').on('click', function() { |
| 84 | var start = $(this).hasClass('prev-month') ? true : false; |
| 85 | self.fastTravel($(this).data('month'), start); |
| 86 | }); |
| 87 | }, |
| 88 | watchHoverEventsOnDays: function() { |
| 89 | var self = this; |
| 90 | this.datePicker.on('mouseenter', '.iawp-day', function() { |
| 91 | if ($(this).hasClass('in-range') || $(this).hasClass('iawp-start') || $(this).hasClass('iawp-end')) |
| 92 | return; |
| 93 | self.updateInputBasedOnHover($(this)); |
| 94 | }); |
| 95 | }, |
| 96 | watchChangesToDate: function() { |
| 97 | var self = this; |
| 98 | for (let input in this.inputs){ |
| 99 | this.inputs[input].on('date-changed', function() { |
| 100 | self.updateFastTravelButtons(); |
| 101 | self.updateInRange(); |
| 102 | $(this).hasClass('iawp-start-date') ? self.toggleInputs() : self.toggleInputs(true); |
| 103 | }); |
| 104 | } |
| 105 | }, |
| 106 | changeRangeCustomDates: function(day) { |
| 107 | if (this.selectingStartDate) { |
| 108 | this.changeStartOrEndDate('start', day); |
| 109 | } else { |
| 110 | this.changeStartOrEndDate('end', day); |
| 111 | } |
| 112 | $('.iawp-date-range-buttons .active').removeClass('active'); |
| 113 | this.datePicker.data('relative-range', '') |
| 114 | }, |
| 115 | changeStartOrEndDate: function(bound, clicked) { |
| 116 | $('.iawp-day.iawp-' + bound).removeClass('iawp-'+ bound); |
| 117 | var day = clicked.addClass('iawp-'+ bound); |
| 118 | this.inputs[bound].val(day.data('display-date')); |
| 119 | this.inputs[bound].data('date', day.data('date')).trigger('date-changed'); |
| 120 | if (bound == 'start') { |
| 121 | if (new Date(this.inputs[bound].data('date')) > new Date(this.inputs[this.oppositeBound(bound)].data('date'))) { |
| 122 | this.changeStartOrEndDate('end', day); |
| 123 | } |
| 124 | } else { |
| 125 | if (new Date(this.inputs[bound].data('date')) < new Date(this.inputs[this.oppositeBound(bound)].data('date'))) { |
| 126 | this.changeStartOrEndDate('start', day); |
| 127 | } |
| 128 | } |
| 129 | }, |
| 130 | changeRangeRelativeDates: function(button) { |
| 131 | $('.iawp-date-range-buttons .active').removeClass('active'); |
| 132 | button.addClass('active'); |
| 133 | this.datePicker.data('relative-range', button.data('relative-range-id')) |
| 134 | this.changeStartAndEndDate(button); |
| 135 | }, |
| 136 | changeStartAndEndDate: function(button) { |
| 137 | const bounds = ['start', 'end']; |
| 138 | for (let key in bounds) { |
| 139 | const bound = bounds[key]; |
| 140 | var formatted = button.data('relative-range-' + bound); |
| 141 | var display = button.data('display-date-' + bound); |
| 142 | var elemClass = 'iawp-'+ bound; |
| 143 | $('.'+ elemClass).removeClass(elemClass); |
| 144 | $('.iawp-day[data-date="'+ formatted +'"').addClass(elemClass); |
| 145 | this.inputs[bound].val(display); |
| 146 | this.inputs[bound].data('date', formatted).trigger('date-changed'); |
| 147 | } |
| 148 | }, |
| 149 | updateInRange: function() { |
| 150 | var self = this; |
| 151 | $('.iawp-day.in-range').removeClass('in-range'); |
| 152 | this.days.each(function() { |
| 153 | if (new Date($(this).data('date')) >= new Date(self.inputs.end.data('date'))) |
| 154 | return; |
| 155 | |
| 156 | if (new Date($(this).data('date')) > new Date(self.inputs.start.data('date'))) { |
| 157 | $(this).addClass('in-range'); |
| 158 | } |
| 159 | }); |
| 160 | }, |
| 161 | updateInputBasedOnHover: function(day) { |
| 162 | day.data('date') < this.inputs.start.data('date') ? this.toggleInputs(true) : this.toggleInputs(false); |
| 163 | }, |
| 164 | toggleInputs: function(forceStart) { |
| 165 | if (forceStart) { |
| 166 | this.inputs.start.addClass('iawp-active'); |
| 167 | this.inputs.end.removeClass('iawp-active'); |
| 168 | this.selectingStartDate = true; |
| 169 | } else if (forceStart === false) { |
| 170 | this.inputs.start.removeClass('iawp-active'); |
| 171 | this.inputs.end.addClass('iawp-active'); |
| 172 | this.selectingStartDate = false; |
| 173 | } else { |
| 174 | this.inputs.start.toggleClass('iawp-active'); |
| 175 | this.inputs.end.toggleClass('iawp-active'); |
| 176 | this.selectingStartDate = !this.selectingStartDate; |
| 177 | } |
| 178 | }, |
| 179 | toggleModal: function() { |
| 180 | $('#modal-dates').toggleClass('show'); |
| 181 | $('#iawp-layout').toggleClass('modal-open'); |
| 182 | }, |
| 183 | oppositeBound: function(bound) { |
| 184 | return bound == 'start' ? 'end' : 'start'; |
| 185 | }, |
| 186 | navigateMonths: function(next) { |
| 187 | if (next) { |
| 188 | this.currentMonth.removeClass('iawp-current'); |
| 189 | this.currentMonth = this.currentMonth.next().addClass('iawp-current'); |
| 190 | this.prevMonth.removeClass('iawp-previous'); |
| 191 | this.prevMonth = this.prevMonth.next().addClass('iawp-previous'); |
| 192 | } else { |
| 193 | this.prevMonth.removeClass('iawp-previous'); |
| 194 | this.prevMonth = this.prevMonth.prev().addClass('iawp-previous'); |
| 195 | this.currentMonth.removeClass('iawp-current'); |
| 196 | this.currentMonth = this.currentMonth.prev().addClass('iawp-current'); |
| 197 | } |
| 198 | }, |
| 199 | fastTravel: function(month, start) { |
| 200 | var targetMonth = $('.iawp-calendar-month[data-month="'+ month +'"]'); |
| 201 | |
| 202 | if (start && targetMonth.next().length === 0) |
| 203 | targetMonth = targetMonth.prev(); |
| 204 | if (!start && targetMonth.prev().length === 0) |
| 205 | targetMonth = targetMonth.next(); |
| 206 | |
| 207 | $('.iawp-calendar-month').removeClass('iawp-previous iawp-current'); |
| 208 | if (start) { |
| 209 | this.prevMonth = targetMonth.addClass('iawp-previous'); |
| 210 | this.currentMonth = targetMonth.next().addClass('iawp-current'); |
| 211 | } else { |
| 212 | this.currentMonth = targetMonth.addClass('iawp-current'); |
| 213 | this.prevMonth = targetMonth.prev().addClass('iawp-previous'); |
| 214 | } |
| 215 | }, |
| 216 | updateFastTravelButtons: function() { |
| 217 | this.fastTravelButtons.start.data('month', $('#iawp-start-date').data('date').slice(0, -3)); |
| 218 | this.fastTravelButtons.end.data('month', $('#iawp-end-date').data('date').slice(0, -3)); |
| 219 | }, |
| 220 | apply: function() { |
| 221 | let detail = {} |
| 222 | const relativeRange = this.datePicker.data('relative-range'); |
| 223 | if (relativeRange != '') { |
| 224 | detail = {relativeRangeId: relativeRange} |
| 225 | } else { |
| 226 | detail = { |
| 227 | exactStart: this.inputs.start.data('date'), |
| 228 | exactEnd: this.inputs.end.data('date') |
| 229 | } |
| 230 | } |
| 231 | this.toggleModal(); |
| 232 | document.dispatchEvent( |
| 233 | new CustomEvent('iawp:changeDates', { |
| 234 | detail |
| 235 | }) |
| 236 | ) |
| 237 | } |
| 238 | } |
| 239 | |
| 240 | export { DatePicker }; |