From 410a2872e42dc2cd62210062fce1bd560165dfca Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 23 Feb 2022 22:52:21 +0300
Subject: [PATCH] Lifted theme state and switcher up

---
 public/index.html                   |  2 +-
 src/App.vue                         | 34 ++------------------
 src/AppConfigurator.vue             |  7 ++---
 src/AppTopBar.vue                   | 11 +++----
 src/AppWrapper.vue                  | 34 +++++++++++++++++++-
 src/Home.vue                        | 49 ++++++++++++-----------------
 src/main.js                         |  2 +-
 src/views/landing/HeaderSection.vue |  8 ++---
 src/views/landing/ThemeSection.vue  | 11 ++++---
 9 files changed, 75 insertions(+), 83 deletions(-)
diff --git a/public/index.html b/public/index.html
index 399d9e6bf..0fc1de052 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
         <link rel="icon" href="<%= BASE_URL %>favicon.ico">
         <title>PrimeVUE</title>
         <link id="theme-link" rel="stylesheet" href="<%= BASE_URL %>themes/lara-light-blue/theme.css">
-        <link id="home-link" rel="stylesheet" href="<%= BASE_URL %>styles/landing/themes/lara-light-blue/theme.css">
+        <link id="home-table-link" rel="stylesheet" href="<%= BASE_URL %>styles/landing/themes/lara-light-indigo/theme.css">
     </head>
 
     <body>
diff --git a/src/App.vue b/src/App.vue
index 4024832a0..43b9eb334 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,9 +12,9 @@
             </div>
         </div>
 
-        <app-topbar @menubutton-click="onMenuButtonClick" @change-theme="changeTheme" :theme="theme" />
+        <app-topbar @menubutton-click="onMenuButtonClick" />
         <app-menu :active="sidebarActive" />
-        <app-configurator @change-theme="changeTheme" :theme="theme" />
+        <app-configurator  />
         <div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
         <div class="layout-content">
             <div class="layout-content-inner">
@@ -30,7 +30,6 @@
 </template>
 
 <script>
-import EventBus from '@/AppEventBus';
 import DomHandler from '@/components/utils/DomHandler';
 import AppTopBar from '@/AppTopBar.vue';
 import AppMenu from '@/AppMenu.vue';
