SettingsPage.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. <template>
  2. <div ref="main" class="main" @click="close">
  3. <div class="mainWindow" @click.stop>
  4. <Window @close="close">
  5. <template slot="header">
  6. Настройки
  7. </template>
  8. <el-tabs type="border-card" tab-position="left" v-model="selectedTab">
  9. <!-- Профили ------------------------------------------------------------------------->
  10. <el-tab-pane label="Профили">
  11. <el-form :model="form" size="small" label-width="80px" @submit.native.prevent>
  12. <div class="partHeader">Управление синхронизацией данных</div>
  13. <el-form-item label="">
  14. <el-checkbox v-model="serverSyncEnabled">Включить синхронизацию с сервером</el-checkbox>
  15. </el-form-item>
  16. </el-form>
  17. <div v-show="serverSyncEnabled">
  18. <el-form :model="form" size="small" label-width="80px" @submit.native.prevent>
  19. <div class="partHeader">Профили устройств</div>
  20. <el-form-item label="">
  21. <div class="text">
  22. Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
  23. <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
  24. </div>
  25. </el-form-item>
  26. <el-form-item label="Устройство">
  27. <el-select v-model="currentProfile" placeholder="">
  28. <el-option label="Нет" value=""></el-option>
  29. <el-option v-for="item in profilesArray"
  30. :key="item"
  31. :label="item"
  32. :value="item">
  33. </el-option>
  34. </el-select>
  35. </el-form-item>
  36. <el-form-item label="">
  37. <el-button @click="addProfile">Добавить</el-button>
  38. <el-button @click="delProfile">Удалить</el-button>
  39. <el-button @click="delAllProfiles">Удалить все</el-button>
  40. </el-form-item>
  41. </el-form>
  42. <el-form :model="form" size="small" label-width="80px" @submit.native.prevent>
  43. <div class="partHeader">Ключ доступа</div>
  44. <el-form-item label="">
  45. <div class="text">
  46. Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
  47. Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
  48. </div>
  49. </el-form-item>
  50. <el-form-item label="">
  51. <el-button style="width: 250px" @click="showServerStorageKey">
  52. <span v-show="serverStorageKeyVisible">Скрыть</span>
  53. <span v-show="!serverStorageKeyVisible">Показать</span>
  54. ключ доступа
  55. </el-button>
  56. </el-form-item>
  57. <el-form-item label="">
  58. <div v-if="!serverStorageKeyVisible">
  59. <hr/>
  60. <b>{{ partialStorageKey }}</b> (часть вашего ключа)
  61. <hr/>
  62. </div>
  63. <div v-else style="line-height: 100%">
  64. <hr/>
  65. <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;"><b>{{ serverStorageKey }}</b></div>
  66. <br><div class="center">
  67. <el-button size="mini" class="copy-button" @click="copyToClip(serverStorageKey, 'Ключ')">Скопировать ключ</el-button>
  68. </div>
  69. <div v-if="mode == 'omnireader'">
  70. <br>Переход по ссылке позволит автоматически ввести ключ доступа:
  71. <br><div class="center" style="margin-top: 5px">
  72. <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
  73. </div>
  74. <br><div class="center">
  75. <el-button size="mini" class="copy-button" @click="copyToClip(setStorageKeyLink, 'Ссылка')">Скопировать ссылку</el-button>
  76. </div>
  77. </div>
  78. <hr/>
  79. </div>
  80. </el-form-item>
  81. <el-form-item label="">
  82. <el-button style="width: 250px" @click="enterServerStorageKey">Ввести ключ доступа</el-button>
  83. </el-form-item>
  84. <el-form-item label="">
  85. <el-button style="width: 250px" @click="generateServerStorageKey">Сгенерировать новый ключ</el-button>
  86. </el-form-item>
  87. <el-form-item label="">
  88. <div class="text">
  89. Рекомендуется сохранить ключ в надежном месте, чтобы всегда иметь возможность восстановить настройки,
  90. например, после переустановки ОС или чистки/смены браузера.<br>
  91. <b>ПРЕДУПРЕЖДЕНИЕ!</b> При утере ключа, НИКТО не сможет восстановить ваши данные, т.к. они сжимаются
  92. и шифруются ключом доступа перед отправкой на сервер.
  93. </div>
  94. </el-form-item>
  95. </el-form>
  96. </div>
  97. </el-tab-pane>
  98. <!-- Вид ------------------------------------------------------------------------->
  99. <el-tab-pane label="Вид">
  100. <el-form :model="form" size="small" label-width="120px" @submit.native.prevent>
  101. <div class="partHeader">Цвет</div>
  102. <el-form-item label="Текст">
  103. <el-col :span="12">
  104. <el-color-picker v-model="textColor" color-format="hex" :predefine="predefineTextColors"></el-color-picker>
  105. <span class="color-picked"><b>{{ textColor }}</b></span>
  106. </el-col>
  107. <el-col :span="5">
  108. <span style="position: relative; top: 20px;">Обои:</span>
  109. </el-col>
  110. </el-form-item>
  111. <el-form-item label="Фон">
  112. <el-col :span="12">
  113. <el-color-picker v-model="backgroundColor" color-format="hex" :predefine="predefineBackgroundColors" :disabled="wallpaper != ''"></el-color-picker>
  114. <span v-show="wallpaper == ''" class="color-picked"><b>{{ backgroundColor }}</b></span>
  115. </el-col>
  116. <el-col :span="11">
  117. <el-select v-model="wallpaper">
  118. <el-option label="Нет" value=""></el-option>
  119. <el-option label="1" value="paper1"></el-option>
  120. <el-option label="2" value="paper2"></el-option>
  121. <el-option label="3" value="paper3"></el-option>
  122. <el-option label="4" value="paper4"></el-option>
  123. <el-option label="5" value="paper5"></el-option>
  124. <el-option label="6" value="paper6"></el-option>
  125. <el-option label="7" value="paper7"></el-option>
  126. <el-option label="8" value="paper8"></el-option>
  127. <el-option label="9" value="paper9"></el-option>
  128. </el-select>
  129. </el-col>
  130. </el-form-item>
  131. </el-form>
  132. <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
  133. <div class="partHeader">Шрифт</div>
  134. <el-form-item label="Локальный/веб">
  135. <el-col :span="11">
  136. <el-select v-model="fontName" placeholder="Шрифт" :disabled="webFontName != ''">
  137. <el-option v-for="item in fonts"
  138. :key="item.name"
  139. :label="item.label"
  140. :value="item.name">
  141. </el-option>
  142. </el-select>
  143. </el-col>
  144. <el-col :span="1">
  145. &nbsp;
  146. </el-col>
  147. <el-col :span="11">
  148. <el-tooltip :open-delay="500" effect="light" placement="top">
  149. <template slot="content">
  150. Веб шрифты дают большое разнообразие,<br>
  151. однако есть шанс, что шрифт будет загружаться<br>
  152. очень медленно или вовсе не загрузится
  153. </template>
  154. <el-select v-model="webFontName">
  155. <el-option label="Нет" value=""></el-option>
  156. <el-option v-for="item in webFonts"
  157. :key="item.name"
  158. :value="item.name">
  159. </el-option>
  160. </el-select>
  161. </el-tooltip>
  162. </el-col>
  163. </el-form-item>
  164. <el-form-item label="Размер">
  165. <el-col :span="17">
  166. <el-input-number v-model="fontSize" :min="5" :max="200"></el-input-number>
  167. </el-col>
  168. <el-col :span="1">
  169. <a href="https://fonts.google.com/?subset=cyrillic" target="_blank">Примеры</a>
  170. </el-col>
  171. </el-form-item>
  172. <el-form-item label="Сдвиг">
  173. <el-tooltip :open-delay="500" effect="light">
  174. <template slot="content">
  175. Сдвиг шрифта по вертикали в процентах от размера.<br>
  176. Отрицательное значение сдвигает вверх, положительное -<br>
  177. вниз. Значение зависит от метрики шрифта.
  178. </template>
  179. <el-input-number v-model="vertShift" :min="-100" :max="100"></el-input-number>
  180. </el-tooltip>
  181. </el-form-item>
  182. <el-form-item label="Стиль">
  183. <el-col :span="8">
  184. <el-checkbox v-model="fontBold">Жирный</el-checkbox>
  185. </el-col>
  186. <el-col :span="8">
  187. <el-checkbox v-model="fontItalic">Курсив</el-checkbox>
  188. </el-col>
  189. </el-form-item>
  190. </el-form>
  191. <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
  192. <div class="partHeader">Текст</div>
  193. <el-form-item label="Интервал">
  194. <el-input-number v-model="lineInterval" :min="0" :max="200"></el-input-number>
  195. </el-form-item>
  196. <el-form-item label="Параграф">
  197. <el-input-number v-model="p" :min="0" :max="2000"></el-input-number>
  198. </el-form-item>
  199. <el-form-item label="Отступ">
  200. <el-col :span="11">
  201. <el-tooltip :open-delay="500" effect="light">
  202. <template slot="content">
  203. Слева/справа
  204. </template>
  205. <el-input-number v-model="indentLR" :min="0" :max="2000"></el-input-number>
  206. </el-tooltip>
  207. </el-col>
  208. <el-col :span="1">
  209. &nbsp;
  210. </el-col>
  211. <el-col :span="11">
  212. <el-tooltip :open-delay="500" effect="light">
  213. <template slot="content">
  214. Сверху/снизу
  215. </template>
  216. <el-input-number v-model="indentTB" :min="0" :max="2000"></el-input-number>
  217. </el-tooltip>
  218. </el-col>
  219. </el-form-item>
  220. <el-form-item label="Сдвиг">
  221. <el-tooltip :open-delay="500" effect="light">
  222. <template slot="content">
  223. Сдвиг текста по вертикали в процентах от размера шрифта.<br>
  224. Отрицательное значение сдвигает вверх, положительное -<br>
  225. вниз.
  226. </template>
  227. <el-input-number v-model="textVertShift" :min="-100" :max="100"></el-input-number>
  228. </el-tooltip>
  229. </el-form-item>
  230. <el-form-item label="Скроллинг">
  231. <el-col :span="11">
  232. <el-tooltip :open-delay="500" effect="light">
  233. <template slot="content">
  234. Замедление скроллинга в миллисекундах.<br>
  235. Определяет время, за которое текст<br>
  236. прокручивается на одну строку.
  237. </template>
  238. <el-input-number v-model="scrollingDelay" :min="1" :max="10000"></el-input-number>
  239. </el-tooltip>
  240. </el-col>
  241. <el-col :span="1">
  242. &nbsp;
  243. </el-col>
  244. <el-col :span="11">
  245. <el-tooltip :open-delay="500" effect="light" placement="top">
  246. <template slot="content">
  247. Вид скроллинга: линейный,<br>
  248. ускорение-замедление и пр.
  249. </template>
  250. <el-select v-model="scrollingType">
  251. <el-option value="linear"></el-option>
  252. <el-option value="ease"></el-option>
  253. <el-option value="ease-in"></el-option>
  254. <el-option value="ease-out"></el-option>
  255. <el-option value="ease-in-out"></el-option>
  256. </el-select>
  257. </el-tooltip>
  258. </el-col>
  259. </el-form-item>
  260. <el-form-item label="Выравнивание">
  261. <el-checkbox v-model="textAlignJustify">По ширине</el-checkbox>
  262. <el-checkbox v-model="wordWrap">Перенос по слогам</el-checkbox>
  263. </el-form-item>
  264. <el-form-item label="Обработка">
  265. <el-checkbox v-model="cutEmptyParagraphs">Убирать пустые строки</el-checkbox>
  266. </el-form-item>
  267. <el-form-item label="">
  268. <el-col :span="12">
  269. Добавлять пустые
  270. </el-col>
  271. <el-input-number v-model="addEmptyParagraphs" :min="0" :max="2"></el-input-number>
  272. </el-form-item>
  273. <el-form-item label="Изображения">
  274. <el-col :span="11">
  275. <el-checkbox v-model="showImages">Показывать</el-checkbox>
  276. </el-col>
  277. <el-col :span="1">
  278. &nbsp;
  279. </el-col>
  280. <el-col :span="11">
  281. <el-tooltip :open-delay="500" effect="light" placement="top">
  282. <template slot="content">
  283. Выносить все изображения в центр экрана
  284. </template>
  285. <el-checkbox v-model="showInlineImagesInCenter" @change="needReload" :disabled="!showImages">Инлайн в центр</el-checkbox>
  286. </el-tooltip>
  287. </el-col>
  288. </el-form-item>
  289. <el-form-item label="">
  290. <el-checkbox v-model="imageFitWidth" :disabled="!showImages">Ширина не более размера экрана</el-checkbox>
  291. </el-form-item>
  292. <el-form-item label="">
  293. <el-col :span="12">
  294. Высота не более
  295. </el-col>
  296. <el-tooltip :open-delay="500" effect="light" placement="top">
  297. <template slot="content">
  298. Определяет высоту изображения количеством строк.<br>
  299. В случае превышения высоты, изображение будет<br>
  300. уменьшено с сохранением пропорций так, чтобы<br>
  301. помещаться в указанное количество строк.
  302. </template>
  303. <el-input-number v-model="imageHeightLines" :min="1" :max="100" :disabled="!showImages"></el-input-number>
  304. </el-tooltip>
  305. </el-form-item>
  306. </el-form>
  307. <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
  308. <div class="partHeader">Строка статуса</div>
  309. <el-form-item label="Статус">
  310. <el-checkbox v-model="showStatusBar">Показывать</el-checkbox>
  311. <el-checkbox v-model="statusBarTop" :disabled="!showStatusBar">Вверху/внизу</el-checkbox>
  312. </el-form-item>
  313. <el-form-item label="Высота">
  314. <el-input-number v-model="statusBarHeight" :min="5" :max="100" :disabled="!showStatusBar"></el-input-number>
  315. </el-form-item>
  316. <el-form-item label="Прозрачность">
  317. <el-input-number v-model="statusBarColorAlpha" :min="0" :max="1" :precision="2" :step="0.1" :disabled="!showStatusBar"></el-input-number>
  318. </el-form-item>
  319. </el-form>
  320. </el-tab-pane>
  321. <!-- Листание ------------------------------------------------------------------------->
  322. <el-tab-pane label="Листание">
  323. <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
  324. <div class="partHeader">Анимация</div>
  325. <el-form-item label="Тип">
  326. <el-col :span="11">
  327. <el-select v-model="pageChangeAnimation">
  328. <el-option label="Нет" value=""></el-option>
  329. <el-option label="Вверх-вниз" value="downShift"></el-option>
  330. <el-option label="Вправо-влево" value="rightShift"></el-option>
  331. <el-option label="Протаивание" value="thaw"></el-option>
  332. <el-option label="Мерцание" value="blink"></el-option>
  333. </el-select>
  334. </el-col>
  335. </el-form-item>
  336. <el-form-item label="Скорость">
  337. <el-input-number v-model="pageChangeAnimationSpeed" :min="0" :max="100" :disabled="pageChangeAnimation == ''"></el-input-number>
  338. </el-form-item>
  339. </el-form>
  340. <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
  341. <div class="partHeader">Другое</div>
  342. <el-form-item label="Страница">
  343. <el-tooltip :open-delay="500" effect="light">
  344. <template slot="content">
  345. Переносить последнюю строку страницы<br>
  346. в начало следующей при листании
  347. </template>
  348. <el-checkbox v-model="keepLastToFirst">Переносить последнюю строку</el-checkbox>
  349. </el-tooltip>
  350. </el-form-item>
  351. </el-form>
  352. </el-tab-pane>
  353. <!-- Прочее ------------------------------------------------------------------------->
  354. <el-tab-pane label="Прочее">
  355. <el-form :model="form" size="mini" label-width="120px" @submit.native.prevent>
  356. <el-form-item label="Управление">
  357. <el-checkbox v-model="clickControl">Включить управление кликом</el-checkbox>
  358. </el-form-item>
  359. <el-form-item label="Подсказка">
  360. <el-tooltip :open-delay="500" effect="light">
  361. <template slot="content">
  362. Показывать или нет подсказку при каждой загрузке книги
  363. </template>
  364. <el-checkbox v-model="showClickMapPage" :disabled="!clickControl">Показывать области управления кликом</el-checkbox>
  365. </el-tooltip>
  366. </el-form-item>
  367. <el-form-item label="Подсказка">
  368. <el-tooltip :open-delay="500" effect="light">
  369. <template slot="content">
  370. Мерцать сообщением в строке статуса и на кнопке<br>
  371. обновления при загрузке книги из кэша
  372. </template>
  373. <el-checkbox v-model="blinkCachedLoad">Предупреждать о загрузке из кэша</el-checkbox>
  374. </el-tooltip>
  375. </el-form-item>
  376. <el-form-item label="URL">
  377. <el-tooltip :open-delay="500" effect="light">
  378. <template slot="content">
  379. Добавление параметра "__p" в строке браузера<br>
  380. позволяет передавать ссылку на книгу в читалке<br>
  381. без потери текущей позиции. Однако в этом случае<br>
  382. при листании забивается история браузера, т.к. на<br>
  383. каждое изменение позиции происходит смена URL.
  384. </template>
  385. <el-checkbox v-model="allowUrlParamBookPos">Добавлять параметр "__p"</el-checkbox>
  386. </el-tooltip>
  387. </el-form-item>
  388. <el-form-item label="Парсинг">
  389. <el-tooltip :open-delay="500" effect="light">
  390. <template slot="content">
  391. Включение этой опции позволяет делать предварительную<br>
  392. обработку текста в ленивом режиме сразу после загрузки<br>
  393. книги. Это может повысить отзывчивость читалки, но<br>
  394. нагружает процессор каждый раз при открытии книги.
  395. </template>
  396. <el-checkbox v-model="lazyParseEnabled">Предварительная обработка текста</el-checkbox>
  397. </el-tooltip>
  398. </el-form-item>
  399. <el-form-item label="Копирование">
  400. <el-tooltip :open-delay="500" effect="light">
  401. <template slot="content">
  402. Загружать весь текст в окно<br>
  403. копирования текста со страницы
  404. </template>
  405. <el-checkbox v-model="copyFullText">Загружать весь текст</el-checkbox>
  406. </el-tooltip>
  407. </el-form-item>
  408. </el-form>
  409. </el-tab-pane>
  410. <!-- Сброс ------------------------------------------------------------------------->
  411. <el-tab-pane label="Сброс">
  412. <el-button @click="setDefaults">Установить по-умолчанию</el-button>
  413. </el-tab-pane>
  414. </el-tabs>
  415. </Window>
  416. </div>
  417. </div>
  418. </template>
  419. <script>
  420. //-----------------------------------------------------------------------------
  421. import Vue from 'vue';
  422. import Component from 'vue-class-component';
  423. import _ from 'lodash';
  424. import * as utils from '../../../share/utils';
  425. import Window from '../../share/Window.vue';
  426. import rstore from '../../../store/modules/reader';
  427. export default @Component({
  428. components: {
  429. Window,
  430. },
  431. data: function() {
  432. return Object.assign({}, rstore.settingDefaults);
  433. },
  434. watch: {
  435. settings: function() {
  436. this.settingsChanged();
  437. },
  438. form: function(newValue) {
  439. this.commit('reader/setSettings', newValue);
  440. },
  441. fontBold: function(newValue) {
  442. this.fontWeight = (newValue ? 'bold' : '');
  443. },
  444. fontItalic: function(newValue) {
  445. this.fontStyle = (newValue ? 'italic' : '');
  446. },
  447. vertShift: function(newValue) {
  448. const font = (this.webFontName ? this.webFontName : this.fontName);
  449. this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
  450. this.fontVertShift = newValue;
  451. },
  452. fontName: function(newValue) {
  453. const font = (this.webFontName ? this.webFontName : newValue);
  454. this.vertShift = this.fontShifts[font] || 0;
  455. },
  456. webFontName: function(newValue) {
  457. const font = (newValue ? newValue : this.fontName);
  458. this.vertShift = this.fontShifts[font] || 0;
  459. },
  460. },
  461. })
  462. class SettingsPage extends Vue {
  463. selectedTab = null;
  464. form = {};
  465. fontBold = false;
  466. fontItalic = false;
  467. vertShift = 0;
  468. webFonts = [];
  469. fonts = [];
  470. serverStorageKeyVisible = false;
  471. created() {
  472. this.commit = this.$store.commit;
  473. this.reader = this.$store.state.reader;
  474. this.form = {};
  475. this.settingsChanged();
  476. }
  477. settingsChanged() {
  478. if (_.isEqual(this.form, this.settings))
  479. return;
  480. this.form = Object.assign({}, this.settings);
  481. for (let prop in rstore.settingDefaults) {
  482. this[prop] = this.form[prop];
  483. this.$watch(prop, (newValue) => {
  484. this.form = Object.assign({}, this.form, {[prop]: newValue});
  485. });
  486. }
  487. this.fontBold = (this.fontWeight == 'bold');
  488. this.fontItalic = (this.fontStyle == 'italic');
  489. this.fonts = rstore.fonts;
  490. this.webFonts = rstore.webFonts;
  491. const font = (this.webFontName ? this.webFontName : this.fontName);
  492. this.vertShift = this.fontShifts[font] || 0;
  493. }
  494. get mode() {
  495. return this.$store.state.config.mode;
  496. }
  497. get settings() {
  498. return this.$store.state.reader.settings;
  499. }
  500. get serverSyncEnabled() {
  501. return this.$store.state.reader.serverSyncEnabled;
  502. }
  503. set serverSyncEnabled(newValue) {
  504. this.commit('reader/setServerSyncEnabled', newValue);
  505. }
  506. get profiles() {
  507. return this.$store.state.reader.profiles;
  508. }
  509. get profilesArray() {
  510. const result = Object.keys(this.profiles)
  511. result.sort();
  512. return result;
  513. }
  514. get currentProfile() {
  515. return this.$store.state.reader.currentProfile;
  516. }
  517. set currentProfile(newValue) {
  518. this.commit('reader/setCurrentProfile', newValue);
  519. }
  520. get partialStorageKey() {
  521. return this.serverStorageKey.substr(0, 7) + '***';
  522. }
  523. get serverStorageKey() {
  524. return this.$store.state.reader.serverStorageKey;
  525. }
  526. get setStorageKeyLink() {
  527. return `http://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
  528. }
  529. get predefineTextColors() {
  530. return [
  531. '#ffffff',
  532. '#000000',
  533. '#202020',
  534. '#323232',
  535. '#aaaaaa',
  536. '#00c0c0',
  537. ];
  538. }
  539. get predefineBackgroundColors() {
  540. return [
  541. '#ffffff',
  542. '#000000',
  543. '#202020',
  544. '#ebe2c9',
  545. '#cfdc99',
  546. '#478355',
  547. '#a6caf0',
  548. '#909080',
  549. '#808080',
  550. '#c8c8c8',
  551. ];
  552. }
  553. needReload() {
  554. this.$notify.warning({message: 'Необходимо обновить страницу (F5), чтобы изменения возымели эффект'});
  555. }
  556. close() {
  557. this.$emit('settings-toggle');
  558. }
  559. async setDefaults() {
  560. try {
  561. if (await this.$confirm('Подтвердите установку настроек по-умолчанию:', '', {
  562. confirmButtonText: 'OK',
  563. cancelButtonText: 'Отмена',
  564. type: 'warning'
  565. })) {
  566. this.form = Object.assign({}, rstore.settingDefaults);
  567. for (let prop in rstore.settingDefaults) {
  568. this[prop] = this.form[prop];
  569. }
  570. }
  571. } catch (e) {
  572. //
  573. }
  574. }
  575. async addProfile() {
  576. try {
  577. if (Object.keys(this.profiles).length >= 100) {
  578. this.$alert('Достигнут предел количества профилей', 'Ошибка');
  579. return;
  580. }
  581. const result = await this.$prompt('Введите произвольное название для профиля устройства:', '', {
  582. confirmButtonText: 'OK',
  583. cancelButtonText: 'Отмена',
  584. inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
  585. });
  586. if (result.value) {
  587. if (this.profiles[result.value]) {
  588. this.$alert('Такой профиль уже существует', 'Ошибка');
  589. } else {
  590. const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
  591. this.commit('reader/setProfiles', newProfiles);
  592. this.currentProfile = result.value;
  593. }
  594. }
  595. } catch (e) {
  596. //
  597. }
  598. }
  599. async delProfile() {
  600. if (!this.currentProfile)
  601. return;
  602. try {
  603. const result = await this.$prompt(`<b>Предупреждение!</b> Удаление профиля '${this.currentProfile}' необратимо.` +
  604. `<br>Все настройки профиля будут потеряны,<br>однако список читаемых книг сохранится.` +
  605. `<br><br>Введите 'да' для подтверждения удаления:`, '', {
  606. dangerouslyUseHTMLString: true,
  607. confirmButtonText: 'OK',
  608. cancelButtonText: 'Отмена',
  609. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
  610. type: 'warning'
  611. });
  612. if (result.value && result.value.toLowerCase() == 'да') {
  613. if (this.profiles[this.currentProfile]) {
  614. const newProfiles = Object.assign({}, this.profiles);
  615. delete newProfiles[this.currentProfile];
  616. this.commit('reader/setProfiles', newProfiles);
  617. this.currentProfile = '';
  618. }
  619. }
  620. } catch (e) {
  621. //
  622. }
  623. }
  624. async delAllProfiles() {
  625. if (!Object.keys(this.profiles).length)
  626. return;
  627. try {
  628. const result = await this.$prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей необратимо.` +
  629. `<br><br>Введите 'да' для подтверждения удаления:`, '', {
  630. dangerouslyUseHTMLString: true,
  631. confirmButtonText: 'OK',
  632. cancelButtonText: 'Отмена',
  633. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
  634. type: 'warning'
  635. });
  636. if (result.value && result.value.toLowerCase() == 'да') {
  637. this.commit('reader/setProfiles', {});
  638. this.currentProfile = '';
  639. }
  640. } catch (e) {
  641. //
  642. }
  643. }
  644. async copyToClip(text, prefix) {
  645. const result = await utils.copyTextToClipboard(text);
  646. const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
  647. const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
  648. if (result)
  649. this.$notify.success({message: msg});
  650. else
  651. this.$notify.error({message: msg});
  652. }
  653. async showServerStorageKey() {
  654. this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
  655. }
  656. async enterServerStorageKey(key) {
  657. try {
  658. const result = await this.$prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к потере всех профилей и читаемых книг, привязанных к предыдущему ключу.` +
  659. `<br><br>Введите новый ключ доступа:`, '', {
  660. dangerouslyUseHTMLString: true,
  661. confirmButtonText: 'OK',
  662. cancelButtonText: 'Отмена',
  663. inputValidator: (str) => { if (str && str.length == 44) return true; else return 'Неверный формат ключа'; },
  664. inputValue: (key && _.isString(key) ? key : null),
  665. type: 'warning'
  666. });
  667. if (result.value && result.value.length == 44) {
  668. this.commit('reader/setServerStorageKey', result.value);
  669. }
  670. } catch (e) {
  671. //
  672. }
  673. }
  674. async generateServerStorageKey() {
  675. try {
  676. const result = await this.$prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к потере всех профилей и читаемых книг, привязанных к предыдущему ключу.` +
  677. `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, '', {
  678. dangerouslyUseHTMLString: true,
  679. confirmButtonText: 'OK',
  680. cancelButtonText: 'Отмена',
  681. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
  682. type: 'warning'
  683. });
  684. if (result.value && result.value.toLowerCase() == 'да') {
  685. this.$root.$emit('generateNewServerStorageKey');
  686. }
  687. } catch (e) {
  688. //
  689. }
  690. }
  691. keyHook(event) {
  692. if (event.type == 'keydown' && event.code == 'Escape') {
  693. this.close();
  694. }
  695. return true;
  696. }
  697. }
  698. //-----------------------------------------------------------------------------
  699. </script>
  700. <style scoped>
  701. .main {
  702. position: absolute;
  703. width: 100%;
  704. height: 100%;
  705. z-index: 60;
  706. display: flex;
  707. flex-direction: column;
  708. justify-content: center;
  709. align-items: center;
  710. }
  711. .mainWindow {
  712. height: 70%;
  713. display: flex;
  714. position: relative;
  715. }
  716. .text {
  717. font-size: 90%;
  718. line-height: 130%;
  719. }
  720. .el-form {
  721. border-top: 2px solid #bbbbbb;
  722. margin-bottom: 5px;
  723. }
  724. .el-form-item {
  725. padding: 0;
  726. margin: 0;
  727. margin-bottom: 5px;
  728. }
  729. .color-picked {
  730. margin-left: 10px;
  731. position: relative;
  732. top: -11px;
  733. }
  734. .partHeader {
  735. font-weight: bold;
  736. margin-bottom: 5px;
  737. }
  738. .el-tabs {
  739. flex: 1;
  740. display: flex;
  741. }
  742. .el-tab-pane {
  743. flex: 1;
  744. display: flex;
  745. flex-direction: column;
  746. width: 420px;
  747. overflow-y: auto;
  748. padding: 15px;
  749. }
  750. .center {
  751. text-align: center;
  752. }
  753. </style>