fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(datepicker): manually add scroll offset based on scroll target

Browse Source
This commit is contained in:
Sarah Vaupel 2019-10-09 13:42:08 +02:00
parent bd97587ee5
commit 3ecf834756
4 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/utils/form/datepicker.js
View File

@ -2,6 +2,8 @@ import datetime from 'tail.datetime';
import { Utility } from '../../core/utility';
import moment from 'moment';
const DP_SCROLL_TARGET_CLASS = 'datepicker--scroll-target';
const KEYCODE_ESCAPE = 27;
const Z_INDEX_MODAL = 9999;
@ -43,9 +45,6 @@ const DATEPICKER_INITIALIZED_CLASS = 'datepicker--initialized';
const DATEPICKER_CONFIG = {
'global': {
// minimize overlaps with other date inputs
position: 'right',
// set default time to 00:00:00
timeHours: 0,
timeMinutes: 0,
@ -135,11 +134,9 @@ export class Datepicker {
// insert the datepicker element (dt) after the form
this._element.form.parentNode.insertBefore(this.datepickerInstance.dt, this._element.form.nextSibling);
// if the input element is in any open modal, increase the z-index of the datepicker and set its position to fixed to avoid repositioning on page scroll
// FIXME: instead of setting the position to fixed, use absolute and reposition (decrease left)
// if the input element is in any open modal, increase the z-index of the datepicker
if (this._element.closest('.modal--open')) {
this.datepickerInstance.dt.style.zIndex = Z_INDEX_MODAL;
this.datepickerInstance.dt.style.position = 'fixed';
}
// register this datepicker instance with the formID of the given element in the datepicker collection
@ -190,6 +187,15 @@ export class Datepicker {
// format the date value of the form input element of this datepicker before form submission
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() {

4
frontend/src/utils/modal/modal.js
View File

@ -23,6 +23,8 @@ const MODALS_WRAPPER_CLASS = 'modals-wrapper';
const MODALS_WRAPPER_SELECTOR = '.' + MODALS_WRAPPER_CLASS;
const MODALS_WRAPPER_OPEN_CLASS = 'modals-wrapper--open';
const DP_SCROLL_TARGET_CLASS = 'datepicker--scroll-target';
@Utility({
selector: '[uw-modal]',
})
@ -128,7 +130,7 @@ export class Modal {
}
_open() {
this._element.classList.add(MODAL_OPEN_CLASS);
this._element.classList.add(MODAL_OPEN_CLASS, DP_SCROLL_TARGET_CLASS);
this._modalOverlay.classList.add(MODAL_OVERLAY_OPEN_CLASS);
this._modalsWrapper.classList.add(MODALS_WRAPPER_OPEN_CLASS);
this._modalsWrapper.appendChild(this._element);

4
src/Handler/Exam/Form.hs
View File

@ -163,8 +163,8 @@ examOccurrenceForm prev = wFormToAForm $ do
(eofNameRes, eofNameView) <- mpreq (textField & cfStrip & cfCI) ("" & addName (nudge "name")) (eofName <$> mPrev)
(eofRoomRes, eofRoomView) <- mpreq (textField & cfStrip) ("" & addName (nudge "room")) (eofRoom <$> mPrev)
(eofCapacityRes, eofCapacityView) <- mpreq (natFieldI MsgExamRoomCapacityNegative) ("" & addName (nudge "capacity")) (eofCapacity <$> mPrev)
(eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start") & addDatepickerPositionAttr DPBottom) (eofStart <$> mPrev)
(eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end") & addDatepickerPositionAttr DPBottom) (eofEnd <$> mPrev)
(eofStartRes, eofStartView) <- mpreq utcTimeField ("" & addName (nudge "start")) (eofStart <$> mPrev)
(eofEndRes, eofEndView) <- mopt utcTimeField ("" & addName (nudge "end")) (eofEnd <$> mPrev)
(eofDescRes, eofDescView) <- mopt htmlFieldSmall ("" & addName (nudge "description")) (eofDescription <$> mPrev)
return ( ExamOccurrenceForm

2
templates/default-layout.hamlet
View File

@ -11,7 +11,7 @@ $if not isModal
<div .main>
<div .main__content uw-poc>
<div .main__content uw-poc .datepicker--scroll-target>
$if not isModal
<!-- breadcrumbs -->