fix(datepicker): no manual positioning; update tail.datetime

This commit is contained in:
Sarah Vaupel 2019-10-09 15:05:23 +02:00
parent 3ecf834756
commit 3cd71d6b19
5 changed files with 4 additions and 18 deletions

View File

@ -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() {

View File

@ -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);

View File

@ -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
View File

@ -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": {

View File

@ -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 -->