SettingsPage.vue 45 KB

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