Skip to content

Commit 0c73505

Browse files
wuda-iowuda-io
authored
Merge pull request #608 from gselderslaghs/pickers-modal-display-plugin
Pickers modal display plugin
2 parents 49d9ff2 + cdc9206 commit 0c73505

File tree

8 files changed

+331
-98
lines changed

8 files changed

+331
-98
lines changed

‎components/datepicker/_datepicker.scss‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
1-
/* Modal */
2-
// @removed since v2.2.1
3-
/*.datepicker-modal {
4-
max-width: 325px;
5-
// @removed since v2.2.1-dev regarding Material M3 standards
6-
min-width: 300px;
7-
max-height: none;
8-
}*/
1+
@use './mixins.module.scss' as *;
92

103
.datepicker-container {
114
display: flex;
125
flex-direction: column;
136
max-width: 325px;
147
padding: 0;
15-
background-color: var(--md-sys-color-surface);
8+
background-color: var(--md-sys-color-inverse-on-surface);
169
}
1710

1811
.datepicker-controls {
@@ -34,8 +27,8 @@
3427
text-align: center;
3528

3629
&:focus {
37-
border-bottom: none;
38-
background-color: var(--md-sys-color-primary-container);
30+
color: var(--md-sys-color-primary);
31+
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
3932
}
4033

4134
&::selection {
@@ -70,6 +63,12 @@
7063
.month-next {
7164
display: inline-flex;
7265
align-items: center;
66+
67+
@include btn($height: 49px);
68+
69+
&:focus {
70+
background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
71+
}
7372
}
7473

7574
.month-prev > svg,
@@ -261,3 +260,9 @@
261260
color: var(--md-sys-color-error);
262261
}
263262

263+
/* Display modes */
264+
.datepicker-modal {
265+
max-width: calc(325px + var(--modal-padding)*2);
266+
max-height: none;
267+
background-color: var(--md-sys-color-inverse-on-surface);
268+
}

‎components/datepicker/datepicker.ts‎

Lines changed: 82 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Utils } from '../../src/utils';
22
import { BaseOptions, Component, I18nOptions, InitElements, MElement } from '../../src/component';
33
import { FormSelect } from '../text-fields/select';
44
import { DockedDisplayPlugin } from '../../src/dockedDisplayPlugin';
5+
import { ModalDisplayPlugin } from '../../src/modalDisplayPlugin';
56

