diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue index cbfae9ee..b43477f8 100644 --- a/client/components/Reader/Reader.vue +++ b/client/components/Reader/Reader.vue @@ -277,6 +277,7 @@ class Reader extends Vue { this.updateHeaderMinWidth(); (async() => { + await wallpaperStorage.init(); await bookManager.init(this.settings); bookManager.addEventListener(this.bookManagerEvent); diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue index b17bdc50..79a58e6f 100644 --- a/client/components/Reader/SettingsPage/SettingsPage.vue +++ b/client/components/Reader/SettingsPage/SettingsPage.vue @@ -79,6 +79,7 @@ import Component from 'vue-class-component'; 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 UserHotKeys from './UserHotKeys/UserHotKeys.vue'; @@ -279,8 +280,12 @@ class SettingsPage extends Vue { get wallpaperOptions() { let result = [{label: 'Нет', value: ''}]; - for (const wp of this.userWallpapers) { - result.push({label: wp.label, value: wp.cssClass}); + 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++) { @@ -579,19 +584,19 @@ class SettingsPage extends Vue { const reader = new FileReader(); reader.onload = (e) => { - const newUserWallpapers = _.cloneDeep(this.userWallpapers); - let n = 0; - for (const wp of newUserWallpapers) { - const newN = parseInt(wp.label.replace(/\D/g, ''), 10); - if (newN > n) - n = newN; - } - n++; - - const cssClass = `user-paper${n}`; - newUserWallpapers.push({label: `#${n}`, cssClass}); (async() => { - await wallpaperStorage.setData(cssClass, e.target.result); + 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); this.userWallpapers = newUserWallpapers; this.wallpaper = cssClass; diff --git a/client/components/Reader/SettingsPage/include/ViewTab/Color.inc b/client/components/Reader/SettingsPage/include/ViewTab/Color.inc index ad5d22dc..934df86b 100644 --- a/client/components/Reader/SettingsPage/include/ViewTab/Color.inc +++ b/client/components/Reader/SettingsPage/include/ViewTab/Color.inc @@ -58,7 +58,7 @@ > diff --git a/client/components/Reader/share/wallpaperStorage.js b/client/components/Reader/share/wallpaperStorage.js index 904f5f47..192c4601 100644 --- a/client/components/Reader/share/wallpaperStorage.js +++ b/client/components/Reader/share/wallpaperStorage.js @@ -6,6 +6,13 @@ const wpStore = localForage.createInstance({ }); class WallpaperStorage { + constructor() { + this.cachedKeys = []; + } + + async init() { + this.cachedKeys = await wpStore.keys(); + } async getLength() { return await wpStore.length(); @@ -13,6 +20,7 @@ class WallpaperStorage { async setData(key, data) { await wpStore.setItem(key, data); + this.cachedKeys = await wpStore.keys(); } async getData(key) { @@ -21,6 +29,11 @@ class WallpaperStorage { async removeData(key) { await wpStore.removeItem(key); + this.cachedKeys = await wpStore.keys(); + } + + keyExists(key) {//не асинхронная + return this.cachedKeys.includes(key); } } diff --git a/client/share/utils.js b/client/share/utils.js index c68d48a7..7a61adeb 100644 --- a/client/share/utils.js +++ b/client/share/utils.js @@ -13,6 +13,10 @@ export function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } +export function toHex(buf) { + return Buffer.from(buf).toString('hex'); +} + export function stringToHex(str) { return Buffer.from(str).toString('hex'); }