Добавил fontVertShift в настройки, местами рефакторинг

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -7,6 +7,7 @@
                 </template>
 
                 <el-tabs class="tabs" type="border-card" tab-position="left" v-model="selectedTab">
+                    <!--------------------------------------------------------------------------->
                     <el-tab-pane label="Вид">
 
                         <el-form :model="form" size="small" label-width="120px">
@@ -59,6 +60,16 @@
                             <el-form-item label="Размер">
                                 <el-input-number v-model="fontSize" :min="5" :max="100"></el-input-number>
                             </el-form-item>
+                            <el-form-item label="Сдвиг">
+                                        <el-tooltip :open-delay="500" effect="light">
+                                            <template slot="content">
+                                                Сдвиг шрифта по вертикали в процентах от размера.<br>
+                                                Отрицательное значение сдвигает вверх, положительное -<br>
+                                                вниз
+                                            </template>
+                                            <el-input-number v-model="vertShift" :min="-100" :max="100"></el-input-number>
+                                        </el-tooltip>
+                            </el-form-item>
 
                             <el-form-item label="Стиль">
                                 <el-col :span="8">
@@ -121,6 +132,8 @@
                             </el-form-item>
                         </el-form>
                     </el-tab-pane>
+
+                    <!--------------------------------------------------------------------------->
                     <el-tab-pane label="Листание">
                         <el-form :model="form" size="mini" label-width="120px">
                             <div class="partHeader">Анимация</div>
@@ -149,7 +162,8 @@
                         </el-form>
                         
                     </el-tab-pane>
-                    <el-tab-pane label="Другое">
+                    <!--------------------------------------------------------------------------->
+                    <el-tab-pane label="Прочее">
                         <el-form :model="form" size="mini" label-width="120px">
                             <el-form-item label="URL">
                                 <el-tooltip :open-delay="500" effect="light">
