diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue index 508e58e2a..98f0c27ca 100644 --- a/src/AppTopBar.vue +++ b/src/AppTopBar.vue @@ -11,17 +11,11 @@
  • Themes - @@ -44,12 +51,15 @@ import DomHandler from './components/utils/DomHandler'; export default { themesMenuOutsideClickListener: null, + templatesMenuOutsideClickListener: null, themesMenuElement: null, + templatesMenuElement: null, darkDemoStyle: null, data() { return { theme: 'nova-light', - themesMenuVisible: false + themesMenuVisible: false, + templatesMenuVisible: false } }, methods: { @@ -101,11 +111,23 @@ export default { this.themesMenuElement = null; this.unbindThemesMenuOutsideClickListener(); }, + toggleTemplatesMenu(event) { + this.templatesMenuVisible = !this.templatesMenuVisible; + event.preventDefault(); + }, + onTemplatesMenuEnter(el) { + this.templatesMenuElement = el; + this.bindTemplatesMenuOutsideClickListener(); + }, + onTemplatesMenuLeave() { + this.templatesMenuElement = null; + this.unbindTemplatesMenuOutsideClickListener(); + }, bindThemesMenuOutsideClickListener() { if (!this.themesMenuOutsideClickListener) { this.themesMenuOutsideClickListener = (event) => { - if (this.themesMenuVisible && this.isOutsideOfThemesMenuClicked(event)) { - this.hideThemesMenu(); + if ((this.themesMenuVisible && this.isOutsideOfOverlayMenuClicked(event, this.themesMenuElement, 'themes-menu-link'))) { + this.themesMenuVisible = false; } }; document.addEventListener('click', this.themesMenuOutsideClickListener); @@ -117,8 +139,24 @@ export default { this.themesMenuOutsideClickListener = null; } }, - isOutsideOfThemesMenuClicked(event) { - return !(DomHandler.hasClass(event.target, 'themes-menu-link') || this.themesMenuElement.isSameNode(event.target) || this.themesMenuElement.contains(event.target)); + bindTemplatesMenuOutsideClickListener() { + if (!this.templatesMenuOutsideClickListener) { + this.templatesMenuOutsideClickListener = (event) => { + if ((this.templatesMenuVisible && this.isOutsideOfOverlayMenuClicked(event, this.templatesMenuElement, 'templates-menu-link'))) { + this.templatesMenuVisible = false; + } + }; + document.addEventListener('click', this.templatesMenuOutsideClickListener); + } + }, + unbindTemplatesMenuOutsideClickListener() { + if (this.templatesMenuOutsideClickListener) { + document.removeEventListener('click', this.templatesMenuOutsideClickListener); + this.templatesMenuOutsideClickListener = null; + } + }, + isOutsideOfOverlayMenuClicked(event, element, style) { + return !(DomHandler.hasClass(event.target, style) || element.isSameNode(event.target) || element.contains(event.target)); }, hideThemesMenu() { this.themesMenuVisible = false; diff --git a/src/views/support/Support.vue b/src/views/support/Support.vue index 0babab72a..f6030bf26 100644 --- a/src/views/support/Support.vue +++ b/src/views/support/Support.vue @@ -28,7 +28,7 @@ - +

    Standard PRO Services