SettingsPage.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
  1. <template lang="includer">
  2. <Window ref="window" height="95%" width="600px" @close="close">
  3. <template slot="header">
  4. Настройки
  5. </template>
  6. <div class="col row">
  7. <div class="full-height">
  8. <q-tabs
  9. ref="tabs"
  10. class="bg-grey-3 text-black"
  11. v-model="selectedTab"
  12. left-icon="la la-caret-up"
  13. right-icon="la la-caret-down"
  14. active-color="white"
  15. active-bg-color="primary"
  16. indicator-color="black"
  17. vertical
  18. no-caps
  19. stretch
  20. inline-label
  21. >
  22. <div v-show="tabsScrollable" class="q-pt-lg"/>
  23. <q-tab class="tab" name="profiles" icon="la la-users" label="Профили" />
  24. <q-tab class="tab" name="view" icon="la la-eye" label="Вид" />
  25. <q-tab class="tab" name="buttons" icon="la la-grip-horizontal" label="Кнопки" />
  26. <q-tab class="tab" name="keys" icon="la la-gamepad" label="Управление" />
  27. <q-tab class="tab" name="pagemove" icon="la la-school" label="Листание" />
  28. <q-tab class="tab" name="others" icon="la la-list-ul" label="Прочее" />
  29. <q-tab class="tab" name="reset" icon="la la-broom" label="Сброс" />
  30. <div v-show="tabsScrollable" class="q-pt-lg"/>
  31. </q-tabs>
  32. </div>
  33. <div class="col fit">
  34. <!-- Профили --------------------------------------------------------------------->
  35. <div v-if="selectedTab == 'profiles'" class="fit tab-panel">
  36. @@include('./include/ProfilesTab.inc');
  37. </div>
  38. <!-- Вид ------------------------------------------------------------------------->
  39. <div v-if="selectedTab == 'view'" class="fit column">
  40. @@include('./include/ViewTab.inc');
  41. </div>
  42. <!-- Кнопки ---------------------------------------------------------------------->
  43. <div v-if="selectedTab == 'buttons'" class="fit tab-panel">
  44. @@include('./include/ButtonsTab.inc');
  45. </div>
  46. <!-- Управление ------------------------------------------------------------------>
  47. <div v-if="selectedTab == 'keys'" class="fit tab-panel">
  48. @@include('./include/KeysTab.inc');
  49. </div>
  50. <!-- Листание -------------------------------------------------------------------->
  51. <div v-if="selectedTab == 'pagemove'" class="fit tab-panel">
  52. @@include('./include/PageMoveTab.inc');
  53. </div>
  54. <!-- Прочее ---------------------------------------------------------------------->
  55. <div v-if="selectedTab == 'others'" class="fit tab-panel">
  56. @@include('./include/OthersTab.inc');
  57. </div>
  58. <!-- Сброс ----------------------------------------------------------------------->
  59. <div v-if="selectedTab == 'reset'" class="fit tab-panel">
  60. @@include('./include/ResetTab.inc');
  61. </div>
  62. </div>
  63. </div>
  64. </Window>
  65. </template>
  66. <script>
  67. //-----------------------------------------------------------------------------
  68. import Vue from 'vue';
  69. import Component from 'vue-class-component';
  70. import _ from 'lodash';
  71. import * as utils from '../../../share/utils';
  72. import Window from '../../share/Window.vue';
  73. import NumInput from '../../share/NumInput.vue';
  74. import rstore from '../../../store/modules/reader';
  75. import defPalette from './defPalette';
  76. import * as notify from '../../share/notify';
  77. const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
  78. export default @Component({
  79. components: {
  80. Window,
  81. NumInput,
  82. },
  83. data: function() {
  84. return Object.assign({}, rstore.settingDefaults);
  85. },
  86. watch: {
  87. settings: function() {
  88. this.settingsChanged();
  89. },
  90. form: function(newValue) {
  91. if (this.inited)
  92. this.commit('reader/setSettings', newValue);
  93. },
  94. fontBold: function(newValue) {
  95. this.fontWeight = (newValue ? 'bold' : '');
  96. },
  97. fontItalic: function(newValue) {
  98. this.fontStyle = (newValue ? 'italic' : '');
  99. },
  100. vertShift: function(newValue) {
  101. const font = (this.webFontName ? this.webFontName : this.fontName);
  102. this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
  103. this.fontVertShift = newValue;
  104. },
  105. fontName: function(newValue) {
  106. const font = (this.webFontName ? this.webFontName : newValue);
  107. this.vertShift = this.fontShifts[font] || 0;
  108. },
  109. webFontName: function(newValue) {
  110. const font = (newValue ? newValue : this.fontName);
  111. this.vertShift = this.fontShifts[font] || 0;
  112. },
  113. wallpaper: function(newValue) {
  114. if (newValue != '' && this.pageChangeAnimation == 'flip')
  115. this.pageChangeAnimation = '';
  116. },
  117. textColor: function(newValue) {
  118. this.textColorFiltered = newValue;
  119. },
  120. textColorFiltered: function(newValue) {
  121. if (hex.test(newValue))
  122. this.textColor = newValue;
  123. },
  124. backgroundColor: function(newValue) {
  125. this.bgColorFiltered = newValue;
  126. },
  127. bgColorFiltered: function(newValue) {
  128. if (hex.test(newValue))
  129. this.backgroundColor = newValue;
  130. },
  131. },
  132. })
  133. class SettingsPage extends Vue {
  134. selectedTab = 'profiles';
  135. selectedViewTab = 'color';
  136. form = {};
  137. fontBold = false;
  138. fontItalic = false;
  139. vertShift = 0;
  140. tabsScrollable = false;
  141. textColorFiltered = '';
  142. bgColorFiltered = '';
  143. webFonts = [];
  144. fonts = [];
  145. serverStorageKeyVisible = false;
  146. toolButtons = [];
  147. created() {
  148. this.commit = this.$store.commit;
  149. this.reader = this.$store.state.reader;
  150. this.form = {};
  151. this.toolButtons = rstore.toolButtons;
  152. this.settingsChanged();
  153. }
  154. mounted() {
  155. this.$watch(
  156. '$refs.tabs.scrollable',
  157. (newValue) => {
  158. this.tabsScrollable = newValue && !this.$isMobileDevice;
  159. }
  160. );
  161. }
  162. init() {
  163. this.$refs.window.init();
  164. this.inited = true;
  165. }
  166. settingsChanged() {
  167. if (_.isEqual(this.form, this.settings))
  168. return;
  169. this.form = Object.assign({}, this.settings);
  170. for (let prop in rstore.settingDefaults) {
  171. this[prop] = this.form[prop];
  172. this.$watch(prop, (newValue) => {
  173. this.form = Object.assign({}, this.form, {[prop]: newValue});
  174. });
  175. }
  176. this.fontBold = (this.fontWeight == 'bold');
  177. this.fontItalic = (this.fontStyle == 'italic');
  178. this.fonts = rstore.fonts;
  179. this.webFonts = rstore.webFonts;
  180. const font = (this.webFontName ? this.webFontName : this.fontName);
  181. this.vertShift = this.fontShifts[font] || 0;
  182. this.textColorFiltered = this.textColor;
  183. this.bgColorFiltered = this.backgroundColor;
  184. }
  185. get mode() {
  186. return this.$store.state.config.mode;
  187. }
  188. get settings() {
  189. return this.$store.state.reader.settings;
  190. }
  191. get serverSyncEnabled() {
  192. return this.$store.state.reader.serverSyncEnabled;
  193. }
  194. set serverSyncEnabled(newValue) {
  195. this.commit('reader/setServerSyncEnabled', newValue);
  196. }
  197. get profiles() {
  198. return this.$store.state.reader.profiles;
  199. }
  200. get currentProfileOptions() {
  201. const profNames = Object.keys(this.profiles)
  202. profNames.sort();
  203. let result = [{label: 'Нет', value: ''}];
  204. profNames.forEach(name => {
  205. result.push({label: name, value: name});
  206. });
  207. return result;
  208. }
  209. get wallpaperOptions() {
  210. let result = [{label: 'Нет', value: ''}];
  211. for (let i = 1; i < 10; i++) {
  212. result.push({label: i, value: `paper${i}`});
  213. }
  214. return result;
  215. }
  216. get fontsOptions() {
  217. let result = [];
  218. this.fonts.forEach(font => {
  219. result.push({label: (font.label ? font.label : font.name), value: font.name});
  220. });
  221. return result;
  222. }
  223. get webFontsOptions() {
  224. let result = [{label: 'Нет', value: ''}];
  225. this.webFonts.forEach(font => {
  226. result.push({label: font.name, value: font.name});
  227. });
  228. return result;
  229. }
  230. get pageChangeAnimationOptions() {
  231. let result = [
  232. {label: 'Нет', value: ''},
  233. {label: 'Вверх-вниз', value: 'downShift'},
  234. {label: 'Вправо-влево', value: 'rightShift'},
  235. {label: 'Протаивание', value: 'thaw'},
  236. {label: 'Мерцание', value: 'blink'},
  237. {label: 'Вращение', value: 'rotate'},
  238. ];
  239. if (this.wallpaper == '')
  240. result.push({label: 'Листание', value: 'flip'});
  241. return result;
  242. }
  243. get currentProfile() {
  244. return this.$store.state.reader.currentProfile;
  245. }
  246. set currentProfile(newValue) {
  247. this.commit('reader/setCurrentProfile', newValue);
  248. }
  249. get partialStorageKey() {
  250. return this.serverStorageKey.substr(0, 7) + '***';
  251. }
  252. get serverStorageKey() {
  253. return this.$store.state.reader.serverStorageKey;
  254. }
  255. get setStorageKeyLink() {
  256. return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
  257. }
  258. get predefineTextColors() {
  259. return defPalette.concat([
  260. '#ffffff',
  261. '#000000',
  262. '#202020',
  263. '#323232',
  264. '#aaaaaa',
  265. '#00c0c0',
  266. '#ebe2c9',
  267. '#cfdc99',
  268. '#478355',
  269. '#909080',
  270. ]);
  271. }
  272. get predefineBackgroundColors() {
  273. return defPalette.concat([
  274. '#ffffff',
  275. '#000000',
  276. '#202020',
  277. '#ebe2c9',
  278. '#cfdc99',
  279. '#478355',
  280. '#a6caf0',
  281. '#909080',
  282. '#808080',
  283. '#c8c8c8',
  284. ]);
  285. }
  286. colorPanStyle(type) {
  287. let result = 'width: 30px; height: 30px; border: 1px solid black; border-radius: 4px;';
  288. switch (type) {
  289. case 'text':
  290. result += `background-color: ${this.textColor};`
  291. break;
  292. case 'bg':
  293. result += `background-color: ${this.backgroundColor};`
  294. break;
  295. }
  296. return result;
  297. }
  298. needReload() {
  299. notify.warning(this, 'Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
  300. }
  301. needTextReload() {
  302. notify.warning(this, 'Необходимо обновить книгу в обход кэша, чтобы изменения возымели эффект');
  303. }
  304. close() {
  305. this.$emit('settings-toggle');
  306. }
  307. async setDefaults() {
  308. try {
  309. if (await this.$root.stdDialog.confirm('Подтвердите установку настроек по умолчанию:', ' ')) {
  310. this.form = Object.assign({}, rstore.settingDefaults);
  311. for (let prop in rstore.settingDefaults) {
  312. this[prop] = this.form[prop];
  313. }
  314. }
  315. } catch (e) {
  316. //
  317. }
  318. }
  319. changeShowToolButton(buttonName) {
  320. this.showToolButton = Object.assign({}, this.showToolButton, {[buttonName]: !this.showToolButton[buttonName]});
  321. }
  322. async addProfile() {
  323. try {
  324. if (Object.keys(this.profiles).length >= 100) {
  325. this.$root.stdDialog.alert('Достигнут предел количества профилей', 'Ошибка');
  326. return;
  327. }
  328. const result = await this.$root.stdDialog.prompt('Введите произвольное название для профиля устройства:', ' ', {
  329. inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
  330. });
  331. if (result && result.value) {
  332. if (this.profiles[result.value]) {
  333. this.$root.stdDialog.alert('Такой профиль уже существует', 'Ошибка');
  334. } else {
  335. const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
  336. this.commit('reader/setAllowProfilesSave', true);
  337. await this.$nextTick();//ждем обработчики watch
  338. this.commit('reader/setProfiles', newProfiles);
  339. await this.$nextTick();//ждем обработчики watch
  340. this.commit('reader/setAllowProfilesSave', false);
  341. this.currentProfile = result.value;
  342. }
  343. }
  344. } catch (e) {
  345. //
  346. }
  347. }
  348. async delProfile() {
  349. if (!this.currentProfile)
  350. return;
  351. try {
  352. const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.currentProfile}' необратимо.` +
  353. `<br>Все настройки профиля будут потеряны, однако список читаемых книг сохранится.` +
  354. `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
  355. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
  356. });
  357. if (result && result.value && result.value.toLowerCase() == 'да') {
  358. if (this.profiles[this.currentProfile]) {
  359. const newProfiles = Object.assign({}, this.profiles);
  360. delete newProfiles[this.currentProfile];
  361. this.commit('reader/setAllowProfilesSave', true);
  362. await this.$nextTick();//ждем обработчики watch
  363. this.commit('reader/setProfiles', newProfiles);
  364. await this.$nextTick();//ждем обработчики watch
  365. this.commit('reader/setAllowProfilesSave', false);
  366. this.currentProfile = '';
  367. }
  368. }
  369. } catch (e) {
  370. //
  371. }
  372. }
  373. async delAllProfiles() {
  374. if (!Object.keys(this.profiles).length)
  375. return;
  376. try {
  377. const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
  378. `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
  379. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
  380. });
  381. if (result && result.value && result.value.toLowerCase() == 'да') {
  382. this.commit('reader/setAllowProfilesSave', true);
  383. await this.$nextTick();//ждем обработчики watch
  384. this.commit('reader/setProfiles', {});
  385. await this.$nextTick();//ждем обработчики watch
  386. this.commit('reader/setAllowProfilesSave', false);
  387. this.currentProfile = '';
  388. }
  389. } catch (e) {
  390. //
  391. }
  392. }
  393. async copyToClip(text, prefix) {
  394. const result = await utils.copyTextToClipboard(text);
  395. const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
  396. const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
  397. if (result)
  398. notify.success(this, msg);
  399. else
  400. notify.error(this, msg);
  401. }
  402. async showServerStorageKey() {
  403. this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
  404. }
  405. async enterServerStorageKey(key) {
  406. try {
  407. const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
  408. `<br><br>Введите новый ключ доступа:`, ' ', {
  409. inputValidator: (str) => {
  410. try {
  411. if (str && utils.fromBase58(str).length == 32) {
  412. return true;
  413. }
  414. } catch (e) {
  415. //
  416. }
  417. return 'Неверный формат ключа';
  418. },
  419. inputValue: (key && _.isString(key) ? key : null),
  420. });
  421. if (result && result.value && utils.fromBase58(result.value).length == 32) {
  422. this.commit('reader/setServerStorageKey', result.value);
  423. }
  424. } catch (e) {
  425. //
  426. }
  427. }
  428. async generateServerStorageKey() {
  429. try {
  430. const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
  431. `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, ' ', {
  432. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
  433. });
  434. if (result && result.value && result.value.toLowerCase() == 'да') {
  435. this.$root.$emit('generateNewServerStorageKey');
  436. }
  437. } catch (e) {
  438. //
  439. }
  440. }
  441. keyHook(event) {
  442. if (!this.$root.stdDialog.active && event.type == 'keydown' && event.code == 'Escape') {
  443. this.close();
  444. }
  445. return true;
  446. }
  447. }
  448. //-----------------------------------------------------------------------------
  449. </script>
  450. <style scoped>
  451. .tab {
  452. justify-content: initial;
  453. }
  454. .tab-panel {
  455. overflow-x: hidden;
  456. overflow-y: auto;
  457. font-size: 90%;
  458. padding: 0 10px 15px 10px;
  459. }
  460. .part-header {
  461. border-top: 2px solid #bbbbbb;
  462. font-weight: bold;
  463. font-size: 110%;
  464. margin-top: 15px;
  465. margin-bottom: 5px;
  466. }
  467. .item {
  468. width: 100%;
  469. margin-top: 5px;
  470. margin-bottom: 5px;
  471. }
  472. .label-1 {
  473. width: 75px;
  474. }
  475. .label-2, .label-3, .label-4, .label-5 {
  476. width: 110px;
  477. }
  478. .label-6 {
  479. width: 100px;
  480. }
  481. .label-1, .label-2, .label-3, .label-4, .label-5, .label-6 {
  482. display: flex;
  483. flex-direction: column;
  484. justify-content: center;
  485. text-align: right;
  486. margin-right: 10px;
  487. overflow: hidden;
  488. }
  489. .text {
  490. font-size: 90%;
  491. line-height: 130%;
  492. }
  493. .button {
  494. margin: 3px 15px 3px 0;
  495. padding: 0 5px 0 5px;
  496. }
  497. .copy-icon {
  498. margin-left: 5px;
  499. cursor: pointer;
  500. font-size: 120%;
  501. color: blue;
  502. }
  503. .input {
  504. max-width: 150px;
  505. }
  506. .no-mp {
  507. margin: 0;
  508. padding: 0;
  509. }
  510. .col-left {
  511. width: 150px;
  512. }
  513. </style>