From 1aff573453f28867a19cb93f2a61bf949ec71a4f Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 21 Nov 2023 20:28:04 +0300 Subject: [PATCH] Refactor #4819 --- components/lib/megamenu/MegaMenu.vue | 33 +++++++++++++++++++++------- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue index 1764b6e99..ac1854d2d 100755 --- a/components/lib/megamenu/MegaMenu.vue +++ b/components/lib/megamenu/MegaMenu.vue @@ -65,6 +65,7 @@ export default { emits: ['focus', 'blur'], outsideClickListener: null, resizeListener: null, + matchMediaListener: null, container: null, menubar: null, searchTimeout: null, @@ -77,6 +78,7 @@ export default { focusedItemInfo: { index: -1, key: '', parentKey: '' }, activeItem: null, dirty: false, + query: null, queryMatches: false }; }, @@ -96,19 +98,13 @@ export default { }, mounted() { this.id = this.id || UniqueComponentId(); - const query = matchMedia(`(max-width: ${this.breakpoint})`); - - this.queryMatches = query.matches; - - query.addEventListener('change', () => { - this.queryMatches = query.matches; - this.mobileActive = false; - }); + this.bindMatchMediaListener(); }, beforeUnmount() { this.mobileActive = false; this.unbindOutsideClickListener(); this.unbindResizeListener(); + this.unbindMatchMediaListener(); }, methods: { getItemProp(item, name) { @@ -490,6 +486,27 @@ export default { this.resizeListener = null; } }, + bindMatchMediaListener() { + if (!this.matchMediaListener) { + const query = matchMedia(`(max-width: ${this.breakpoint})`); + + this.query = query; + this.queryMatches = query.matches; + + this.matchMediaListener = () => { + this.queryMatches = query.matches; + this.mobileActive = false; + }; + + this.query.addEventListener('change', this.matchMediaListener); + } + }, + unbindMatchMediaListener() { + if (this.matchMediaListener) { + this.query.removeEventListener('change', this.matchMediaListener); + this.matchMediaListener = null; + } + }, isItemMatched(processedItem) { return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase()); },