Skip to content

Commit

Permalink
Merge pull request #556 from materializecss/modal-with-dialog
Browse files Browse the repository at this point in the history 
Modal with Html5 dialog element
  • Loading branch information
@wuda-io
wuda-io authored Dec 23, 2024
2 parents 37945ac + af8066a commit f2bfa3f
Show file tree
Hide file tree
Showing 9 changed files with 353 additions and 868 deletions.
41 changes: 0 additions & 41 deletions index.html
View file

This file was deleted.

6 changes: 0 additions & 6 deletions index.js
View file

This file was deleted.

29 changes: 0 additions & 29 deletions index.mjs
View file

This file was deleted.

97 changes: 32 additions & 65 deletions sass/components/_modal.scss
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,68 @@
// use with dialog html element
.modal {
--modal-footer-height: 56px;
--modal-footer-divider-height: 1px;
--modal-border-radius: 28px;
--modal-padding: 24px;

&:focus {
outline: none;
}
--modal-padding-bottom: 16px;

@extend .z-depth-5;

display: none;
position: fixed;
left: 0;
right: 0;
background-color: var(--md-sys-color-surface);
border: none;
outline: none;
padding: 0;
max-height: 70%;
width: 55%;
margin: auto;
overflow-y: auto;

border-radius: var(--modal-border-radius);
will-change: top, opacity;

// Dialog open
&[open] {
display: flex;
flex-direction: column;
}

// Background
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);

@media #{$medium-and-down} {
width: 80%;
}

