fix(datepicker): no manual positioning; update tail.datetime
This commit is contained in:
parent
3ecf834756
commit
3cd71d6b19
@ -2,8 +2,6 @@ import datetime from 'tail.datetime';
|
|||||||
import { Utility } from '../../core/utility';
|
import { Utility } from '../../core/utility';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
|
||||||
const DP_SCROLL_TARGET_CLASS = 'datepicker--scroll-target';
|
|
||||||
|
|
||||||
const KEYCODE_ESCAPE = 27;
|
const KEYCODE_ESCAPE = 27;
|
||||||
const Z_INDEX_MODAL = 9999;
|
const Z_INDEX_MODAL = 9999;
|
||||||
|
|
||||||
@ -187,15 +185,6 @@ export class Datepicker {
|
|||||||
|
|
||||||
// format the date value of the form input element of this datepicker before form submission
|
// format the date value of the form input element of this datepicker before form submission
|
||||||
this._element.form.addEventListener('submit', () => this.formatElementValue());
|
this._element.form.addEventListener('submit', () => this.formatElementValue());
|
||||||
|
|
||||||
// manually reposition the datepicker element on scroll change of its next scroll target
|
|
||||||
const scrollTargetNode = this.datepickerInstance.dt.closest(DP_SCROLL_TARGET_CLASS);
|
|
||||||
if (scrollTargetNode) {
|
|
||||||
scrollTargetNode.addEventListener('scroll', () => {
|
|
||||||
this.datepickerInstance.dt.style.scrollLeft = `${scrollTargetNode.scrollLeft}px`;
|
|
||||||
this.datepickerInstance.dt.style.scrollTop = `${scrollTargetNode.scrollTop }px`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
|
|||||||
@ -23,8 +23,6 @@ const MODALS_WRAPPER_CLASS = 'modals-wrapper';
|
|||||||
const MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
|
const MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
|
||||||
const MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
|
const MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
|
||||||
|
|
||||||
const DP_SCROLL_TARGET_CLASS = 'datepicker--scroll-target';
|
|
||||||
|
|
||||||
@Utility({
|
@Utility({
|
||||||
selector: '[uw-modal]',
|
selector: '[uw-modal]',
|
||||||
})
|
})
|
||||||
@ -130,7 +128,7 @@ export class Modal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_open() {
|
_open() {
|
||||||
this._element.classList.add(MODAL_OPEN_CLASS, DP_SCROLL_TARGET_CLASS);
|
this._element.classList.add(MODAL_OPEN_CLASS);
|
||||||
this._modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
|
this._modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
|
||||||
this._modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
|
this._modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
|
||||||
this._modalsWrapper.appendChild(this._element);
|
this._modalsWrapper.appendChild(this._element);
|
||||||
|
|||||||
@ -27,7 +27,6 @@
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
color: var(--color-font);
|
color: var(--color-font);
|
||||||
padding: 0 40px;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -114,6 +113,6 @@ div.modal__trigger {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal__content {
|
.modal__content {
|
||||||
margin: 20px 0;
|
margin: 20px 40px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -15317,7 +15317,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"tail.datetime": {
|
"tail.datetime": {
|
||||||
"version": "git+https://github.com/uni2work/tail.DateTime.git#d3256920fcedbf32c84b8065e77628097c7f2410",
|
"version": "git+https://github.com/uni2work/tail.DateTime.git#57e4feb2d6a53c7e1d3630a2da7eb9a213fa288d",
|
||||||
"from": "git+https://github.com/uni2work/tail.DateTime.git#master"
|
"from": "git+https://github.com/uni2work/tail.DateTime.git#master"
|
||||||
},
|
},
|
||||||
"tapable": {
|
"tapable": {
|
||||||
|
|||||||
@ -11,7 +11,7 @@ $if not isModal
|
|||||||
|
|
||||||
<div .main>
|
<div .main>
|
||||||
|
|
||||||
<div .main__content uw-poc .datepicker--scroll-target>
|
<div .main__content uw-poc>
|
||||||
|
|
||||||
$if not isModal
|
$if not isModal
|
||||||
<!-- breadcrumbs -->
|
<!-- breadcrumbs -->
|
||||||
|
|||||||
Reference in New Issue
Block a user