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

379 lines
22 KiB
Vue
Raw Normal View History

Refactor layout into smaller components
2018-12-06 18:45:40 +00:00
<template>
fix routing and app header
2022-02-23 13:44:06 +00:00
<div :ref="containerRef" class="layout-topbar">
Mobile menu navigation and cosmetics
2018-12-26 09:36:00 +00:00
<a class="menu-button" @click="$emit('menubutton-click')">
<i class="pi pi-bars"></i>
</a>
Index - setup pages added
2022-09-06 13:53:29 +00:00
<!-- <div class="app-theme" v-tooltip.bottom="$appState.theme">
Public image path changes
2022-09-10 14:36:01 +00:00
<img :src="'/demo/images/themes/' + logoMap[$appState.theme]" />
Index - setup pages added
2022-09-06 13:53:29 +00:00
</div> -->
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
<ul ref="topbarMenu" class="topbar-menu">
Separate menu for resources
2019-12-11 09:35:13 +00:00
<li class="topbar-submenu">
Add animations
2021-02-03 12:14:50 +00:00
<a tabindex="0" @click="toggleMenu($event, 0)">
Cosmetics
2022-02-24 16:27:26 +00:00
<span>Themes</span>
Add animations
2021-02-03 12:14:50 +00:00
</a>
Rename transition
2020-06-27 14:31:52 +00:00
<transition name="p-connected-overlay" @enter="onMenuEnter">
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
<ul v-show="activeMenuIndex === 0">
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
<li class="topbar-submenu-header">THEMING</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<nuxt-link to="/theming"><i class="pi pi-fw pi-file" /><span>Guide</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/designer-vue"><i class="pi pi-fw pi-desktop" /><span>Visual Editor</span></nuxt-link>
</li>
<li>
<nuxt-link to="/icons"><i class="pi pi-fw pi-info-circle" /><span>Icons</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil" /><span>Figma UI Kit</span></nuxt-link>
</li>
Add links to figma and v2
2020-09-24 15:10:41 +00:00
Add themes to switcher
2020-06-26 13:37:03 +00:00
<li class="topbar-submenu-header">BOOTSTRAP</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="/demo/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img src="/demo/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img src="/demo/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a>
</li>
Demo update
2020-06-26 15:58:49 +00:00
Add themes to switcher
2020-06-26 13:37:03 +00:00
<li class="topbar-submenu-header">MATERIAL DESIGN</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'md-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'md-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'md-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
</li>
Add themes to switcher
2020-06-26 13:37:03 +00:00
<li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'mdc-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
</li>
Demo update
2020-06-26 15:58:49 +00:00
Fixed #1500 - Tailwind theme
2021-09-06 08:54:28 +00:00
<li class="topbar-submenu-header">TAILWIND</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'tailwind-light')"><img src="/demo/images/themes/tailwind-light.png" alt="Tailwind Light" /><span>Tailwind Light</span></a>
</li>
Fixed #1500 - Tailwind theme
2021-09-06 08:54:28 +00:00
Add soho and fluent themes along with theme improvements
2020-10-10 10:20:25 +00:00
<li class="topbar-submenu-header">FLUENT UI</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'fluent-light')"><img src="/demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a>
</li>
Add soho and fluent themes along with theme improvements
2020-10-10 10:20:25 +00:00
Fixed #1977
2022-01-13 11:03:59 +00:00
<li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'lara-light-indigo')"><img src="/demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
</li>
<li>
<a @click="changeTheme($event, 'lara-light-blue')"><img src="/demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'lara-light-purple')"><img src="/demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a>
</li>
<li>
<a @click="changeTheme($event, 'lara-light-teal')"><img src="/demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a>
</li>
<li>
<a @click="changeTheme($event, 'lara-dark-blue')"><img src="/demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'lara-dark-indigo')"><img src="/demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a>
</li>
<li>
<a @click="changeTheme($event, 'lara-dark-purple')"><img src="/demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a>
</li>
<li>
<a @click="changeTheme($event, 'lara-dark-teal')"><img src="/demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
</li>
Update docs to include Lara
2021-11-15 07:55:18 +00:00
<li class="topbar-submenu-header">PRIMEONE 2021</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'saga-blue')"><img src="/demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'saga-green')"><img src="/demo/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a>
</li>
<li>
<a @click="changeTheme($event, 'saga-orange')"><img src="/demo/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a>
</li>
<li>
<a @click="changeTheme($event, 'saga-purple')"><img src="/demo/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-blue', true)"><img src="/demo/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-green', true)"><img src="/demo/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-orange', true)"><img src="/demo/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-purple', true)"><img src="/demo/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-blue', true)"><img src="/demo/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-green', true)"><img src="/demo/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-orange', true)"><img src="/demo/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-purple', true)"><img src="/demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a>
</li>
Add themes to switcher
2020-06-26 13:37:03 +00:00
Add soho and fluent themes along with theme improvements
2020-10-10 10:20:25 +00:00
<li class="topbar-submenu-header">PREMIUM</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<a @click="changeTheme($event, 'soho-light')"><img src="/demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'soho-dark', true)"><img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-light')"><img src="/demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-dark', true)"><img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mira')"><img src="/demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a>
</li>
<li>
<a @click="changeTheme($event, 'nano')"><img src="/demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a>
</li>
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
</ul>
</transition>
Refactor layout into smaller components
2018-12-06 18:45:40 +00:00
</li>
Separate menu for resources
2019-12-11 09:35:13 +00:00
<li class="topbar-submenu">
Elevation for configurator
2020-06-18 09:17:14 +00:00
<a tabindex="0" @click="toggleMenu($event, 1)">Templates</a>
Rename transition
2020-06-27 14:31:52 +00:00
<transition name="p-connected-overlay" @enter="onMenuEnter">
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
<ul v-show="activeMenuIndex === 1">
Separate menu for templates
2019-12-10 08:05:47 +00:00
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<nuxt-link to="https://www.primefaces.org/sakai-vue"><img src="@/assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></nuxt-link>
</li>
Separate menu for templates
2019-12-10 08:05:47 +00:00
<li class="topbar-submenu-header">PREMIUM ADMIN TEMPLATES</li>
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<nuxt-link to="https://www.primefaces.org/layouts/atlantis-vue"><img src="@/assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/freya-vue"><img src="@/assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/diamond-vue"><img src="@/assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/verona-vue"><img src="@/assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/poseidon-vue"><img src="@/assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/sapphire-vue"
><img src="@/assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></nuxt-link
>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/serenity-vue"
><img src="@/assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></nuxt-link
>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/ultima-vue"><img src="@/assets/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/avalon-vue"><img src="@/assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/babylon-vue"><img src="@/assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/apollo-vue"><img src="@/assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/roma-vue"><img src="@/assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/layouts/prestige-vue"><img src="@/assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></nuxt-link>
</li>
Separate menu for templates
2019-12-10 08:05:47 +00:00
</ul>
</transition>
</li>
Separate menu for resources
2019-12-11 09:35:13 +00:00
<li class="topbar-submenu topbar-resources-submenu">
nuxt-links added
2022-09-13 13:01:06 +00:00
<nuxt-link to="https://www.primefaces.org/primeblocks-vue/#/" target="_blank"><span>Blocks</span></nuxt-link>
Separate menu for resources
2019-12-11 09:35:13 +00:00
</li>
responsiveness
2022-02-24 06:56:01 +00:00
<li class="topbar-submenu">
new dev iteration
2022-08-23 11:01:21 +00:00
<a tabindex="0" @click="toggleMenu($event, 3)">v3.16.2</a>
responsiveness
2022-02-24 06:56:01 +00:00
<transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 3" style="width: 100%">
Lint changes
2022-09-14 14:26:41 +00:00
<li>
<nuxt-link to="/"><span class="m-0">v3.16.2</span></nuxt-link>
</li>
<li>
<nuxt-link to="https://www.primefaces.org/primevue-v2"><span class="m-0">v2.10.0</span></nuxt-link>
</li>
responsiveness
2022-02-24 06:56:01 +00:00
</ul>
</transition>
</li>
Refactor layout into smaller components
2018-12-06 18:45:40 +00:00
</ul>
</div>
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
</template>
<script>
Initial commit for nuxt
2022-09-06 11:52:18 +00:00
import EventBus from './AppEventBus';
Lifted theme state and switcher up
2022-02-23 19:52:21 +00:00
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
export default {
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
outsideClickListener: null,
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
darkDemoStyle: null,
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
watch: {
$route() {
this.activeMenuIndex = null;
}
},
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
data() {
return {
Showcase refactor
2020-07-01 19:35:12 +00:00
activeMenuIndex: null,
logoMap: {
'bootstrap4-light-blue': 'bootstrap4-light-blue.svg',
'bootstrap4-light-purple': 'bootstrap4-light-purple.svg',
'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg',
'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
'md-light-indigo': 'md-light-indigo.svg',
'md-light-deeppurple': 'md-light-deeppurple.svg',
'md-dark-indigo': 'md-dark-indigo.svg',
'md-dark-deeppurple': 'md-dark-deeppurple.svg',
'mdc-light-indigo': 'md-light-indigo.svg',
'mdc-light-deeppurple': 'md-light-deeppurple.svg',
'mdc-dark-indigo': 'md-dark-indigo.svg',
'mdc-dark-deeppurple': 'md-dark-deeppurple.svg',
'saga-blue': 'saga-blue.png',
'saga-green': 'saga-green.png',
'saga-orange': 'saga-orange.png',
'saga-purple': 'saga-purple.png',
'vela-blue': 'vela-blue.png',
'vela-green': 'vela-green.png',
'vela-orange': 'vela-orange.png',
'vela-purple': 'vela-purple.png',
'arya-blue': 'arya-blue.png',
'arya-green': 'arya-green.png',
'arya-orange': 'arya-orange.png',
'arya-purple': 'arya-purple.png',
Lint changes
2022-09-14 14:26:41 +00:00
nova: 'nova.png',
Showcase refactor
2020-07-01 19:35:12 +00:00
'nova-alt': 'nova-alt.png',
'nova-accent': 'nova-accent.png',
'nova-vue': 'nova-vue.png',
'luna-blue': 'luna-blue.png',
'luna-green': 'luna-green.png',
'luna-pink': 'luna-pink.png',
'luna-amber': 'luna-amber.png',
Lint changes
2022-09-14 14:26:41 +00:00
rhea: 'rhea.png',
Add soho and fluent themes along with theme improvements
2020-10-10 10:20:25 +00:00
'fluent-light': 'fluent-light.png',
'soho-light': 'soho-light.png',
Add logos
2020-11-28 19:55:09 +00:00
'soho-dark': 'soho-dark.png',
Add viva theme
2021-01-13 09:24:57 +00:00
'viva-light': 'viva-light.svg',
'viva-dark': 'viva-dark.svg',
Lint changes
2022-09-14 14:26:41 +00:00
mira: 'mira.jpg',
nano: 'nano.jpg',
Add tailwind logo
2021-09-06 09:17:44 +00:00
'tailwind-light': 'tailwind-light.png',
Update Lara logos
2021-11-15 09:07:43 +00:00
'lara-dark-indigo': 'lara-dark-indigo.png',
'lara-dark-purple': 'lara-dark-purple.png',
fix routing and app header
2022-02-23 13:44:06 +00:00
'lara-dark-teal': 'lara-dark-teal.png',
'lara-dark-blue': 'lara-dark-blue.png',
Update Lara logos
2021-11-15 09:07:43 +00:00
'lara-light-indigo': 'lara-light-indigo.png',
'lara-light-purple': 'lara-light-purple.png',
'lara-light-teal': 'lara-light-teal.png',
'lara-light-blue': 'lara-light-blue.png'
Showcase refactor
2020-07-01 19:35:12 +00:00
}
Lint changes
2022-09-14 14:26:41 +00:00
};
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
},
fix routing and app header
2022-02-23 13:44:06 +00:00
scrollListener: null,
container: null,
Use router-view as child
2022-02-23 19:01:47 +00:00
mounted() {
fix routing and app header
2022-02-23 13:44:06 +00:00
this.bindScrollListener();
},
beforeUnmount() {
if (this.scrollListener) {
this.unbindScrollListener();
}
},
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
methods: {
Dark theme support for charts
2020-05-13 12:25:03 +00:00
changeTheme(event, theme, dark) {
Lifted theme state and switcher up
2022-02-23 19:52:21 +00:00
EventBus.emit('theme-change', { theme: theme, dark: dark });
Hide menu on item click
2020-05-09 19:23:23 +00:00
this.activeMenuIndex = null;
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
event.preventDefault();
},
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
toggleMenu(event, index) {
Lint changes
2022-09-14 14:26:41 +00:00
this.activeMenuIndex = this.activeMenuIndex === index ? null : index;
Separate menu for templates
2019-12-10 08:05:47 +00:00
event.preventDefault();
},
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
onMenuEnter() {
this.bindOutsideClickListener();
Separate menu for templates
2019-12-10 08:05:47 +00:00
},
fix routing and app header
2022-02-23 13:44:06 +00:00
bindScrollListener() {
if (!this.scrollListener) {
if (this.container) {
this.scrollListener = () => {
Lint changes
2022-09-14 14:26:41 +00:00
if (window.scrollY > 0) this.container.classList.add('layout-topbar-sticky');
else this.container.classList.remove('layout-topbar-sticky');
};
fix routing and app header
2022-02-23 13:44:06 +00:00
}
}
window.addEventListener('scroll', this.scrollListener);
},
unbindScrollListener() {
if (this.scrollListener) {
window.removeEventListener('scroll', this.scrollListener);
this.scrollListener = null;
}
},
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
Lint changes
2022-09-14 14:26:41 +00:00
if (this.activeMenuIndex != null && this.isOutsideTopbarMenuClicked(event)) {
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
this.activeMenuIndex = null;
Elevation for configurator
2020-06-18 09:17:14 +00:00
this.unbindOutsideClickListener();
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
}
};
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
document.addEventListener('click', this.outsideClickListener);
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
}
},
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
}
},
Lint fix
2020-01-08 08:07:46 +00:00
isOutsideTopbarMenuClicked(event) {
Refactored topbarmenu
2020-01-08 08:06:24 +00:00
return !(this.$refs.topbarMenu.isSameNode(event.target) || this.$refs.topbarMenu.contains(event.target));
fix routing and app header
2022-02-23 13:44:06 +00:00
},
containerRef(el) {
this.container = el;
Cosmetics
2022-02-24 16:27:26 +00:00
}
Implemented ThemeSwitcher
2019-05-21 12:54:05 +00:00
}
Lint changes
2022-09-14 14:26:41 +00:00
};
Nova vue added configurator
2019-12-20 14:22:50 +00:00
</script>