Skip to content

Navigation Menu

Sign in
Appearance settings

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 45fc3a8

Browse filesBrowse files
mrholekmrholek
committed
refactor(Calendar): improve syntax
1 parent 43d73ca commit 45fc3a8
Copy full SHA for 45fc3a8

File tree

Expand file treeCollapse file tree

3 files changed

+79
-85
lines changed
Filter options
Expand file treeCollapse file tree

3 files changed

+79
-85
lines changed

‎js/src/calendar.js

Copy file name to clipboardExpand all lines: js/src/calendar.js
+67-82Lines 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

Copy file name to clipboardExpand all lines: scss/_calendar.scss
+11-3Lines 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

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