vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add resize listeners

pull/525/head
Cagatay Civici 2020-09-28 14:22:17 +03:00
parent 7b0ad66903
commit 8f866252dc
6 changed files with 109 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/autocomplete/AutoComplete.vue
View File

@ -81,6 +81,7 @@ export default {
},
timeout: null,
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
overlay: null,
data() {
@ -107,6 +108,7 @@ export default {
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -121,10 +123,12 @@ export default {
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.overlay = null;
},
alignOverlay() {
@ -160,6 +164,22 @@ export default {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hideOverlay();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
isOutsideClicked(event) {
return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);
},

32
src/components/calendar/Calendar.vue
View File

@ -310,6 +310,13 @@ export default {
},
navigationState: null,
scrollHandler: null,
outsideClickListener: null,
maskClickListener: null,
resizeListener: null,
overlay: null,
mask: null,
timePickerTimer: null,
isKeydown: false,
created() {
this.updateCurrentMetaData();
},
@ -342,6 +349,7 @@ export default {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -361,12 +369,6 @@ export default {
overlayVisible: false
}
},
outsideClickListener: null,
maskClickListener: null,
overlay: null,
mask: null,
timePickerTimer: null,
isKeydown: false,
watch: {
modelValue() {
this.updateCurrentMetaData();
@ -545,10 +547,12 @@ export default {
onOverlayEnterComplete() {
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.$emit('hide');
this.overlay = null;
},
@ -663,6 +667,22 @@ export default {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.overlayVisible = false;
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
isOutsideClicked(event) {
return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) ||
this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));

20
src/components/colorpicker/ColorPicker.vue
View File

@ -72,6 +72,7 @@ export default {
documentMouseMoveListener: null,
documentMouseUpListener: null,
scrollHandler: null,
resizeListener: null,
hueDragging: null,
colorDragging: null,
selfUpdate: null,
@ -84,6 +85,7 @@ export default {
this.unbindOutsideClickListener();
this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -331,6 +333,7 @@ export default {
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
if (this.autoZIndex) {
this.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@ -339,6 +342,7 @@ export default {
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.clearRefs();
},
alignOverlay() {
@ -427,6 +431,22 @@ export default {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.overlayVisible = false;
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
bindDocumentMouseMoveListener() {
if (!this.documentMouseMoveListener) {
this.documentMouseMoveListener = (event) => {

20
src/components/dropdown/Dropdown.vue
View File

@ -85,6 +85,7 @@ export default {
},
outsideClickListener: null,
scrollHandler: null,
resizeListener: null,
searchTimeout: null,
currentSearchChar: null,
previousSearchChar: null,
@ -93,6 +94,7 @@ export default {
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -315,6 +317,7 @@ export default {
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
if (this.filter) {
this.$refs.filterInput.focus();
@ -325,6 +328,7 @@ export default {
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.$emit('hide');
this.overlay = null;
},
@ -372,6 +376,22 @@ export default {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
search(event) {
if (!this.visibleOptions) {
return;

20
src/components/multiselect/MultiSelect.vue
View File

@ -98,11 +98,13 @@ export default {
};
},
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
overlay: null,
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
@ -283,11 +285,13 @@ export default {
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
this.$emit('show');
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.$emit('hide');
this.overlay = null;
},
@ -332,6 +336,22 @@ export default {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
isOutsideClicked(event) {
return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
},

6
src/components/overlaypanel/OverlayPanel.vue
View File

@ -55,7 +55,6 @@ export default {
container: null,
beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener();
if (this.dismissable) {
this.unbindOutsideClickListener();
}
@ -64,6 +63,7 @@ export default {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
this.unbindResizeListener();
this.target = null;
this.container = null;
},
@ -88,8 +88,8 @@ export default {
this.bindOutsideClickListener();
}
this.bindResizeListener();
this.bindScrollListener();
this.bindResizeListener();
if (this.autoZIndex) {
this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
@ -97,8 +97,8 @@ export default {
},
onLeave() {
this.unbindOutsideClickListener();
this.unbindResizeListener();
this.unbindScrollListener();
this.unbindResizeListener();
},
alignOverlay() {
DomHandler.absolutePosition(this.container, this.target);