67
export interface DateI18nOptions extends I18nOptions {
78
previousMonth: string;
@@ -293,7 +294,7 @@ const _defaults: DatepickerOptions = {
293294
displayPlugin: null,
294295
displayPluginOptions: null,
295296
onConfirm: null,
296-
onCancel: null
297+
onCancel: null,
297298
};
298299

299300
export class Datepicker extends Component<DatepickerOptions> {
@@ -321,7 +322,7 @@ export class Datepicker extends Component<DatepickerOptions> {
321322
calendars: [{ month: number; year: number }];
322323
private _y: number;
323324
private _m: number;
324-
private displayPlugin: DockedDisplayPlugin;
325+
private displayPlugin: DockedDisplayPlugin | ModalDisplayPlugin;
325326
private footer: HTMLElement;
326327
static _template: string;
327328

@@ -348,47 +349,8 @@ export class Datepicker extends Component<DatepickerOptions> {
348349
this._setupVariables();
349350
this._insertHTMLIntoDOM();
350351
this._setupEventHandlers();
351-
352-
if (!this.options.defaultDate) {
353-
this.options.defaultDate = new Date(Date.parse(this.el.value));
354-
}
355-
356-
const defDate = this.options.defaultDate;
357-
if (Datepicker._isDate(defDate)) {
358-
if (this.options.setDefaultDate) {
359-
this.setDate(defDate, true);
360-
this.setInputValue(this.el, defDate);
361-
} else {
362-
this.gotoDate(defDate);
363-
}
364-
} else {
365-
this.gotoDate(new Date());
366-
}
367-
if (this.options.isDateRange) {
368-
this.multiple = true;
369-
const defEndDate = this.options.defaultEndDate;
370-
if (Datepicker._isDate(defEndDate)) {
371-
if (this.options.setDefaultEndDate) {
372-
this.setDate(defEndDate, true, true);
373-
this.setInputValue(this.endDateEl, defEndDate);
374-
}
375-
}
376-
}
377-
if (this.options.isMultipleSelection) {
378-
this.multiple = true;
379-
this.dates = [];
380-
this.dateEls = [];
381-
this.dateEls.push(el);
382-
}
383-
if (this.options.displayPlugin) {
384-
if (this.options.displayPlugin === 'docked')
385-
this.displayPlugin = DockedDisplayPlugin.init(
386-
this.el,
387-
this.containerEl,
388-
this.options.displayPluginOptions
389-
);
390-
if (this.options.openByDefault) this.displayPlugin.show();
391-
}
352+
if (this.options.displayPlugin) this._setupDisplayPlugin();
353+
this._pickerSetup();
392354
}
393355

394356
static get defaults() {
@@ -511,12 +473,6 @@ export class Datepicker extends Component<DatepickerOptions> {
511473
}
512474
}
513475

514-
/*if (this.options.showClearBtn) {
515-
this.clearBtn.style.visibility = '';
516-
this.clearBtn.innerText = this.options.i18n.clear;
517-
}
518-
this.doneBtn.innerText = this.options.i18n.done;
519-
this.cancelBtn.innerText = this.options.i18n.cancel;*/
520476
Utils.createButton(
521477
this.footer,
522478
this.options.i18n.clear,
@@ -541,7 +497,6 @@ export class Datepicker extends Component<DatepickerOptions> {
541497
optEl instanceof HTMLElement ? optEl : (document.querySelector(optEl) as HTMLElement);
542498
this.options.container.append(this.containerEl);
543499
} else {
544-
//this.containerEl.before(this.el);
545500
const appendTo = !this.endDateEl ? this.el : this.endDateEl;
546501
appendTo.parentElement.after(this.containerEl);
547502
}
@@ -719,6 +674,38 @@ export class Datepicker extends Component<DatepickerOptions> {
719674
);
720675
}
721676

677+
/**
678+
* Display plugin setup.
679+
*/
680+
_setupDisplayPlugin() {
681+
const displayPluginOptions = {
682+
...this.options.displayPluginOptions,
683+
...{
684+
onOpen: () => {
685+
document.querySelectorAll('.select-dropdown').forEach((e: HTMLInputElement) => {
686+
e.tabIndex = 0;
687+
});
688+
},
689+
onClose: () => {
690+
document.querySelectorAll('.select-dropdown').forEach((e: HTMLInputElement) => {
691+
e.tabIndex = -1;
692+
});
693+
}
694+
}
695+
}
696+
697+
if (this.options.displayPlugin === 'docked') this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, displayPluginOptions);
698+
if (this.options.displayPlugin === 'modal') {
699+
this.displayPlugin = ModalDisplayPlugin.init(this.el, this.containerEl, {
700+
...displayPluginOptions,
701+
...{ classList: ['datepicker-modal'] }
702+
});
703+
this.footer.remove();
704+
this.footer = this.displayPlugin.footer;
705+
}
706+
if (this.options.openByDefault) this.displayPlugin.show();
707+
}
708+
722709
/**
723710
* Renders the date in the modal head section.
724711
*/
@@ -1159,12 +1146,6 @@ export class Datepicker extends Component<DatepickerOptions> {
11591146
this.el.addEventListener('keydown', this._handleInputKeydown);
11601147
this.el.addEventListener('change', this._handleInputChange);
11611148
this.calendarEl.addEventListener('click', this._handleCalendarClick);
1162-
/* this.doneBtn.addEventListener('click', this._confirm);
1163-
this.cancelBtn.addEventListener('click', this._cancel);
1164-
1165-
if (this.options.showClearBtn) {
1166-
this.clearBtn.addEventListener('click', this._handleClearClick);
1167-
}*/
11681149
}
11691150

11701151
_setupVariables() {
@@ -1176,11 +1157,6 @@ export class Datepicker extends Component<DatepickerOptions> {
11761157
this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
11771158
this.yearTextEl = this.containerEl.querySelector('.year-text');
11781159
this.dateTextEl = this.containerEl.querySelector('.date-text');
1179-
/* if (this.options.showClearBtn) {
1180-
this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
1181-
}
1182-
this.doneBtn = this.containerEl.querySelector('.datepicker-done');
1183-
this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');*/
11841160
this.footer = this.containerEl.querySelector('.datepicker-footer');
11851161

11861162
this.formats = {
@@ -1219,6 +1195,42 @@ export class Datepicker extends Component<DatepickerOptions> {
12191195
};
12201196
}
12211197

1198+
_pickerSetup() {
1199+
if (!this.options.defaultDate) {
1200+
this.options.defaultDate = new Date(Date.parse(this.el.value));
1201+
}
1202+
1203+
const defDate = this.options.defaultDate;
1204+
if (Datepicker._isDate(defDate)) {
1205+
if (this.options.setDefaultDate) {
1206+
this.setDate(defDate, true);
1207+
this.setInputValue(this.el, defDate);
1208+
} else {
1209+
this.gotoDate(defDate);
1210+
}
1211+
} else {
1212+
this.gotoDate(new Date());
1213+
}
1214+
1215+
if (this.options.isDateRange) {
1216+
this.multiple = true;
1217+
const defEndDate = this.options.defaultEndDate;
1218+
if (Datepicker._isDate(defEndDate)) {
1219+
if (this.options.setDefaultEndDate) {
1220+
this.setDate(defEndDate, true, true);
1221+
this.setInputValue(this.endDateEl, defEndDate);
1222+
}
1223+
}
1224+
}
1225+
1226+
if (this.options.isMultipleSelection) {
1227+
this.multiple = true;
1228+
this.dates = [];
1229+
this.dateEls = [];
1230+
this.dateEls.push(this.el);
1231+
}
1232+
}
1233+
12221234
_removeEventHandlers() {
12231235
this.el.removeEventListener('click', this._handleInputClick);
12241236
this.el.removeEventListener('keydown', this._handleInputKeydown);
@@ -1272,10 +1284,15 @@ export class Datepicker extends Component<DatepickerOptions> {
12721284
}
12731285

12741286
if (this.options.isDateRange) {
1287+
const confirmAfterSelection = Datepicker._isDate(this.date) && this.options.autoSubmit;
12751288
this._handleDateRangeCalendarClick(selectedDate);
1289+
1290+
if(confirmAfterSelection) {
1291+
this._confirm();
1292+
}
12761293
}
12771294

1278-
if (this.options.autoSubmit) this._finishSelection();
1295+
if (!this.options.isDateRange && this.options.autoSubmit) this._confirm();
12791296
} else if (target.closest('.month-prev')) {
12801297
this.prevMonth();
12811298
} else if (target.closest('.month-next')) {
@@ -1290,7 +1307,7 @@ export class Datepicker extends Component<DatepickerOptions> {
12901307
return;
12911308
}
12921309

1293-
this.setDate(date, false, Datepicker._isDate(this.date));
1310+
this.setDate(date, true, Datepicker._isDate(this.date));
12941311
return;
12951312
}
12961313

@@ -1385,10 +1402,12 @@ export class Datepicker extends Component<DatepickerOptions> {
13851402

13861403
_confirm = () => {
13871404
this._finishSelection();
1405+
if (this.displayPlugin) this.displayPlugin.hide();
13881406
if (typeof this.options.onConfirm === 'function') this.options.onConfirm.call(this);
13891407
};
13901408

13911409
_cancel = () => {
1410+
if (this.displayPlugin) this.displayPlugin.hide();
13921411
if (typeof this.options.onCancel === 'function') this.options.onCancel.call(this);
13931412
};
13941413

‎components/dialog/_modal.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,23 @@
4040
flex-shrink: 0;
4141
position: sticky;
4242
top: 0;
43-
background-color: var(--modal-background-color);
43+
// disabled since background color inheritance from parent element
44+
// background-color: var(--modal-background-color);
4445
}
4546
.modal-content {
4647
padding: 0 var(--modal-padding);
4748
}
4849
.modal-footer {
50+
display: flex;
4951
border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
5052
padding: var(--modal-padding);
5153
text-align: right;
5254
flex-shrink: 0;
5355
position: sticky;
5456
bottom: 0;
55-
background-color: var(--modal-background-color);
57+
// disabled since background color inheritance from parent element
58+
// background-color: var(--modal-background-color);
59+
justify-content: space-between;
5660
}
5761

5862
.modal-close {

0 commit comments

Comments
 (0)