@@ -199,6 +213,19 @@ export default @Component({
         fontItalic: function(newValue) {
             this.fontStyle = (newValue ? 'italic' : '');
         },
+        vertShift: function(newValue) {
+            const font = (this.webFontName ? this.webFontName : this.fontName);
+            this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
+            this.fontVertShift = newValue;
+        },
+        fontName: function(newValue) {
+            const font = (this.webFontName ? this.webFontName : newValue);
+            this.vertShift = this.fontShifts[font] || 0;
+        },
+        webFontName: function(newValue) {
+            const font = (newValue ? newValue : this.fontName);
+            this.vertShift = this.fontShifts[font] || 0;
+        },
     },
 })
 class SettingsPage extends Vue {
@@ -206,6 +233,7 @@ class SettingsPage extends Vue {
     form = {};
     fontBold = false;
     fontItalic = false;
+    vertShift = 0;
 
     webFonts = [];
     fonts = [];
@@ -214,11 +242,11 @@ class SettingsPage extends Vue {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
 
-        this.form = this.settings;
+        this.form = Object.assign({}, this.settings);
         for (let prop in rstore.settingDefaults) {
             this[prop] = this.form[prop];
             this.$watch(prop, (newValue) => {
-                this.form = Object.assign({}, this.form, {[prop]: newValue})
+                this.form = Object.assign({}, this.form, {[prop]: newValue});
             });
         }
         this.fontBold = (this.fontWeight == 'bold');
@@ -226,6 +254,8 @@ class SettingsPage extends Vue {
 
         this.fonts = rstore.fonts;
         this.webFonts = rstore.webFonts;
+        const font = (this.webFontName ? this.webFontName : this.fontName);
+        this.vertShift = this.fontShifts[font] || 0;
     }
 
     get settings() {

client/components/Reader/TextPage/TextPage.vue

@@ -42,7 +42,7 @@ export default @Component({
             this.draw();
         },
         settings: function() {
-            this.loadSettings();
+            this.debouncedLoadSettings();
         },
     },
 })
@@ -88,13 +88,13 @@ class TextPage extends Vue {
             this.drawStatusBar();
         }, 60);        
 
+        this.debouncedLoadSettings = _.throttle(() => {
+            this.loadSettings();
+        }, 50);
+
         this.$root.$on('resize', () => {this.$nextTick(this.onResize)});
         this.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
 
-        this.fontShifts = {};
-        for (const font of rstore.fonts) {
-            this.fontShifts[font.name] = font.fontVertShift;
-        }
 /*
         const settings = Object.assign({}, this.settings);
         let updated = false;
@@ -120,11 +120,7 @@ class TextPage extends Vue {
 
     calcDrawProps() {
         //preloaded fonts
-        if (!this.fontShifts.hasOwnProperty(this.fontName))
+        this.fontList = [`12px ${this.fontName}`];
-            this.fontShifts[this.fontName] = this.fontVertShift;
-        this.fontList = [];
-        for (let fontName in this.fontShifts)
-            this.fontList.push(`12px ${fontName}`);
 
         //widths
         this.realWidth = this.$refs.main.clientWidth;
@@ -162,7 +158,7 @@ class TextPage extends Vue {
         this.statusBarColor = this.hex2rgba(this.textColor || '#000000', this.statusBarColorAlpha);
         this.currentTransition = '';
         this.pageChangeDirectionDown = true;
-        this.fontShift = (this.fontShifts[this.fontName] ? this.fontShifts[this.fontName] : 0)/100;
+        this.fontShift = this.fontVertShift/100;
 
         //drawHelper
         this.drawHelper.realWidth = this.realWidth;
@@ -247,7 +243,7 @@ class TextPage extends Vue {
         if (wf && i >= 0) {
             this.fontName = wf;
             this.fontCssUrl = rstore.webFonts[i].css;
-            this.fontVertShift = rstore.webFonts[i].fontVertShift;
+            this.fontVertShift = settings.fontShifts[wf] || 0;
         }
     }
 

client/store/modules/reader.js

@@ -5,8 +5,8 @@ const fonts = [
     {name: 'GEO_1', label: 'BPG Arial', fontVertShift: 10},
     {name: 'Arimo', fontVertShift: 0},
     {name: 'Avrile', fontVertShift: -10},
-    {name: 'OpenSans', fontVertShift: 0},
+    {name: 'OpenSans', fontVertShift: -5},
-    {name: 'Roboto', fontVertShift: 0},
+    {name: 'Roboto', fontVertShift: 10},
     {name: 'Rubik', fontVertShift: 0},
 ];
 
@@ -14,7 +14,7 @@ const webFonts = [
     {css: 'https://fonts.googleapis.com/css?family=Comfortaa', name: 'Comfortaa', fontVertShift: 10},
     {css: 'https://fonts.googleapis.com/css?family=Lobster', name: 'Lobster', fontVertShift: 0},
     {css: 'https://fonts.googleapis.com/css?family=Oswald', name: 'Oswald', fontVertShift: -20},
-    {css: 'https://fonts.googleapis.com/css?family=Pacifico', name: 'Pacifico', fontVertShift: -40},
+    {css: 'https://fonts.googleapis.com/css?family=Pacifico', name: 'Pacifico', fontVertShift: -35},
     
 ];
 
@@ -26,6 +26,7 @@ const settingDefaults = {
         fontSize: 20,// px
         fontName: 'ReaderDefault',
         webFontName: '',
+        fontVertShift: 0,
 
         lineInterval: 3,// px, межстрочный интервал
         textAlignJustify: true,// выравнивание по ширине
@@ -44,8 +45,14 @@ const settingDefaults = {
         pageChangeTransitionSpeed: 50, //0-100%
 
         allowUrlParamBookPos: false,
+        fontShifts: {},
 };
 
+for (const font of fonts)
+    settingDefaults.fontShifts[font.name] = font.fontVertShift;
+for (const font of webFonts)
+    settingDefaults.fontShifts[font.name] = font.fontVertShift;
+
 // initial state
 const state = {
     toolBarActive: true,