Skip to content

Commit 43d73ca

Browse files
mrholekmrholek
committed
refactor(Calendar): migrate from table to div
1 parent 1d73beb commit 43d73ca

File tree

3 files changed

+141
-157
lines changed

3 files changed

+141
-157
lines changed

‎js/src/calendar.js

Lines changed: 45 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
5757
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
5858

5959
const CLASS_NAME_CALENDAR_CELL = 'calendar-cell'
60-
const CLASS_NAME_CALENDAR_CELL_INNER = 'calendar-cell-inner'
6160
const CLASS_NAME_CALENDAR_ROW = 'calendar-row'
6261
const CLASS_NAME_CALENDARS = 'calendars'
6362

@@ -204,7 +203,7 @@ class Calendar extends BaseComponent {
204203
}
205204

206205
_handleCalendarClick(event) {
207-
const target = event.target.classList.contains(CLASS_NAME_CALENDAR_CELL_INNER) ? event.target.parentElement : event.target
206+
const { target } = event
208207
const date = this._getDate(target)
209208
const cloneDate = new Date(date)
210209
const index = Manipulator.getDataAttribute(target.closest(SELECTOR_CALENDAR), 'calendar-index')
@@ -271,11 +270,11 @@ class Calendar extends BaseComponent {
271270
let element = event.target
272271

273272
if (this._config.selectionType === 'week' && element.tabIndex === -1) {
274-
element = element.closest('tr[tabindex="0"]')
273+
element = element.closest(`${SELECTOR_CALENDAR_ROW}[tabindex="0"]`)
275274
}
276275

277276
const list = SelectorEngine.find(
278-
this._config.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]',
277+
this._config.selectionType === 'week' ? `${SELECTOR_CALENDAR_ROW}[tabindex="0"]` : `${SELECTOR_CALENDAR_CELL}[tabindex="0"]`,
279278
this._element
280279
)
281280

@@ -304,7 +303,7 @@ class Calendar extends BaseComponent {
304303
const callback = key => {
305304
setTimeout(() => {
306305
const _list = SelectorEngine.find(
307-
'td[tabindex="0"], tr[tabindex="0"]',
306+
`${SELECTOR_CALENDAR_CELL}[tabindex="0"], ${SELECTOR_CALENDAR_ROW}[tabindex="0"]`,
308307
SelectorEngine.find('.calendar', this._element).pop()
309308
)
310309

@@ -356,7 +355,7 @@ class Calendar extends BaseComponent {
356355
}
357356

358357
_handleCalendarMouseEnter(event) {
359-
const target = event.target.classList.contains(CLASS_NAME_CALENDAR_CELL_INNER) ? event.target.parentElement : event.target
358+
const { target } = event
360359
const date = this._getDate(target)
361360

362361
if (isDateDisabled(date, this._config.minDate, this._config.maxDate, this._config.disabledDates)) {
@@ -612,32 +611,31 @@ class Calendar extends BaseComponent {
612611
const listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4)
613612
const weekDays = monthDetails[0].days
614613

615-
const calendarTable = document.createElement('table')
614+
const calendarTable = document.createElement('div')
615+
calendarTable.classList.add('calendar-table')
616+
calendarTable.role = 'table'
617+
616618
calendarTable.innerHTML = `
617619
${this._view === 'days' ? `
618-
<thead>
619-
<tr>
620+
<div class="calendar-row-group" role="rowgroup">
621+
<div class="calendar-header-row" role="row">
620622
${this._config.showWeekNumber ?
621-
`<th class="calendar-cell">
622-
<div class="calendar-header-cell-inner">
623-
${this._config.weekNumbersLabel ?? ''}
624-
</div>
625-
</th>` : ''
623+
`<div class="calendar-cell-week-number" role="cell">
624+
${this._config.weekNumbersLabel ?? ''}
625+
</div>` : ''
626626
}
627627
${weekDays.map(({ date }) => (
628-
`<th class="calendar-cell" abbr="${date.toLocaleDateString(this._config.locale, { weekday: 'long' })}">
629-
<div class="calendar-header-cell-inner">
628+
`<div class="calendar-cell-header" role="cell" abbr="${date.toLocaleDateString(this._config.locale, { weekday: 'long' })}">
630629
${typeof this._config.weekdayFormat === 'string' ?
631630
date.toLocaleDateString(this._config.locale, { weekday: this._config.weekdayFormat }) :
632631
date
633632
.toLocaleDateString(this._config.locale, { weekday: 'long' })
634633
.slice(0, this._config.weekdayFormat)}
635-
</div>
636-
</th>`
634+
</div>`
637635
)).join('')}
638-
</tr>
639-
</thead>` : ''}
640-
<tbody>
636+
</div>
637+
</div>` : ''}
638+
<div class="calendar-row-group" role="rowgroup">
641639
${this._view === 'days' ? monthDetails.map(week => {
642640
const date = convertToDateObject(
643641
week.weekNumber === 0 ?
@@ -646,8 +644,9 @@ class Calendar extends BaseComponent {
646644
this._config.selectionType
647645
)
648646
return (
649-
`<tr
650-
class="calendar-row ${this._config.selectionType === 'week' && this._sharedClassNames(date)}"
647+
`<div
648+
class="${CLASS_NAME_CALENDAR_ROW} ${this._config.selectionType === 'week' && this._sharedClassNames(date)}"
649+
role="row"
651650
tabindex="${
652651
this._config.selectionType === 'week' &&
653652
week.days.some(day => day.month === 'current') &&
@@ -656,12 +655,13 @@ class Calendar extends BaseComponent {
656655
${isDateSelected(date, this._startDate, this._endDate) ? 'aria-selected="true"' : ''}
657656
>
658657
${this._config.showWeekNumber ?
659-
`<th class="calendar-cell-week-number">${week.weekNumber === 0 ? 53 : week.weekNumber}</td>` : ''
658+
`<div class="calendar-cell-week-number" role="cell">${week.weekNumber === 0 ? 53 : week.weekNumber}</div>` : ''
660659
}
661660
${week.days.map(({ date, month }) => (
662661
month === 'current' || this._config.showAdjacementDays ?
663-
`<td
664-
class="calendar-cell ${this._dayClassNames(date, month)}"
662+
`<div
663+
role="cell"
664+
class="${CLASS_NAME_CALENDAR_CELL} ${this._dayClassNames(date, month)}"
665665
tabindex="${
666666
this._config.selectionType === 'day' &&
667667
(month === 'current' || this._config.selectAdjacementDays) &&
@@ -670,53 +670,49 @@ class Calendar extends BaseComponent {
670670
${isDateSelected(date, this._startDate, this._endDate) ? 'aria-selected="true"' : ''}
671671
data-coreui-date="${date}"
672672
>
673-
<div class="calendar-cell-inner day">
674-
${date.toLocaleDateString(this._config.locale, { day: 'numeric' })}
675-
</div>
676-
</td>` :
677-
'<td></td>'
678-
)).join('')}</tr>`
673+
${date.toLocaleDateString(this._config.locale, { day: 'numeric' })}
674+
</div>` :
675+
'<div></div>'
676+
)).join('')}</div>`
679677
)
680678
}).join('') : ''}
681679
${this._view === 'months' ? listOfMonths.map((row, index) => (
682-
`<tr>
680+
`<div class="${CLASS_NAME_CALENDAR_ROW}" role="row">
683681
${row.map((month, idx) => {
684682
const date = new Date(calendarDate.getFullYear(), (index * 3) + idx, 1)
685683
return (
686-
`<td
687-
class="calendar-cell ${this._sharedClassNames(date)}"
684+
`<div
685+
class="${CLASS_NAME_CALENDAR_CELL} ${this._sharedClassNames(date)}"
688686
data-coreui-date="${date.toDateString()}"
687+
role="cell"
689688
tabindex="${isDateDisabled(date, this._config.minDate, this._config.maxDate, this._config.disabledDates) ? -1 : 0}"
690689
${isDateSelected(date, this._startDate, this._endDate) ? 'aria-selected="true"' : ''}
691690
>
692-
<div class="calendar-cell-inner month">
693-
${month}
694-
</div>
695-
</td>`
691+
${month}
692+
</div>`
696693
)
697694
}).join('')}
698-
</tr>`
695+
</div>`
699696
)).join('') : ''}
700697
${this._view === 'years' ? listOfYears.map(row => (
701-
`<tr>
698+
`<div class="${CLASS_NAME_CALENDAR_ROW}" role="row">
702699
${row.map(year => {
703700
const date = new Date(year, 0, 1)
704701
return (
705-
`<td
706-
class="calendar-cell ${this._sharedClassNames(date)}"
702+
`<div
703+
class="${CLASS_NAME_CALENDAR_CELL} ${this._sharedClassNames(date)}"
707704
data-coreui-date="${date.toDateString()}"
705+
role="cell"
708706
tabindex="${isDateDisabled(date, this._config.minDate, this._config.maxDate, this._config.disabledDates) ? -1 : 0}"
709707
${isDateSelected(date, this._startDate, this._endDate) ? 'aria-selected="true"' : ''}
710708
>
711-
<div class="calendar-cell-inner year">
712-
${year}
713-
</div>
714-
</td>`
709+
${year}
710+
</div>`
715711
)
716712
}).join('')}
717-
</tr>`
713+
</div>`
718714
)).join('') : ''}
719-
</tbody>
715+
</div>
720716
`
721717
calendarPanelEl.append(navigationElement, calendarTable)
722718

0 commit comments

Comments
 (0)