diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue index b748ec89..46c8675c 100644 --- a/client/components/Reader/SettingsPage/SettingsPage.vue +++ b/client/components/Reader/SettingsPage/SettingsPage.vue @@ -7,6 +7,7 @@ + @@ -59,6 +60,16 @@ + + + + + + @@ -121,6 +132,8 @@ + +
Анимация
@@ -149,7 +162,8 @@
- + + @@ -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() { diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index fb462404..dec97f7b 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/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.fontShifts[this.fontName] = this.fontVertShift; - this.fontList = []; - for (let fontName in this.fontShifts) - this.fontList.push(`12px ${fontName}`); + this.fontList = [`12px ${this.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; } } diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js index 70c6ad30..4b37ff3f 100644 --- a/client/store/modules/reader.js +++ b/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: 'Roboto', fontVertShift: 0}, + {name: 'OpenSans', fontVertShift: -5}, + {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,