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