Skip to content

Commit 205d7f8

Browse files
mrholekmrholek
committed
refactor(Calendar): improve selectors and classes
1 parent 6c68aa3 commit 205d7f8

File tree

1 file changed

+26
-23
lines changed

1 file changed

+26
-23
lines changed

‎js/src/calendar.js‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const CLASS_NAME_CALENDAR_CELL = 'calendar-cell'
6060
const CLASS_NAME_CALENDAR_CELL_INNER = 'calendar-cell-inner'
6161
const CLASS_NAME_CALENDAR_ROW = 'calendar-row'
6262
const CLASS_NAME_CALENDARS = 'calendars'
63+
const CLASS_NAME_SHOW_WEEK_NUMBERS = 'show-week-numbers'
6364

6465
const SELECTOR_BTN_DOUBLE_NEXT = '.btn-double-next'
6566
const SELECTOR_BTN_DOUBLE_PREV = '.btn-double-prev'
@@ -69,7 +70,9 @@ const SELECTOR_BTN_PREV = '.btn-prev'
6970
const SELECTOR_BTN_YEAR = '.btn-year'
7071
const SELECTOR_CALENDAR = '.calendar'
7172
const SELECTOR_CALENDAR_CELL = '.calendar-cell'
73+
const SELECTOR_CALENDAR_CELL_CLICKABLE = `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`
7274
const SELECTOR_CALENDAR_ROW = '.calendar-row'
75+
const SELECTOR_CALENDAR_ROW_CLICKABLE = `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`
7376
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="calendar"]'
7477

