Skip to content

Commit 45fc3a8

Browse files
mrholekmrholek
committed
refactor(Calendar): improve syntax
1 parent 43d73ca commit 45fc3a8

File tree

3 files changed

+79
-85
lines changed

3 files changed

+79
-85
lines changed

‎js/src/calendar.js

Lines changed: 67 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
5959
const CLASS_NAME_CALENDAR_CELL = 'calendar-cell'
6060
const CLASS_NAME_CALENDAR_ROW = 'calendar-row'
6161
const CLASS_NAME_CALENDARS = 'calendars'
62+
const CLASS_NAME_SHOW_WEEK_NUMBERS = 'show-week-numbers'
6263

6364
const SELECTOR_BTN_DOUBLE_NEXT = '.btn-double-next'
6465
const SELECTOR_BTN_DOUBLE_PREV = '.btn-double-prev'
@@ -68,7 +69,9 @@ const SELECTOR_BTN_PREV = '.btn-prev'
6869
const SELECTOR_BTN_YEAR = '.btn-year'
6970
const SELECTOR_CALENDAR = '.calendar'
7071
const SELECTOR_CALENDAR_CELL = '.calendar-cell'
72+
const SELECTOR_CALENDAR_CELL_CLICKABLE = `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`
7173
const SELECTOR_CALENDAR_ROW = '.calendar-row'
74+
const SELECTOR_CALENDAR_ROW_CLICKABLE = `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`
7275
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="calendar"]'
7376

