Глобальный рефакторинг SettingsPage (в процессе)

client/components/Reader/SettingsPage/PageMoveTab.inc

@@ -1,28 +0,0 @@
-<!---------------------------------------------->
-<div class="part-header">Анимация</div>
-
-<div class="item row">
-    <div class="label-5">Тип</div>
-    <q-select class="col-left" v-model="pageChangeAnimation" :options="pageChangeAnimationOptions"
-        dropdown-icon="la la-angle-down la-sm"
-        outlined dense emit-value map-options
-    />
-</div>
-
-<div class="item row">
-    <div class="label-5">Скорость</div>
-    <NumInput class="col-left" v-model="pageChangeAnimationSpeed" :min="0" :max="100" :disable="pageChangeAnimation == ''"/>
-</div>
-
-<!---------------------------------------------->
-<div class="part-header">Другое</div>
-
-<div class="item row">
-    <div class="label-5">Страница</div>
-    <q-checkbox v-model="keepLastToFirst" size="xs" label="Переносить последнюю строку">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Переносить последнюю строку страницы<br>
-            в начало следующей при листании
-        </q-tooltip>
-    </q-checkbox>
-</div>

client/components/Reader/SettingsPage/PageMoveTab/PageMoveTab.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Анимация
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Тип
+            </div>
+            <q-select
+                v-model="form.pageChangeAnimation" class="col-left" :options="pageChangeAnimationOptions"
+                dropdown-icon="la la-angle-down la-sm"
+                outlined dense emit-value map-options
+            />
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Скорость
+            </div>
+            <NumInput v-model="form.pageChangeAnimationSpeed" class="col-left" :min="0" :max="100" :disable="form.pageChangeAnimation == ''" />
+        </div>
+
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Другое
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Страница
+            </div>
+            <q-checkbox v-model="form.keepLastToFirst" size="xs" label="Переносить последнюю строку">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Переносить последнюю строку страницы<br>
+                    в начало следующей при листании
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+import NumInput from '../../../share/NumInput.vue';
+
+const componentOptions = {
+    components: {
+        NumInput,
+    },
+};
+class PageMoveTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get pageChangeAnimationOptions() {
+        let result = [
+            {label: 'Нет', value: ''},
+            {label: 'Вверх-вниз', value: 'downShift'},
+            (!this.form.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
+            {label: 'Протаивание', value: 'thaw'},
+            {label: 'Мерцание', value: 'blink'},
+            {label: 'Вращение', value: 'rotate'},
+            (this.form.wallpaper == '' && !this.form.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
+        ];        
+
+        result = result.filter(v => v);
+
+        return result;
+    }
+}
+
+export default vueComponent(PageMoveTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 150px;
+}
+</style>

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -87,9 +87,7 @@
                 <!-- Управление ------------------------------------------------------------------>
                 <KeysTab v-if="selectedTab == 'keys'" :form="form" />
                 <!-- Листание -------------------------------------------------------------------->
-                <!--div v-if="selectedTab == 'pagemove'" class="fit tab-panel">
-                    @@include('./PageMoveTab.inc');
-                </div-->
+                <PageMoveTab v-if="selectedTab == 'pagemove'" :form="form" />
                 <!-- Конвертирование ------------------------------------------------------------->
                 <!--div v-if="selectedTab == 'convert'" class="fit tab-panel">
                     @@include('./ConvertTab.inc');
@@ -121,7 +119,6 @@ import _ from 'lodash';
 import * as utils from '../../../share/utils';
 import * as cryptoUtils from '../../../share/cryptoUtils';
 import Window from '../../share/Window.vue';
-import NumInput from '../../share/NumInput.vue';
 import wallpaperStorage from '../share/wallpaperStorage';
 
 import readerApi from '../../../api/reader';
@@ -132,26 +129,27 @@ import defPalette from './defPalette';
 import ProfilesTab from './ProfilesTab/ProfilesTab.vue';
 import ToolBarTab from './ToolBarTab/ToolBarTab.vue';
 import KeysTab from './KeysTab/KeysTab.vue';
+import PageMoveTab from './PageMoveTab/PageMoveTab.vue';
 
 const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
 
 const componentOptions = {
     components: {
         Window,
-        NumInput,
         //pages
         ProfilesTab,
         ToolBarTab,
         KeysTab,
+        PageMoveTab,
     },
     watch: {
         settings: function() {
             this.settingsChanged();//no await
         },
         form: {
-            handler(newValue) {
+            handler() {
                 if (this.inited && !this.setsChanged) {
-                    this.commit('reader/setSettings', _.cloneDeep(newValue));
+                    this.debouncedCommitSettings();
                 }
             },
             deep: true,
@@ -181,6 +179,9 @@ const componentOptions = {
             if (newValue != '' && this.pageChangeAnimation == 'flip')
                 this.pageChangeAnimation = '';
         },
+        /*this.$watch('form.dualPageMode', (newValue) => {
+            console.log(newValue);
+        })*/        
         dualPageMode(newValue) {
             if (newValue && this.pageChangeAnimation == 'flip' || this.pageChangeAnimation == 'rightShift')
                 this.pageChangeAnimation = '';
@@ -240,6 +241,10 @@ class SettingsPage {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
 
+        this.debouncedCommitSettings = _.debounce(() => {
+            this.commit('reader/setSettings', _.cloneDeep(this.form));
+        }, 100);
+
         this.settingsChanged();//no await
     }
 
@@ -333,22 +338,6 @@ class SettingsPage {
         return result;
     }
 
-    get pageChangeAnimationOptions() {
-        let result = [
-            {label: 'Нет', value: ''},
-            {label: 'Вверх-вниз', value: 'downShift'},
-            (!this.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
-            {label: 'Протаивание', value: 'thaw'},
-            {label: 'Мерцание', value: 'blink'},
-            {label: 'Вращение', value: 'rotate'},
-            (this.wallpaper == '' && !this.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
-        ];        
-
-        result = result.filter(v => v);
-
-        return result;
-    }
-
     get predefineTextColors() {
         return defPalette.concat([
           '#ffffff',
@@ -539,7 +528,7 @@ export default vueComponent(SettingsPage);
     width: 75px;
 }
 
-.label-2, .label-5 {
+.label-2 {
     width: 110px;
 }
 
@@ -556,9 +545,6 @@ export default vueComponent(SettingsPage);
     padding: 0;
 }
 
-.col-left {
-    width: 150px;
-}
 </style>
 
 <style>