TouchUI
parent
d0e46962bf
commit
5b06d2e79d
|
@ -311,6 +311,8 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
outsideClickListener: null,
|
outsideClickListener: null,
|
||||||
|
maskClickListener: null,
|
||||||
|
mask: null,
|
||||||
timePickerTimer: null,
|
timePickerTimer: null,
|
||||||
methods: {
|
methods: {
|
||||||
isSelected(dateMeta) {
|
isSelected(dateMeta) {
|
||||||
|
@ -571,7 +573,10 @@ export default {
|
||||||
|| DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon'));
|
|| DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon'));
|
||||||
},
|
},
|
||||||
alignOverlay() {
|
alignOverlay() {
|
||||||
if (this.$refs.overlay) {
|
if (this.touchUI) {
|
||||||
|
this.enableModality();
|
||||||
|
}
|
||||||
|
else if (this.$refs.overlay) {
|
||||||
if (this.appendTo)
|
if (this.appendTo)
|
||||||
DomHandler.absolutePosition(this.$refs.overlay, this.$el);
|
DomHandler.absolutePosition(this.$refs.overlay, this.$el);
|
||||||
else
|
else
|
||||||
|
@ -1109,6 +1114,45 @@ export default {
|
||||||
},
|
},
|
||||||
onMonthSelect(index) {
|
onMonthSelect(index) {
|
||||||
this.onDateSelect({year: this.currentYear, month: index, day: 1, selectable: true});
|
this.onDateSelect({year: this.currentYear, month: index, day: 1, selectable: true});
|
||||||
|
},
|
||||||
|
enableModality() {
|
||||||
|
if (!this.mask) {
|
||||||
|
this.mask = document.createElement('div');
|
||||||
|
this.mask.style.zIndex = String(parseInt(this.$refs.overlay.style.zIndex, 10) - 1);
|
||||||
|
DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker');
|
||||||
|
|
||||||
|
this.maskClickListener = () => {
|
||||||
|
this.disableModality();
|
||||||
|
};
|
||||||
|
this.mask.addEventListener('click', this.maskClickListener);
|
||||||
|
|
||||||
|
document.body.appendChild(this.mask);
|
||||||
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disableModality() {
|
||||||
|
if (this.mask) {
|
||||||
|
this.mask.removeEventListener('click', this.maskClickListener);
|
||||||
|
this.maskClickListener = null;
|
||||||
|
document.body.removeChild(this.mask);
|
||||||
|
this.mask = null;
|
||||||
|
|
||||||
|
let bodyChildren = document.body.children;
|
||||||
|
let hasBlockerMasks;
|
||||||
|
for (let i = 0; i < bodyChildren.length; i++) {
|
||||||
|
let bodyChild = bodyChildren[i];
|
||||||
|
if(DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
|
||||||
|
hasBlockerMasks = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasBlockerMasks) {
|
||||||
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.overlayVisible = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
cursor: default !important;
|
cursor: default !important;
|
||||||
}
|
}
|
||||||
.p-component-overlay {
|
.p-component-overlay {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
Loading…
Reference in New Issue