From 3161247da9a60ed25ecf92cde442ab6338d48cf3 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Mon, 3 Feb 2020 16:57:39 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Reader/HelpPage/HelpPage.vue   | 63 ++++++++++++-------
 1 file changed, 39 insertions(+), 24 deletions(-)

diff --git a/client/components/Reader/HelpPage/HelpPage.vue b/client/components/Reader/HelpPage/HelpPage.vue
index e5db63f7..f54c25b7 100644
--- a/client/components/Reader/HelpPage/HelpPage.vue
+++ b/client/components/Reader/HelpPage/HelpPage.vue
@@ -9,21 +9,14 @@
                 v-model="selectedTab"
                 toggle-color="primary"
                 no-caps unelevated
-                :options="[
-                    {label: 'Общее', value: 'common'},
-                    {label: 'Клавиатура', value: 'hotkeys'},
-                    {label: 'Мышь/тачскрин', value: 'mouse'},
-                    {label: 'История версий', value: 'releases'},
-                    {label: 'Помочь проекту', value: 'donate'}
-                ]"
+                :options="buttons"
             />
             <div class="separator"></div>
 
-            <CommonHelpPage v-if="selectedTab == 'common'" class="col"></CommonHelpPage>
-            <HotkeysHelpPage v-if="selectedTab == 'hotkeys'" class="col"></HotkeysHelpPage>
-            <MouseHelpPage v-if="selectedTab == 'mouse'" class="col"></MouseHelpPage>
-            <VersionHistoryPage v-if="selectedTab == 'releases'" class="col"></VersionHistoryPage>
-            <DonateHelpPage v-if="selectedTab == 'donate'" class="col"></DonateHelpPage>
+            <keep-alive>
+                <component ref="page" class="col" :is="activePage"
+                ></component>
+            </keep-alive>
         </div>
     </Window>
 </template>
@@ -37,32 +30,54 @@ import Window from '../../share/Window.vue';
 import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
 import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
 import MouseHelpPage from './MouseHelpPage/MouseHelpPage.vue';
-import DonateHelpPage from './DonateHelpPage/DonateHelpPage.vue';
 import VersionHistoryPage from './VersionHistoryPage/VersionHistoryPage.vue';
+import DonateHelpPage from './DonateHelpPage/DonateHelpPage.vue';
+
+const pages = {
+    'CommonHelpPage': CommonHelpPage,
+    'HotkeysHelpPage': HotkeysHelpPage,
+    'MouseHelpPage': MouseHelpPage,
+    'VersionHistoryPage': VersionHistoryPage,
+    'DonateHelpPage': DonateHelpPage,
+};
+
+const tabs = [
+    ['CommonHelpPage', 'Общее'],
+    ['HotkeysHelpPage', 'Клавиатура'],
+    ['MouseHelpPage', 'Мышь/тачскрин'],
+    ['VersionHistoryPage', 'История версий'],
+    ['DonateHelpPage', 'Помочь проекту'],
+];
 
 export default @Component({
-    components: {
-        Window,
-        CommonHelpPage,
-        HotkeysHelpPage,
-        MouseHelpPage,
-        DonateHelpPage,
-        VersionHistoryPage,
-    },
+    components: Object.assign({ Window }, pages),
 })
 class HelpPage extends Vue {
-    selectedTab = 'common';
+    selectedTab = 'CommonHelpPage';
 
     close() {
         this.$emit('help-toggle');
     }
 
+    get activePage() {
+        if (pages[this.selectedTab])
+            return pages[this.selectedTab];
+        return null;
+    }
+
+    get buttons() {
+        let result = [];
+        for (const tab of tabs)
+            result.push({label: tab[1], value: tab[0]});
+        return result;
+    }
+
     activateDonateHelpPage() {
-        this.selectedTab = 'donate';
+        this.selectedTab = 'DonateHelpPage';
     }
 
     activateVersionHistoryHelpPage() {
-        this.selectedTab = 'releases';
+        this.selectedTab = 'VersionHistoryPage';
     }
 
     keyHook(event) {