From 8f866252dc3ec38ea2c9381a4adca7abe687d621 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 28 Sep 2020 14:22:17 +0300 Subject: [PATCH] Add resize listeners --- src/components/autocomplete/AutoComplete.vue | 20 ++++++++++++ src/components/calendar/Calendar.vue | 32 ++++++++++++++++---- src/components/colorpicker/ColorPicker.vue | 20 ++++++++++++ src/components/dropdown/Dropdown.vue | 20 ++++++++++++ src/components/multiselect/MultiSelect.vue | 20 ++++++++++++ src/components/overlaypanel/OverlayPanel.vue | 6 ++-- 6 files changed, 109 insertions(+), 9 deletions(-) diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue index 136718e90..91fab10fc 100755 --- a/src/components/autocomplete/AutoComplete.vue +++ b/src/components/autocomplete/AutoComplete.vue @@ -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); }, diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index 404970aee..ebd636c73 100755 --- a/src/components/calendar/Calendar.vue +++ b/src/components/calendar/Calendar.vue @@ -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))); diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue index e87d52e69..cadbde4c7 100755 --- a/src/components/colorpicker/ColorPicker.vue +++ b/src/components/colorpicker/ColorPicker.vue @@ -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) => { diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue index 295cd499b..7ce49a77f 100755 --- a/src/components/dropdown/Dropdown.vue +++ b/src/components/dropdown/Dropdown.vue @@ -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; diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue index 4ea9d118f..8eb69075f 100755 --- a/src/components/multiselect/MultiSelect.vue +++ b/src/components/multiselect/MultiSelect.vue @@ -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))); }, diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue index 0ca795510..1b180c417 100755 --- a/src/components/overlaypanel/OverlayPanel.vue +++ b/src/components/overlaypanel/OverlayPanel.vue @@ -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);