7477
const Default = {
@@ -128,26 +131,8 @@ class Calendar extends BaseComponent {
128131
super(element)
129132

130133
this._config = this._getConfig(config)
131-
this._calendarDate = convertToDateObject(
132-
this._config.calendarDate || this._config.startDate || this._config.endDate || new Date(), this._config.selectionType
133-
)
134-
this._startDate = convertToDateObject(this._config.startDate, this._config.selectionType)
135-
this._endDate = convertToDateObject(this._config.endDate, this._config.selectionType)
136-
this._hoverDate = null
137-
this._selectEndDate = this._config.selectEndDate
138-
139-
if (this._config.selectionType === 'day' || this._config.selectionType === 'week') {
140-
this._view = 'days'
141-
}
142-
143-
if (this._config.selectionType === 'month') {
144-
this._view = 'months'
145-
}
146-
147-
if (this._config.selectionType === 'year') {
148-
this._view = 'years'
149-
}
150-
134+
this._initializeDates()
135+
this._initializeView()
151136
this._createCalendar()
152137
this._addEventListeners()
153138
}
@@ -168,31 +153,37 @@ class Calendar extends BaseComponent {
168153
// Public
169154
update(config) {
170155
this._config = this._getConfig(config)
156+
this._initializeDates()
157+
this._initializeView()
158+
159+
// Clear the current calendar content
160+
this._element.innerHTML = ''
161+
this._createCalendar()
162+
}
163+
164+
// Private
165+
_initializeDates() {
166+
// Convert dates to date objects based on the selection type
171167
this._calendarDate = convertToDateObject(
172168
this._config.calendarDate || this._config.startDate || this._config.endDate || new Date(), this._config.selectionType
173169
)
174170
this._startDate = convertToDateObject(this._config.startDate, this._config.selectionType)
175171
this._endDate = convertToDateObject(this._config.endDate, this._config.selectionType)
176172
this._hoverDate = null
177173
this._selectEndDate = this._config.selectEndDate
174+
}
178175

179-
if (this._config.selectionType === 'day' || this._config.selectionType === 'week') {
180-
this._view = 'days'
181-
}
182-
183-
if (this._config.selectionType === 'month') {
184-
this._view = 'months'
185-
}
186-
187-
if (this._config.selectionType === 'year') {
188-
this._view = 'years'
176+
_initializeView() {
177+
const viewMap = {
178+
day: 'days',
179+
week: 'days',
180+
month: 'months',
181+
year: 'years'
189182
}
190183

191-
this._element.innerHTML = ''
192-
this._createCalendar()
184+
this._view = viewMap[this._config.selectionType] || 'days'
193185
}
194186

195-
// Private
196187
_getDate(target) {
197188
if (this._config.selectionType === 'week') {
198189
const firstCell = SelectorEngine.findOne(SELECTOR_CALENDAR_CELL, target.closest(SELECTOR_CALENDAR_ROW))
@@ -270,11 +261,11 @@ class Calendar extends BaseComponent {
270261
let element = event.target
271262

272263
if (this._config.selectionType === 'week' && element.tabIndex === -1) {
273-
element = element.closest(`${SELECTOR_CALENDAR_ROW}[tabindex="0"]`)
264+
element = element.closest(SELECTOR_CALENDAR_ROW_CLICKABLE)
274265
}
275266

276267
const list = SelectorEngine.find(
277-
this._config.selectionType === 'week' ? `${SELECTOR_CALENDAR_ROW}[tabindex="0"]` : `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`,
268+
this._config.selectionType === 'week' ? SELECTOR_CALENDAR_ROW_CLICKABLE : SELECTOR_CALENDAR_CELL_CLICKABLE,
278269
this._element
279270
)
280271

@@ -303,7 +294,7 @@ class Calendar extends BaseComponent {
303294
const callback = key => {
304295
setTimeout(() => {
305296
const _list = SelectorEngine.find(
306-
`${SELECTOR_CALENDAR_CELL}[tabindex="0"], ${SELECTOR_CALENDAR_ROW}[tabindex="0"]`,
297+
`${SELECTOR_CALENDAR_CELL_CLICKABLE}, ${SELECTOR_CALENDAR_ROW_CLICKABLE}`,
307298
SelectorEngine.find('.calendar', this._element).pop()
308299
)
309300

@@ -382,92 +373,86 @@ class Calendar extends BaseComponent {
382373
}
383374

384375
_addEventListeners() {
385-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
376+
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
386377
this._handleCalendarClick(event)
387378
})
388379

389-
EventHandler.on(this._element, EVENT_KEYDOWN, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
380+
EventHandler.on(this._element, EVENT_KEYDOWN, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
390381
this._handleCalendarKeydown(event)
391382
})
392383

393-
EventHandler.on(this._element, EVENT_MOUSEENTER, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
384+
EventHandler.on(this._element, EVENT_MOUSEENTER, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
394385
this._handleCalendarMouseEnter(event)
395386
})
396387

397-
EventHandler.on(this._element, EVENT_MOUSELEAVE, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, () => {
388+
EventHandler.on(this._element, EVENT_MOUSELEAVE, SELECTOR_CALENDAR_CELL_CLICKABLE, () => {
398389
this._handleCalendarMouseLeave()
399390
})
400391

401-
EventHandler.on(this._element, EVENT_FOCUS, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
392+
EventHandler.on(this._element, EVENT_FOCUS, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
402393
this._handleCalendarMouseEnter(event)
403394
})
404395

405-
EventHandler.on(this._element, EVENT_BLUR, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, () => {
396+
EventHandler.on(this._element, EVENT_BLUR, SELECTOR_CALENDAR_CELL_CLICKABLE, () => {
406397
this._handleCalendarMouseLeave()
407398
})
408399

409-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
400+
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
410401
this._handleCalendarClick(event)
411402
})
412403

413-
EventHandler.on(this._element, EVENT_KEYDOWN, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
404+
EventHandler.on(this._element, EVENT_KEYDOWN, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
414405
this._handleCalendarKeydown(event)
415406
})
416407

417-
EventHandler.on(this._element, EVENT_MOUSEENTER, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
408+
EventHandler.on(this._element, EVENT_MOUSEENTER, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
418409
this._handleCalendarMouseEnter(event)
419410
})
420411

421-
EventHandler.on(this._element, EVENT_MOUSELEAVE, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, () => {
412+
EventHandler.on(this._element, EVENT_MOUSELEAVE, SELECTOR_CALENDAR_ROW_CLICKABLE, () => {
422413
this._handleCalendarMouseLeave()
423414
})
424415

425-
EventHandler.on(this._element, EVENT_FOCUS, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
416+
EventHandler.on(this._element, EVENT_FOCUS, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
426417
this._handleCalendarMouseEnter(event)
427418
})
428419

429-
EventHandler.on(this._element, EVENT_BLUR, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, () => {
420+
EventHandler.on(this._element, EVENT_BLUR, SELECTOR_CALENDAR_ROW_CLICKABLE, () => {
430421
this._handleCalendarMouseLeave()
431422
})
432423

433424
// Navigation
434-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_PREV, event => {
435-
event.preventDefault()
436-
this._modifyCalendarDate(0, -1)
437-
})
438-
439-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_DOUBLE_PREV, event => {
440-
event.preventDefault()
441-
this._modifyCalendarDate(this._view === 'years' ? -10 : -1)
442-
})
443-
444-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_NEXT, event => {
445-
event.preventDefault()
446-
this._modifyCalendarDate(0, 1)
447-
})
448-
449-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_DOUBLE_NEXT, event => {
450-
event.preventDefault()
451-
this._modifyCalendarDate(this._view === 'years' ? 10 : 1)
452-
})
453-
454-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_MONTH, event => {
455-
event.preventDefault()
456-
this._view = 'months'
457-
this._updateCalendar()
458-
})
459-
460-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_BTN_YEAR, event => {
461-
event.preventDefault()
462-
this._view = 'years'
463-
this._updateCalendar()
464-
})
425+
this._addNavigationEventListeners()
465426

466427
EventHandler.on(this._element, EVENT_MOUSELEAVE, 'table', () => {
467428
EventHandler.trigger(this._element, EVENT_CALENDAR_MOUSE_LEAVE)
468429
})
469430
}
470431

432+
_addNavigationEventListeners() {
433+
const navigationSelectors = {
434+
[SELECTOR_BTN_PREV]: () => this._modifyCalendarDate(0, -1),
435+
[SELECTOR_BTN_DOUBLE_PREV]: () => this._modifyCalendarDate(this._view === 'years' ? -10 : -1),
436+
[SELECTOR_BTN_NEXT]: () => this._modifyCalendarDate(0, 1),
437+
[SELECTOR_BTN_DOUBLE_NEXT]: () => this._modifyCalendarDate(this._view === 'years' ? 10 : 1),
438+
[SELECTOR_BTN_MONTH]: () => {
439+
this._view = 'months'
440+
this._updateCalendar()
441+
},
442+
[SELECTOR_BTN_YEAR]: () => {
443+
this._view = 'years'
444+
this._updateCalendar()
445+
}
446+
}
447+
448+
for (const [selector, handler] of Object.entries(navigationSelectors)) {
449+
EventHandler.on(this._element, EVENT_CLICK_DATA_API, selector, event => {
450+
event.preventDefault()
451+
handler()
452+
})
453+
}
454+
}
455+
471456
_setCalendarDate(date) {
472457
this._calendarDate = date
473458

@@ -618,7 +603,7 @@ class Calendar extends BaseComponent {
618603
calendarTable.innerHTML = `
619604
${this._view === 'days' ? `
620605
<div class="calendar-row-group" role="rowgroup">
621-
<div class="calendar-header-row" role="row">
606+
<div class="calendar-row-header" role="row">
622607
${this._config.showWeekNumber ?
623608
`<div class="calendar-cell-week-number" role="cell">
624609
${this._config.weekNumbersLabel ?? ''}
@@ -725,7 +710,7 @@ class Calendar extends BaseComponent {
725710
}
726711

727712
if (this._config.showWeekNumber) {
728-
this._element.classList.add('show-week-numbers')
713+
this._element.classList.add(CLASS_NAME_SHOW_WEEK_NUMBERS)
729714
}
730715

731716
for (const [index, _] of Array.from({ length: this._config.calendars }).entries()) {
@@ -765,7 +750,7 @@ class Calendar extends BaseComponent {
765750
return
766751
}
767752

768-
const cells = SelectorEngine.find(`${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, this._element)
753+
const cells = SelectorEngine.find(SELECTOR_CALENDAR_CELL_CLICKABLE, this._element)
769754

770755
for (const cell of cells) {
771756
const date = new Date(Manipulator.getDataAttribute(cell, 'date'))

‎scss/_calendar.scss

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
--#{$prefix}calendar-cell-hover-bg: #{$calendar-cell-hover-bg};
2727
--#{$prefix}calendar-cell-focus-box-shadow: #{$calendar-cell-focus-box-shadow};
2828
--#{$prefix}calendar-cell-disabled-color: #{$calendar-cell-disabled-color};
29+
--#{$prefix}calendar-cell-disabled-selected-color: #{$calendar-cell-disabled-selected-color};
2930
--#{$prefix}calendar-cell-selected-color: #{$calendar-cell-selected-color};
3031
--#{$prefix}calendar-cell-selected-bg: #{$calendar-cell-selected-bg};
3132
--#{$prefix}calendar-cell-range-bg: #{$calendar-cell-range-bg};
@@ -122,7 +123,7 @@
122123
gap: var(--#{$prefix}calendar-rows-gap);
123124
}
124125

125-
.calendar-header-row,
126+
.calendar-row-header,
126127
.calendar-row {
127128
display: flex;
128129
}
@@ -270,7 +271,14 @@
270271
}
271272
}
272273

273-
&.selected:not(:hover) .calendar-cell-week-number {
274-
color: var(--#{$prefix}calendar-cell-header-selected-color);
274+
&.selected:not(:hover) {
275+
.calendar-cell-week-number {
276+
color: var(--#{$prefix}calendar-cell-header-selected-color);
277+
}
278+
279+
.calendar-cell.next,
280+
.calendar-cell.previous {
281+
color: var(--#{$prefix}calendar-cell-disabled-selected-color);
282+
}
275283
}
276284
}

‎scss/_variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2312,6 +2312,7 @@ $calendar-cell-week-number-font-weight: 600 !default;
23122312
$calendar-cell-hover-color: var(--#{$prefix}body-color) !default;
23132313
$calendar-cell-hover-bg: var(--#{$prefix}tertiary-bg) !default;
23142314
$calendar-cell-disabled-color: var(--#{$prefix}tertiary-color) !default;
2315+
$calendar-cell-disabled-selected-color: rgba($white, .5) !default;
23152316

23162317
$calendar-cell-focus-box-shadow: $focus-ring-box-shadow !default;
23172318

0 commit comments

Comments
 (0)