h1,h2,h3,h4 {
margin-top: 0;
// custom backdrop blur
&::backdrop {
backdrop-filter: blur(1px);
}

.modal-content {
.modal-header {
padding: var(--modal-padding);
overflow-y: hidden;
padding-bottom: var(--modal-padding-bottom);
flex-shrink: 0;
}

.modal-close {
cursor: pointer;
.modal-content {
padding: 0 var(--modal-padding);
overflow-y: auto;
}

.modal-footer {
border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
background-color: var(--md-sys-color-surface);
padding: 4px 6px;
height: var(--modal-footer-height);
width: 100%;
padding: var(--modal-padding);
text-align: right;

.btn, .btn-flat {
margin: 6px 0;
}
flex-shrink: 0;
}
}

.modal-overlay {
position: fixed;
z-index: 999;
top: -25%;
left: 0;
bottom: 0;
right: 0;
height: 125%;
width: 100%;
background: #000;
display: none;
will-change: opacity;
}

// Modal with fixed action footer
.modal.modal-fixed-footer {
padding: 0;
height: 70%;

.modal-content {
position: absolute;
height: calc(100% - var(--modal-footer-height));
max-height: 100%;
width: 100%;
overflow-y: auto;
.modal-close {
cursor: pointer;
}

.modal-footer {
border-top: var(--modal-footer-divider-height) solid var(--md-sys-color-outline-variant);
position: absolute;
bottom: var(--modal-footer-divider-height);
// todo: remove maybe
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
}

// Modal Bottom Sheet Style
.modal.bottom-sheet {
top: auto;
bottom: -100%;
margin: 0;
width: 100%;
margin-bottom: 0;
max-height: 45%;
border-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
will-change: bottom, opacity;
}
63 changes: 27 additions & 36 deletions spec/tests/datepicker/datepickerSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,12 @@ describe('Datepicker Plugin', () => {
M.Datepicker.getInstance(document.querySelector('.datepicker')).destroy();
});

it('should open and close programmatically', (done) => {
M.Datepicker.init(document.querySelectorAll('.datepicker'));
const input = document.querySelector('#datepickerInput');
const modal = document.querySelector('.datepicker-modal');
expect(modal).toBeHidden('Should be hidden before datepicker input is focused.');
M.Datepicker.getInstance(input).open();

setTimeout(() => {
expect(modal).toHaveClass(
'open',
'Datepicker modal should be shown after datepicker input is focused.'
);
M.Datepicker.getInstance(input).close();
setTimeout(() => {
expect(modal).toNotHaveClass(
'open',
'Datepicker modal should be hidden after datepicker input is focused.'
);
done();
}, 400);
}, 400);
});

it('can have a string format', (done) => {
const input = document.querySelector('#datepickerInput');
const today = new Date();
M.Datepicker.init(input, { format: 'mm/dd/yyyy' });
const datepicker = M.Datepicker.getInstance(input);
datepicker.open();
//datepicker.open();
setTimeout(() => {
const day1 = document.querySelector('.datepicker-modal button[data-day="1"]');
day1.click();
Expand All @@ -64,7 +41,7 @@ describe('Datepicker Plugin', () => {
const formatFn = `${today.getFullYear() - 100}-${today.getMonth() + 1}-99`;
M.Datepicker.init(input, { format: formatFn });
const datepicker = M.Datepicker.getInstance(input);
datepicker.open();
//datepicker.open();
setTimeout(() => {
const day1 = document.querySelector('.datepicker-modal button[data-day="1"]');
day1.click();
Expand All @@ -86,21 +63,33 @@ describe('Datepicker Plugin', () => {
const year = today.getFullYear() - 44;
const day = 11;
input.value = `${month < 10 ? `0${month}` : month}/${day}/${year}`;
input.dispatchEvent(
new KeyboardEvent('change', { bubbles: true, cancelable: true })
);
input.dispatchEvent(new KeyboardEvent('change', { bubbles: true, cancelable: true }));
keydown(input, 13);
setTimeout(() => {
expect(document.querySelector('.datepicker-modal')).toHaveClass(
'open',
'modal should be shown after input is submitted.'
);
// expect(document.querySelector('.datepicker-modal')).toHaveClass(
// 'open',
// 'modal should be shown after input is submitted.'
// );
const selectMonthElem = document.querySelector('.datepicker-select.orig-select-month');
const selectYearElem = document.querySelector('.datepicker-select.orig-select-year');
const selectedDayElem = document.querySelector(`.datepicker-row td[data-day="${day}"]`);
expect(selectMonthElem.querySelector('option[selected="selected"]').value === (month - 1).toString()).toEqual(true, `selected month should be ${month}, given value ${selectMonthElem.querySelector('option[selected="selected"]').value}`);
expect(selectYearElem.querySelector('option[selected="selected"]').value === year.toString()).toEqual(true, `selected year should be ${year}, given value ${selectYearElem.querySelector('option[selected="selected"]').value}`);
expect(selectedDayElem.classList.contains('is-selected')).toEqual(true, `selected day should be ${day}, given value ${selectedDayElem.classList}`);
expect(
selectMonthElem.querySelector('option[selected="selected"]').value ===
(month - 1).toString()
).toEqual(
true,
`selected month should be ${month}, given value ${selectMonthElem.querySelector('option[selected="selected"]').value}`
);
expect(
selectYearElem.querySelector('option[selected="selected"]').value === year.toString()
).toEqual(
true,
`selected year should be ${year}, given value ${selectYearElem.querySelector('option[selected="selected"]').value}`
);
expect(selectedDayElem.classList.contains('is-selected')).toEqual(
true,
`selected day should be ${day}, given value ${selectedDayElem.classList}`
);
done();
}, 10);
});
Expand All @@ -109,7 +98,9 @@ describe('Datepicker Plugin', () => {
const input = document.querySelector('#datepickerInput');
M.Datepicker.init(input, { isDateRange: true });
setTimeout(() => {
expect(document.querySelector('.datepicker-end-date')).toExist('end date input should exist');
expect(document.querySelector('.datepicker-end-date')).toExist(
'end date input should exist'
);
done();
}, 10);
});
Expand Down
Loading

0 comments on commit f2bfa3f

Please sign in to comment.