Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 43d73ca

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

File tree

3 files changed

+141
-157
lines changed
Filter options

3 files changed

+141
-157
lines changed

‎js/src/calendar.js

Copy file name to clipboardExpand all lines: js/src/calendar.js
+45-49Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.