Skip to content

Commit

Permalink
Add resize listeners
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Sep 28, 2020
1 parent 7b0ad66 commit 8f86625
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 9 deletions.
20 changes: 20 additions & 0 deletions src/components/autocomplete/AutoComplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export default {
},
timeout: null,
outsideClickListener: null,
resizeListener: null,
scrollHandler: null,
overlay: null,
data() {
Expand All @@ -107,6 +108,7 @@ export default {
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
Expand All @@ -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() {
Expand Down Expand Up @@ -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);
},
Expand Down
32 changes: 26 additions & 6 deletions src/components/calendar/Calendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
},
Expand Down Expand Up @@ -342,6 +349,7 @@ export default {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
Expand All @@ -361,12 +369,6 @@ export default {
overlayVisible: false
}
},
outsideClickListener: null,
maskClickListener: null,
overlay: null,
mask: null,
timePickerTimer: null,
isKeydown: false,
watch: {
modelValue() {
this.updateCurrentMetaData();
Expand Down Expand Up @@ -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;
},
Expand Down Expand Up @@ -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)));
Expand Down
20 changes: 20 additions & 0 deletions src/components/colorpicker/ColorPicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export default {
documentMouseMoveListener: null,
documentMouseUpListener: null,
scrollHandler: null,
resizeListener: null,
hueDragging: null,
colorDragging: null,
selfUpdate: null,
Expand All @@ -84,6 +85,7 @@ export default {
this.unbindOutsideClickListener();
this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
Expand Down Expand Up @@ -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());
Expand All @@ -339,6 +342,7 @@ export default {
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.clearRefs();
},
alignOverlay() {
Expand Down Expand Up @@ -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) => {
Expand Down
20 changes: 20 additions & 0 deletions src/components/dropdown/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export default {
},
outsideClickListener: null,
scrollHandler: null,
resizeListener: null,
searchTimeout: null,
currentSearchChar: null,
previousSearchChar: null,
Expand All @@ -93,6 +94,7 @@ export default {
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
Expand Down Expand Up @@ -315,6 +317,7 @@ export default {
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
if (this.filter) {
this.$refs.filterInput.focus();
Expand All @@ -325,6 +328,7 @@ export default {
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.$emit('hide');
this.overlay = null;
},
Expand Down Expand Up @@ -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;
Expand Down
20 changes: 20 additions & 0 deletions src/components/multiselect/MultiSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
},
Expand Down Expand Up @@ -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)));
},
Expand Down
6 changes: 3 additions & 3 deletions src/components/overlaypanel/OverlayPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export default {
container: null,
beforeUnmount() {
this.restoreAppend();
this.unbindResizeListener();
if (this.dismissable) {
this.unbindOutsideClickListener();
}
Expand All @@ -64,6 +63,7 @@ export default {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
this.unbindResizeListener();
this.target = null;
this.container = null;
},
Expand All @@ -88,17 +88,17 @@ export default {
this.bindOutsideClickListener();
}
this.bindResizeListener();
this.bindScrollListener();
this.bindResizeListener();
if (this.autoZIndex) {
this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
},
onLeave() {
this.unbindOutsideClickListener();
this.unbindResizeListener();
this.unbindScrollListener();
this.unbindResizeListener();
},
alignOverlay() {
DomHandler.absolutePosition(this.container, this.target);
Expand Down

0 comments on commit 8f86625

Please sign in to comment.