diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue index 6391d3a8..e4bbaee6 100644 --- a/client/components/Reader/SettingsPage/SettingsPage.vue +++ b/client/components/Reader/SettingsPage/SettingsPage.vue @@ -5,8 +5,6 @@
- -
//----------------------------------------------------------------------------- import vueComponent from '../../vueComponent.js'; +import { reactive } from 'vue'; import _ from 'lodash'; //stuff -import * as utils from '../../../share/utils'; -import * as cryptoUtils from '../../../share/cryptoUtils'; import Window from '../../share/Window.vue'; -import wallpaperStorage from '../share/wallpaperStorage'; -import readerApi from '../../../api/reader'; import rstore from '../../../store/modules/reader'; //pages @@ -107,7 +102,7 @@ const componentOptions = { }, form: { handler() { - if (this.inited && !this.setsChanged) { + if (this.inited && !this.isSetsChanged) { this.debouncedCommitSettings(); } }, @@ -134,31 +129,9 @@ const componentOptions = { const font = (newValue ? newValue : this.fontName); this.vertShift = this.fontShifts[font] || 0; }, - wallpaper: function(newValue) { - 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 = ''; - }, textColor: function(newValue) { this.textColorFiltered = newValue; }, - textColorFiltered: function(newValue) { - if (hex.test(newValue)) - this.textColor = newValue; - }, - backgroundColor: function(newValue) { - this.bgColorFiltered = newValue; - }, - bgColorFiltered: function(newValue) { - if (hex.test(newValue)) - this.backgroundColor = newValue; - }, statusBarColor(newValue) { this.statusBarColorFiltered = newValue; }, @@ -175,13 +148,11 @@ class SettingsPage { selectedTab = 'profiles'; - setsChanged = false; + isSetsChanged = false; fontBold = false; fontItalic = false; vertShift = 0; - textColorFiltered = ''; - bgColorFiltered = ''; statusBarColorFiltered = ''; webFonts = []; fonts = []; @@ -205,9 +176,9 @@ class SettingsPage { } async settingsChanged() { - this.setsChanged = true; + this.isSetsChanged = true; try { - this.form = _.cloneDeep(this.settings); + this.form = reactive(_.cloneDeep(this.settings)); const form = this.form; this.fontBold = (form.fontWeight == 'bold'); @@ -217,13 +188,11 @@ class SettingsPage { this.webFonts = rstore.webFonts; const font = (form.webFontName ? form.webFontName : form.fontName); this.vertShift = form.fontShifts[font] || 0; - this.textColorFiltered = form.textColor; - this.bgColorFiltered = form.backgroundColor; this.dualDivColorFiltered = form.dualDivColor; this.statusBarColorFiltered = form.statusBarColor; } finally { await this.$nextTick(); - this.setsChanged = false; + this.isSetsChanged = false; } } @@ -231,24 +200,6 @@ class SettingsPage { return this.$store.state.reader.settings; } - get wallpaperOptions() { - let result = [{label: 'Нет', value: ''}]; - - const userWallpapers = _.cloneDeep(this.userWallpapers); - userWallpapers.sort((a, b) => a.label.localeCompare(b.label)); - - for (const wp of userWallpapers) { - if (wallpaperStorage.keyExists(wp.cssClass)) - result.push({label: wp.label, value: wp.cssClass}); - } - - for (let i = 1; i <= 17; i++) { - result.push({label: i, value: `paper${i}`}); - } - - return result; - } - get fontsOptions() { let result = []; this.fonts.forEach(font => { @@ -296,101 +247,6 @@ class SettingsPage { } } - loadWallpaperFileClick() { - this.$refs.file.click(); - } - - loadWallpaperFile() { - const file = this.$refs.file.files[0]; - if (file.size > 10*1024*1024) { - this.$root.stdDialog.alert('Файл обоев не должен превышать в размере 10Mb', 'Ошибка'); - return; - } - - if (file.type != 'image/png' && file.type != 'image/jpeg') { - this.$root.stdDialog.alert('Файл обоев должен иметь тип PNG или JPEG', 'Ошибка'); - return; - } - - if (this.userWallpapers.length >= 100) { - this.$root.stdDialog.alert('Превышено максимальное количество пользовательских обоев.', 'Ошибка'); - return; - } - - this.$refs.file.value = ''; - if (file) { - const reader = new FileReader(); - - reader.onload = (e) => { - (async() => { - const data = e.target.result; - const key = utils.toHex(cryptoUtils.sha256(data)); - const label = `#${key.substring(0, 4)}`; - const cssClass = `user-paper${key}`; - - const newUserWallpapers = _.cloneDeep(this.userWallpapers); - const index = _.findIndex(newUserWallpapers, (item) => (item.cssClass == cssClass)); - - if (index < 0) - newUserWallpapers.push({label, cssClass}); - if (!wallpaperStorage.keyExists(cssClass)) { - await wallpaperStorage.setData(cssClass, data); - //отправим data на сервер в файл `/upload/${key}` - try { - //const res = - await readerApi.uploadFileBuf(data); - //console.log(res); - } catch (e) { - console.error(e); - } - } - - this.userWallpapers = newUserWallpapers; - this.wallpaper = cssClass; - })(); - } - - reader.readAsDataURL(file); - } - } - - async delWallpaper() { - if (this.wallpaper.indexOf('user-paper') == 0) { - const newUserWallpapers = []; - for (const wp of this.userWallpapers) { - if (wp.cssClass != this.wallpaper) { - newUserWallpapers.push(wp); - } - } - - await wallpaperStorage.removeData(this.wallpaper); - - this.userWallpapers = newUserWallpapers; - this.wallpaper = ''; - } - } - - async downloadWallpaper() { - if (this.wallpaper.indexOf('user-paper') != 0) - return; - - try { - const d = this.$refs.download; - - const dataUrl = await wallpaperStorage.getData(this.wallpaper); - - if (!dataUrl) - throw new Error('Файл обоев не найден'); - - d.href = dataUrl; - d.download = `wallpaper-#${this.wallpaper.replace('user-paper', '').substring(0, 4)}`; - - d.click(); - } catch (e) { - this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'}); - } - } - keyHook(event) { if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') { this.close(); diff --git a/client/components/Reader/SettingsPage/ViewTab/Color/Color.vue b/client/components/Reader/SettingsPage/ViewTab/Color/Color.vue new file mode 100644 index 00000000..7113addd --- /dev/null +++ b/client/components/Reader/SettingsPage/ViewTab/Color/Color.vue @@ -0,0 +1,326 @@ + + + + + diff --git a/client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue b/client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue index 5be47b40..e2515390 100644 --- a/client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue +++ b/client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue @@ -163,10 +163,10 @@ const componentOptions = { }, watch: { form() { - this.formChanged(); + this.formChanged();//no await }, dualDivColorFiltered(newValue) { - if (this.helper.isHexColor(newValue)) + if (!this.isFormChanged && this.helper.isHexColor(newValue)) this.form.dualDivColor = newValue; }, } @@ -180,17 +180,29 @@ class Mode { helper = helper; defPalette = defPalette; + isFormChanged = false; dualDivColorFiltered = ''; created() { - this.formChanged(); + this.formChanged();//no await } mounted() { } - formChanged() { - this.dualDivColorFiltered = this.form.dualDivColor; + async formChanged() { + this.isFormChanged = true; + try { + this.dualDivColorFiltered = this.form.dualDivColor; + + if (this.form.dualPageMode + && (this.form.pageChangeAnimation == 'flip' || this.form.pageChangeAnimation == 'rightShift') + ) + this.form.pageChangeAnimation = ''; + } finally { + await this.$nextTick(); + this.isFormChanged = false; + } } } diff --git a/client/components/Reader/SettingsPage/ViewTab/ViewTab.vue b/client/components/Reader/SettingsPage/ViewTab/ViewTab.vue index fb204c05..c817da9f 100644 --- a/client/components/Reader/SettingsPage/ViewTab/ViewTab.vue +++ b/client/components/Reader/SettingsPage/ViewTab/ViewTab.vue @@ -20,6 +20,7 @@
+