@@ -40,7 +39,6 @@ import AppConfigurator from '@/AppConfigurator.vue';
 export default {
     data() {
         return {
-            theme: this.$appState.darkTheme ? 'lara-dark-indigo' : 'lara-light-indigo',
             sidebarActive: false,
             newsActive: false
         }
@@ -49,8 +47,6 @@ export default {
         if (this.isOutdatedIE()) {
             this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
         }
-
-        this.changeTheme({ theme: this.theme, dark: this.$appState.darkTheme });
     },
     watch: {
         $route: {
@@ -89,32 +85,6 @@ export default {
             sessionStorage.setItem('primevue-news-hidden', 'true');
             event.stopPropagation();
         },
-        changeTheme(event) {
-            let themeLink = document.getElementById('theme-link');
-            let hrefThemeLink = 'themes/' + event.theme + '/theme.css';
-
-            this.activeMenuIndex = null;
-
-            EventBus.emit('change-theme', { theme: event.theme, dark: event.dark });
-            
-            this.theme = event.theme;
-            this.$appState.darkTheme = event.dark;
-            this.replaceLink(themeLink, hrefThemeLink);
-        },
-        replaceLink(linkElement, href) {
-            const id = linkElement.getAttribute('id');
-            const cloneLinkElement = linkElement.cloneNode(true);
-
-            cloneLinkElement.setAttribute('href', href);
-            cloneLinkElement.setAttribute('id', id + '-clone');
-
-            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-
-            cloneLinkElement.addEventListener('load', () => {
-                linkElement.remove();
-                cloneLinkElement.setAttribute('id', id);
-            });
-        },
         addClass(element, className) {
             if (!this.hasClass(element, className)) {
                 if (element.classList)
diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index d6c69937e..5839eed03 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -373,7 +373,6 @@ import EventBus from '@/AppEventBus';
 
 export default {
     props: {
-        theme: String,
         inputStyle: String
     },
     data() {
@@ -394,7 +393,7 @@ export default {
         }
     },
     beforeUnmount() {
-        EventBus.off('change-theme', this.themeChangeListener);
+        EventBus.off('theme-change', this.themeChangeListener);
     },
     mounted() {
         this.themeChangeListener = (event) => {
@@ -406,7 +405,7 @@ export default {
             this.applyScale();
         };
 
-        EventBus.on('change-theme', this.themeChangeListener);
+        EventBus.on('theme-change', this.themeChangeListener);
     },
     methods: {
         toggleConfigurator(event) {
@@ -424,7 +423,7 @@ export default {
             event.preventDefault();
         },
         changeTheme(event, theme, dark) {
-            this.$emit('change-theme', {theme: theme, dark: dark});
+            EventBus.emit('theme-change', { theme: theme, dark: dark });
             event.preventDefault();
         },
         bindOutsideClickListener() {
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 5d8561a28..260674bc6 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -6,8 +6,8 @@
         <router-link to="/" class="logo">
             <img alt="logo" src="./assets/images/primevue-logo.png">
         </router-link>
-        <div class="app-theme" v-tooltip.bottom="theme">
-            <img :src="'demo/images/themes/' + logoMap[theme]" />
+        <div class="app-theme" v-tooltip.bottom="$appState.theme">
+            <img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
         </div>
         <ul ref="topbarMenu" class="topbar-menu">
             <li><router-link to="/setup">Get Started</router-link></li>
@@ -127,6 +127,8 @@
 </template>
 
 <script>
+import EventBus from '@/AppEventBus';
+
 export default {
     outsideClickListener: null,
     darkDemoStyle: null,
@@ -135,9 +137,6 @@ export default {
             this.activeMenuIndex = null;
         }
     },
-    props: {
-        theme: null
-    },
     data() {
         return {
             activeMenuIndex: null,
@@ -206,7 +205,7 @@ export default {
     },
     methods: {
         changeTheme(event, theme, dark) {
-            this.$emit('change-theme', {theme: theme, dark: dark});
+            EventBus.emit('theme-change', { theme: theme, dark: dark });
             this.activeMenuIndex = null;
             event.preventDefault();
         },
diff --git a/src/AppWrapper.vue b/src/AppWrapper.vue
index e3bc8ac8d..ee883013e 100644
--- a/src/AppWrapper.vue
+++ b/src/AppWrapper.vue
@@ -1,3 +1,35 @@
 <template>
     <router-view></router-view>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import EventBus from '@/AppEventBus';
+
+export default {
+    themeChangeListener: null,
+    mounted() {
+        this.themeChangeListener = (event) => {
+            const elementId = 'theme-link';
+            const linkElement = document.getElementById(elementId);
+            const cloneLinkElement = linkElement.cloneNode(true);
+            const newThemeUrl = linkElement.getAttribute('href').replace(this.$appState.theme, event.theme);
+
+            cloneLinkElement.setAttribute('id', elementId + '-clone');
+            cloneLinkElement.setAttribute('href', newThemeUrl);
+            cloneLinkElement.addEventListener('load', () => {
+                linkElement.remove();
+                cloneLinkElement.setAttribute('id', elementId);
+            });
+            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+        
+            this.$appState.theme = event.theme;
+            this.$appState.darkTheme = event.dark;
+        };
+
+        EventBus.on('theme-change', this.themeChangeListener);
+    },
+    beforeUnmount() {
+        EventBus.off('theme-change', this.themeChangeListener);
+    }
+}
+</script>
diff --git a/src/Home.vue b/src/Home.vue
index fe504e03d..3c8313a87 100755
--- a/src/Home.vue
+++ b/src/Home.vue
@@ -1,11 +1,11 @@
 <template>
     <div :class="landingClass">
         <div class="landing-intro">
-            <HeaderSection @change-theme="onToggleTheme" />
+            <HeaderSection @theme-toggle="onThemeToggle" />
             <HeroSection />
         </div>
         <ComponentSection />
-        <ThemeSection :theme="theme" @theme-change="onThemeChange" />
+        <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
         <BlockSection />
         <DesignerSection />
         <TemplateSection />
@@ -51,41 +51,32 @@ export default {
         }
     },
     methods: {
-        onToggleTheme() {
-            const theme = this.$appState.darkTheme ? 'lara-light-indigo' : 'lara-dark-indigo';
-            this.tableTheme =  this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
-            this.changeTheme(theme);
+        onThemeToggle() {
+            const newTheme = this.$appState.darkTheme ? 'lara-light-indigo' : 'lara-dark-indigo';
+            const newTableTheme =  this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
 
-            EventBus.emit('change-theme', { theme, dark: !this.$appState.darkTheme });
-            this.$appState.darkTheme = !this.$appState.darkTheme;
+            EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });
+            this.replaceTableTheme(newTableTheme);
         },
-        onThemeChange(theme) {
-            this.changeTheme(theme);
+        onTableThemeChange(value) {
+            this.replaceTableTheme(value);
         },
-        changeTheme(theme) {
-            let themeLink = document.getElementById('theme-link');
-            let hrefThemeLink = 'themes/' + theme + '/theme.css';
-
-            let homeLink = document.getElementById('home-link');
-            let hrefHomeLink = 'styles/landing/themes/' + theme + '/theme.css';
-
-            this.replaceLink(themeLink, hrefThemeLink);
-            this.replaceLink(homeLink, hrefHomeLink);
-        },
-        replaceLink(linkElement, href) {
-            const id = linkElement.getAttribute('id');
+        replaceTableTheme(newTheme) {
+            const elementId = 'home-table-link';
+            const linkElement = document.getElementById(elementId);
             const cloneLinkElement = linkElement.cloneNode(true);
+            const newThemeUrl = linkElement.getAttribute('href').replace(this.tableTheme, newTheme);
 
-            cloneLinkElement.setAttribute('href', href);
-            cloneLinkElement.setAttribute('id', id + '-clone');
-
-            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-
+            cloneLinkElement.setAttribute('id', elementId + '-clone');
+            cloneLinkElement.setAttribute('href', newThemeUrl);
             cloneLinkElement.addEventListener('load', () => {
                 linkElement.remove();
-                cloneLinkElement.setAttribute('id', id);
+                cloneLinkElement.setAttribute('id', elementId);
             });
-        },
+            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+            this.tableTheme = newTheme;
+        }
     },
     computed: {
         landingClass() {
diff --git a/src/main.js b/src/main.js
index ac7491792..66ee251cc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -118,7 +118,7 @@ router.beforeEach(function (to, from, next) {
 
 const app = createApp(AppWrapper);
 
-app.config.globalProperties.$appState = reactive({darkTheme: false, codeSandbox: false, sourceType: 'options-api'});
+app.config.globalProperties.$appState = reactive({theme: 'lara-light-blue', darkTheme: false, codeSandbox: false, sourceType: 'options-api'});
 
 app.use(PrimeVue, {ripple: true});
 app.use(ToastService);
diff --git a/src/views/landing/HeaderSection.vue b/src/views/landing/HeaderSection.vue
index 2290f4edc..1d59b3df4 100644
--- a/src/views/landing/HeaderSection.vue
+++ b/src/views/landing/HeaderSection.vue
@@ -39,7 +39,7 @@
             <a href="https://discord.gg/gzKFYnpmCY" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
                 <i class="pi pi-discord"></i>
             </a>
-            <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="changeTheme">
+            <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" @click="toggleTheme">
                 <i :class="['pi', {'pi-sun': isDarkTheme(), 'pi-moon': !isDarkTheme()}]"></i>
             </button>
             <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button" @click="toggleMenuActive" >
@@ -51,7 +51,7 @@
 
 <script>
 export default {
-    emits: ['change-theme'],
+    emits: ['theme-toggle'],
     data() {
         return {
             menuActive: false
@@ -71,8 +71,8 @@ export default {
         isDarkTheme() {
             return this.$appState.darkTheme === true;
         },
-        changeTheme() {
-            this.$emit('change-theme');
+        toggleTheme() {
+            this.$emit('theme-toggle');
         },
         toggleMenuActive() {
             this.menuActive = !this.menuActive;
diff --git a/src/views/landing/ThemeSection.vue b/src/views/landing/ThemeSection.vue
index 964f531ce..25bbc3bd6 100644
--- a/src/views/landing/ThemeSection.vue
+++ b/src/views/landing/ThemeSection.vue
@@ -3,9 +3,9 @@
         <div class="section-header">Themes</div>
         <p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p>
         <div class="flex flex-wrap justify-content-center">
-            <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': this.theme && this.theme.startsWith('lara')}]" @click="changeTheme('lara', 'indigo')">PrimeOne</button>
-            <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': this.theme && this.theme.startsWith('md')}]" @click="changeTheme('md', 'indigo')">Material</button>
-            <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': this.theme && this.theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
+            <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('lara')}]" @click="changeTheme('lara', 'indigo')">PrimeOne</button>
+            <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('md')}]" @click="changeTheme('md', 'indigo')">Material</button>
+            <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
             <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
         </div>
         <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
@@ -77,6 +77,7 @@
             </div>
         </div>
     </section>
+    
 </template>
 
 <script>
@@ -84,7 +85,7 @@ import CustomerService from '../../service/CustomerService';
 import {FilterMatchMode,FilterOperator} from 'primevue/api';
 
 export default {
-    emits: ['theme-change'],
+    emits: ['table-theme-change'],
     props: {
         theme: null
     },
@@ -120,7 +121,7 @@ export default {
     methods: {
         changeTheme(name, color) {
             let newTheme = name + '-' + (this.$appState.darkTheme ? 'dark' : 'light') + '-' + color;
-            this.$emit('theme-change', newTheme);
+            this.$emit('table-theme-change', newTheme);
         },
         formatDate(value) {
             return value.toLocaleDateString('en-US', {