7578
const Default = {
@@ -259,11 +262,11 @@ class Calendar extends BaseComponent {
259262
let element = event.target
260263

261264
if (this._config.selectionType === 'week' && element.tabIndex === -1) {
262-
element = element.closest('tr[tabindex="0"]')
265+
element = element.closest(SELECTOR_CALENDAR_ROW_CLICKABLE)
263266
}
264267

265268
const list = SelectorEngine.find(
266-
this._config.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]',
269+
this._config.selectionType === 'week' ? SELECTOR_CALENDAR_ROW_CLICKABLE : SELECTOR_CALENDAR_CELL_CLICKABLE,
267270
this._element
268271
)
269272

@@ -292,7 +295,7 @@ class Calendar extends BaseComponent {
292295
const callback = key => {
293296
setTimeout(() => {
294297
const _list = SelectorEngine.find(
295-
'td[tabindex="0"], tr[tabindex="0"]',
298+
`${SELECTOR_CALENDAR_CELL_CLICKABLE}, ${SELECTOR_CALENDAR_ROW_CLICKABLE}`,
296299
SelectorEngine.find('.calendar', this._element).pop()
297300
)
298301

@@ -371,51 +374,51 @@ class Calendar extends BaseComponent {
371374
}
372375

373376
_addEventListeners() {
374-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
377+
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
375378
this._handleCalendarClick(event)
376379
})
377380

378-
EventHandler.on(this._element, EVENT_KEYDOWN, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
381+
EventHandler.on(this._element, EVENT_KEYDOWN, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
379382
this._handleCalendarKeydown(event)
380383
})
381384

382-
EventHandler.on(this._element, EVENT_MOUSEENTER, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
385+
EventHandler.on(this._element, EVENT_MOUSEENTER, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
383386
this._handleCalendarMouseEnter(event)
384387
})
385388

386-
EventHandler.on(this._element, EVENT_MOUSELEAVE, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, () => {
389+
EventHandler.on(this._element, EVENT_MOUSELEAVE, SELECTOR_CALENDAR_CELL_CLICKABLE, () => {
387390
this._handleCalendarMouseLeave()
388391
})
389392

390-
EventHandler.on(this._element, EVENT_FOCUS, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, event => {
393+
EventHandler.on(this._element, EVENT_FOCUS, SELECTOR_CALENDAR_CELL_CLICKABLE, event => {
391394
this._handleCalendarMouseEnter(event)
392395
})
393396

394-
EventHandler.on(this._element, EVENT_BLUR, `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`, () => {
397+
EventHandler.on(this._element, EVENT_BLUR, SELECTOR_CALENDAR_CELL_CLICKABLE, () => {
395398
this._handleCalendarMouseLeave()
396399
})
397400

398-
EventHandler.on(this._element, EVENT_CLICK_DATA_API, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
401+
EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
399402
this._handleCalendarClick(event)
400403
})
401404

402-
EventHandler.on(this._element, EVENT_KEYDOWN, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
405+
EventHandler.on(this._element, EVENT_KEYDOWN, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
403406
this._handleCalendarKeydown(event)
404407
})
405408

406-
EventHandler.on(this._element, EVENT_MOUSEENTER, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
409+
EventHandler.on(this._element, EVENT_MOUSEENTER, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
407410
this._handleCalendarMouseEnter(event)
408411
})
409412

410-
EventHandler.on(this._element, EVENT_MOUSELEAVE, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, () => {
413+
EventHandler.on(this._element, EVENT_MOUSELEAVE, SELECTOR_CALENDAR_ROW_CLICKABLE, () => {
411414
this._handleCalendarMouseLeave()
412415
})
413416

414-
EventHandler.on(this._element, EVENT_FOCUS, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, event => {
417+
EventHandler.on(this._element, EVENT_FOCUS, SELECTOR_CALENDAR_ROW_CLICKABLE, event => {
415418
this._handleCalendarMouseEnter(event)
416419
})
417420

418-
EventHandler.on(this._element, EVENT_BLUR, `${SELECTOR_CALENDAR_ROW}[tabindex="0"]`, () => {
421+
EventHandler.on(this._element, EVENT_BLUR, SELECTOR_CALENDAR_ROW_CLICKABLE, () => {
419422
this._handleCalendarMouseLeave()
420423
})
421424

@@ -600,14 +603,14 @@ class Calendar extends BaseComponent {
600603
<thead>
601604
<tr>
602605
${this._config.showWeekNumber ?
603-
`<th class="calendar-cell">
606+
`<th class="${CLASS_NAME_CALENDAR_CELL}">
604607
<div class="calendar-header-cell-inner">
605608
${this._config.weekNumbersLabel ?? ''}
606609
</div>
607610
</th>` : ''
608611
}
609612
${weekDays.map(({ date }) => (
610-
`<th class="calendar-cell" abbr="${date.toLocaleDateString(this._config.locale, { weekday: 'long' })}">
613+
`<th class="${CLASS_NAME_CALENDAR_CELL}" abbr="${date.toLocaleDateString(this._config.locale, { weekday: 'long' })}">
611614
<div class="calendar-header-cell-inner">
612615
${typeof this._config.weekdayFormat === 'string' ?
613616
date.toLocaleDateString(this._config.locale, { weekday: this._config.weekdayFormat }) :
@@ -629,7 +632,7 @@ class Calendar extends BaseComponent {
629632
)
630633
return (
631634
`<tr
632-
class="calendar-row ${this._config.selectionType === 'week' && this._sharedClassNames(date)}"
635+
class="${CLASS_NAME_CALENDAR_ROW} ${this._config.selectionType === 'week' && this._sharedClassNames(date)}"
633636
tabindex="${
634637
this._config.selectionType === 'week' &&
635638
week.days.some(day => day.month === 'current') &&
@@ -643,7 +646,7 @@ class Calendar extends BaseComponent {
643646
${week.days.map(({ date, month }) => (
644647
month === 'current' || this._config.showAdjacementDays ?
645648
`<td
646-
class="calendar-cell ${this._dayClassNames(date, month)}"
649+
class="${CLASS_NAME_CALENDAR_CELL} ${this._dayClassNames(date, month)}"
647650
tabindex="${
648651
this._config.selectionType === 'day' &&
649652
(month === 'current' || this._config.selectAdjacementDays) &&
@@ -666,7 +669,7 @@ class Calendar extends BaseComponent {
666669
const date = new Date(calendarDate.getFullYear(), (index * 3) + idx, 1)
667670
return (
668671
`<td
669-
class="calendar-cell ${this._sharedClassNames(date)}"
672+
class="${CLASS_NAME_CALENDAR_CELL} ${this._sharedClassNames(date)}"
670673
data-coreui-date="${date.toDateString()}"
671674
tabindex="${isDateDisabled(date, this._config.minDate, this._config.maxDate, this._config.disabledDates) ? -1 : 0}"
672675
${isDateSelected(date, this._startDate, this._endDate) ? 'aria-selected="true"' : ''}
@@ -685,7 +688,7 @@ class Calendar extends BaseComponent {
685688
const date = new Date(year, 0, 1)
686689
return (
687690
`<td
688-
class="calendar-cell ${this._sharedClassNames(date)}"
691+
class="${CLASS_NAME_CALENDAR_CELL} ${this._sharedClassNames(date)}"
689692
data-coreui-date="${date.toDateString()}"
690693
tabindex="${isDateDisabled(date, this._config.minDate, this._config.maxDate, this._config.disabledDates) ? -1 : 0}"
691694
${isDateSelected(date, this._startDate, this._endDate) ? 'aria-selected="true"' : ''}
@@ -711,7 +714,7 @@ class Calendar extends BaseComponent {
711714
}
712715

713716
if (this._config.showWeekNumber) {
714-
this._element.classList.add('show-week-numbers')
717+
this._element.classList.add(CLASS_NAME_SHOW_WEEK_NUMBERS)
715718
}
716719

717720
for (const [index, _] of Array.from({ length: this._config.calendars }).entries()) {
@@ -751,7 +754,7 @@ class Calendar extends BaseComponent {
751754
return
752755
}
753756

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

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

0 commit comments

Comments
 (0)