Merge branch 'release/1.2.3'

1.2.2

.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [['@babel/preset-env', { "targets": { "esmodules": true } }]],
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }]
+    ]
+}

.eslintrc

@@ -1,17 +1,18 @@
 {
+  "parser": "vue-eslint-parser",
   "parserOptions": {
-    "parser": "babel-eslint"
+    "parser": "@babel/eslint-parser",
+    "sourceType": "module"
   },
   "extends": [
     "eslint:recommended",
-    "plugin:vue/essential"
+    "plugin:vue/recommended"
   ],
   "plugins": [
-    "vue",
-    "html",
-    "node"
+    "@babel"
   ],
   "env": {
+    "es6": true,
     "browser": true,
     "node": true
   },
@@ -24,6 +25,14 @@
     "LM_TOTAL": false
   },
   "rules": {
+    "vue/html-indent": ["warn", 4, {
+      "alignAttributesVertically": false
+    }],
+    "vue/max-attributes-per-line": "off",
+    "vue/html-self-closing": "off",
+    "vue/no-v-html": "off",
+    "vue/no-v-model-argument": "off",
+
     "strict": 0,
     "indent": [0, 4, {
       "SwitchCase": 1

.gitignore

@@ -1,5 +1,5 @@
-/node_modules
-/server/data
-/server/public
-/server/ipfs
-/dist
+/node_modules
+/server/.liberama*
+/dist
+dev*.sh
+

README.md

@@ -1,43 +1,160 @@
-# Liberama
-
-Браузерная онлайн-читалка книг и децентрализованная библиотека.
-
-Читалка ![](https://omnireader.ru/favicon.ico)[OmniReader](https://omnireader.ru) является частью данного проекта, размещенной на VPS:
-
-![](docs/assets/face.jpg)
-![](docs/assets/reader.jpg)
-
-## VPS
-Для разворачивания читалки на чистом VPS с нуля смотрите [docs/omnireader.ru](docs/omnireader.ru/README.md)
-
-## Сборка проекта
-Необходима версия node.js не ниже 10.
-
-```
-$ git clone https://github.com/bookpauk/liberama
-$ cd liberama
-$ npm i
-```
-
-### Windows
-```
-$ npm run build:win
-```
-
-### Linux
-```
-$ npm run build:linux
-```
-
-Результат сборки будет доступен в каталоге `dist/linux|win` в виде исполнимого (standalone) файла
-
-### Разработка
-```
-$ npm run dev
-```
-
-## Помочь проекту
-
-* bitcoin: 3EbgZ7MK1UVaN38Gty5DCBtS4PknM4Ut85
-* litecoin: MP39Riec4oSNB3XMjiquKoLWxbufRYNXxZ
-* monero: 8BQPnvHcPSHM5gMQsmuypDgx9NNsYqwXKfDDuswEyF2Q2ewQSfd2pkK6ydH2wmMyq2JViZvy9DQ35hLMx7g72mFWNJTPtnz
+# Liberama
+
+Браузерная онлайн-читалка книг.
+
+Выглядит соледующим образом: <img src="https://omnireader.ru/favicon.ico" width="14px"/>[OmniReader](https://omnireader.ru)
+
+![](docs/assets/face.jpg)
+![](docs/assets/reader.jpg)
+
+При запуске приложения, по умолчанию веб-сервер доступен по адресу [http://127.0.0.1:44080](http://127.0.0.1:44080)
+
+Для указания местоположения рабочей директории, воспользуйтесь [параметрами командной строки](#cli).
+Дополнительные параметры сервера настраиваются в [конфигурационном файле](#config).
+
+[Отблагодарить автора проекта](https://donatty.com/liberama)
+
+## 
+* [Возможности читалки](#capabilities)
+* [Использование](#usage)
+    * [Параметры командной строки](#cli)
+    * [Конфигурация](#config)
+    * [Разворачивание на VPS](#vps)
+* [Сборка проекта](#build)
+* [Разработка](#development)
+
+<a id="capabilities" />
+
+## Возможности читалки
+- загрузка любой страницы интернета
+- синхронизация данных (настроек и читаемых книг) между различными устройствами
+- работа в автономном режиме (без связи)
+- изменение цвета фона, текста, размер и тип шрифта и прочее
+- установка и запоминание текущей позиции и настроек в браузере и на сервере
+- кэширование файлов книг на клиенте и на сервере
+- открытие книг с локального диска
+- плавный скроллинг текста
+- анимация перелистывания
+- поиск по тексту и копирование фрагмента
+- запоминание недавних книг, скачивание книги из читалки в формате fb2
+- управление кликом и с клавиатуры
+- регистрация не требуется
+- поддерживаемые браузеры: Google Chrome, Mozilla Firefox последних версий
+- релизы сервера под Linux, MacOS и Windows
+
+<a id="usage" />
+
+## Использование
+Приложение представляет собой полноценный веб-сервер в виде единого исполнимого файла.
+При первом запуске, будет создана рабочая директория `.liberama` (по умолчанию - в той же папке, где исполнимый файл),
+в которой хранится конфигурационный файл `config.json`, файлы веб-приложения, файлы базы данных, журналы и прочее.
+Изменить рабочую директорию можно с помощью cli-параметра --app-dir
+
+По умолчанию веб-интерфейс будет доступен по адресу [http://127.0.0.1:44080](http://127.0.0.1:44080)
+
+<a id="cli" />
+
+### Параметры командной строки
+Запустите `liberama --help`, чтобы увидеть список опций:
+```console
+Usage: liberama [options]
+
+Options:
+  --help              Показать опции командной строки
+  --app-dir=<dirpath> Задать рабочую директорию, по умолчанию: <execDir>/.liberama
+  --auto-repair       Починить БД приложения при запуске, если она повреждена
+```
+
+<a id="config" />
+
+### Конфигурация
+При первом запуске в рабочей директории будет создан конфигурационный файл `config.json`:
+```js
+{
+    // Максимальный размер файла загружаемой книги (в байтах)
+    "maxUploadFileSize": 52428800,
+
+    // Максимальный размер каталога <appDir>/public-files/tmp для хранения конвертированных
+    // файлов книг пользователей (в байтах)
+    "maxTempPublicDirSize": 536870912,
+
+    // Максимальный размер каталога <appDir>/public-files/upload для хранения
+    // загруженных в /upload (кнопка "Загрузить файл с диска") файлов книг пользователей (в байтах)
+    "maxUploadPublicDirSize": 209715200,
+
+    // Использование внешних конвертеров (только в среде Linux)
+    // Без них читалка может работать только с файлами формата fb2, txt, html, xml
+    // Инструкции установки внешних конвертеров см. в docs/omnireader.ru/README.md
+    "useExternalBookConverter": false,
+
+    // Настройки для списка серверов.
+    // Приложение может запускать одновременно несколько веб-серверов на разных портах
+    "servers": [
+        {
+            // Произвольное название сервера
+            "serverName": "1",
+
+            // Режим работы сервера:
+            //  "reader" - обычная читалка
+            //  "omnireader" - модификации для сайта omnireader.ru
+            //  "liberama" - модификации для сайта liberama.top
+            //  "book_update_checker" - сервер обновлений
+            "mode": "reader",
+
+            // Хост, порт сервера
+            "ip": "0.0.0.0",
+            "port": "44080"
+        }
+    ],
+
+    // Настройки удаленного хранилища
+    "remoteStorage": false,
+
+    // Для веб-приложения: включение/выключение работы с сервером обновлений
+    "bucEnabled": false,
+
+    // Подключение себя, как клиента, к серверу обновлений
+    "bucServer": false
+
+    // Сcылка для открытия в новом окне брауpера по клику на кнопку "Сетевая библиотека"
+    // Если не задано, открывается внутренний менеджер библиотек с использванием фрейма
+    "networkLibraryLink": "http://samlib.ru/"
+}
+```
+
+При необходимости, можно настроить нужный параметр в этом файле вручную.
+
+<a id="vps" />
+
+## VPS
+Для разворачивания читалки на чистом VPS с нуля смотрите [docs/omnireader.ru](docs/omnireader.ru/README.md)
+
+<a id="build" />
+
+### Сборка проекта
+Сборка только в среде Linux.
+Необходима версия node.js не ниже 16.
+
+Для сборки linux-arm64 необходимо предварительно установить [QEMU](https://wiki.debian.org/QemuUserEmulation).
+
+```sh
+git clone https://github.com/bookpauk/liberama
+cd liberama
+npm i
+```
+
+#### Релизы
+```sh
+npm run release
+```
+
+Результат сборки будет доступен в каталоге `dist/release`
+
+<a id="development" />
+
+### Разработка
+```sh
+npm run dev
+```
+
+Связаться с автором проекта: [bookpauk@gmail.com](mailto:bookpauk@gmail.com)

build/includer.js

@@ -1,31 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-
-//пример в коде:
-//  @@include('./test/testFile.inc');
-
-function includeRecursive(self, parentFile, source, depth) {
-    depth = (depth ? depth : 0);
-    if (depth > 50)
-        throw new Error('includer: stack too big');
-    const lines = source.split('\n');
-    let result = [];
-    for (const line of lines) {
-        const trimmed = line.trim();
-        const m = trimmed.match(/^@@[\s]*?include[\s]*?\(['"](.*)['"]\)/);
-        if (m) {
-            const includedFile = path.resolve(path.dirname(parentFile), m[1]);
-            self.addDependency(includedFile);
-
-            const fileContent = fs.readFileSync(includedFile, 'utf8');
-            result = result.concat(includeRecursive(self, includedFile, fileContent, depth + 1));
-        } else {
-            result.push(line);
-        }
-    }
-    return result;
-}
-
-exports.default = function includer(source) {
-    return includeRecursive(this, this.resourcePath, source).join('\n');
-}

build/linux.js

@@ -1,67 +0,0 @@
-const fs = require('fs-extra');
-const path = require('path');
-const util = require('util');
-const stream = require('stream');
-const pipeline = util.promisify(stream.pipeline);
-
-const got = require('got');
-const FileDecompressor = require('../server/core/FileDecompressor');
-
-const distDir = path.resolve(__dirname, '../dist');
-const publicDir = `${distDir}/tmp/public`;
-const outDir = `${distDir}/linux`;
-
-const tempDownloadDir = `${distDir}/tmp/download`;
-
-async function main() {
-    const decomp = new FileDecompressor();
-
-    await fs.emptyDir(outDir);
-    // перемещаем public на место
-    if (await fs.pathExists(publicDir))
-        await fs.move(publicDir, `${outDir}/public`);
-
-    await fs.ensureDir(tempDownloadDir);
-
-    //sqlite3
-    const sqliteRemoteUrl = 'https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v4.1.1/node-v72-linux-x64.tar.gz';
-    const sqliteDecompressedFilename = `${tempDownloadDir}/node-v72-linux-x64/node_sqlite3.node`;
-
-    if (!await fs.pathExists(sqliteDecompressedFilename)) {
-        // Скачиваем node_sqlite3.node для винды, т.к. pkg не включает его в сборку
-        await pipeline(got.stream(sqliteRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/sqlite.tar.gz`));
-        console.log(`done downloading ${sqliteRemoteUrl}`);
-
-        //распаковываем
-        console.log(await decomp.unpackTarZZ(`${tempDownloadDir}/sqlite.tar.gz`, tempDownloadDir));
-        console.log('files decompressed');
-    }
-    // копируем в дистрибутив
-    await fs.copy(sqliteDecompressedFilename, `${outDir}/node_sqlite3.node`);
-    console.log(`copied ${sqliteDecompressedFilename} to ${outDir}/node_sqlite3.node`);
-
-    //ipfs
-    const ipfsDecompressedFilename = `${tempDownloadDir}/go-ipfs/ipfs`;
-    if (!await fs.pathExists(ipfsDecompressedFilename)) {
-        // Скачиваем ipfs
-        const ipfsRemoteUrl = 'https://dist.ipfs.io/go-ipfs/v0.4.18/go-ipfs_v0.4.18_linux-amd64.tar.gz';
-
-        await pipeline(got.stream(ipfsRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/ipfs.tar.gz`));
-        console.log(`done downloading ${ipfsRemoteUrl}`);
-
-        //распаковываем
-        console.log(await decomp.unpackTarZZ(`${tempDownloadDir}/ipfs.tar.gz`, tempDownloadDir));
-        console.log('files decompressed');
-    }
-
-    // копируем в дистрибутив
-    await fs.copy(ipfsDecompressedFilename, `${outDir}/ipfs`);
-    console.log(`copied ${tempDownloadDir}/go-ipfs/ipfs to ${outDir}/ipfs`);
-    //для development
-    const devIpfsFile = path.resolve(__dirname, '../server/ipfs');
-    if (!await fs.pathExists(devIpfsFile)) {
-        await fs.copy(ipfsDecompressedFilename, devIpfsFile);
-    }
-}
-
-main();

build/prepkg.js

@@ -0,0 +1,51 @@
+const fs = require('fs-extra');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const showdown = require('showdown');
+
+const platform = process.argv[2];
+
+const distDir = path.resolve(__dirname, '../dist');
+const tmpDir = `${distDir}/tmp`;
+const publicDir = `${tmpDir}/public`;
+const outDir = `${distDir}/${platform}`;
+
+async function build() {
+    if (!platform)
+        throw new Error(`Please set platform`);
+
+    await fs.emptyDir(outDir);
+
+    //добавляем readme в релиз
+    let readme = await fs.readFile(path.resolve(__dirname, '../README.md'), 'utf-8');
+    const converter = new showdown.Converter();
+    readme = converter.makeHtml(readme);
+    await fs.writeFile(`${outDir}/readme.html`, readme);
+
+    // перемещаем public на место
+    if (await fs.pathExists(publicDir)) {
+
+        const zipFile = `${tmpDir}/public.zip`;
+        const jsonFile = `${distDir}/public.json`;//distDir !!!
+
+        await fs.remove(zipFile);
+        execSync(`zip -r ${zipFile} .`, {cwd: publicDir, stdio: 'inherit'});
+
+        const data = (await fs.readFile(zipFile)).toString('base64');
+        await fs.writeFile(jsonFile, JSON.stringify({data}));
+    } else {
+        throw new Error(`publicDir: ${publicDir} does not exist`);
+    }
+}
+
+async function main() {
+    try {
+        await build();
+    } catch(e) {
+        console.error(e);
+        process.exit(1);
+    }
+}
+
+main();

build/release.js

@@ -0,0 +1,33 @@
+const fs = require('fs-extra');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const pckg = require('../package.json');
+
+const distDir = path.resolve(__dirname, '../dist');
+const outDir = `${distDir}/release`;
+
+async function makeRelease(target) {
+    const srcDir = `${distDir}/${target}`;
+
+    if (await fs.pathExists(srcDir)) {
+        const zipFile = `${outDir}/${pckg.name}-${pckg.version}-${target}.zip`;
+
+        execSync(`zip -r ${zipFile} .`, {cwd: srcDir, stdio: 'inherit'});
+    }
+}
+
+async function main() {
+    try {
+        await fs.emptyDir(outDir);
+        await makeRelease('win');
+        await makeRelease('linux');
+        await makeRelease('linux-arm64');
+        await makeRelease('macos');
+    } catch(e) {
+        console.error(e);
+        process.exit(1);
+    }
+}
+
+main();

build/webpack.base.config.js

@@ -1,71 +1,77 @@
 const path = require('path');
-//const webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const DefinePlugin = require('webpack').DefinePlugin;
+const { VueLoaderPlugin } = require('vue-loader');
 
 const clientDir = path.resolve(__dirname, '../client');
 
 module.exports = {
+    resolve: {
+        alias: {
+            ws: false,
+            //vue: '@vue/compat'
+        }
+    },
     entry: [`${clientDir}/main.js`],
     output: {
         publicPath: '/app/',
+        clean: true
     },
 
     module: {
         rules: [
             {
                 test: /\.vue$/,
-                loader: "vue-loader"
-            },
-            {
-                test: /\.includer$/,
-                resourceQuery: /^\?vue/,
-                use: path.resolve('build/includer.js')
+                loader: 'vue-loader',
+                /*options: {
+                    compilerOptions: {
+                        compatConfig: {
+                            MODE: 2
+                        }
+                    }
+                }*/
             },
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 exclude: /node_modules/,
-                query: {
+                options: {
+                    presets: [['@babel/preset-env', { targets: { esmodules: true } }]],
                     plugins: [
-                        'syntax-dynamic-import',
-                        'transform-decorators-legacy',
-                        'transform-class-properties',
-//                        ["component", { "libraryName": "element-ui", "styleLibraryName": `~${clientDir}/theme` } ]
+                        ['@babel/plugin-proposal-decorators', { legacy: true }]
                     ]
                 }
             },
             {
-                test: /\.gif$/,
-                loader: "url-loader",
-                options: {
-                    name: "images/[name]-[hash:6].[ext]"
-                }
-            },
-            {
-                test: /\.png$/,
-                loader: "url-loader",
-                options: {
-                    name: "images/[name]-[hash:6].[ext]"
-                }
+                test: /\.(gif|png)$/,
+                type: 'asset/inline',
             },
             {
                 test: /\.jpg$/,
-                loader: "file-loader",
-                options: {
-                    name: "images/[name]-[hash:6].[ext]"
-                }
+                type: 'asset/resource',
+                generator: {
+                    filename: 'images/[name]-[hash:6][ext]'
+                },
             },
+
             {
                 test: /\.(ttf|eot|woff|woff2)$/,
-                loader: "file-loader",
-                options: {
-                    name: "fonts/[name]-[hash:6].[ext]"
-                }
+                type: 'asset/resource',
+                generator: {
+                    filename: 'fonts/[name]-[hash:6][ext]'
+                },
             },
         ]
     },
 
     plugins: [
+        new DefinePlugin({
+            __VUE_OPTIONS_API__: true,
+            __VUE_PROD_DEVTOOLS__: false,
+            __QUASAR_SSR__: false,
+            __QUASAR_SSR_SERVER__: false,
+            __QUASAR_SSR_CLIENT__: false,
+            __QUASAR_VERSION__: false,
+        }),
         new VueLoaderPlugin(),
     ]
 };

build/webpack.dev.config.js

@@ -1,22 +1,23 @@
 const path = require('path');
 const webpack = require('webpack');
+const pckg = require('../package.json');
 
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const baseWpConfig = require('./webpack.base.config');
 
 baseWpConfig.entry.unshift('webpack-hot-middleware/client');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-const publicDir = path.resolve(__dirname, '../server/public');
+const publicDir = path.resolve(__dirname, `../server/.${pckg.name}/public`);
 const clientDir = path.resolve(__dirname, '../client');
 
 module.exports = merge(baseWpConfig, {
     mode: 'development',
-    devtool: "#inline-source-map",
+    devtool: 'inline-source-map',
     output: {
-        path: `${publicDir}/app`,
-        filename: 'bundle.js'
+        path: `${publicDir}${baseWpConfig.output.publicPath}`,
+        filename: 'bundle.js',
     },
 
     module: {
@@ -38,6 +39,6 @@ module.exports = merge(baseWpConfig, {
             template: `${clientDir}/index.html.template`,
             filename: `${publicDir}/index.html`
         }),
-        new CopyWebpackPlugin([{from: `${clientDir}/assets/*`, to: `${publicDir}/`, flatten: true}])
+        new CopyWebpackPlugin({patterns: [{context: `${clientDir}/assets`, from: `${clientDir}/assets/*`, to: `${publicDir}/`}]})
     ]
 });

build/webpack.prod.config.js

@@ -1,12 +1,12 @@
 const path = require('path');
 //const webpack = require('webpack');
 
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const baseWpConfig = require('./webpack.base.config');
 const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+//const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const {GenerateSW} = require('workbox-webpack-plugin');
@@ -17,8 +17,8 @@ const clientDir = path.resolve(__dirname, '../client');
 module.exports = merge(baseWpConfig, {
     mode: 'production',
     output: {
-        path: `${publicDir}/app_new`,
-        filename: 'bundle.[contenthash].js'
+        path: `${publicDir}${baseWpConfig.output.publicPath}`,
+        filename: 'bundle.[contenthash].js',
     },
     module: {
         rules: [
@@ -34,19 +34,18 @@ module.exports = merge(baseWpConfig, {
     optimization: {
         minimizer: [
             new TerserPlugin({
-                cache: true,
                 parallel: true,
                 terserOptions: {
-                    output: {
+                    format: {
                         comments: false,
                     },
                 },
             }),
-            new OptimizeCSSAssetsPlugin()
+            new CssMinimizerWebpackPlugin()
         ]
     },
     plugins: [
-        new CleanWebpackPlugin([publicDir], {root: path.resolve(__dirname, '..')}),
+        //new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [`${publicDir}/**`] }),
         new MiniCssExtractPlugin({
             filename: "[name].[contenthash].css"
         }),
@@ -54,7 +53,9 @@ module.exports = merge(baseWpConfig, {
             template: `${clientDir}/index.html.template`,
             filename: `${publicDir}/index.html`
         }),
-        new CopyWebpackPlugin([{from: `${clientDir}/assets/*`, to: `${publicDir}/`, flatten: true}]),
+        new CopyWebpackPlugin({patterns: 
+            [{context: `${clientDir}/assets`, from: `${clientDir}/assets/*`, to: `${publicDir}/` }]
+        }),
         new GenerateSW({
             cacheId: 'liberama',
             swDest: `${publicDir}/service-worker.js`,

build/win.js

@@ -1,61 +0,0 @@
-const fs = require('fs-extra');
-const path = require('path');
-const util = require('util');
-const stream = require('stream');
-const pipeline = util.promisify(stream.pipeline);
-
-const got = require('got');
-const FileDecompressor = require('../server/core/FileDecompressor');
-
-const distDir = path.resolve(__dirname, '../dist');
-const publicDir = `${distDir}/tmp/public`;
-const outDir = `${distDir}/win`;
-
-const tempDownloadDir = `${distDir}/tmp/download`;
-
-async function main() {
-    const decomp = new FileDecompressor();
-
-    await fs.emptyDir(outDir);
-    // перемещаем public на место
-    if (await fs.pathExists(publicDir))
-        await fs.move(publicDir, `${outDir}/public`);
-
-    await fs.ensureDir(tempDownloadDir);
-
-    //sqlite3
-    const sqliteRemoteUrl = 'https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v4.1.1/node-v72-win32-x64.tar.gz';
-    const sqliteDecompressedFilename = `${tempDownloadDir}/node-v72-win32-x64/node_sqlite3.node`;
-
-    if (!await fs.pathExists(sqliteDecompressedFilename)) {
-        // Скачиваем node_sqlite3.node для винды, т.к. pkg не включает его в сборку
-        await pipeline(got.stream(sqliteRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/sqlite.tar.gz`));
-        console.log(`done downloading ${sqliteRemoteUrl}`);
-
-        //распаковываем
-        console.log(await decomp.unpackTarZZ(`${tempDownloadDir}/sqlite.tar.gz`, tempDownloadDir));
-        console.log('files decompressed');
-    }
-    // копируем в дистрибутив
-    await fs.copy(sqliteDecompressedFilename, `${outDir}/node_sqlite3.node`);
-    console.log(`copied ${sqliteDecompressedFilename} to ${outDir}/node_sqlite3.node`);
-
-    //ipfs
-    const ipfsDecompressedFilename = `${tempDownloadDir}/go-ipfs/ipfs.exe`;
-    if (!await fs.pathExists(ipfsDecompressedFilename)) {
-        // Скачиваем ipfs
-        const ipfsRemoteUrl = 'https://dist.ipfs.io/go-ipfs/v0.4.18/go-ipfs_v0.4.18_windows-amd64.zip';
-
-        await pipeline(got.stream(ipfsRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/ipfs.zip`));
-        console.log(`done downloading ${ipfsRemoteUrl}`);
-
-        //распаковываем
-        console.log(await decomp.unpack(`${tempDownloadDir}/ipfs.zip`, tempDownloadDir));
-        console.log('files decompressed');
-    }
-    // копируем в дистрибутив
-    await fs.copy(ipfsDecompressedFilename, `${outDir}/ipfs.exe`);
-    console.log(`copied ${ipfsDecompressedFilename} to ${outDir}/ipfs.exe`);
-}
-
-main();

client/api/misc.js

@@ -1,30 +1,17 @@
-import axios from 'axios';
 import wsc from './webSocketConnection';
 
-const api = axios.create({
-  baseURL: '/api'
-});
-
 class Misc {
     async loadConfig() {
 
         const query = {params: [
-            'name', 'version', 'mode', 'maxUploadFileSize', 'useExternalBookConverter', 'branch',
+            'name', 'version', 'mode', 'maxUploadFileSize', 'useExternalBookConverter', 'acceptFileExt', 'bucEnabled', 'branch', 'networkLibraryLink',
         ]};
 
-        try {
-            await wsc.open();
-            const config = await wsc.message(wsc.send(Object.assign({action: 'get-config'}, query)));
-            if (config.error)
-                throw new Error(config.error);
-            return config;
-        } catch (e) {
-            console.error(e);
-        }
+        const config = await wsc.message(await wsc.send(Object.assign({action: 'get-config'}, query)));
+        if (config.error)
+            throw new Error(config.error);
 
-        //если с WebSocket проблема, работаем по http
-        const response = await api.post('/config', query);
-        return response.data;
+        return config;
     }
 }
 

client/api/reader.js

@@ -1,14 +1,15 @@
 import axios from 'axios';
 import * as utils from '../share/utils';
+import * as cryptoUtils from '../share/cryptoUtils';
 import wsc from './webSocketConnection';
 
 const api = axios.create({
     baseURL: '/api/reader'
 });
 
-const workerApi = axios.create({
+/*const workerApi = axios.create({
     baseURL: '/api/worker'
-});
+});*/
 
 class Reader {
     constructor() {
@@ -18,59 +19,24 @@ class Reader {
         if (!callback) callback = () => {};
 
         let response = {};
-        try {
-            await wsc.open();
-            const requestId = wsc.send({action: 'worker-get-state-finish', workerId});
+        const requestId = await wsc.send({action: 'worker-get-state-finish', workerId});
 
-            let prevResponse = false;
-            while (1) {// eslint-disable-line no-constant-condition
-                response = await wsc.message(requestId);
-
-                if (!response.state && prevResponse !== false) {//экономия траффика
-                    callback(prevResponse);
-                } else {//были изменения worker state
-                    if (!response.state)
-                        throw new Error('Неверный ответ api');
-                    callback(response);
-                    prevResponse = response;
-                }
-
-                if (response.state == 'finish' || response.state == 'error') {
-                    break;
-                }
-            }
-            return response;
-        } catch (e) {
-            console.error(e);
-        }
-
-        //если с WebSocket проблема, работаем по http
-        const refreshPause = 500;
-        let i = 0;
-        response = {};
+        let prevResponse = false;
         while (1) {// eslint-disable-line no-constant-condition
-            const prevProgress = response.progress || 0;
-            const prevState = response.state || 0;
-            response = await workerApi.post('/get-state', {workerId});
-            response = response.data;
-            callback(response);
+            response = await wsc.message(requestId);
 
-            if (!response.state)
-                throw new Error('Неверный ответ api');
+            if (!response.state && prevResponse !== false) {//экономия траффика
+                callback(prevResponse);
+            } else {//были изменения worker state
+                if (!response.state)
+                    throw new Error('Неверный ответ api');
+                callback(response);
+                prevResponse = response;
+            }
 
             if (response.state == 'finish' || response.state == 'error') {
                 break;
             }
-
-            if (i > 0)
-                await utils.sleep(refreshPause);
-
-            i++;
-            if (i > 120*1000/refreshPause) {//2 мин ждем телодвижений воркера
-                throw new Error('Слишком долгое время ожидания');
-            }
-            //проверка воркера
-            i = (prevProgress != response.progress || prevState != response.state ? 1 : i);
         }
 
         return response;
@@ -79,14 +45,13 @@ class Reader {
     async loadBook(opts, callback) {
         if (!callback) callback = () => {};
 
-        let response = await api.post('/load-book', opts);
-
-        const workerId = response.data.workerId;
+        let response = await wsc.message(await wsc.send(Object.assign({action: 'load-book'}, opts)));
+        const workerId = response.workerId;
         if (!workerId)
             throw new Error('Неверный ответ api');
 
         callback({totalSteps: 4});
-        callback(response.data);
+        callback(response);
 
         response = await this.getWorkerStateFinish(workerId, callback);
 
@@ -120,33 +85,7 @@ class Reader {
                 estSize = response.headers['content-length'];
             }
         } catch (e) {
-            //восстановим при необходимости файл на сервере из удаленного облака
-            let response = null
-            
-            try {
-                await wsc.open();
-                response = await wsc.message(wsc.send({action: 'reader-restore-cached-file', path: url}));
-            } catch (e) {
-                console.error(e);
-                //если с WebSocket проблема, работаем по http
-                response = await api.post('/restore-cached-file', {path: url});
-                response = response.data;
-            }
-            if (response.state == 'error') {
-                throw new Error(response.error);
-            }
-
-            const workerId = response.workerId;
-            if (!workerId)
-                throw new Error('Неверный ответ api');
-
-            response = await this.getWorkerStateFinish(workerId);
-            if (response.state == 'error') {
-                throw new Error(response.error);
-            }
-            if (response.size && estSize < 0) {
-                estSize = response.size;
-            }
+            //
         }
 
         return estSize;
@@ -176,14 +115,12 @@ class Reader {
         return await axios.get(url, options);
     }
 
-    async uploadFile(file, maxUploadFileSize, callback) {
-        if (!maxUploadFileSize)
-            maxUploadFileSize = 10*1024*1024;
+    async uploadFile(file, maxUploadFileSize = 10*1024*1024, callback) {
         if (file.size > maxUploadFileSize)
             throw new Error(`Размер файла превышает ${maxUploadFileSize} байт`);
 
         let formData = new FormData();
-        formData.append('file', file);
+        formData.append('file', file, file.name);
 
         const options = {
             headers: {
@@ -209,26 +146,56 @@ class Reader {
     }
 
     async storage(request) {
-        let response = null;
-        try {
-            await wsc.open();
-            response = await wsc.message(wsc.send({action: 'reader-storage', body: request}));
-        } catch (e) {
-            console.error(e);
-            //если с WebSocket проблема, работаем по http
-            response = await api.post('/storage', request);
-            response = response.data;
-        }
+        const response = await wsc.message(await wsc.send({action: 'reader-storage', body: request}));
 
-        const state = response.state;
-        if (!state)
-            throw new Error('Неверный ответ api');
-        if (response.state == 'error') {
+        if (response.error)
             throw new Error(response.error);
-        }
+
+        if (!response.state)
+            throw new Error('Неверный ответ api');
 
         return response;
     }
+
+    makeUrlFromBuf(buf) {
+        const key = utils.toHex(cryptoUtils.sha256(buf));
+        return `disk://${key}`;
+    }
+
+    async uploadFileBuf(buf, url) {
+        if (!url)
+            url = this.makeUrlFromBuf(buf);
+
+        let response;
+        try {
+            await axios.head(url.replace('disk://', '/upload/'), {headers: {'Cache-Control': 'no-cache'}});
+            response = await wsc.message(await wsc.send({action: 'upload-file-touch', url}));
+        } catch (e) {
+            response = await wsc.message(await wsc.send({action: 'upload-file-buf', buf}));
+        }
+
+        if (response.error)
+            throw new Error(response.error);
+
+        return response;
+    }
+
+    async getUploadedFileBuf(url) {
+        url = url.replace('disk://', '/upload/');
+        return (await axios.get(url)).data;
+    }
+
+    async checkBuc(bookUrls) {
+        const response = await wsc.message(await wsc.send({action: 'check-buc', bookUrls}));
+
+        if (response.error)
+            throw new Error(response.error);
+
+        if (!response.data)
+            throw new Error(`response.data is empty`);
+
+        return response.data;
+    }
 }
 
 export default new Reader();

client/api/webSocketConnection.js

@@ -1,185 +1,3 @@
-import * as utils from '../share/utils';
-
-const cleanPeriod = 60*1000;//1 минута
-
-class WebSocketConnection {
-    //messageLifeTime в минутах (cleanPeriod)
-    constructor(messageLifeTime = 5) {
-        this.ws = null;
-        this.timer = null;
-        this.listeners = [];
-        this.messageQueue = [];
-        this.messageLifeTime = messageLifeTime;
-        this.requestId = 0;
-
-        this.connecting = false;
-    }
-
-    addListener(listener) {
-        if (this.listeners.indexOf(listener) < 0)
-            this.listeners.push(Object.assign({regTime: Date.now()}, listener));
-    }
-
-    //рассылаем сообщение и удаляем те обработчики, которые его получили
-    emit(mes, isError) {
-        const len = this.listeners.length;
-        if (len > 0) {
-            let newListeners = [];
-            for (const listener of this.listeners) {
-                let emitted = false;
-                if (isError) {
-                    if (listener.onError)
-                        listener.onError(mes);
-                    emitted = true;
-                } else {
-                    if (listener.onMessage) {
-                        if (listener.requestId) {
-                            if (listener.requestId === mes.requestId) {
-                                listener.onMessage(mes);
-                                emitted = true;
-                            }
-                        } else {
-                            listener.onMessage(mes);
-                            emitted = true;
-                        }
-                    } else {
-                        emitted = true;
-                    }
-                }
-
-                if (!emitted)
-                    newListeners.push(listener);
-            }
-            this.listeners = newListeners;
-        }
-        
-        return this.listeners.length != len;
-    }
-
-    open(url) {
-        return new Promise((resolve, reject) => { (async() => {
-            //Ожидаем окончания процесса подключения, если open уже был вызван
-            let i = 0;
-            while (this.connecting && i < 200) {//10 сек
-                await utils.sleep(50);
-                i++;
-            }
-            if (i >= 200)
-                this.connecting = false;
-
-            //проверим подключение, и если нет, то подключимся заново
-            if (this.ws && this.ws.readyState == WebSocket.OPEN) {
-                resolve(this.ws);
-            } else {
-                this.connecting = true;
-                const protocol = (window.location.protocol == 'https:' ? 'wss:' : 'ws:');
-
-                url = url || `${protocol}//${window.location.host}/ws`;
-                
-                this.ws = new WebSocket(url);
-
-                if (this.timer) {
-                    clearTimeout(this.timer);
-                }
-                this.timer = setTimeout(() => { this.periodicClean(); }, cleanPeriod);
-
-                this.ws.onopen = (e) => {
-                    this.connecting = false;
-                    resolve(e);
-                };
-
-                this.ws.onmessage = (e) => {
-                    try {
-                        const mes = JSON.parse(e.data);
-                        this.messageQueue.push({regTime: Date.now(), mes});
-
-                        let newMessageQueue = [];
-                        for (const message of this.messageQueue) {
-                            if (!this.emit(message.mes)) {
-                                newMessageQueue.push(message);
-                            }
-                        }
-
-                        this.messageQueue = newMessageQueue;
-                    } catch (e) {
-                        this.emit(e.message, true);
-                    }
-                };
-
-                this.ws.onerror = (e) => {
-                    this.emit(e.message, true);
-                    if (this.connecting) {
-                        this.connecting = false;
-                        reject(e);
-                    }
-                };
-            }
-        })() });
-    }
-
-    //timeout в минутах (cleanPeriod)
-    message(requestId, timeout = 2) {
-        return new Promise((resolve, reject) => {
-            this.addListener({
-                requestId,
-                timeout,
-                onMessage: (mes) => {
-                    resolve(mes);
-                },
-                onError: (e) => {
-                    reject(e);
-                }
-            });
-        });
-    }
-
-    send(req) {
-        if (this.ws && this.ws.readyState == WebSocket.OPEN) {
-            const requestId = ++this.requestId;
-            this.ws.send(JSON.stringify(Object.assign({requestId}, req)));
-            return requestId;
-        } else {
-            throw new Error('WebSocket connection is not ready');
-        }
-    }
-
-    close() {
-        if (this.ws && this.ws.readyState == WebSocket.OPEN) {
-            this.ws.close();
-        }
-    }
-
-    periodicClean() {
-        try {
-            this.timer = null;
-
-            const now = Date.now();
-            //чистка listeners
-            let newListeners = [];
-            for (const listener of this.listeners) {
-                if (now - listener.regTime < listener.timeout*cleanPeriod - 50) {
-                    newListeners.push(listener);
-                } else {
-                    if (listener.onError)
-                        listener.onError('Время ожидания ответа истекло');
-                }
-            }
-            this.listeners = newListeners;
-
-            //чистка messageQueue
-            let newMessageQueue = [];
-            for (const message of this.messageQueue) {
-                if (now - message.regTime < this.messageLifeTime*cleanPeriod - 50) {
-                    newMessageQueue.push(message);
-                }
-            }
-            this.messageQueue = newMessageQueue;
-        } finally {
-            if (this.ws.readyState == WebSocket.OPEN) {
-                this.timer = setTimeout(() => { this.periodicClean(); }, cleanPeriod);
-            }
-        }
-    }
-}
+import WebSocketConnection from '../../server/core/WebSocketConnection';
 
 export default new WebSocketConnection();

client/components/App.vue

@@ -1,22 +1,27 @@
 <template>
     <div class="fit row">
-        <Notify ref="notify"/>
-        <StdDialog ref="stdDialog"/>
-        <keep-alive>
-            <router-view class="col"></router-view>
-        </keep-alive>
+        <Notify ref="notify" />
+        <StdDialog ref="stdDialog" />
+
+        <router-view v-slot="{ Component }">
+            <keep-alive v-if="showPage">
+                <component :is="Component" class="col" />
+            </keep-alive>
+        </router-view>
     </div>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from './vueComponent.js';
+
 import Notify from './share/Notify.vue';
 import StdDialog from './share/StdDialog.vue';
-import * as utils from '../share/utils';
+import sanitizeHtml from 'sanitize-html';
 
-export default @Component({
+import miscApi from '../api/misc';
+
+const componentOptions = {
     components: {
         Notify,
         StdDialog,
@@ -25,32 +30,55 @@ export default @Component({
         mode: function() {
             this.setAppTitle();
             this.redirectIfNeeded();
-        }
+        },
+        nightMode() {
+            this.setNightMode();
+        },
     },
 
-})
-class App extends Vue {
-    itemRuText = {
-        '/cardindex': 'Картотека',
-        '/reader': 'Читалка',
-        '/forum': 'Форум-чат',
-        '/income': 'Поступления',
-        '/sources': 'Источники',
-        '/settings': 'Параметры',
-        '/help': 'Справка',
-    };
+};
+class App {
+    _options = componentOptions;
+    showPage = false;
 
     created() {
         this.commit = this.$store.commit;
-        this.dispatch = this.$store.dispatch;
         this.state = this.$store.state;
         this.uistate = this.$store.state.uistate;
         this.config = this.$store.state.config;
 
+        //dark mode
+        let darkMode = null;
+        this.$root.setDarkMode = (value) => {
+            if (darkMode !== value) {
+                const vars = [
+                    '--bg-app-color', '--text-app-color', '--bg-dialog-color', '--text-anchor-color',
+                    '--bg-loader-color', '--bg-input-color', '--bg-btn-color1', '--bg-btn-color2',
+                    '--bg-header-color1', '--bg-header-color2', '--bg-header-color3',
+                    '--bg-menu-color1', '--bg-menu-color2', '--text-menu-color', '--text-ubtn-color',
+                    '--text-tb-normal', '--bg-tb-normal', '--bg-tb-hover',
+                    '--text-tb-active', '--bg-tb-active', '--bg-tb-active-hover',
+                    '--text-tb-disabled', '--bg-tb-disabled',
+                    '--bg-selected-item-color1', '--bg-selected-item-color2',
+                ];
+
+                let root = document.querySelector(':root');
+                let cs = getComputedStyle(root);
+
+                let mode = (value ? '-dark' : '-light');
+                for (const v of vars) {
+                    const propValue = cs.getPropertyValue(`${v}${mode}`);
+                    root.style.setProperty(v, propValue);
+                }
+
+                darkMode = value;
+            }
+        };
+
         //root route
         let cachedRoute = '';
         let cachedPath = '';
-        this.$root.rootRoute = () => {
+        this.$root.getRootRoute = () => {
             if (this.$route.path != cachedPath) {
                 cachedPath = this.$route.path;
                 const m = cachedPath.match(/^(\/[^/]*).*$/i);
@@ -58,7 +86,7 @@ class App extends Vue {
 
             }
             return cachedRoute;
-        }
+        };
 
         this.$router.beforeEach((to, from, next) => {
             //распознавание хоста, если присутствует домен 3-уровня "b.", то разрешена только определенная страница
@@ -69,118 +97,111 @@ class App extends Vue {
             }
         });
 
-        // set-app-title
-        this.$root.$on('set-app-title', this.setAppTitle);
+        this.$root.isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
 
-        //global keyHooks
-        this.keyHooks = [];
-        this.keyHook = (event) => {
-            for (const hook of this.keyHooks)
+        // setAppTitle
+        this.$root.setAppTitle = this.setAppTitle;
+
+        //sanitize
+        this.$root.sanitize = sanitizeHtml;
+
+        //global event hooks
+        this.eventHooks = {};
+        this.$root.eventHook = (hookName, event) => {
+            if (!this.eventHooks[hookName])
+                return;
+            for (const hook of this.eventHooks[hookName])
                 hook(event);
         }
 
-        this.$root.addKeyHook = (hook) => {
-            if (this.keyHooks.indexOf(hook) < 0)
-                this.keyHooks.push(hook);
+        this.$root.addEventHook = (hookName, hook) => {
+            if (!this.eventHooks[hookName])
+                this.eventHooks[hookName] = [];
+            if (this.eventHooks[hookName].indexOf(hook) < 0)
+                this.eventHooks[hookName].push(hook);
         }
 
-        this.$root.removeKeyHook = (hook) => {
-            const i = this.keyHooks.indexOf(hook);
+        this.$root.removeEventHook = (hookName, hook) => {
+            if (!this.eventHooks[hookName])
+                return;
+            const i = this.eventHooks[hookName].indexOf(hook);
             if (i >= 0)
-                this.keyHooks.splice(i, 1);
+                this.eventHooks[hookName].splice(i, 1);
         }
 
         document.addEventListener('keyup', (event) => {
-            this.keyHook(event);
+            this.$root.eventHook('key', event);
         });
         document.addEventListener('keypress', (event) => {
-            this.keyHook(event);
+            this.$root.eventHook('key', event);
         });
         document.addEventListener('keydown', (event) => {
-            this.keyHook(event);
+            this.$root.eventHook('key', event);
         });
-        window.addEventListener('resize', () => {
-            this.$root.$emit('resize');
-        });
-    }
 
-    routerReady() {
-        return new Promise ((resolve) => {
-            this.$router.onReady(() => {
-                resolve();
-            });
+        window.addEventListener('resize', (event) => {
+            this.$root.eventHook('resize', event);
         });
+
+        this.setNightMode();
     }
 
     mounted() {
         this.$root.notify = this.$refs.notify;
         this.$root.stdDialog = this.$refs.stdDialog;
 
-        this.dispatch('config/loadConfig');
-        this.$watch('apiError', function(newError) {
-            if (newError) {
-                let mes = newError.message;
-                if (newError.response && newError.response.config)
-                    mes = newError.response.config.url + '<br>' + newError.response.statusText;
-                this.$root.notify.error(mes, 'Ошибка API');
-            }
-        });
-
         this.setAppTitle();
         (async() => {
-            await this.routerReady();
+            //загрузим конфиг сервера
+            try {
+                const config = await miscApi.loadConfig();
+                this.commit('config/setConfig', config);
+                this.showPage = true;
+            } catch(e) {
+                //проверим, не получен ли конфиг ранее
+                if (!this.mode) {
+                    this.$root.notify.error(e.message, 'Ошибка API');
+                } else {
+                    //вероятно, работаем в оффлайне
+                    this.showPage = true;
+                }
+                console.error(e);
+            }
+
+            //запросим persistent storage
+            if (navigator.storage && navigator.storage.persist) {
+                navigator.storage.persist();
+            }
+            await this.$router.isReady();
             this.redirectIfNeeded();
         })();
     }
 
-    toggleCollapse() {
-        this.commit('uistate/setAsideBarCollapse', !this.uistate.asideBarCollapse);
-        this.$root.$emit('resize');
-    }
-
-    get isCollapse() {
-        return this.uistate.asideBarCollapse;
-    }
-
-    get asideWidth() {
-        if (this.uistate.asideBarCollapse) {
-            return 64;
-        } else {
-            return 170;
-        }
-    }
-
-    get buttonCollapseIcon() {
-        if (this.uistate.asideBarCollapse) {
-            return 'el-icon-d-arrow-right';
-        } else {
-            return 'el-icon-d-arrow-left';
-        }
-    }
-
-    get appName() {
-        if (this.isCollapse)
-            return '<br><br>';
-        else
-            return `${this.config.name} <br>v${this.config.version}`;
-    }
-
     get apiError() {
         return this.state.apiError;
     }
 
     get rootRoute() {
-        return this.$root.rootRoute();
+        return this.$root.getRootRoute();
+    }
+
+    get nightMode() {
+        return this.$store.state.reader.settings.nightMode;
+    }
+
+    setNightMode() {
+        this.$root.setDarkMode(this.nightMode);
+        this.$q.dark.set(this.nightMode);
     }
 
     setAppTitle(title) {
         if (!title) {
-            if (this.mode == 'liberama.top') {
+            if (this.mode == 'liberama') {
                 document.title = `Liberama Reader - всегда с вами`;
             } else if (this.mode == 'omnireader') {
                 document.title = `Omni Reader - всегда с вами`;
             } else if (this.config && this.mode !== null) {
-                document.title = `${this.config.name} - ${this.itemRuText[this.$root.rootRoute]}`;
+                document.title = `Универсальная читалка книг и ресурсов интернета`;
             }
         } else {
             document.title = title;
@@ -195,56 +216,173 @@ class App extends Vue {
         return this.$store.state.config.mode;
     }
 
-    get showAsideBar() {
-        return (this.mode !== null && this.mode != 'reader' && this.mode != 'omnireader' && this.mode != 'liberama.top');
-    }
-
-    set showAsideBar(value) {
-    }
-
-    get isReaderActive() {
-        return (this.rootRoute == '/reader' || this.rootRoute == '/external-libs');
-    }
-
     redirectIfNeeded() {
-        if ((this.mode == 'reader' || this.mode == 'omnireader' || this.mode == 'liberama.top')) {
-            const search = window.location.search.substr(1);
+        const search = window.location.search.substr(1);
 
-            //распознавание параметра url вида "?url=<link>" и редирект при необходимости
-            if (!this.isReaderActive) {
-                const s = search.split('url=');
-                const url = s[1] || '';
-                const q = utils.parseQuery(s[0] || '');
-                if (url) {
-                    q.url = decodeURIComponent(url);
-                }
-
-                window.history.replaceState({}, '', '/');
-                this.$router.replace({ path: '/reader', query: q });
-            }
+        //распознавание параметра url вида "?url=<link>" и редирект при необходимости
+        const s = search.split('url=');
+        const url = s[1] || '';
+        if (url) {
+            window.history.replaceState({}, '', '/');
+            this.$router.replace({ path: '/reader', query: {url} });
         }
     }
 }
+
+export default vueComponent(App);
 //-----------------------------------------------------------------------------
 </script>
 
 <style scoped>
-.app-name {
-    margin-left: 10px;
-    margin-top: 10px;
-    text-align: center;
-    line-height: 140%;
-    font-weight: bold;
-}
 </style>
 
 <style>
+/* color schemes */
+:root {
+    /* current */
+    --bg-app-color: #fff;
+    --text-app-color: #000;
+    --bg-dialog-color: #fff;
+    --text-anchor-color: #00f;
+    --bg-loader-color: #ebe2c9;
+    --bg-input-color: #eee;
+    --bg-btn-color1: #1976d2;
+    --bg-btn-color2: #eee;
+    --bg-header-color1: #007000;
+    --bg-header-color2: #59b04f;
+    --bg-header-color3: #bbdefb;
+    --bg-menu-color1: #eee;
+    --bg-menu-color2: #e0e0e0;
+    --text-menu-color: #757575;
+    --text-ubtn-color: #bbb;
+
+    --text-tb-normal: #3e843e;
+    --bg-tb-normal: #e6edf4;
+    --bg-tb-hover: #fff;
+    --text-tb-active: #fff;
+    --bg-tb-active: #8ab45f;
+    --bg-tb-active-hover: #81c581;
+    --text-tb-disabled: #d3d3d3;
+    --bg-tb-disabled: #808080;
+
+    --bg-selected-item-color1: #b0f0b0;
+    --bg-selected-item-color2: #d0f5d0;
+
+    /* light */
+    --bg-app-color-light: #fff;
+    --text-app-color-light: #000;
+    --bg-dialog-color-light: #fff;
+    --text-anchor-color-light: #00f;
+    --bg-loader-color-light: #ebe2c9;
+    --bg-input-color-light: #eee;
+    --bg-btn-color1-light: #1976d2;
+    --bg-btn-color2-light: #eee;
+    --bg-header-color1-light: #007000;
+    --bg-header-color2-light: #59b04f;
+    --bg-header-color3-light: #bbdefb;
+    --bg-menu-color1-light: #eee;
+    --bg-menu-color2-light: #e0e0e0;
+    --text-menu-color-light: #757575;
+    --text-ubtn-color-light: #bbb;
+
+    --text-tb-normal-light: #3e843e;
+    --bg-tb-normal-light: #e6edf4;
+    --bg-tb-hover-light: #fff;
+    --text-tb-active-light: #fff;
+    --bg-tb-active-light: #8ab45f;
+    --bg-tb-active-hover-light: #81c581;
+    --text-tb-disabled-light: #d3d3d3;
+    --bg-tb-disabled-light: #808080;
+
+    --bg-selected-item-color1-light: #b0f0b0;
+    --bg-selected-item-color2-light: #d0f5d0;
+
+    /* dark */
+    --bg-app-color-dark: #222;
+    --text-app-color-dark: #ccc;
+    --bg-dialog-color-dark: #444;
+    --text-anchor-color-dark: #09f;
+    --bg-loader-color-dark: #222;
+    --bg-input-color-dark: #333;
+    --bg-btn-color1-dark: #00695c;
+    --bg-btn-color2-dark: #333;
+    --bg-header-color1-dark: #004000;
+    --bg-header-color2-dark: #29901f;
+    --bg-header-color3-dark: #335673;
+    --bg-menu-color1-dark: #333;
+    --bg-menu-color2-dark: #424242;
+    --text-menu-color-dark: #858585;
+    --text-ubtn-color-dark: #555;
+    
+    --text-tb-normal-dark: #3e843e;
+    --bg-tb-normal-dark: #ddd;
+    --bg-tb-hover-dark: #ccc;
+    --text-tb-active-dark: #ddd;
+    --bg-tb-active-dark: #7aa44f;
+    --bg-tb-active-hover-dark: #71b571;
+    --text-tb-disabled-dark: #d3d3d3;
+    --bg-tb-disabled-dark: #808080;
+
+    --bg-selected-item-color1-dark: #605020;
+    --bg-selected-item-color2-dark: #403010;
+}
+
+a {
+    color: var(--text-anchor-color);
+}
+
+.bg-app, .text-bg-app {
+    background-color: var(--bg-app-color);
+}
+
+.text-app {
+    color: var(--text-app-color);
+}
+
+.bg-dialog {
+    background-color: var(--bg-dialog-color);
+}
+
+.bg-input {
+    background-color: var(--bg-input-color);
+}
+
+.bg-btn1 {
+    background-color: var(--bg-btn-color1);
+}
+
+.bg-btn2 {
+    background-color: var(--bg-btn-color2);
+}
+
+.bg-menu-1 {
+    background-color: var(--bg-menu-color1);
+}
+
+.bg-menu-2 {
+    background-color: var(--bg-menu-color2);
+}
+
+.text-menu {
+    color: var(--text-menu-color);
+}
+
+.bg-header-3 {
+    background-color: var(--bg-header-color3);
+}
+
+/* main section */
 body, html, #app {    
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
     font: normal 12pt ReaderDefault;
+    background-color: #333;
+}
+
+.q-notifications__list--top {
+    top: 55px !important;
 }
 
 .dborder {
@@ -256,6 +394,14 @@ body, html, #app {
     animation: rotating 2s linear infinite;
 }
 
+@keyframes rotating { 
+    from { 
+        transform: rotate(0deg); 
+    } to { 
+        transform: rotate(360deg); 
+    }
+}
+
 .notify-button-icon {
     font-size: 16px !important;
 }

client/components/CardIndex/Book/Book.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел Book в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class Book extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/CardIndex/Card/Card.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел Card в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class Card extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/CardIndex/CardIndex.vue

@@ -1,70 +0,0 @@
-<template>
-    <div>
-        <keep-alive>
-            <router-view></router-view>
-        </keep-alive>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import _ from 'lodash';
-
-const selfRoute = '/cardindex';
-const tab2Route = [
-    '/cardindex/search',
-    '/cardindex/card',
-    '/cardindex/book',
-    '/cardindex/history',
-];
-let lastActiveTab = null;
-
-export default @Component({
-    watch: {
-        selectedTab: function(newValue, oldValue) {
-            lastActiveTab = newValue;
-            this.setRouteByTab(newValue);
-        },
-        curRoute: function(newValue, oldValue) {
-            this.setTabByRoute(newValue);
-        },
-    },
-})
-class CardIndex extends Vue {
-    selectedTab = null;
-
-    mounted() {
-        this.setTabByRoute(this.curRoute);
-    }
-
-    setTabByRoute(route) {
-        const t = _.indexOf(tab2Route, route);
-        if (t >= 0) {
-            if (t !== this.selectedTab)
-                this.selectedTab = t.toString();
-        } else {
-            if (route == selfRoute && lastActiveTab !== null)
-                this.setRouteByTab(lastActiveTab);
-        }
-    }
-
-    setRouteByTab(tab) {
-        const t = Number(tab);
-        if (tab2Route[t] !== this.curRoute) {
-            this.$router.replace(tab2Route[t]);
-        }
-    }
-
-    get curRoute() {
-        const m = this.$route.path.match(/^(\/[^\/]*\/[^\/]*).*$/i);
-        return (m ? m[1] : this.$route.path);
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-</style>

client/components/CardIndex/History/History.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел History в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class History extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/CardIndex/Search/Search.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел Search в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class Search extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

@@ -1,63 +1,80 @@
 <template>
     <Window ref="window" width="600px" height="95%" @close="close">
-        <template slot="header">
+        <template #header>
             Настроить закладки
         </template>
 
         <div class="col column fit">
-            <div class="row items-center top-panel bg-grey-3">
-                <q-btn class="q-mr-md" round dense color="blue" icon="la la-check" @click.stop="openSelected" size="16px" :disabled="!selected">
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть выбранную закладку</q-tooltip>
+            <div class="row items-center top-panel bg-menu-2">
+                <q-btn :disabled="!selected" class="q-mr-md" round dense color="blue" icon="la la-check" size="16px" @click.stop="openSelected">
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        Открыть выбранную закладку
+                    </q-tooltip>
                 </q-btn>
-                <q-input class="col" ref="search" rounded outlined dense bg-color="white" placeholder="Найти" v-model="search">
-                    <template v-slot:append>
-                        <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click="resetSearch"/>
+                <q-input ref="search" v-model="search" bg-color="input" class="col" outlined dense placeholder="Найти">
+                    <template #append>
+                        <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click="resetSearch" />
                     </template>
                 </q-input>
             </div>
 
             <div class="col row">
-                <div class="left-panel column items-center no-wrap bg-grey-3">
-                    <q-btn class="q-my-sm" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="14px">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
+                <div class="left-panel column items-center no-wrap bg-menu-1">
+                    <q-btn class="q-my-sm" round dense color="blue" icon="la la-plus" size="14px" @click.stop="addBookmark">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                            Добавить закладку
+                        </q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-minus" @click.stop="delBookmark" size="14px" :disabled="!ticked.length">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Удалить отмеченные закладки</q-tooltip>
+                    <q-btn :disabled="!ticked.length" class="q-mb-sm" round dense color="blue" icon="la la-minus" size="14px" @click.stop="delBookmark">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                            Удалить отмеченные закладки
+                        </q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-edit" @click.stop="editBookmark" size="14px" :disabled="!selected || selected.indexOf('r-') == 0">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Редактировать закладку</q-tooltip>
+                    <q-btn :disabled="!selected || selected.indexOf('r-') == 0" class="q-mb-sm" round dense color="blue" icon="la la-edit" size="14px" @click.stop="editBookmark">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                            Редактировать закладку
+                        </q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-up" @click.stop="moveBookmark(false)" size="14px" :disabled="!ticked.length">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вверх</q-tooltip>
+                    <q-btn :disabled="!ticked.length" class="q-mb-sm" round dense color="blue" icon="la la-arrow-up" size="14px" @click.stop="moveBookmark(false)">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                            Переместить отмеченные вверх
+                        </q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-down" @click.stop="moveBookmark(true)" size="14px" :disabled="!ticked.length">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вниз</q-tooltip>
+                    <q-btn :disabled="!ticked.length" class="q-mb-sm" round dense color="blue" icon="la la-arrow-down" size="14px" @click.stop="moveBookmark(true)">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                            Переместить отмеченные вниз
+                        </q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-broom" @click.stop="setDefaultBookmarks" size="14px">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Установить по умолчанию</q-tooltip>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-broom" size="14px" @click.stop="setDefaultBookmarks">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                            Установить по умолчанию
+                        </q-tooltip>
                     </q-btn>
-                    <div class="space"/>
+                    <div class="space" />
                 </div>
 
                 <div class="col fit tree">
                     <div v-show="nodes.length" class="checkbox-tick-all">
-                        <q-checkbox v-model="tickAll" @input="makeTickAll" size="36px" label="Выбрать все" />
+                        <q-checkbox v-model="tickAll" size="36px" label="Выбрать все" @update:model-value="makeTickAll" />
                     </div>
                     <q-tree
+                        v-model:selected="selected"
+                        v-model:ticked="ticked"
+                        v-model:expanded="expanded"
                         class="q-my-xs"
+                        color="input" 
                         :nodes="nodes"
                         node-key="key"
                         tick-strategy="leaf"
-                        :selected.sync="selected"
-                        :ticked.sync="ticked"
-                        :expanded.sync="expanded"
                         selected-color="black"
                         :filter="search"
                         no-nodes-label="Закладок пока нет"
                         no-results-label="Ничего не найдено"
                     >
-                        <template v-slot:default-header="p">
-                            <div class="q-px-xs" :class="{selected: selected == p.key}">{{ p.node.label }}</div>
+                        <template #default-header="p">
+                            <div class="q-px-xs" :class="{selected: selected == p.key}">
+                                {{ p.node.label }}
+                            </div>
                         </template>
                     </q-tree>
                 </div>
@@ -68,32 +85,31 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
+
 import _ from 'lodash';
 
 import Window from '../../share/Window.vue';
 import * as lu from '../linkUtils';
 import rstore from '../../../store/modules/reader';
 
-const BookmarkSettingsProps = Vue.extend({
-    props: {
-        libs: Object,
-        addBookmarkVisible: Boolean,
-    }
-});
-
-export default @Component({
+const componentOptions = {
     components: {
         Window,
     },
     watch: {
-        ticked: function() {
+        ticked() {
             this.checkAllTicked();
         },
     }    
-})
-class BookmarkSettings extends BookmarkSettingsProps {
+};
+class BookmarkSettings {
+    _options = componentOptions;
+    _props = {
+        libs: Object,
+        addBookmarkVisible: Boolean,
+    };
+
     search = '';
     selected = '';
     ticked = [];
@@ -308,6 +324,8 @@ class BookmarkSettings extends BookmarkSettingsProps {
     }
 
 }
+
+export default vueComponent(BookmarkSettings);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -330,6 +348,7 @@ class BookmarkSettings extends BookmarkSettingsProps {
     padding: 0px 10px 10px 10px;
     overflow-x: auto;
     overflow-y: auto;
+    max-width: 520px;
 }
 
 .selected {

client/components/ExternalLibs/ExternalLibs.vue

@@ -1,124 +1,186 @@
 <template>
-    <Window ref="window" @close="close" margin="2px">
-        <template slot="header">
+    <Window ref="window" margin="2px" @close="close">
+        <template #header>
             {{ header }}
         </template>
 
-        <template slot="buttons">
-            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
-                <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="16px"/>
+        <template #buttons>
+            <span class="header-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
+                <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На весь экран</q-tooltip>
             </span>
-            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(0.1)">
-                <q-icon name="la la-plus" size="16px"/>
+            <span class="header-button row justify-center items-center" @mousedown.stop @click="changeScale(0.1)">
+                <q-icon name="la la-plus" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Увеличить масштаб</q-tooltip>
             </span>
-            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(-0.1)">
-                <q-icon name="la la-minus" size="16px"/>
+            <span class="header-button row justify-center items-center" @mousedown.stop @click="changeScale(-0.1)">
+                <q-icon name="la la-minus" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Уменьшить масштаб</q-tooltip>
             </span>
-            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="showHelp">
-                <q-icon name="la la-question-circle" size="16px"/>
+            <span class="header-button row justify-center items-center" @mousedown.stop @click="showHelp">
+                <q-icon name="la la-question-circle" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Справка</q-tooltip>
             </span>
         </template>
 
         <div v-show="ready" class="col column" style="min-width: 600px">
             <div class="row items-center q-px-sm" style="height: 50px">
-                <q-select class="q-mr-sm" ref="rootLink" v-model="rootLink" :options="rootLinkOptions" @input="rootLinkInput"
-                    @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
+                <q-select
+                    ref="rootLink"
+                    v-model="rootLink"
+                    class="q-mr-sm"
+                    bg-color="input" 
+                    :options="rootLinkOptions"
                     style="width: 230px"
                     dropdown-icon="la la-angle-down la-sm"
-                    rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
-                >
-                    <template v-slot:prepend>
-                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="12px">
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
-                        </q-btn>
-                        <q-btn round dense color="blue" icon="la la-bars" @click.stop="bookmarkSettings" size="12px">
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Настроить закладки</q-tooltip>
-                        </q-btn>
-                    </template>
-                    <template v-slot:selected>
-                        <div style="overflow: hidden; white-space: nowrap;">{{ rootLinkWithoutProtocol }}</div>
-                    </template>
-                </q-select>
-
-                <q-select class="q-mr-sm" ref="selectedLink" v-model="selectedLink" :options="selectedLinkOptions" @input="selectedLinkInput" style="width: 50px"
+                    outlined dense emit-value map-options display-value-sanitize options-sanitize
                     @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
-                    dropdown-icon="la la-angle-down la-sm"
-                    rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
                 >
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Закладки</q-tooltip>
+                    <template #prepend>
+                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" size="12px" @click.stop="addBookmark">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                Добавить закладку
+                            </q-tooltip>
+                        </q-btn>
+                        <q-btn round dense color="blue" icon="la la-bars" size="12px" @click.stop="bookmarkSettings">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                Настроить закладки
+                            </q-tooltip>
+                        </q-btn>
+                    </template>
+                    <template #selected>
+                        <div style="overflow: hidden; white-space: nowrap;">
+                            {{ rootLinkWithoutProtocol }}
+                        </div>
+                    </template>
                 </q-select>
 
-                <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги"
+                <q-select
+                    ref="selectedLink"
+                    v-model="selectedLink"
+                    class="q-mr-sm"
+                    bg-color="input" 
+                    :options="selectedLinkOptions"
+                    style="width: 50px"
+                    dropdown-icon="la la-angle-down la-sm"
+                    outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
+                    @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
+                >
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        Закладки
+                    </q-tooltip>
+                </q-select>
+
+                <q-input
+                    ref="input"
+                    v-model="bookUrl"
+                    class="col q-mr-sm"
+                    bg-color="input" 
+                    outlined dense
+                    placeholder="Скопируйте сюда ссылку на книгу и нажмите 'Открыть'"
                     @focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
                 >
-                    <template v-slot:prepend>
-                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(selectedLink)" size="12px">
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip>
+                    <template #prepend>
+                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" size="12px" @click="goToLink(selectedLink)">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                Вернуться на стартовую страницу
+                            </q-tooltip>
                         </q-btn>
-                        <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px" :disabled="!bookUrl">
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
+                        <q-btn :disabled="!bookUrl" round dense color="blue" icon="la la-angle-double-down" size="12px" @click="openBookUrlInFrame">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                Загрузить URL во фрейм
+                            </q-tooltip>
                         </q-btn>
                     </template>
-                    <template v-slot:append>
-                        <q-btn round dense color="blue" icon="la la-cog" @click.stop="optionsVisible = true" size="12px">
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
+                    <template #append>
+                        <q-btn round dense color="blue" icon="la la-cog" size="12px" @click.stop="optionsVisible = true">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                Опции
+                            </q-tooltip>
                         </q-btn>
                     </template>
                 </q-input>
 
-                <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl" :disabled="!bookUrl">Открыть
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть в читалке</q-tooltip>
+                <q-btn :disabled="!bookUrl" color="green-7" no-caps size="14px" @click="submitUrl()">
+                    Открыть
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        Открыть в читалке
+                    </q-tooltip>
                 </q-btn>
             </div>
             <div class="separator"></div>
 
-            <div class="col fit" ref="frameBox" style="position: relative;">
+            <div ref="frameBox" class="col fit" style="position: relative; background-color: white">
                 <div ref="frameWrap" class="overflow-hidden">
-                    <iframe v-if="frameVisible" ref="frame" :src="frameSrc" frameborder="0"></iframe>
+                    <iframe v-if="frameVisible" ref="frame" :src="frameSrc" frameborder="0" allow="clipboard-read; clipboard-write"></iframe>
                 </div>
                 <div v-show="transparentLayoutVisible" ref="transparentLayout" class="fit transparent-layout" @click="transparentLayoutClick"></div>
             </div>
 
             <Dialog ref="dialogAddBookmark" v-model="addBookmarkVisible">
-                <template slot="header">
+                <template #header>
                     <div class="row items-center">
                         <q-icon class="q-mr-sm" name="la la-bookmark" size="28px"></q-icon>
-                        <div v-if="addBookmarkMode == 'edit'">Редактировать закладку</div>
-                        <div v-else>Добавить закладку</div>
+                        <div v-if="addBookmarkMode == 'edit'">
+                            Редактировать закладку
+                        </div>
+                        <div v-else>
+                            Добавить закладку
+                        </div>
                     </div>
                 </template>
 
                 <div class="q-mx-md row">
-                    <q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink" @keydown="bookmarkLinkKeyDown"
-                        placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus">
+                    <q-input
+                        ref="bookmarkLink"
+                        v-model="bookmarkLink"
+                        class="col q-mr-sm"
+                        bg-color="input" 
+                        outlined dense
+                        placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus" @keydown="bookmarkLinkKeyDown"
+                    >
                     </q-input>
 
-                    <q-select class="q-mr-sm" ref="defaultRootLink" v-model="defaultRootLink" :options="defaultRootLinkOptions" @input="defaultRootLinkInput" style="width: 50px"
+                    <q-select
+                        ref="defaultRootLink"
+                        v-model="defaultRootLink"
+                        class="q-mr-sm"
+                        bg-color="input" 
+                        :options="defaultRootLinkOptions"
+                        style="width: 50px"
                         dropdown-icon="la la-angle-down la-sm"
                         outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
                     >
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Предустановленные ссылки</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                            Предустановленные ссылки
+                        </q-tooltip>
                     </q-select>
                 </div>
 
                 <div class="q-mx-md q-mt-md">
-                    <q-input class="col q-mr-sm" ref="bookmarkDesc" outlined dense bg-color="white" v-model="bookmarkDesc" @keydown="bookmarkDescKeyDown"
-                        placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus">
+                    <q-input
+                        ref="bookmarkDesc"
+                        v-model="bookmarkDesc"
+                        class="col q-mr-sm"
+                        bg-color="input" 
+                        outlined dense
+                        placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus" @keydown="bookmarkDescKeyDown"
+                    >
                     </q-input>
                 </div>
 
-                <template slot="footer">
-                    <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
-                    <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark" :disabled="!bookmarkLink">OK</q-btn>
+                <template #footer>
+                    <q-btn v-close-popup class="q-px-md q-ml-sm" dense no-caps>
+                        Отмена
+                    </q-btn>
+                    <q-btn :disabled="!bookmarkLink" class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark">
+                        OK
+                    </q-btn>
                 </template>
             </Dialog>
 
             <Dialog ref="options" v-model="optionsVisible">
-                <template slot="header">
+                <template #header>
                     <div class="row items-center">
                         <q-icon class="q-mr-sm" name="la la-cog" size="28px"></q-icon>
                         Опции
@@ -131,22 +193,29 @@
                     <q-checkbox v-model="openInFrameOnAdd" size="36px" label="Активировать новую закладку после добавления" />
                 </div>
 
-                <template slot="footer">
-                    <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="optionsVisible = false">OK</q-btn>
+                <template #footer>
+                    <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="optionsVisible = false">
+                        OK
+                    </q-btn>
                 </template>
             </Dialog>
         </div>
 
-        <BookmarkSettings v-if="bookmarkSettingsActive" ref="bookmarkSettings" :libs="libs" :addBookmarkVisible="addBookmarkVisible"
-            @do-action="doAction" @close="closeBookmarkSettings">
+        <BookmarkSettings
+            v-if="bookmarkSettingsActive"
+            ref="bookmarkSettings"
+            :libs="libs"
+            :add-bookmark-visible="addBookmarkVisible"
+            @do-action="doAction" @close="closeBookmarkSettings"
+        >
         </BookmarkSettings>
     </Window>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../vueComponent.js';
+
 import _ from 'lodash';
 
 import Window from '../share/Window.vue';
@@ -159,22 +228,23 @@ import * as lu from './linkUtils';
 
 const proxySubst = {
     'http://flibusta.is': 'http://b.liberama.top:23480',
+    'http://fantasy-worlds.org': 'http://b.liberama.top:23580',
 };
 
-export default @Component({
+const componentOptions = {
     components: {
         Window,
         Dialog,
         BookmarkSettings
     },
     watch: {
-        libs: function() {
+        libs() {
             this.loadLibs();
         },
-        defaultRootLink: function() {
+        defaultRootLink() {
             this.updateBookmarkLink();
         },
-        bookUrl: function(newValue) {
+        bookUrl(newValue) {
             const value = lu.addProtocol(newValue);
             const subst = this.makeProxySubst(value, true);
             if (value != subst) {
@@ -183,7 +253,7 @@ export default @Component({
                 });
             }
         },
-        bookmarkLink: function(newValue) {
+        bookmarkLink(newValue) {
             const value = lu.addProtocol(newValue);
             const subst = this.makeProxySubst(value, true);
             if (value != subst) {
@@ -192,18 +262,26 @@ export default @Component({
                 });
             }
         },
-        closeAfterSubmit: function(newValue) {
+        closeAfterSubmit(newValue) {
             this.commitProp('closeAfterSubmit', newValue);
         },
-        openInFrameOnEnter: function(newValue) {
+        openInFrameOnEnter(newValue) {
             this.commitProp('openInFrameOnEnter', newValue);
         },
-        openInFrameOnAdd: function(newValue) {
+        openInFrameOnAdd(newValue) {
             this.commitProp('openInFrameOnAdd', newValue);
         },
+        rootLink() {
+            this.rootLinkInput();
+        },
+        selectedLink() {
+            this.selectedLinkInput();
+        },
     }    
-})
-class ExternalLibs extends Vue {
+};
+class ExternalLibs {
+    _options = componentOptions;
+
     ready = false;
     frameVisible = false;
     rootLink = '';
@@ -229,12 +307,17 @@ class ExternalLibs extends Vue {
     openInFrameOnAdd = false;
     frameScale = 1;
 
+    inpxReady = false;
+    inpxTitle = '';
+    inpxUrl = '';
+
     created() {
+        this.commit = this.$store.commit;
         this.oldStartLink = '';
         this.justOpened = true;
-        this.$root.addKeyHook(this.keyHook);
+        this.$root.addEventHook('key', this.keyHook);
 
-        this.$root.$on('resize', async() => {
+        this.$root.addEventHook('resize', async() => {
             await utils.sleep(200);
             this.frameResize();
         });
@@ -246,34 +329,9 @@ class ExternalLibs extends Vue {
         this.debouncedGoToLink = _.debounce((link) => {
             this.goToLink(link);
         }, 100, {'maxWait':200});
-        //this.commit = this.$store.commit;
-        //this.commit('reader/setLibs', rstore.libsDefaults);
     }
 
     mounted() {
-        //Поправка метода toggleOption компонента select фреймворка quasar, необходимо другое поведение
-        //$emit('input'.. вызывается всегда
-        this.toggleOption = function(opt, keepOpen) {
-            if (this.editable !== true || opt === void 0 || this.isOptionDisabled(opt) === true) {
-                return;
-            }
-
-            const optValue = this.getOptionValue(opt);
-
-            if (this.multiple !== true) {
-                if (keepOpen !== true) {
-                    this.updateInputValue(this.fillInput === true ? this.getOptionLabel(opt) : '', true, true);
-                    this.hidePopup();
-                }
-
-                this.$refs.target !== void 0 && this.$refs.target.focus();
-                this.$emit('input', this.emitValue === true ? optValue : opt);
-            }
-        };
-
-        this.$refs.rootLink.toggleOption = this.toggleOption;
-        this.$refs.selectedLink.toggleOption = this.toggleOption;
-
         (async() => {
             //подождем this.mode
             let i = 0;
@@ -282,10 +340,7 @@ class ExternalLibs extends Vue {
                 i++;
             }
 
-            if (this.mode != 'liberama.top') {
-                this.$router.replace('/404');
-                return;
-            }
+            this.libsDefaults = rstore.getLibsDefaults(this.mode);
 
             this.$refs.window.init();
 
@@ -296,17 +351,28 @@ class ExternalLibs extends Vue {
             const openerOrigin2 = `https://${openerHost}`;
 
             window.addEventListener('message', (event) => {
+                //from inpx-web
+                if (_.isObject(event.data) && event.data.from === 'inpx-web') {
+                    //console.log(event);
+
+                    this.inpxOrigin = event.origin;
+
+                    this.recvInpxMessage(event.data);
+                    return;
+                }
+
+                //from parent
                 if (event.origin !== openerOrigin1 && event.origin !== openerOrigin2)
                     return;
+
                 if (!_.isObject(event.data) || event.data.from != 'LibsPage')
                     return;
                 if (event.origin == openerOrigin1)
                     this.opener = window.opener;
                 else
                     this.opener = event.source;
-                this.openerOrigin = event.origin;
 
-                //console.log(event);
+                this.openerOrigin = event.origin;
 
                 this.recvMessage(event.data);
             });
@@ -337,7 +403,10 @@ class ExternalLibs extends Vue {
             }
         } else if (d.type == 'libs') {
             this.ready = true;
-            this.libs = _.cloneDeep(d.data);
+            if (d.data)
+                this.libs = _.cloneDeep(d.data);
+            if (d.sets)
+                this.updateSets(d.sets);
         } else if (d.type == 'notify') {
             this.$root.notify.success(d.data, '', {position: 'bottom-right'});
         }
@@ -351,6 +420,30 @@ class ExternalLibs extends Vue {
         })();
     }
 
+    recvInpxMessage(d) {
+        if (d.type == 'mes') {
+            switch(d.data) {
+                case 'hello-from-inpx-web':
+                    this.sendInpxMessage({type: 'mes', data: 'ready'});
+                    break;
+                case 'ready':
+                    this.inpxReady = true;
+                    break;
+            }
+        } else if (d.type == 'submitUrl') {
+            this.submitUrl(d.data);
+        } else if (d.type == 'titleChange') {
+            this.inpxTitle = d.data;
+        } else if (d.type == 'urlChange') {
+            this.inpxUrl = d.data;
+        }
+    }
+
+    sendInpxMessage(d) {
+        if (this.$refs.frame && this.inpxOrigin)
+            this.$refs.frame.contentWindow.postMessage(Object.assign({}, {from: 'ExternalLibs'}, d), this.inpxOrigin);
+    }
+
     async checkOpener() {
         if (this.opener.closed) {
             await this.$root.stdDialog.alert('Потеряна связь с читалкой. Окно будет закрыто', 'Ошибка');
@@ -358,6 +451,11 @@ class ExternalLibs extends Vue {
         }
     }
 
+    updateSets(sets) {
+        if (sets.nightMode !== this.nightMode)
+            this.commit('reader/nightModeToggle');
+    }
+
     commitLibs(libs) {
         this.sendMessage({type: 'libs', data: libs});
     }
@@ -406,12 +504,25 @@ class ExternalLibs extends Vue {
         return this.$store.state.config.mode;
     }
 
+    get nightMode() {
+        return this.$store.state.reader.settings.nightMode;
+    }
+
     get header() {
-        let result = (this.ready ? 'Библиотека' : 'Загрузка...');
+        let result = [this.ready ? 'Сетевая библиотека' : 'Загрузка...'];
         if (this.ready && this.selectedLink) {
-            result += ` | ${(this.libs.comment ? this.libs.comment + ' ': '') + lu.removeProtocol(this.libs.startLink)}`;
+
+            if (this.inpxReady && this.inpxTitle) {
+                result.push(this.inpxTitle);
+                result.push(lu.removeProtocol(this.inpxUrl));
+            } else {
+                result.push(this.libs.comment);
+                result.push(lu.removeProtocol(this.libs.startLink));
+            }
         }
-        this.$root.$emit('set-app-title', result);
+
+        result = result.filter(s => s).join(' | ');
+        this.$root.setAppTitle(result);
         return result;
     }
 
@@ -480,7 +591,7 @@ class ExternalLibs extends Vue {
     get defaultRootLinkOptions() {
         let result = [];
 
-        rstore.libsDefaults.groups.forEach(group => {
+        this.libsDefaults.groups.forEach(group => {
             result.push({label: lu.removeProtocol(group.r), value: group.r});
         });
 
@@ -509,6 +620,11 @@ class ExternalLibs extends Vue {
     }
 
     goToLink(link) {
+        this.inpxReady = false;
+        this.inpxTitle = '';
+        this.inpxUrl = '';
+        this.inpxOrigin = false;
+
         if (!this.ready || !link)
             return;
 
@@ -524,6 +640,7 @@ class ExternalLibs extends Vue {
             this.frameVisible = true;
             this.$nextTick(() => {
                 if (this.$refs.frame) {
+                    this.$refs.frame.contentWindow.location.reload(true);
                     this.$refs.frame.contentWindow.focus();
                     this.frameResize();
                 }
@@ -596,13 +713,17 @@ class ExternalLibs extends Vue {
         this.updateStartLink(true);
     }
 
-    submitUrl() {
-        if (this.bookUrl) {
+    submitUrl(url) {
+        if (!url) {
+            url = this.bookUrl;
+            this.bookUrl = '';
+        }
+
+        if (url) {
             this.sendMessage({type: 'submitUrl', data: {
-                url: this.bookUrl,
+                url,
                 force: true
             }});
-            this.bookUrl = '';
             if (this.closeAfterSubmit)
                 this.close();
         }
@@ -616,31 +737,33 @@ class ExternalLibs extends Vue {
         } else {
             this.bookmarkLink = this.bookUrl;
             this.bookmarkDesc = '';
+
+            if (!this.bookmarkLink && this.inpxReady && this.inpxUrl) {
+                this.bookmarkLink = this.inpxUrl;
+                if (this.inpxTitle)
+                    this.bookmarkDesc = this.inpxTitle;
+            }
         }
 
         this.addBookmarkMode = mode;
         this.addBookmarkVisible = true;
-        this.$nextTick(() => {
+        this.$nextTick(async() => {
+            await this.$refs.dialogAddBookmark.waitShown();
             this.$refs.bookmarkLink.focus();
-            this.$refs.defaultRootLink.toggleOption = this.toggleOption;
         });
     }
 
     updateBookmarkLink() {
-        const index = lu.getSafeRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
+        const index = lu.getSafeRootIndexByUrl(this.libsDefaults.groups, this.defaultRootLink);
         if (index >= 0) {
-            this.bookmarkLink = rstore.libsDefaults.groups[index].s;
-            this.bookmarkDesc = this.getCommentByLink(rstore.libsDefaults.groups[index].list, this.bookmarkLink);
+            this.bookmarkLink = this.libsDefaults.groups[index].s;
+            this.bookmarkDesc = this.getCommentByLink(this.libsDefaults.groups[index].list, this.bookmarkLink);
         } else {
             this.bookmarkLink = '';
             this.bookmarkDesc = '';
         }
     }
 
-    defaultRootLinkInput() {
-        this.updateBookmarkLink();
-    }
-
     bookmarkLinkKeyDown(event) {
         if (event.key == 'Enter') {
             this.$refs.bookmarkDesc.focus();
@@ -703,7 +826,7 @@ class ExternalLibs extends Vue {
                 this.commitLibs(libs);
             } else if (item.c != this.bookmarkDesc) {
                 if (await this.$root.stdDialog.confirm(`Такая закладка уже существует с другим описанием.<br>` +
-                    `Заменить '${this.$sanitize(item.c)}' на '${this.$sanitize(this.bookmarkDesc)}'?`, ' ')) {
+                    `Заменить '${this.$root.sanitize(item.c)}' на '${this.$root.sanitize(this.bookmarkDesc)}'?`, ' ')) {
                     item.c = this.bookmarkDesc;
                     this.commitLibs(libs);                    
                 } else 
@@ -786,25 +909,32 @@ class ExternalLibs extends Vue {
 
     showHelp() {
         this.$root.stdDialog.alert(`
-<p>Окно 'Библиотека' позволяет открывать ссылки в читалке без переключения между окнами,
-что особенно актуально для мобильных устройств.</p>
-
-<p>'Библиотека' разрешает свободный доступ к сайту flibusta.is. Имеется возможность управлять закладками
+<p>Окно 'Сетевая библиотека' позволяет открывать ссылки в читалке без переключения между окнами,
+что особенно актуально для мобильных устройств. Имеется возможность управлять закладками
 на понравившиеся ресурсы, книги или страницы авторов. Открытие ссылок и навигация происходят во фрейме, но,
-к сожалению, в нем открываются не все страницы.
-</p>
+к сожалению, в нем открываются не все страницы.</p>` + 
 
-<p>Из-за проблем с безопасностью, навигация 'вперед-назад' во фрейме осуществляется с помощью контекстного меню правой кнопкой мыши.
+(this.mode === 'liberama' ?
+`<p>Доступ к сайтам <span style="color: blue">http://flibusta.is</span> и <span style="color: blue">http://fantasy-worlds.org</span> работает через прокси.
+
+<br><span style="color: red"><b>ПРЕДУПРЕЖДЕНИЕ!</b></span>
+Доступ предназначен только для просмотра и скачивания книг. Авторизоваться на этих сайтах
+из фрейма категорически не рекомендуется, т.к. ваше подключение не защищено и данные могут попасть 
+к третьим лицам.
+</p>
+`
+: '') + 
+
+`<p>Из-за проблем с безопасностью, навигация 'вперед-назад' во фрейме осуществляется с помощью контекстного меню правой кнопкой мыши.
 На мобильных устройствах для этого служит системная клавиша 'Назад (стрелка влево)' и опция 'Вперед (стрелка вправо)' в меню браузера. 
 </p>
-
 <p>Приятного пользования ;-)
 </p>
             `, 'Справка', {iconName: 'la la-info-circle'});
     }
 
     keyHook(event) {
-        if (this.$root.rootRoute() == '/external-libs') {
+        if (this.$root.getRootRoute() == '/external-libs') {
             if (this.$root.stdDialog.active)
                 return false;
 
@@ -830,6 +960,8 @@ class ExternalLibs extends Vue {
         return false;
     }
 }
+
+export default vueComponent(ExternalLibs);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -839,14 +971,15 @@ class ExternalLibs extends Vue {
     background-color: #A0A0A0;
 }
 
-.full-screen-button {
+.header-button {
     width: 30px;
     height: 30px;
     cursor: pointer;
 }
 
-.full-screen-button:hover {
-    background-color: #69C05F;
+.header-button:hover {
+    color: white;
+    background-color: #39902F;
 }
 
 .transparent-layout {

client/components/Help/Help.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел Help в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class Help extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/Income/Income.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел Income в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class Income extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/NotFound404/NotFound404.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Страница не найдена
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class NotFound404 extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/Reader/ClickMapPage/ClickMapPage.vue

@@ -6,15 +6,12 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
 
 import {sleep} from '../../../share/utils';
 import {clickMap, clickMapText} from '../share/clickMap';
 
-export default @Component({
-})
-class ClickMapPage extends Vue {
+class ClickMapPage {
     fontSize = '200%';
 
     created() {
@@ -53,6 +50,8 @@ class ClickMapPage extends Vue {
         await sleep(5000);
     }
 }
+
+export default vueComponent(ClickMapPage);
 //-----------------------------------------------------------------------------
 </script>
 

client/components/Reader/ContentsPage/ContentsPage.vue

@@ -0,0 +1,548 @@
+<template>
+    <Window ref="window" width="600px" @close="close">
+        <template #header>
+            Оглавление/закладки
+        </template>
+
+        <div class="bg-menu-1 row">
+            <q-tabs
+                v-model="selectedTab"
+                active-color="app"
+                active-bg-color="app"
+                indicator-color="bg-app"
+                dense
+                no-caps
+                inline-label
+                class="no-mp bg-menu-2 text-menu"
+            >
+                <q-tab name="contents" icon="la la-list" label="Оглавление" />
+                <q-tab name="images" icon="la la-image" label="Изображения" />
+                <!--q-tab name="bookmarks" icon="la la-bookmark" label="Закладки" /-->
+            </q-tabs>
+        </div>
+
+        <div class="q-mb-sm" />
+
+        <div v-show="selectedTab == 'contents'" ref="tabPanelContents" class="tab-panel">
+            <div>
+                <div v-for="item in contents" :key="item.key" class="column" style="width: 540px">
+                    <div :ref="`mainitem${item.key}`" class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
+                        <div v-if="item.list.length" class="row justify-center items-center expand-button clickable" @click="expandClick(item.key)">
+                            <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': item.expanded}" color="green-8" size="24px" />
+                        </div>
+                        <div v-else class="no-expand-button clickable" @click="setBookPos(item.offset)">
+                            <q-icon name="la la-stop" class="icon" style="visibility: hidden" size="24px" />
+                        </div>
+                        <div class="col row clickable" @click="setBookPos(item.offset)">
+                            <div :style="item.indentStyle"></div>
+                            <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
+                            <div class="column justify-center">
+                                {{ item.perc }}%
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div v-if="item.expanded" :ref="`subdiv${item.key}`" class="subitems-transition">
+                        <div 
+                            v-for="subitem in item.list" 
+                            :ref="`subitem${subitem.key}`" 
+                            :key="subitem.key" class="row q-px-sm no-wrap" :class="{'subitem': !subitem.isBookPos, 'subitem-book-pos': subitem.isBookPos}"
+                        >
+                            <div class="col row clickable" @click="setBookPos(subitem.offset)">
+                                <div class="no-expand-button"></div>
+                                <div :style="subitem.indentStyle"></div>
+                                <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="subitem.label"></div>
+                                <div class="column justify-center">
+                                    {{ subitem.perc }}%
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="!contents.length" class="column justify-center items-center" style="height: 100px">
+                    Оглавление отсутствует
+                </div>
+            </div>
+        </div>
+
+        <div v-show="selectedTab == 'images'" ref="tabPanelImages" class="tab-panel">
+            <div>
+                <div v-for="item in images" :key="item.key" class="column" style="width: 540px">
+                    <div :ref="`image${item.key}`" class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
+                        <div class="col row clickable" @click="setBookPos(item.offset)">
+                            <div class="image-thumb-box row justify-center items-center">
+                                <div v-show="!imageLoaded[item.id]" class="image-thumb column justify-center">
+                                    <i class="loading-img-icon la la-images"></i>
+                                </div>
+                                <img v-show="imageLoaded[item.id]" class="image-thumb" :src="imageSrc[item.id]" />
+                            </div>
+                            <div class="no-expand-button column justify-center items-center">
+                                <div class="image-num">
+                                    {{ item.num }}
+                                </div>
+                                <div v-show="item.type == 'image/jpeg'" class="image-type text-black it-jpg-color row justify-center">
+                                    JPG
+                                </div>
+                                <div v-show="item.type == 'image/png'" class="image-type text-black it-png-color row justify-center">
+                                    PNG
+                                </div>
+                                <div v-show="!item.local" class="image-type text-black it-net-color row justify-center">
+                                    INET
+                                </div>
+                            </div>
+                            <div :style="item.indentStyle"></div>
+                            <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
+                            <div class="column justify-center">
+                                {{ item.perc }}%
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="!images.length" class="column justify-center items-center" style="height: 100px">
+                    Изображения отсутствуют
+                </div>
+            </div>
+        </div>
+
+        <div v-show="selectedTab == 'bookmarks'" class="tab-panel">
+            <div class="column justify-center items-center" style="height: 100px">
+                Раздел находится в разработке
+            </div>
+        </div>
+    </Window>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+
+//import _ from 'lodash';
+
+import Window from '../../share/Window.vue';
+import * as utils from '../../../share/utils';
+
+const componentOptions = {
+    components: {
+        Window,
+    },
+    watch: {
+        bookPos() {
+            this.updateBookPosSelection();
+        },
+        selectedTab() {
+            this.updateBookPosScrollTop();
+        },
+    },
+};
+class ContentsPage {
+    _options = componentOptions;
+    _props = {
+        bookPos: Number,
+        isVisible: Boolean,
+    };
+
+    selectedTab = 'contents';
+    contents = [];
+    images = [];
+    imageSrc = [];
+    imageLoaded = [];
+
+    created() {
+    }
+
+    async init(currentBook, parsed) {
+        this.$refs.window.init();
+
+        //закладки
+
+        //проверим, надо ли обновлять списки
+        if (this.parsed == parsed) {
+            this.updateBookPosSelection();
+            return;
+        }
+
+        //далее формирование оглавления
+        this.parsed = parsed;
+        this.contents = [];
+        await this.$nextTick();
+
+        const pc = parsed.contents;
+        const ims = parsed.images;
+        const newpc = [];        
+        if (pc.length) {//если есть оглавление
+            //преобразуем все, кроме первого, разделы body в title-subtitle
+            let curSubtitles = [];
+            let prevBodyIndex = -1;
+            for (let i = 0; i < pc.length; i++) {
+                const cont = pc[i];
+                if (prevBodyIndex != cont.bodyIndex)
+                    curSubtitles = [];
+
+                prevBodyIndex = cont.bodyIndex;
+
+                if (cont.bodyIndex > 1) {
+                    if (cont.inset < 1) {
+                        newpc.push(Object.assign({}, cont, {subtitles: curSubtitles}));
+                    } else {
+                        curSubtitles.push(Object.assign({}, cont, {inset: cont.inset - 1}));
+                    }
+                } else {
+                    newpc.push(cont);
+                }
+            }
+        } else {//попробуем вытащить из images
+            for (let i = 0; i < ims.length; i++) {
+                const image = ims[i];
+
+                if (image.alt) {
+                    newpc.push({paraIndex: image.paraIndex, title: image.alt, inset: 1, bodyIndex: 0, subtitles: []});
+                }
+            }
+        }
+
+        const prepareLabel = (title, bolder = false) => {
+            let titleParts = title.split('<p>');
+            const textParts = titleParts.filter(v => v).map(v => `<div>${utils.removeHtmlTags(v)}</div>`);
+            if (bolder && textParts.length > 1)
+                textParts[0] = `<b>${textParts[0]}</b>`;
+            return textParts.join('');
+        }
+
+        const getIndentStyle = inset => `width: ${inset*20}px`;
+
+        const getLabelStyle = (inset) => {
+            const fontSizes = ['110%', '100%', '90%', '85%'];
+            inset = (inset > 3 ? 3 : inset);
+            return `font-size: ${fontSizes[inset]}`;
+        };
+
+        //формируем newContents
+        let i = 0;
+        const newContents = [];
+        newpc.forEach((cont) => {
+            const label = prepareLabel(cont.title, true);
+            const indentStyle = getIndentStyle(cont.inset);
+            const labelStyle = getLabelStyle(cont.inset);
+
+            let j = 0;
+            const list = [];
+            cont.subtitles.forEach((sub) => {
+                const l = prepareLabel(sub.title);
+                const s = getIndentStyle(sub.inset + 1);
+                const ls = getLabelStyle(cont.inset + 1);
+                const p = parsed.para[sub.paraIndex];
+                list[j] = {perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j, offset: p.offset, indentStyle: s, labelStyle: ls};
+                j++;
+            });
+
+            const p = parsed.para[cont.paraIndex];
+            newContents[i] = {perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, indentStyle, labelStyle, expanded: false, list};
+
+            i++;
+        });
+
+        this.contents = newContents;
+
+        //формируем newImages
+        const newImages = [];
+        for (i = 0; i < ims.length; i++) {
+            const image = ims[i];
+            const bin = parsed.binary[image.id];
+            const type = (bin ? bin.type : '');
+            
+            const label = (image.alt ? image.alt : '<span style="font-size: 90%; color: var(--bg-menu-color2)"><i>Без названия</i></span>');
+            const indentStyle = getIndentStyle(1);
+            const labelStyle = getLabelStyle(1);
+
+            const p = parsed.para[image.paraIndex];
+            newImages.push({perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset,
+                indentStyle, labelStyle, type, num: image.num, id: image.id, local: image.local});
+        }
+
+        this.images = newImages;
+
+        if (this.selectedTab == 'contents' && !this.contents.length && this.images.length)
+            this.selectedTab = 'images';
+
+        //выделим на bookPos
+        this.updateBookPosSelection();
+
+        //асинхронная загрузка изображений
+        this.imageSrc = [];
+        this.imageLoaded = [];
+        await utils.sleep(50);
+        (async() => {
+            for (i = 0; i < ims.length; i++) {
+                const {id, local} = ims[i];
+                const bin = this.parsed.binary[id];
+                if (local)
+                    this.imageSrc[id] = (bin ? `data:${bin.type};base64,${bin.data}` : '');
+                else
+                    this.imageSrc[id] = id;
+                this.imageLoaded[id] = true;
+                await utils.sleep(5);
+            }
+        })();
+    }
+
+    async updateBookPosSelection() {
+        if (!this.isVisible)
+            return;
+
+        await this.$nextTick();
+        const bp = this.bookPos;
+        
+        for (let i = 0; i < this.contents.length; i++) {
+            const item = this.contents[i];
+            const nextOffset = (i < this.contents.length - 1 ? this.contents[i + 1].offset : this.parsed.textLength);
+
+            if (bp >= item.offset && bp < nextOffset) {
+                item.isBookPos = true;
+            } else if (item.isBookPos) {
+                item.isBookPos = false;
+            }
+
+            for (let j = 0; j < item.list.length; j++) {
+                const subitem = item.list[j];
+                const nextSubOffset = (j < item.list.length - 1 ? item.list[j + 1].offset : nextOffset);
+
+                if (bp >= subitem.offset && bp < nextSubOffset) {
+                    subitem.isBookPos = true;
+                    this.updateBookPosScrollTop('contents', item, subitem, j);
+                } else if (subitem.isBookPos) {
+                    subitem.isBookPos = false;
+                }
+            }
+        }
+
+        for (let i = 0; i < this.images.length; i++) {
+            const img = this.images[i];
+            const nextOffset = (i < this.images.length - 1 ? this.images[i + 1].offset : this.parsed.textLength);
+
+            if (bp >= img.offset && bp < nextOffset) {
+                this.images[i].isBookPos = true;
+            } else if (img.isBookPos) {
+                this.images[i].isBookPos = false;
+            }
+        }
+
+        this.updateBookPosScrollTop();
+    }
+
+    /*getOffsetTop(key) {
+        let el = this.getFirstElem(this.$refs[`mainitem${key}`]);
+        return (el ? el.offsetTop : 0);
+    }*/
+
+    async updateBookPosScrollTop() {
+        try {
+            await this.$nextTick();
+
+            if (this.selectedTab == 'contents') {
+                let item;
+                let subitem;
+                let i;
+
+                //ищем выделенные item
+                for(const _item of this.contents) {
+                    if (_item.isBookPos) {
+                        item = _item;
+                        for (let ii = 0; ii < item.list.length; ii++) {
+                            const _subitem = item.list[ii];
+                            if (_subitem.isBookPos) {
+                                subitem = _subitem;
+                                i = ii;
+                                break;
+                            }
+                        }
+                        break;
+                    }
+                }
+
+                if (!item)
+                    return;
+
+                //вычисляем и смещаем tabPanel.scrollTop
+                let el = this.getFirstElem(this.$refs[`mainitem${item.key}`]);
+                let elShift = 0;
+                if (subitem && item.expanded) {
+                    const subEl = this.getFirstElem(this.$refs[`subitem${subitem.key}`]);
+                    elShift = el.offsetHeight - subEl.offsetHeight*(i + 1);
+                } else {
+                    elShift = el.offsetHeight;
+                }
+
+                const tabPanel = this.$refs.tabPanelContents;
+                const halfH = tabPanel.clientHeight/2;
+                const newScrollTop = el.offsetTop - halfH - elShift;
+                if (newScrollTop < 20 + tabPanel.scrollTop - halfH || newScrollTop > -20 + tabPanel.scrollTop + halfH) 
+                    tabPanel.scrollTop = newScrollTop;
+            }
+
+            if (this.selectedTab == 'images') {
+                let item;
+
+                //ищем выделенные item
+                for(const _item of this.images) {
+                    if (_item.isBookPos) {
+                        item = _item;
+                        break;
+                    }
+                }
+
+                if (!item)
+                    return;
+
+                //вычисляем и смещаем tabPanel.scrollTop
+                let el = this.getFirstElem(this.$refs[`image${item.key}`]);
+
+                const tabPanel = this.$refs.tabPanelImages;
+                const halfH = tabPanel.clientHeight/2;
+                const newScrollTop = el.offsetTop - halfH - el.offsetHeight/2;
+
+                if (newScrollTop < 20 + tabPanel.scrollTop - halfH || newScrollTop > -20 + tabPanel.scrollTop + halfH) 
+                    tabPanel.scrollTop = newScrollTop;
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    getFirstElem(items) {
+        return (Array.isArray(items) ? items[0] : items);
+    }
+
+    async expandClick(key) {
+        const item = this.contents[key];
+        const expanded = !item.expanded;
+
+        if (!expanded) {
+            let subdiv = this.getFirstElem(this.$refs[`subdiv${key}`]);
+            subdiv.style.height = '0';
+            await utils.sleep(200);
+        }
+
+        this.contents[key].expanded = expanded;
+
+        if (expanded) {
+            await this.$nextTick();
+            let subdiv = this.getFirstElem(this.$refs[`subdiv${key}`]);
+            subdiv.style.height = subdiv.scrollHeight + 'px';
+        }
+    }
+
+    async setBookPos(newValue) {
+        this.$emit('book-pos-changed', {bookPos: newValue});
+        this.close();
+    }
+
+    close() {
+        this.$emit('do-action', {action: 'contents'});
+    }
+
+    keyHook(event) {
+        if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
+            this.close();
+        }
+        return true;
+    }
+}
+
+export default vueComponent(ContentsPage);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.tab-panel {
+    overflow-x: hidden;
+    overflow-y: auto;
+    font-size: 90%;
+    padding: 0 10px 0px 10px;
+}
+
+.clickable {
+    cursor: pointer;
+    padding: 10px 0 10px 0;
+}
+
+.item, .subitem, .item-book-pos, .subitem-book-pos {
+    border-bottom: 1px solid var(--bg-menu-color2);
+}
+
+.item:hover, .subitem:hover {
+    background-color: var(--bg-menu-color2);
+}
+
+.item-book-pos {
+    opacity: 1;
+    background-color: var(--bg-selected-item-color1);
+}
+
+.subitem-book-pos {
+    opacity: 1;
+    background-color: var(--bg-selected-item-color2);
+}
+
+.item-book-pos:hover {
+    opacity: 0.8;
+    transition: opacity 0.2s linear;
+}
+
+.subitem-book-pos:hover {
+    opacity: 0.8;
+    transition: opacity 0.2s linear;
+}
+
+.expand-button, .no-expand-button {
+    width: 40px;
+}
+
+.subitems-transition {
+    height: 0;
+    transition: height 0.2s linear;
+    overflow: hidden;
+}
+
+.icon {
+    transition: transform 0.2s;
+}
+
+.expanded-icon {
+    transform: rotate(90deg);
+}
+
+.image-num {
+    font-size: 120%;
+    padding-bottom: 3px;
+}
+.image-type {
+    border: 1px solid black;
+    border-radius: 6px;
+    font-size: 80%;
+    padding: 2px 0 2px 0;
+    width: 34px;
+}
+.it-jpg-color {
+    background: linear-gradient(to right, #fabc3d, #ffec6d);
+}
+.it-png-color {
+    background: linear-gradient(to right, #4bc4e5, #6bf4ff);
+}
+.it-net-color {
+    background: linear-gradient(to right, #00c400, #00f400);
+}
+
+.image-thumb-box {
+    width: 120px;
+    overflow: hidden;
+}
+
+.image-thumb {
+    height: 50px;
+    background-color: white;
+}
+
+.loading-img-icon {
+    font-size: 250%;
+}
+</style>

client/components/Reader/CopyTextPage/CopyTextPage.vue

@@ -1,6 +1,6 @@
 <template>
     <Window @close="close">
-        <template slot="header">
+        <template #header>
             Скопировать текст
         </template>
 
@@ -12,18 +12,19 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
 
 import Window from '../../share/Window.vue';
 import {sleep} from '../../../share/utils';
 
-export default @Component({
+const componentOptions = {
     components: {
         Window,
     },
-})
-class CopyTextPage extends Vue {
+};
+class CopyTextPage {
+    _options = componentOptions;
+
     text = null;
     initStep = null;
     initPercentage = 0;
@@ -101,6 +102,8 @@ class CopyTextPage extends Vue {
         return true;
     }
 }
+
+export default vueComponent(CopyTextPage);
 //-----------------------------------------------------------------------------
 </script>
 

client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue

@@ -18,15 +18,20 @@
             <li>поддерживаемые браузеры: Google Chrome, Mozilla Firefox последних версий</li>
         </ul>
 
-        <p>В качестве URL книги можно задавать html-страничку с книгой, либо прямую ссылку 
-        на файл из онлайн-библиотеки (например, скопировав адрес ссылки или кнопки "скачать fb2").</p>
+        <p>
+            В качестве URL книги можно задавать html-страничку с книгой, либо прямую ссылку 
+            на файл из онлайн-библиотеки (например, скопировав адрес ссылки или кнопки "скачать fb2").
+        </p>
         <p>Поддерживаемые форматы: <b>fb2, fb2.zip, html, txt</b> и другие.</p>
 
-        <div v-show="mode == 'omnireader' || mode == 'liberama.top'">
-            <p>Вы можете добавить в свой браузер закладку, указав в ее свойствах вместо адреса следующий код:
+        <div v-show="mode == 'omnireader' || mode == 'liberama'">
+            <p>
+                Вы можете добавить в свой браузер закладку, указав в ее свойствах вместо адреса следующий код:
                 <br><strong>{{ bookmarkText }}</strong>
                 <q-icon class="copy-icon" name="la la-copy" @click="copyText(bookmarkText, 'Код для адреса закладки успешно скопирован в буфер обмена')">
-                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                        Скопировать
+                    </q-tooltip>                    
                 </q-icon>
 
                 <br>или перетащив на панель закладок следующую ссылку:
@@ -41,14 +46,11 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';
 
 import {copyTextToClipboard} from '../../../../share/utils';
 
-export default @Component({
-})
-class CommonHelpPage extends Vue {
+class CommonHelpPage {
     created() {
     }
 
@@ -57,7 +59,7 @@ class CommonHelpPage extends Vue {
     }
 
     get bookmarkText() {
-        return `javascript:location.href='https://${window.location.host}/?url='+location.href;`
+        return `javascript:location.href='${window.location.protocol}//${window.location.host}/#/reader?url='+location.href;`
     }
 
     async copyText(text, mes) {
@@ -69,6 +71,8 @@ class CommonHelpPage extends Vue {
             this.$root.notify.error(msg);
     }
 }
+
+export default vueComponent(CommonHelpPage);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -84,6 +88,6 @@ class CommonHelpPage extends Vue {
     margin-left: 10px;
     cursor: pointer;
     font-size: 120%;
-    color: blue;
+    color: var(--text-anchor-color);
 }
 </style>

client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue

@@ -1,51 +1,17 @@
 <template>
     <div class="page">
-        <div class="box">
-            <p class="p">Вы можете пожертвовать на развитие проекта любую сумму:</p>
-            <div class="address">
-                <img class="logo" src="./assets/yandex.png">
-                <q-btn class="q-ml-sm q-px-sm" dense no-caps @click="donateYandexMoney">Пожертвовать</q-btn><br>
-                <div class="para">{{ yandexAddress }}
-                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(yandexAddress, 'Яндекс кошелек')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                    </q-icon>
-                </div>
-            </div>
+        <div class="column items-center" style="width: 500px">
+            <p class="p">
+                Здесь вы можете пожертвовать на развитие проекта:
+            </p>
 
-            <div class="address">                
-                <img class="logo" src="./assets/paypal.png">
-                <div class="para">{{ paypalAddress }}
-                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(paypalAddress, 'Paypal-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                    </q-icon>
-                </div>
-            </div>
+            <q-btn no-caps class="q-my-lg" color="green-8" size="14px" style="width: 200px" @click="makeDonation">
+                <q-icon class="q-mr-xs" name="la la-donate" size="24px" />
+                Поддержать проект
+            </q-btn>
 
-            <div class="address">                
-                <img class="logo" src="./assets/bitcoin.png">
-                <div class="para">{{ bitcoinAddress }}
-                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(bitcoinAddress, 'Bitcoin-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                    </q-icon>
-                </div>
-            </div>
-
-            <div class="address">                
-                <img class="logo" src="./assets/litecoin.png">
-                <div class="para">{{ litecoinAddress }}
-                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(litecoinAddress, 'Litecoin-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                    </q-icon>
-                </div>
-            </div>
-
-            <div class="address">                
-                <img class="logo" src="./assets/monero.png">
-                <div class="para">{{ moneroAddress }}
-                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(moneroAddress, 'Monero-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                    </q-icon>
-                </div>
+            <div style="font-size: 60%">
+                * Ваш донат является подарком автору проекта
             </div>
         </div>
     </div>
@@ -53,34 +19,20 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import {copyTextToClipboard} from '../../../../share/utils';
+import vueComponent from '../../../vueComponent.js';
 
-export default @Component({
-})
-class DonateHelpPage extends Vue {
-    yandexAddress = '410018702323056';
-    paypalAddress = 'bookpauk@gmail.com';
-    bitcoinAddress = '3EbgZ7MK1UVaN38Gty5DCBtS4PknM4Ut85';
-    litecoinAddress = 'MP39Riec4oSNB3XMjiquKoLWxbufRYNXxZ';
-    moneroAddress = '8BQPnvHcPSHM5gMQsmuypDgx9NNsYqwXKfDDuswEyF2Q2ewQSfd2pkK6ydH2wmMyq2JViZvy9DQ35hLMx7g72mFWNJTPtnz';
+import * as utils from '../../../../share/utils';
 
+class DonateHelpPage {
     created() {
     }
 
-    donateYandexMoney() {
-        window.open(`https://money.yandex.ru/to/${this.yandexAddress}`, '_blank');
-    }
-
-    async copyAddress(address, prefix) {
-        const result = await copyTextToClipboard(address);
-        if (result)
-            this.$root.notify.success(`${prefix} ${address} успешно скопирован в буфер обмена`);
-        else
-            this.$root.notify.error('Копирование не удалось');
+    makeDonation() {
+        utils.makeDonation();
     }
 }
+
+export default vueComponent(DonateHelpPage);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -97,31 +49,4 @@ class DonateHelpPage extends Vue {
     padding: 0;
     text-indent: 20px;
 }
-
-.box {
-    max-width: 550px;
-    overflow-wrap: break-word;
-}
-
-.address {
-    padding-top: 10px;
-    margin-top: 20px;
-}
-
-.para {
-    margin: 10px 10px 10px 40px;
-}
-
-.logo {
-    width: 130px;
-    position: relative;
-    top: 10px;
-}
-
-.copy-icon {
-    margin-left: 10px;
-    cursor: pointer;
-    font-size: 120%;
-    color: blue;
-}
 </style>

client/components/Reader/HelpPage/HelpPage.vue

@@ -1,21 +1,27 @@
 <template>
-    <Window @close="close">
-        <template slot="header">
+    <Window style="z-index: 200" @close="close">
+        <template #header>
             Справка
         </template>
 
         <div class="col column" style="min-width: 600px">
-            <q-btn-toggle
-                v-model="selectedTab"
-                toggle-color="primary"
-                no-caps unelevated
-                :options="buttons"
-            />
-            <div class="separator"></div>
+            <div class="bg-menu-1 row">
+                <q-tabs
+                    v-model="selectedTab"
+                    active-color="app"
+                    active-bg-color="app"
+                    indicator-color="bg-app"
+                    dense
+                    no-caps
+                    inline-label
+                    class="bg-menu-2 text-menu"
+                >
+                    <q-tab v-for="btn in buttons" :key="btn.value" :name="btn.value" :label="btn.label" />
+                </q-tabs>
+            </div>
 
             <keep-alive>
-                <component ref="page" class="col" :is="activePage"
-                ></component>
+                <component :is="activePage" ref="page" class="col"></component>
             </keep-alive>
         </div>
     </Window>
@@ -23,8 +29,7 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
 
 import Window from '../../share/Window.vue';
 import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
@@ -49,10 +54,12 @@ const tabs = [
     ['DonateHelpPage', 'Помочь проекту'],
 ];
 
-export default @Component({
+const componentOptions = {
     components: Object.assign({ Window }, pages),
-})
-class HelpPage extends Vue {
+};
+class HelpPage {
+    _options = componentOptions;
+
     selectedTab = 'CommonHelpPage';
 
     close() {
@@ -87,12 +94,10 @@ class HelpPage extends Vue {
         return true;
     }
 }
+
+export default vueComponent(HelpPage);
 //-----------------------------------------------------------------------------
 </script>
 
 <style scoped>
-.separator {
-    height: 1px;
-    background-color: #E0E0E0;
-}
 </style>

client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue

@@ -1,29 +1,34 @@
 <template>
     <div class="page">
         <div style="font-size: 120%">
-            <div class="text-h6 text-bold">Доступны следующие клавиатурные команды:</div>
+            <div class="text-h6 text-bold">
+                Доступны следующие клавиатурные команды:
+            </div>
             <br>
         </div>
         <div class="q-mb-md" style="width: 550px">
-            <div class="text-right text-italic" style="font-size: 80%">* Изменить сочетания клавиш можно в настройках</div>
-            <UserHotKeys v-model="userHotKeys" readonly/>
+            <div class="text-right text-italic" style="font-size: 80%">
+                * Изменить сочетания клавиш можно в настройках
+            </div>
+            <UserHotKeys v-model="userHotKeys" readonly />
         </div>
     </div>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';
 
-import UserHotKeys from '../../SettingsPage/UserHotKeys/UserHotKeys.vue';
+import UserHotKeys from '../../SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue';
 
-export default @Component({
+const componentOptions = {
     components: {
         UserHotKeys,
     },
-})
-class HotkeysHelpPage extends Vue {
+};
+class HotkeysHelpPage {
+    _options = componentOptions;
+
     created() {
     }
 
@@ -36,6 +41,8 @@ class HotkeysHelpPage extends Vue {
     }
 
 }
+
+export default vueComponent(HotkeysHelpPage);
 //-----------------------------------------------------------------------------
 </script>
 

client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue

@@ -3,21 +3,28 @@
         <span class="text-h6 text-bold">Управление с помощью мыши/тачскрина:</span>
         <ul>
             <li><b>ЛКМ/ТАЧ</b> по экрану в одну из областей - активация действия:</li>
-                <div class="click-map-page">
-                    <ClickMapPage ref="clickMapPage"></ClickMapPage>
-                </div>
+            <div class="click-map-page">
+                <ClickMapPage ref="clickMapPage"></ClickMapPage>
+            </div>
         
             <li><b>ПКМ</b> - показать/скрыть панель управления</li>
             <li><b>СКМ</b> - вкл./выкл. плавный скроллинг текста</li>
             <br>
             <li>Жесты для тачскрина:</li>
             <ul>
-                <li style="list-style-type: square">от центра вверх: на весь экран</li>
-                <li style="list-style-type: square">от центра вниз: плавный скроллинг</li>
-                <li style="list-style-type: square">от центра вправо: увеличить скорость скроллинга</li>
-                <li style="list-style-type: square">от центра влево: уменьшить скорость скроллинга</li>
+                <li style="list-style-type: square">
+                    от центра вверх/двойной тап по центру: на весь экран
+                </li>
+                <li style="list-style-type: square">
+                    от центра вниз: плавный скроллинг
+                </li>
+                <li style="list-style-type: square">
+                    от центра вправо: увеличить скорость скроллинга
+                </li>
+                <li style="list-style-type: square">
+                    от центра влево: уменьшить скорость скроллинга
+                </li>
             </ul>
-
         </ul>
         * Для управления с помощью мыши/тачскрина необходимо установить галочку "Включить управление кликом" в настройках
     </div>
@@ -25,17 +32,18 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';
 
 import ClickMapPage from '../../ClickMapPage/ClickMapPage.vue';
 
-export default @Component({
+const componentOptions = {
     components: {
         ClickMapPage,
     },
-})
-class MouseHelpPage extends Vue {
+};
+class MouseHelpPage {
+    _options = componentOptions;
+
     created() {
     }
 
@@ -44,6 +52,8 @@ class MouseHelpPage extends Vue {
         this.$refs.clickMapPage.$el.style.backgroundColor = '#478355';
     }
 }
+
+export default vueComponent(MouseHelpPage);
 //-----------------------------------------------------------------------------
 </script>
 

client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue

@@ -3,9 +3,9 @@
         <span class="text-h6 text-bold">История версий:</span>
         <br><br>
 
-        <span class="clickable" v-for="(item, index) in versionHeader" :key="index" @click="showRelease(item)">
+        <span v-for="(item, index) in versionHeader" :key="index" class="clickable" @click="showRelease(item)">
             <p>
-            {{ item }}
+                {{ item }}
             </p>
         </span>
 
@@ -20,13 +20,11 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';
+
 import {versionHistory} from '../../versionHistory';
 
-export default @Component({
-})
-class VersionHistoryPage extends Vue {
+class VersionHistoryPage {
     versionHeader = [];
     versionContent = [];
 
@@ -35,14 +33,15 @@ class VersionHistoryPage extends Vue {
 
     mounted() {
         let vh = [];
-        for (const version of versionHistory) {
-            vh.push(version.header);
+        for (const v of versionHistory) {
+            vh.push(`${v.version} (${v.releaseDate})`);
         }
         this.versionHeader = vh;
 
         let vc = [];
-        for (const version of versionHistory) {
-            vc.push({key: version.header, content: 'Версия ' + version.header + version.content});
+        for (const v of versionHistory) {
+            let header = `${v.version} (${v.releaseDate})`;
+            vc.push({key: header, content: 'Версия ' + header + v.content});
         }
         this.versionContent = vc;
     }
@@ -54,6 +53,8 @@ class VersionHistoryPage extends Vue {
         }
     }
 }
+
+export default vueComponent(VersionHistoryPage);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -71,7 +72,7 @@ p {
 }
 
 .clickable {
-    color: blue;
+    color: var(--text-anchor-color);
     text-decoration: underline;
     cursor: pointer;
 }

client/components/Reader/LibsPage/LibsPage.vue

@@ -4,14 +4,14 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
 
 import Window from '../../share/Window.vue';
 import * as utils from '../../../share/utils';
-//import rstore from '../../../store/modules/reader';
+import rstore from '../../../store/modules/reader';
+import _ from 'lodash';
 
-export default @Component({
+const componentOptions = {
     components: {
         Window
     },
@@ -20,19 +20,26 @@ export default @Component({
             this.sendLibs();
         },
     }    
-})
-class LibsPage extends Vue {
+};
+class LibsPage {
+    _options = componentOptions;
+
     created() {
         this.popupWindow = null;
         this.commit = this.$store.commit;
         this.messageListener = null;
-        //this.commit('reader/setLibs', rstore.libsDefaults);
     }
 
-    init() {
-        if (this.mode != 'liberama.top')
+    async init() {
+        if (!this.mode)
             return;
 
+        //TODO: убрать условие с mode в 24г
+        if (!this.libs || !this.libs.groups || (this.mode === 'omnireader' && this.libs.mode !== this.mode)) {
+            const defaults = rstore.getLibsDefaults(this.mode);
+            this.commit('reader/setLibs', defaults);
+        }
+
         this.childReady = false;
         const subdomain = (window.location.protocol != 'http:' ? 'b.' : '');
         this.origin = `http://${subdomain}${window.location.host}`;
@@ -112,14 +119,20 @@ class LibsPage extends Vue {
         return this.$store.state.reader.libs;
     }
 
+    get nightMode() {
+        return this.$store.state.reader.settings.nightMode;
+    }
+
     sendLibs() {
-        this.sendMessage({type: 'libs', data: this.libs});
+        this.sendMessage({type: 'libs', data: _.cloneDeep(this.libs), sets: {nightMode: this.nightMode}});
     }
 
     close() {
         this.$emit('libs-close');
     }
 }
+
+export default vueComponent(LibsPage);
 //-----------------------------------------------------------------------------
 </script>
 

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -1,32 +1,42 @@
 <template>
     <div ref="main" class="column no-wrap" style="min-height: 500px">
-        <div v-if="mode != 'liberama.top'" class="relative-position">
-            <GithubCorner url="https://github.com/bookpauk/liberama" cornerColor="#1B695F" gitColor="#EBE2C9"></GithubCorner>
+        <div v-if="mode != 'liberama'" class="relative-position">
+            <GithubCorner url="https://github.com/bookpauk/liberama" corner-color="#1B695F" git-color="#EBE2C9"></GithubCorner>
         </div>
         <div class="col column justify-center items-center no-wrap overflow-hidden" style="min-height: 230px">
             <span class="greeting"><b>{{ title }}</b></span>
             <div class="q-my-sm"></div>
             <span class="greeting">Добро пожаловать!</span>
-            <span class="greeting">Поддерживаются форматы: <b>fb2, html, txt</b> и сжатие: <b>zip, bz2, gz</b></span>
-            <span v-if="isExternalConverter" class="greeting">...а также форматы: <b>rtf, doc, docx, pdf, epub, mobi</b></span>
+            <span class="greeting">Поддерживаются форматы: <b>fb2, html, txt</b> и сжатие: <b>zip, bz2, gz<span v-if="isExternalConverter">, rar</span></b></span>
+            <span v-if="isExternalConverter" class="greeting">...а также частично форматы: <b>epub, mobi, rtf, doc, docx, pdf, djvu</b></span>
         </div>
 
         <div class="col-auto column justify-start items-center no-wrap overflow-hidden">
-            <q-input ref="input" class="full-width q-px-sm" style="max-width: 700px" outlined dense bg-color="white" v-model="bookUrl" placeholder="URL книги">
-                <template v-slot:append>
-                    <q-btn rounded flat style="width: 40px" icon="la la-check" @click="submitUrl"/>
+            <q-input
+                ref="input" v-model="bookUrl" class="full-width q-px-sm" style="max-width: 700px" 
+                outlined dense bg-color="input" placeholder="Ссылка на книгу или веб-страницу" @keydown="onInputKeydown"
+            >
+                <template #append>
+                    <q-btn rounded flat style="width: 40px" icon="la la-check" @click="submitUrl" />
                 </template>
             </q-input>
 
-            <input type="file" id="file" ref="file" @change="loadFile" style='display: none;'/>
+            <input
+                id="file" ref="file" type="file" 
+                style="display: none;"
+                :accept="acceptFileExt"
+                @change="loadFile" 
+            />
 
             <div class="q-my-sm"></div>
-            <q-btn no-caps dense class="q-px-sm" color="primary" size="13px" @click="loadFileClick">
+            <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadFileClick">
+                <q-icon class="q-mr-xs" name="la la-caret-square-up" size="24px" />
                 Загрузить файл с диска
             </q-btn>
             
             <div class="q-my-sm"></div>
-            <q-btn no-caps dense class="q-px-sm" color="primary" size="13px" @click="loadBufferClick">
+            <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadBufferClick">
+                <q-icon class="q-mr-xs" name="la la-comment" size="24px" />
                 Из буфера обмена
             </q-btn>
 
@@ -58,20 +68,25 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
+
 import GithubCorner from './GithubCorner/GithubCorner.vue';
 
+import Dialog from '../../share/Dialog.vue';
 import PasteTextPage from './PasteTextPage/PasteTextPage.vue';
 import {versionHistory} from '../versionHistory';
+import * as utils from '../../../share/utils';
 
-export default @Component({
+const componentOptions = {
     components: {
         GithubCorner,
+        Dialog,
         PasteTextPage,
     },
-})
-class LoaderPage extends Vue {
+};
+class LoaderPage {
+    _options = componentOptions;
+
     bookUrl = null;
     loadPercent = 0;
     pasteTextActive = false;
@@ -93,7 +108,7 @@ class LoaderPage extends Vue {
     get title() {
         if (this.mode == 'omnireader')
             return 'Omni Reader - браузерная онлайн-читалка.';
-        if (this.mode == 'liberama.top')
+        if (this.mode == 'liberama')
             return 'Liberama Reader - браузерная онлайн-читалка.';
         return 'Универсальная читалка книг и ресурсов интернета.';
 
@@ -107,14 +122,16 @@ class LoaderPage extends Vue {
         return this.$store.state.config.version;
     }
 
+    get acceptFileExt() {
+        return this.$store.state.config.acceptFileExt;
+    }
+
     get isExternalConverter() {
         return this.$store.state.config.useExternalBookConverter;
     }
 
     get clientVersion() {
-        let v = versionHistory[0].header;
-        v = v.split(' ')[0];
-        return v;
+        return versionHistory[0].version;
     }
 
     submitUrl() {
@@ -136,16 +153,20 @@ class LoaderPage extends Vue {
     }
 
     loadBufferClick() {
-        this.pasteTextToggle();
+        this.showPasteText();
     }
 
     loadBuffer(opts) {
         if (opts.buffer.length) {
-            const file = new File([opts.buffer], 'dummyName-PasteFromClipboard');
+            const file = new File([opts.buffer], `paste_from_clipboard_#${utils.randomHexString(10)}`);
             this.$emit('load-file', {file});
         }
     }
 
+    showPasteText() {
+        this.pasteTextActive = true;
+    }
+
     pasteTextToggle() {
         this.pasteTextActive = !this.pasteTextActive;
     }
@@ -166,30 +187,27 @@ class LoaderPage extends Vue {
         window.open('http://old.omnireader.ru', '_blank');
     }
 
+    async onInputKeydown(event) {
+        if (event.key == 'Enter') {
+            await utils.sleep(100);
+            this.submitUrl();
+        }
+    }
+
     keyHook(event) {
         if (this.pasteTextActive) {
             return this.$refs.pasteTextPage.keyHook(event);
         }
 
-        //недостатки сторонних ui
-        const input = this.$refs.input.$refs.input;
-        if (document.activeElement === input && event.type == 'keydown' && event.key == 'Enter') {
-            this.submitUrl();
+        const input = this.$refs.input.getNativeElement();
+        if (event.type == 'keydown' && (document.activeElement === input || event.code == 'Enter') && event.code != 'Escape')
             return true;
-        }
-
-        if (event.type == 'keydown' && document.activeElement !== input) {
-            const action = this.$root.readerActionByKeyEvent(event);
-            switch (action) {
-                case 'help':
-                    this.openHelp(event);
-                    return true;
-            }
-        }
 
         return false;
     }
 }
+
+export default vueComponent(LoaderPage);
 //-----------------------------------------------------------------------------
 </script>
 <style scoped>
@@ -199,7 +217,7 @@ class LoaderPage extends Vue {
 }
 
 .clickable {
-    color: blue;
+    color: var(--text-anchor-color);
     text-decoration: underline;
     cursor: pointer;
 }

client/components/Reader/LoaderPage/PasteTextPage/PasteTextPage.vue

@@ -1,6 +1,6 @@
 <template>
     <Window @close="close">
-        <template slot="header">
+        <template #header>
             <span style="position: relative; top: -3px">
                 Вставьте текст и нажмите
                 <span class="clickable text-primary" style="font-size: 150%; position: relative; top: 1px" @click="loadBuffer">загрузить</span>
@@ -8,27 +8,30 @@
             </span>
         </template>
 
-        <q-input class="q-px-sm" dense borderless v-model="bookTitle" placeholder="Введите название текста"/>
-        <hr/>
-        <textarea ref="textArea" class="text" @paste="calcTitle"></textarea>
+        <div class="fit column main">
+            <q-input v-model="bookTitle" class="q-px-sm" dense borderless placeholder="Введите название текста" />
+            <hr />
+            <textarea ref="textArea" class="main text" @paste="calcTitle"></textarea>
+        </div>
     </Window>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';
 
 import Window from '../../../share/Window.vue';
 import _ from 'lodash';
 import * as utils from '../../../../share/utils';
 
-export default @Component({
+const componentOptions = {
     components: {
         Window,
     },
-})
-class PasteTextPage extends Vue {
+};
+class PasteTextPage {
+    _options = componentOptions;
+
     bookTitle = '';
 
     created() {
@@ -38,6 +41,10 @@ class PasteTextPage extends Vue {
         this.$refs.textArea.focus();
     }
 
+    get dark() {
+        return this.$store.state.reader.settings.nightMode;
+    }
+
     getNonEmptyLine3words(text, count) {
         let result = '';
         const lines = text.split("\n");
@@ -59,16 +66,20 @@ class PasteTextPage extends Vue {
 
     calcTitle(event) {
         if (this.bookTitle == '') {
-            let text = event.clipboardData.getData('text');
-            this.bookTitle = `Из буфера обмена ${utils.formatDate(new Date(), 'noDate')}: ` + _.compact([
-                this.getNonEmptyLine3words(text, 1),
-                this.getNonEmptyLine3words(text, 2)
-            ]).join(' - ');
+            this.bookTitle = `Из буфера обмена ${utils.dateFormat(new Date())}`;
+            if (event) {
+                let text = event.clipboardData.getData('text');
+                this.bookTitle += ': ' + _.compact([
+                    this.getNonEmptyLine3words(text, 1),
+                    this.getNonEmptyLine3words(text, 2)
+                ]).join(' - ');
+            }
         }
     }
 
     loadBuffer() {
-        this.$emit('load-buffer', {buffer: `<buffer><cut-title>${utils.escapeXml(this.bookTitle)}</cut-title>${this.$refs.textArea.value}</buffer>`});
+        this.calcTitle();
+        this.$emit('load-buffer', {buffer: `<buffer><fb2-title>${utils.escapeXml(this.bookTitle)}</fb2-title>${utils.escapeXml(this.$refs.textArea.value)}</buffer>`});
         this.close();
     }
 
@@ -90,6 +101,8 @@ class PasteTextPage extends Vue {
         return true;
     }
 }
+
+export default vueComponent(PasteTextPage);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -108,6 +121,11 @@ class PasteTextPage extends Vue {
     outline: none;
 }
 
+.main {
+    color: var(--text-app-color);
+    background-color: var(--bg-app-color);
+}
+
 hr {
     margin: 0;
     padding: 0;

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="column justify-center items-center z-max" style="background-color: rgba(0, 0, 0, 0.8)">
+    <div v-show="visible" class="column justify-center items-center" style="background-color: rgba(0, 0, 0, 0.8); z-index: 100;">
         <div class="column justify-start items-center" style="height: 250px">
             <q-circular-progress
                 show-value
@@ -17,7 +17,7 @@
 
             <div>
                 <span class="text-yellow">{{ text }}</span>
-                <q-icon :style="iconStyle" color="yellow" name="la la-slash" size="20px"/>
+                <q-icon :style="iconStyle" color="yellow" name="la la-slash" size="20px" />
             </div>
         </div>
     </div>
@@ -25,8 +25,8 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
+
 import * as utils from '../../../share/utils';
 
 const ruMessage = {
@@ -42,9 +42,7 @@ const ruMessage = {
     'upload': 'отправка',
 };
 
-export default @Component({
-})
-class ProgressPage extends Vue {
+class ProgressPage {
     text = '';
     totalSteps = 1;
     step = 1;
@@ -96,5 +94,7 @@ class ProgressPage extends Vue {
         return Math.round(((this.step - 1)/this.totalSteps + this.progress/(100*this.totalSteps))*100);
     }
 }
+
+export default vueComponent(ProgressPage);
 //-----------------------------------------------------------------------------
 </script>

client/components/Reader/ReaderDialogs/ReaderDialogs.vue

@@ -1,106 +1,109 @@
 <template>
     <div>
         <Dialog ref="dialog1" v-model="whatsNewVisible">
-            <template slot="header">
+            <template #header>
                 Что нового:
             </template>
 
-            <div style="line-height: 20px" v-html="whatsNewContent"></div>
-
-            <span class="clickable" @click="openVersionHistory">Посмотреть историю версий</span>
-            <span slot="footer">
-                <q-btn class="q-px-md" dense no-caps @click="whatsNewDisable">Больше не показывать</q-btn>
-            </span>
-        </Dialog>
-
-        <Dialog ref="dialog2" v-model="donationVisible">
-            <template slot="header">
-                Здравствуйте, уважаемые читатели!
-            </template>
-
-            <div style="word-break: normal">
-                Стартовала ежегодная акция "Оплатим хостинг вместе".<br><br>
-
-                Для оплаты годового хостинга читалки, необходимо собрать около 2000 рублей.
-                В настоящий момент у автора эта сумма есть в наличии. Однако будет справедливо, если каждый
-                сможет проголосовать рублем за то, чтобы читалка так и оставалась:
-
-                <ul>
-                    <li>непрерывно улучшаемой</li>
-                    <li>без рекламы</li>
-                    <li>без регистрации</li>
-                    <li>Open Source</li>
-                </ul>
-
-                Автор также обращается с просьбой о помощи в распространении 
-                <a href="https://omnireader.ru" target="_blank">ссылки</a>
-                <q-icon class="copy-icon" name="la la-copy" @click="copyLink('https://omnireader.ru')">
-                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                </q-icon>
-                на читалку через тематические форумы, соцсети, мессенджеры и пр.
-                Чем нас больше, тем легче оставаться на плаву и тем больше мотивации у разработчика, чтобы продолжать работать над проектом.
-
-                <br><br>
-                Если соберется бóльшая сумма, то разработка децентрализованной библиотеки для свободного обмена книгами будет по возможности ускорена.
-                <br><br>
-                P.S. При необходимости можно воспользоваться подходящим обменником на <a href="https://www.bestchange.ru" target="_blank">bestchange.ru</a>
-
-                <br><br>
-                <div class="row justify-center">
-                    <q-btn class="q-px-sm" color="primary" dense no-caps rounded @click="openDonate">Помочь проекту</q-btn>
-                </div>
+            <div style="line-height: 20px; min-width: 300px">
+                <div v-html="whatsNewContent"></div>
             </div>
 
-            <span slot="footer">
-                <span class="clickable row justify-end" style="font-size: 60%; color: grey" @click="donationDialogDisable">Больше не показывать</span>                        
+            <span class="clickable" style="font-size: 13px" @click="openVersionHistory">Посмотреть историю версий</span>
+
+            <template #footer>
+                <q-btn class="q-px-md" color="btn2" text-color="app" dense no-caps @click="whatsNewDisable">
+                    Больше не показывать
+                </q-btn>
+            </template>
+        </Dialog>
+
+        <q-dialog ref="dialog2" v-model="donationVisible" style="z-index: 100" no-route-dismiss no-esc-dismiss no-backdrop-dismiss>
+            <div class="column bg-dialog no-wrap q-pa-md">
+                <div class="row justify-center q-mb-md">
+                    Здравствуйте, дорогие читатели!
+                </div>
+
+                <div class="q-mx-md column" style="font-size: 90%; word-break: normal">
+                    <div>
+                        Вот уже много лет мы все вместе пользуемся нашей любимой читалкой.<br><br>
+
+                        Напоминаем вам, что проект является некоммерческим и обладает такими
+                        достоинствами, как:
+
+                        <ul>
+                            <li>все функции читалки открыты и доступны совершенно бесплатно</li>
+                            <li>в проекте отсутствует какая-либо реклама или баннеры</li>
+                            <li>нет никакой регистрации и монетизации</li>
+                            <li>нет сбора персональных данных</li>
+                            <li>открытый исходный код</li>
+                            <li>проект постепенно улучшается, по мере возможности</li>
+                        </ul>
+
+                        Однако на оплату хостинга читалки и сервера обновлений автор тратит свои 
+                        собственные средства, а также тратит свое время и силы на улучшение проекта.
+                        <br><br>
+                        Давайте поддержим наш ресурс, чтобы и дальше спокойно существовать и развиваться:
+                    </div>
+
+                    <q-btn style="margin: 10px 20px 10px 20px" color="green-8" no-caps @click="makeDonation">
+                        <q-icon class="q-mr-xs" name="la la-donate" size="24px" />
+                        Поддержать проект
+                    </q-btn>
+
+                    <div class="row justify-center q-mt-sm">
+                        Напомнить снова через:
+                    </div>
+
+                    <div class="row justify-between" style="margin: 0 20px 10px 20px">
+                        <q-btn style="width: 140px; margin-top: 5px" no-caps @click="donationDialogRemindLater(30)">
+                            1 месяц
+                        </q-btn>
+                        <q-btn style="width: 140px; margin-top: 5px" no-caps @click="donationDialogRemindLater(60)">
+                            2 месяца
+                        </q-btn>
+                        <q-btn style="width: 140px; margin-top: 5px" no-caps @click="donationDialogRemindLater(90)">
+                            3 месяца
+                        </q-btn>
+                    </div>
+
+                    <div class="row justify-center q-mt-md">
+                        <div class="q-px-sm clickable" style="font-size: 80%" @click="openDonate">
+                            Помочь проекту можно в любое время
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </q-dialog>
+
+        <Dialog ref="dialog3" v-model="urlHelpVisible">
+            <template #header>
+                Обнаружена невалидная ссылка в поле "URL книги".
                 <br>
-                <q-btn class="q-px-sm" dense no-caps @click="donationDialogRemind">Напомнить позже</q-btn>
-            </span>
-        </Dialog>
-
-        <Dialog ref="dialog3" v-model="liberamaTopVisible">
-            <template slot="header">
-                Здравствуйте, уважаемые читатели!
             </template>
 
             <div style="word-break: normal">
-                Создан новый ресурс:<br><br>
-
-                <a href="https://liberama.top" target="_blank">https://liberama.top</a>
-                <br><br>
-                Это клон читалки Omni Reader, но с некоторыми дополнениями, ориентированными в сторону более свободного обмена книгами:
-
-                <ul>
-                    <li>добавлено новое окно "Библиотека" для свободного доступа к Флибусте и другим ресурсам по желанию читателя</li>
-                    <li>планируется добавить возможность создания подборок книг и обмена ими между пользователями</li>
-                </ul>
-
-                Легко мигрировать на новый сайт можно с помощью синхронизации с сервером.
-                О багах и предложениях просьба сообщать на почту <a href="mailto:bookpauk@gmail.com">bookpauk@gmail.com</a><br><br>
-                Спасибо, что вы с нами!
-                <br><br>
-                <div class="row justify-center">
-                    <q-btn class="q-px-sm" color="primary" dense no-caps rounded @click="openDonate">Помочь проекту</q-btn>
-                </div>
+                Если вы пытаетесь вставить текст в читалку из буфера обмена, пожалуйста воспользуйтесь кнопкой
+                <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadBufferClick">
+                    <q-icon class="q-mr-xs" name="la la-comment" size="24px" />
+                    Из буфера обмена
+                </q-btn>
+                на странице загрузки.
             </div>
-
-            <span slot="footer">
-                <q-btn class="q-px-sm" dense no-caps @click="liberamaTopDialogDisable">Больше не показывать</q-btn>
-            </span>
         </Dialog>
     </div>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
 
 import Dialog from '../../share/Dialog.vue';
 import * as utils from '../../../share/utils';
 import {versionHistory} from '../versionHistory';
+import rstore from '../../../store/modules/reader';
 
-export default @Component({
+const componentOptions = {
     components: {
         Dialog
     },
@@ -109,12 +112,14 @@ export default @Component({
             this.loadSettings();
         },
     },
-})
-class ReaderDialogs extends Vue {
+};
+class ReaderDialogs {
+    _options = componentOptions;
+
     whatsNewVisible = false;
     whatsNewContent = '';
     donationVisible = false;
-    liberamaTopVisible = false;
+    urlHelpVisible = false;
 
     created() {
         this.commit = this.$store.commit;
@@ -127,51 +132,53 @@ class ReaderDialogs extends Vue {
     async init() {
         await this.showWhatsNew();
         await this.showDonation();
-        await this.showLiberamaTop();
     }
 
     loadSettings() {
         const settings = this.settings;
         this.showWhatsNewDialog = settings.showWhatsNewDialog;
-        this.showDonationDialog2020 = settings.showDonationDialog2020;
-        this.showLiberamaTopDialog2020 = settings.showLiberamaTopDialog2020;
+        this.showDonationDialog = settings.showDonationDialog;
     }
 
     async showWhatsNew() {
         const whatsNew = versionHistory[0];
         if (this.showWhatsNewDialog &&
-            whatsNew.showUntil >= utils.formatDate(new Date(), 'coDate') &&
-            whatsNew.header != this.whatsNewContentHash) {
+            whatsNew.showUntil >= utils.dateFormat(new Date(), 'YYYY-MM-DD') &&
+            this.whatsNewHeader != this.whatsNewContentHash) {
             await utils.sleep(2000);
-            this.whatsNewContent = 'Версия ' + whatsNew.header + whatsNew.content;
+            this.whatsNewContent = 'Версия ' + this.whatsNewHeader + whatsNew.content;
             this.whatsNewVisible = true;
         }
     }
 
     async showDonation() {
-        const today = utils.formatDate(new Date(), 'coDate');
-
-        if ((this.mode == 'omnireader' || this.mode == 'liberama.top') && today < '2020-03-01' && this.showDonationDialog2020 && this.donationRemindDate != today) {
+        if ((this.mode == 'omnireader' || this.mode == 'liberama') && this.showDonationDialog && this.donationNextPopup <= Date.now()) {
             await utils.sleep(3000);
             this.donationVisible = true;
         }
     }
 
-    donationDialogDisable() {
-        this.donationVisible = false;
-        if (this.showDonationDialog2020) {
-            this.commit('reader/setSettings', { showDonationDialog2020: false });
-        }
+    async showUrlHelp() {
+        this.urlHelpVisible = true;
     }
 
-    donationDialogRemind() {
+    loadBufferClick() {
+        this.$emit('load-buffer-toggle');
+        this.urlHelpVisible = false;
+    }
+
+    donationDialogRemindLater(remindAfter = 30) {
         this.donationVisible = false;
-        this.commit('reader/setDonationRemindDate', utils.formatDate(new Date(), 'coDate'));
+
+        this.commit('reader/setDonationNextPopup', Date.now() + rstore.dayMs*remindAfter);
+    }
+
+    makeDonation() {
+        utils.makeDonation();
+        this.donationDialogRemindLater();
     }
 
     openDonate() {
-        this.donationVisible = false;
-        this.liberamaTopVisible = false;
         this.$emit('donate-toggle');
     }
 
@@ -190,8 +197,11 @@ class ReaderDialogs extends Vue {
 
     whatsNewDisable() {
         this.whatsNewVisible = false;
-        const whatsNew = versionHistory[0];
-        this.commit('reader/setWhatsNewContentHash', whatsNew.header);
+        this.commit('reader/setWhatsNewContentHash', this.whatsNewHeader);
+    }
+
+    get whatsNewHeader() {
+        return `${versionHistory[0].version} (${versionHistory[0].releaseDate})`;
     }
 
     get mode() {
@@ -206,24 +216,8 @@ class ReaderDialogs extends Vue {
         return this.$store.state.reader.whatsNewContentHash;
     }
 
-    get donationRemindDate() {
-        return this.$store.state.reader.donationRemindDate;
-    }
-
-    async showLiberamaTop() {
-        const today = utils.formatDate(new Date(), 'coDate');
-
-        if (this.mode == 'omnireader' && today < '2020-12-01' && this.showLiberamaTopDialog2020) {
-            await utils.sleep(3000);
-            this.liberamaTopVisible = true;
-        }
-    }
-
-    liberamaTopDialogDisable()  {
-        this.liberamaTopVisible = false;
-        if (this.showLiberamaTopDialog2020) {
-            this.commit('reader/setSettings', { showLiberamaTopDialog2020: false });
-        }
+    get donationNextPopup() {
+        return this.$store.state.reader.donationNextPopup;
     }
 
     keyHook() {
@@ -232,12 +226,14 @@ class ReaderDialogs extends Vue {
         return false;
     }
 }
+
+export default vueComponent(ReaderDialogs);
 //-----------------------------------------------------------------------------
 </script>
 
 <style scoped>
 .clickable {
-    color: blue;
+    color: var(--text-anchor-color);
     text-decoration: underline;
     cursor: pointer;
 }

client/components/Reader/SearchPage/SearchPage.vue

@@ -1,6 +1,6 @@
 <template>
     <Window ref="window" height="125px" max-width="600px" :top-shift="-50" @close="close">
-        <template slot="header">
+        <template #header>
             {{ header }}
         </template>
 
@@ -8,18 +8,24 @@
             <span v-show="initStep">{{ initPercentage }}%</span>
 
             <div v-show="!initStep" class="input">
-                <!--input ref="input"
-                    placeholder="что ищем"
-                    :value="needle" @input="needle = $event.target.value"/-->
-                <q-input ref="input" class="col" outlined dense
-                    placeholder="что ищем"
-                    v-model="needle" @keydown="inputKeyDown"
+                <q-input
+                    ref="input" v-model="needle"
+                    class="col" outlined dense
+                    bg-color="input"
+                    placeholder="Найти"
+                    @keydown="inputKeyDown"         
                 />
-                <div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div>
+                <div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">
+                    {{ foundText }}
+                </div>
             </div>
             <q-btn-group v-show="!initStep" class="button-group row no-wrap">
-                <q-btn class="button" dense stretch @click="showNext"><q-icon style="top: -6px" name="la la-angle-down" dense size="22px"/></q-btn>
-                <q-btn class="button" dense stretch @click="showPrev"><q-icon style="top: -4px" class="icon" name="la la-angle-up" dense size="22px"/></q-btn>
+                <q-btn class="button" dense stretch @click="showNext">
+                    <q-icon style="top: -2px" name="la la-angle-down" dense size="22px" />
+                </q-btn>
+                <q-btn class="button" dense stretch @click="showPrev">
+                    <q-icon name="la la-angle-up" dense size="22px" />
+                </q-btn>
             </q-btn-group>
         </div>
     </Window>
@@ -27,13 +33,12 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
 
 import Window from '../../share/Window.vue';
 import {sleep} from '../../../share/utils';
 
-export default @Component({
+const componentOptions = {
     components: {
         Window,
     },
@@ -49,8 +54,10 @@ export default @Component({
                 el.style.paddingRight = newValue.length*12 + 'px';
         },
     },
-})
-class SearchPage extends Vue {
+};
+class SearchPage {
+    _options = componentOptions;
+
     header = null;
     initStep = null;
     initPercentage = 0;
@@ -100,12 +107,17 @@ class SearchPage extends Vue {
             this.parsed = parsed;
         }
 
-        this.header = 'Найти';
+        this.header = 'Поиск в тексте';
         await this.$nextTick();
-        this.$refs.input.focus();
+        this.focusInput();
         this.$refs.input.select();
     }
 
+    focusInput() {
+        if (!this.$root.isMobileDevice)
+            this.$refs.input.focus();
+    }
+
     get foundText() {
         if (this.foundList.length && this.foundCur >= 0)
             return `${this.foundCur + 1}/${this.foundList.length}`;
@@ -143,7 +155,8 @@ class SearchPage extends Vue {
         } else {
             this.$emit('stop-text-search');
         }
-        this.$refs.input.focus();
+
+        this.focusInput();
     }
 
     showPrev() {
@@ -159,7 +172,8 @@ class SearchPage extends Vue {
         } else {
             this.$emit('stop-text-search');
         }
-        this.$refs.input.focus();
+
+        this.focusInput();
     }
 
     close() {
@@ -180,6 +194,8 @@ class SearchPage extends Vue {
         return true;
     }
 }
+
+export default vueComponent(SearchPage);
 //-----------------------------------------------------------------------------
 </script>
 

client/components/Reader/ServerStorage/ServerStorage.vue

@@ -4,27 +4,30 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
+
 import _ from 'lodash';
 
 import bookManager from '../share/bookManager';
 import readerApi from '../../../api/reader';
 import * as utils from '../../../share/utils';
 import * as cryptoUtils from '../../../share/cryptoUtils';
+import LockQueue from '../../../share/LockQueue';
 
 import localForage from 'localforage';
 const ssCacheStore = localForage.createInstance({
     name: 'ssCacheStore'
 });
 
-export default @Component({
+const componentOptions = {
     watch: {
         serverSyncEnabled: function() {
-            this.serverSyncEnabledChanged();
+            if (this.inited)
+                this.serverSyncEnabledChanged();
         },
         serverStorageKey: function() {
-            this.serverStorageKeyChanged(true);
+            if (this.inited)
+                this.serverStorageKeyChanged(true);
         },
         settings: function() {
             this.debouncedSaveSettings();
@@ -39,14 +42,19 @@ export default @Component({
             this.debouncedSaveLibs();
         },
     },
-})
-class ServerStorage extends Vue {
+};
+class ServerStorage {
+    _options = componentOptions;
+
     created() {
         this.inited = false;
         this.keyInited = false;
         this.commit = this.$store.commit;
         this.prevServerStorageKey = null;
-        this.$root.$on('generateNewServerStorageKey', () => {this.generateNewServerStorageKey()});
+        this.identity = utils.randomHexString(20);
+        this.lock = new LockQueue(100);
+
+        this.$root.generateNewServerStorageKey = () => {this.generateNewServerStorageKey()};
 
         this.debouncedSaveSettings = _.debounce(() => {
             this.saveSettings();
@@ -79,6 +87,13 @@ class ServerStorage extends Vue {
             if (!this.cachedRecentMod)
                 await this.cleanCachedRecent('cachedRecentMod');
 
+            //подстраховка хранения ключа, восстановим из IndexedDB при проблемах в localStorage
+            if (!this.serverStorageKey) {
+                const key = await ssCacheStore.getItem('storageKey');
+                if (key)
+                    this.commit('reader/setServerStorageKey', key);
+            }
+
             if (!this.serverStorageKey) {
                 //генерируем новый ключ
                 await this.generateNewServerStorageKey();
@@ -117,6 +132,7 @@ class ServerStorage extends Vue {
     async generateNewServerStorageKey() {
         const key = utils.toBase58(utils.randomArray(32));
         this.commit('reader/setServerStorageKey', key);
+        //дождемся serverStorageKeyChanged, событие по watch не работает при this.inited == false
         await this.serverStorageKeyChanged(true);
     }
 
@@ -135,6 +151,10 @@ class ServerStorage extends Vue {
     async serverStorageKeyChanged(force) {
         if (this.prevServerStorageKey != this.serverStorageKey) {
             this.prevServerStorageKey = this.serverStorageKey;
+
+            //сохраним ключ также в IndexedDB, чтобы была возможность восстановить при проблемах с localStorage
+            await ssCacheStore.setItem('storageKey', this.serverStorageKey);
+
             this.hashedStorageKey = utils.toBase58(cryptoUtils.sha256(this.serverStorageKey));
             this.keyInited = true;
 
@@ -199,6 +219,10 @@ class ServerStorage extends Vue {
         return this.$store.state.reader.libsRev;
     }
 
+    get offlineModeActive() {
+        return this.$store.state.reader.offlineModeActive;
+    }
+
     checkCurrentProfile() {
         if (!this.profiles[this.currentProfile]) {
             this.commit('reader/setCurrentProfile', '');
@@ -216,8 +240,15 @@ class ServerStorage extends Vue {
     }
 
     error(message) {
-        if (this.showServerStorageMessages && !this.offlineModeActive)
-            this.$root.notify.error(message);
+        if (this.showServerStorageMessages && !this.offlineModeActive) {
+            this.errorMessageCounter = (this.errorMessageCounter ? this.errorMessageCounter + 1 : 1);
+            const hint = (this.errorMessageCounter < 2 ? '' :
+                '<div><br>Надоело это сообщение? Добавьте в настройках кнопку "Автономный режим" ' +
+                '<i class="la la-unlink" style="font-size: 20px; color: white"></i> на панель инструментов и активируйте ее.</div>'
+            );
+
+            this.$root.notify.error(message + hint);
+        }
     }
 
     async loadSettings(force = false, doNotifySuccess = true) {
@@ -507,10 +538,10 @@ class ServerStorage extends Vue {
                 if (md.key && result[md.key])
                     result[md.key] = utils.applyObjDiff(result[md.key], md.mod, {isAddChanged: true});
 
-                if (!bookManager.loaded) {
+                /*if (!bookManager.loaded) {
                     this.warning('Ожидание загрузки списка книг перед синхронизацией');
                     while (!bookManager.loaded) await utils.sleep(100);
-                }
+                }*/
 
                 if (newRecent.rev != this.cachedRecent.rev)
                     await this.setCachedRecent(newRecent);
@@ -533,14 +564,16 @@ class ServerStorage extends Vue {
         return true;
     }
 
-    async saveRecent(itemKey, recurse) {
-        while (!this.inited || this.savingRecent)
+    async saveRecent(itemKeys, recurse) {
+        while (!this.inited)
             await utils.sleep(100);
 
-        if (!this.keyInited || !this.serverSyncEnabled || this.savingRecent)
+        if (!this.keyInited || !this.serverSyncEnabled)
             return;
 
-        this.savingRecent = true;
+        let needRecurseCall = false;
+
+        await this.lock.get();
         try {        
             const bm = bookManager;
 
@@ -550,24 +583,31 @@ class ServerStorage extends Vue {
 
             //newRecentMod
             let newRecentMod = {};
-            if (itemKey && this.cachedRecentPatch.data[itemKey] && this.prevItemKey == itemKey) {
+            let oneItemKey = null;
+            if (itemKeys && itemKeys.length == 1)
+                oneItemKey = itemKeys[0];
+
+            if (oneItemKey && this.cachedRecentPatch.data[oneItemKey] && this.prevItemKey == oneItemKey) {
                 newRecentMod = _.cloneDeep(this.cachedRecentMod);
                 newRecentMod.rev++;
 
-                newRecentMod.data.key = itemKey;
-                newRecentMod.data.mod = utils.getObjDiff(this.cachedRecentPatch.data[itemKey], bm.recent[itemKey]);
+                newRecentMod.data.key = oneItemKey;
+                newRecentMod.data.mod = utils.getObjDiff(this.cachedRecentPatch.data[oneItemKey], bm.recent[oneItemKey]);
                 needSaveRecentMod = true;
             }
-            this.prevItemKey = itemKey;
+            this.prevItemKey = oneItemKey;
 
             //newRecentPatch
             let newRecentPatch = {};
-            if (itemKey && !needSaveRecentMod) {
+            if (itemKeys && !needSaveRecentMod) {
                 newRecentPatch = _.cloneDeep(this.cachedRecentPatch);
                 newRecentPatch.rev++;
-                newRecentPatch.data[itemKey] = _.cloneDeep(bm.recent[itemKey]);
 
-                let applyMod = this.cachedRecentMod.data;
+                for (const key of itemKeys) {
+                    newRecentPatch.data[key] = _.cloneDeep(bm.recent[key]);
+                }
+
+                const applyMod = this.cachedRecentMod.data;
                 if (applyMod && applyMod.key && newRecentPatch.data[applyMod.key])
                     newRecentPatch.data[applyMod.key] = utils.applyObjDiff(newRecentPatch.data[applyMod.key], applyMod.mod, {isAddChanged: true});
 
@@ -578,11 +618,7 @@ class ServerStorage extends Vue {
 
             //newRecent
             let newRecent = {};
-            if (!itemKey || (needSaveRecentPatch && Object.keys(newRecentPatch.data).length > 10)) {
-                //ждем весь bm.recent
-                while (!bookManager.loaded)
-                    await utils.sleep(100);
-
+            if (!itemKeys || (needSaveRecentPatch && Object.keys(newRecentPatch.data).length > 10)) {
                 newRecent = {rev: this.cachedRecent.rev + 1, data: _.cloneDeep(bm.recent)};
                 newRecentPatch = {rev: this.cachedRecentPatch.rev + 1, data: {}};
                 newRecentMod = {rev: this.cachedRecentMod.rev + 1, data: {}};
@@ -616,10 +652,8 @@ class ServerStorage extends Vue {
 
                 if (res)
                     this.warning(`Последние изменения отменены. Данные синхронизированы с сервером.`);
-                if (!recurse && itemKey) {
-                    this.savingRecent = false;
-                    this.saveRecent(itemKey, true);
-                    return;
+                if (!recurse && itemKeys) {
+                    needRecurseCall = true;
                 }
             } else if (result.state == 'success') {
                 if (needSaveRecent && newRecent.rev)
@@ -628,10 +662,15 @@ class ServerStorage extends Vue {
                     await this.setCachedRecentPatch(newRecentPatch);
                 if (needSaveRecentMod && newRecentMod.rev)
                     await this.setCachedRecentMod(newRecentMod);
+            } else {
+                this.prevItemKey = null;
             }
         } finally {
-            this.savingRecent = false;
+            this.lock.ret();
         }
+
+        if (needRecurseCall)
+            await this.saveRecent(itemKeys, true);
     }
 
     async storageCheck(items) {
@@ -647,7 +686,7 @@ class ServerStorage extends Vue {
     }
 
     async storageApi(action, items, force) {
-        const request = {action, items};
+        const request = {action, identity: this.identity, items};
         if (force)
             request.force = true;
         const encodedRequest = await this.encodeStorageItems(request);
@@ -719,13 +758,15 @@ class ServerStorage extends Vue {
                 const ids = id.split('.');
                 if (!(ids.length == 2) || !(ids[0] == this.hashedStorageKey))
                     throw new Error(`decodeStorageItems: bad id - ${id}`);
-                items[utils.fromBase58(ids[1])] = decoded;
+                items[utils.fromBase58(ids[1]).toString()] = decoded;
             }
         }
-
+        
         result.items = items;
         return result;
     }
 }
+
+export default vueComponent(ServerStorage);
 //-----------------------------------------------------------------------------
 </script>

client/components/Reader/SetPositionPage/SetPositionPage.vue

@@ -1,30 +1,32 @@
 <template>
-    <Window ref="window" height="140px" max-width="600px" :top-shift="-50" @close="close">
-        <template slot="header">
+    <Window ref="window" height="125px" max-width="600px" :top-shift="-50" @close="close">
+        <template #header>
             Установить позицию
         </template>
 
-        <div id="set-position-slider" class="slider q-px-md">
-            <q-slider
-                thumb-path="M 2, 10 a 8.5,8.5 0 1,0 17,0 a 8.5,8.5 0 1,0 -17,0"
-                v-model="sliderValue"
-                :max="sliderMax"
-                label
-                :label-value="(sliderMax ? (sliderValue/this.sliderMax*100).toFixed(2) + '%' : 0)"
-                color="primary"
-            />
+        <div class="col column justify-center">
+            <div id="set-position-slider" class="slider q-px-md column justify-center">
+                <q-slider
+                    v-model="sliderValue"
+                    thumb-path="M 2, 10 a 8.5,8.5 0 1,0 17,0 a 8.5,8.5 0 1,0 -17,0"
+                    
+                    :max="sliderMax"
+                    label
+                    :label-value="(sliderMax ? (sliderValue/sliderMax*100).toFixed(2) + '%' : 0)"
+                    color="primary"
+                />
+            </div>
         </div>
     </Window>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
 
 import Window from '../../share/Window.vue';
 
-export default @Component({
+const componentOptions = {
     components: {
         Window,
     },
@@ -34,8 +36,10 @@ export default @Component({
                 this.$emit('book-pos-changed', {bookPos: newValue});
         },
     },
-})
-class SetPositionPage extends Vue {
+};
+class SetPositionPage {
+    _options = componentOptions;
+
     sliderValue = null;
     sliderMax = null;
 
@@ -67,13 +71,16 @@ class SetPositionPage extends Vue {
         return true;
     }
 }
+
+export default vueComponent(SetPositionPage);
 //-----------------------------------------------------------------------------
 </script>
 
 <style scoped>
 .slider {
-    margin: 20px;
-    background-color: #efefef;
+    margin: 0 20px 0 20px;
+    height: 35px;
+    background-color: var(--bg-input-color);
     border-radius: 15px;
 }
 </style>

client/components/Reader/SettingsPage/ConvertTab/ConvertTab.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <!---------------------------------------------->
+        <div class="q-mt-sm column items-center">
+            <span>Настройки конвертирования применяются ко всем</span>
+            <span>вновь загружаемым или обновляемым файлам</span>
+        </div>
+
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            HTML, XML, TXT
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Текст
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.splitToPara" size="xs" label="Попытаться разбить текст на параграфы">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Опция принудительно включает эвристику разбиения текста на<br>
+                        параграфы в случае, если формат файла определен как html,<br>
+                        xml или txt. Возможна нечитабельная разметка текста.
+                    </q-tooltip>
+                </q-checkbox>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Сайты
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.enableSitesFilter" size="xs" label="Включить html-фильтр для сайтов">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Html-фильтр вырезает лишние элементы со<br>
+                        страницы для определенных сайтов, таких как:<br>
+                        samlib.ru<br>
+                        www.fanfiction.net<br>
+                        archiveofourown.org<br>
+                        и других
+                    </q-tooltip>
+                </q-checkbox>
+            </div>
+        </div>
+
+        <!---------------------------------------------->
+        <div v-if="isExternalConverter">
+            <div class="sets-part-header">
+                PDF
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Формат
+                </div>
+                <div class="col row">
+                    <q-checkbox v-model="form.pdfAsText" size="xs" label="Извлекать текст из PDF">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Пытается извлечь текст из pdf-файла и переразбить на параграфы.<br>
+                            Размер получаемого fb2-файла при этом относительно небольшой.<br>
+                            При отключении этой опции, pdf будет представлен как набор<br>
+                            изображений (аналогично ковертированию djvu).
+                        </q-tooltip>
+                    </q-checkbox>
+                </div>
+            </div>
+
+            <div v-if="!form.pdfAsText" class="sets-item row">
+                <div class="sets-label label">
+                    Качество
+                </div>
+                <div class="col row">
+                    <NumInput v-model="form.pdfQuality" bg-color="input" class="col-5" :min="10" :max="100">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Качество конвертирования Pdf в Fb2. Чем значение выше, тем больше<br>
+                            размер итогового файла. Если сервер отказывается конвертировать<br>
+                            слишком большой файл, то попробуйте понизить качество.
+                        </q-tooltip>
+                    </NumInput>
+                </div>
+            </div>
+        </div>
+
+        <!---------------------------------------------->
+        <div v-if="isExternalConverter">
+            <div class="sets-part-header">
+                DJVU
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Качество
+                </div>
+                <div class="col row">
+                    <NumInput v-model="form.djvuQuality" bg-color="input" class="col-5" :min="10" :max="100">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Качество конвертирования Djvu в Fb2. Чем значение выше, тем больше<br>
+                            размер итогового файла. Если сервер отказывается конвертировать<br>
+                            слишком большой файл, то попробуйте понизить качество.
+                        </q-tooltip>
+                    </NumInput>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+import NumInput from '../../../share/NumInput.vue';
+
+const componentOptions = {
+    components: {
+        NumInput
+    },
+};
+class ConvertTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get isExternalConverter() {
+        return this.$store.state.config.useExternalBookConverter;
+    }
+}
+
+export default vueComponent(ConvertTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 75px;
+}
+
+</style>

client/components/Reader/SettingsPage/KeysTab/KeysTab.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="fit column">
+        <div class="bg-menu-1 row">
+            <q-tabs
+                v-model="selectedTab"
+                active-color="app"
+                active-bg-color="app"
+                indicator-color="bg-app"
+                dense
+                no-caps
+                class="bg-menu-2 text-menu"
+            >
+                <q-tab name="mouse" label="Мышь/тачскрин" />
+                <q-tab name="keyboard" label="Клавиатура" />
+            </q-tabs>
+        </div>
+
+        <div class="q-mb-sm" />
+
+        <div class="col sets-tab-panel">
+            <div v-if="selectedTab == 'mouse'">
+                <div class="sets-item row">
+                    <div class="sets-label label"></div>
+                    <div class="col row">
+                        <q-checkbox v-model="form.clickControl" size="xs" label="Включить управление кликом" />
+                    </div>
+                </div>
+            </div>
+
+            <div v-if="selectedTab == 'keyboard'">
+                <div class="sets-item row">
+                    <UserHotKeys v-model="form.userHotKeys" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
+
+const componentOptions = {
+    components: {
+        UserHotKeys,
+    },
+};
+class KeysTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    selectedTab = 'mouse';
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+}
+
+export default vueComponent(KeysTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+</style>

client/components/Reader/SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue

@@ -2,14 +2,20 @@
     <div class="table col column no-wrap">
         <!-- header -->
         <div class="table-row row">
-            <div class="desc q-pa-sm bg-blue-2">Команда</div>
-            <div class="hotKeys col q-pa-sm bg-blue-2 row no-wrap">
-                <div style="width: 80px">Сочетание клавиш</div>
-                <q-input ref="input" class="q-ml-sm col"
-                    outlined dense rounded
-                    bg-color="grey-4"
-                    placeholder="Найти"
+            <div class="desc q-pa-sm bg-header-3">
+                Команда
+            </div>
+            <div class="hotKeys col q-pa-sm bg-header-3 row no-wrap">
+                <div style="width: 80px">
+                    Сочетание клавиш
+                </div>
+                <q-input
+                    ref="input"
                     v-model="search"
+                    class="q-ml-sm col"
+                    outlined dense
+                    bg-color="input"
+                    placeholder="Найти"                    
                     @click.stop
                 />
                 <div v-show="!readonly" class="q-ml-sm column justify-center">
@@ -23,35 +29,38 @@
         </div>
 
         <!-- body -->
-        <div class="table-row row" v-for="(action, index) in tableData" :key="index">
-            <div class="desc q-pa-sm">{{ rstore.readerActions[action] }}</div>
+        <div v-for="(action, index) in tableData" :key="index" class="table-row row">
+            <div class="desc q-pa-sm">
+                {{ rstore.readerActions[action] }}
+            </div>
             <div class="hotKeys col q-pa-sm">
                 <q-chip
+                    v-for="(code, index2) in modelValue[action]" :key="index2"
                     :color="collisions[code] ? 'red' : 'grey-7'"
                     :removable="!readonly" :clickable="collisions[code] ? true : false"
-                    text-color="white" v-for="(code, index) in value[action]" :key="index" @remove="removeCode(action, code)"
+                    text-color="white" @remove="removeCode(action, code)"
                     @click="collisionWarning(code)"
-                    >
+                >
                     {{ code }}
                 </q-chip>
             </div>
             <div v-show="!readonly" class="column q-pa-xs">
                 <q-icon
+                    v-ripple
+                    :disabled="(modelValue[action].length >= maxCodesLength) || null"
                     name="la la-plus-circle"
                     class="button bg-green-8 text-white"
-                    @click="addHotKey(action)"
-                    v-ripple
-                    :disabled="value[action].length >= maxCodesLength"
+                    @click="addHotKey(action)"                    
                 >
                     <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
                         Добавить сочетание клавиш
                     </q-tooltip>
                 </q-icon>
                 <q-icon
+                    v-ripple
                     name="la la-broom"
                     class="button text-grey-5"
                     @click="defaultHotKey(action)"
-                    v-ripple
                 >
                     <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
                         По умолчанию
@@ -64,31 +73,28 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../../vueComponent.js';
 
-import rstore from '../../../../store/modules/reader';
-//import * as utils from '../../share/utils';
+import rstore from '../../../../../store/modules/reader';
 
-const UserHotKeysProps = Vue.extend({
-    props: {
-        value: Object,
-        readonly: Boolean,
-    }
-});
-
-export default @Component({
+const componentOptions = {
     watch: {
         search: function() {
             this.updateTableData();
         },
-        value: function() {
+        modelValue: function() {
             this.checkCollisions();
             this.updateTableData();
         }
     },
-})
-class UserHotKeys extends UserHotKeysProps {
+};
+class UserHotKeys {
+    _options = componentOptions;
+    _props = {
+        modelValue: Object,
+        readonly: Boolean,
+    };
+
     search = '';
     rstore = {};
     tableData = [];
@@ -104,12 +110,16 @@ class UserHotKeys extends UserHotKeysProps {
         this.updateTableData();
     }
 
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
     updateTableData() {
         let result = rstore.hotKeys.map(hk => hk.name);
 
         const search = this.search.toLowerCase();
         const codesIncludeSearch = (action) => {
-            for (const code of this.value[action]) {
+            for (const code of this.modelValue[action]) {
                 if (code.toLowerCase().includes(search))
                     return true;
             }
@@ -127,7 +137,7 @@ class UserHotKeys extends UserHotKeysProps {
 
     checkCollisions() {
         const cols = {};
-        for (const [action, codes] of Object.entries(this.value)) {
+        for (const [action, codes] of Object.entries(this.modelValue)) {
             codes.forEach(code => {
                 if (!cols[code])
                     cols[code] = [];
@@ -154,26 +164,26 @@ class UserHotKeys extends UserHotKeysProps {
     }
 
     removeCode(action, code) {
-        let codes = Array.from(this.value[action]);
+        let codes = Array.from(this.modelValue[action]);
         const index = codes.indexOf(code);
         if (index >= 0) {
             codes.splice(index, 1);
-            const newValue = Object.assign({}, this.value, {[action]: codes});
-            this.$emit('input', newValue);
+            const newValue = Object.assign({}, this.modelValue, {[action]: codes});
+            this.$emit('update:modelValue', newValue);
         }
     }
 
     async addHotKey(action) {
-        if (this.value[action].length >= this.maxCodesLength)
+        if (this.modelValue[action].length >= this.maxCodesLength)
             return;
         try {
             const result = await this.$root.stdDialog.getHotKey(`Добавить сочетание для:<br><b>${rstore.readerActions[action]}</b>`, '');
             if (result) {
-                let codes = Array.from(this.value[action]);
+                let codes = Array.from(this.modelValue[action]);
                 if (codes.indexOf(result) < 0) {
                     codes.push(result);
-                    const newValue = Object.assign({}, this.value, {[action]: codes});
-                    this.$emit('input', newValue);
+                    const newValue = Object.assign({}, this.modelValue, {[action]: codes});
+                    this.$emit('update:modelValue', newValue);
                     this.$nextTick(() => {
                         this.collisionWarning(result);
                     });
@@ -188,8 +198,8 @@ class UserHotKeys extends UserHotKeysProps {
         try {
             if (await this.$root.stdDialog.confirm(`Подтвердите сброс сочетаний клавиш<br>в значения по умолчанию для команды:<br><b>${rstore.readerActions[action]}</b>`, ' ')) {
                 const codes = Array.from(rstore.settingDefaults.userHotKeys[action]);
-                const newValue = Object.assign({}, this.value, {[action]: codes});
-                this.$emit('input', newValue);
+                const newValue = Object.assign({}, this.modelValue, {[action]: codes});
+                this.$emit('update:modelValue', newValue);
             }
         } catch (e) {
             //
@@ -200,13 +210,15 @@ class UserHotKeys extends UserHotKeysProps {
         try {
             if (await this.$root.stdDialog.confirm('Подтвердите сброс сочетаний клавиш<br>для ВСЕХ команд в значения по умолчанию:', ' ')) {
                 const newValue = Object.assign({}, rstore.settingDefaults.userHotKeys);
-                this.$emit('input', newValue);
+                this.$emit('update:modelValue', newValue);
             }
         } catch (e) {
             //
         }
     }
 }
+
+export default vueComponent(UserHotKeys);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -222,11 +234,11 @@ class UserHotKeys extends UserHotKeysProps {
 }
 
 .table-row:nth-child(even) {
-    background-color: #f7f7f7;
+    background-color: var(--bg-menu-color1);
 }
 
 .table-row:hover {
-    background-color: #f0f0f0;
+    background-color: var(--bg-menu-color2);
 }
 
 .desc {

client/components/Reader/SettingsPage/OthersTab/OthersTab.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Подсказки, уведомления
+        </div>
+
+        <div class="sets-item row no-wrap">
+            <div class="sets-label label">
+                Подсказка
+            </div>
+            <q-checkbox v-model="form.showClickMapPage" size="xs" label="Показывать области управления кликом" :disable="!form.clickControl">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать или нет подсказку при каждой загрузке книги
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Подсказка
+            </div>
+            <q-checkbox v-model="form.blinkCachedLoad" size="xs" label="Предупреждать о загрузке из кэша">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Мерцать сообщением в строке статуса и на кнопке<br>
+                    обновления при загрузке книги из кэша
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row no-wrap">
+            <div class="sets-label label">
+                Уведомление
+            </div>
+            <q-checkbox v-model="form.showServerStorageMessages" size="xs" label="Показывать сообщения синхронизации">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать уведомления и ошибки от<br>
+                    синхронизатора данных с сервером
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Уведомление
+            </div>
+            <q-checkbox v-model="form.showWhatsNewDialog" size="xs">
+                Показывать уведомление "Что нового"
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать уведомления "Что нового"<br>
+                    при появлении новой версии читалки
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Уведомление
+            </div>
+            <q-checkbox v-model="form.showDonationDialog" size="xs">
+                Показывать форму доната
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Показывать диалог для сбора пожертвований
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Другое
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Парам. в URL
+            </div>
+            <q-checkbox v-model="form.allowUrlParamBookPos" size="xs">
+                Добавлять параметр "__p"
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Добавление параметра "__p" в строке браузера<br>
+                    позволяет передавать ссылку на книгу в читалке<br>
+                    без потери текущей позиции. Однако в этом случае<br>
+                    при листании забивается история браузера, т.к. на<br>
+                    каждое изменение позиции происходит смена URL.
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Копирование
+            </div>
+            <q-checkbox v-model="form.copyFullText" size="xs" label="Загружать весь текст">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Загружать весь текст в окно<br>
+                    копирования текста со страницы
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+const componentOptions = {
+    components: {
+    },
+};
+class OthersTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+}
+
+export default vueComponent(OthersTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 100px;
+}
+
+</style>

client/components/Reader/SettingsPage/PageMoveTab/PageMoveTab.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Анимация
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Тип
+            </div>
+            <q-select
+                v-model="form.pageChangeAnimation" bg-color="input" class="col-left" :options="pageChangeAnimationOptions"
+                dropdown-icon="la la-angle-down la-sm"
+                outlined dense emit-value map-options
+            />
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Скорость
+            </div>
+            <NumInput v-model="form.pageChangeAnimationSpeed" bg-color="input" class="col-left" :min="0" :max="100" :disable="form.pageChangeAnimation == ''" />
+        </div>
+
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Другое
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Страница
+            </div>
+            <q-checkbox v-model="form.keepLastToFirst" size="xs" label="Переносить последнюю строку">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Переносить последнюю строку страницы<br>
+                    в начало следующей при листании
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+import NumInput from '../../../share/NumInput.vue';
+
+const componentOptions = {
+    components: {
+        NumInput,
+    },
+};
+class PageMoveTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get pageChangeAnimationOptions() {
+        let result = [
+            {label: 'Нет', value: ''},
+            {label: 'Вверх-вниз', value: 'downShift'},
+            (!this.form.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
+            {label: 'Протаивание', value: 'thaw'},
+            {label: 'Мерцание', value: 'blink'},
+            {label: 'Вращение', value: 'rotate'},
+            (this.form.wallpaper == '' && !this.form.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
+        ];        
+
+        result = result.filter(v => v);
+
+        return result;
+    }
+}
+
+export default vueComponent(PageMoveTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 150px;
+}
+</style>

client/components/Reader/SettingsPage/ProfilesTab/ProfilesTab.vue

@@ -0,0 +1,363 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <div class="sets-part-header">
+            Управление синхронизацией данных
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="serverSyncEnabled" class="col" size="xs" label="Включить синхронизацию с сервером" />
+        </div>
+
+        <div v-show="serverSyncEnabled">
+            <!---------------------------------------------->
+            <div class="sets-part-header">
+                Профили устройств
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <div class="text col">
+                    Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
+                    <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
+                </div>
+            </div>
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Устройство
+                </div>
+                <div class="col">
+                    <q-select
+                        v-model="currentProfile" :options="currentProfileOptions"
+                        style="width: 275px"
+                        bg-color="input"
+                        dropdown-icon="la la-angle-down la-sm"
+                        outlined dense emit-value map-options display-value-sanitize options-sanitize
+                    />
+                </div>
+            </div>
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="addProfile">
+                    Добавить
+                </q-btn>
+                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="delProfile">
+                    Удалить
+                </q-btn>
+                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="delAllProfiles">
+                    Удалить все
+                </q-btn>
+            </div>
+
+            <!---------------------------------------------->
+            <div class="sets-part-header">
+                Ключ доступа
+            </div>
+            
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <div class="text col">
+                    Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
+                    Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
+                </div>
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="showServerStorageKey">
+                    <span v-show="serverStorageKeyVisible">Скрыть</span>
+                    <span v-show="!serverStorageKeyVisible">Показать</span>
+                    &nbsp;ключ доступа
+                </q-btn>
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <div v-if="!serverStorageKeyVisible" class="col">
+                    <hr />
+                    <b>{{ partialStorageKey }}</b> (часть вашего ключа)
+                    <hr />
+                </div>
+                <div v-else class="col" style="line-height: 100%">
+                    <hr />
+                    <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;">
+                        <b>{{ serverStorageKey }}</b>
+                        <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(serverStorageKey, 'Ключ')">
+                            <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                                Скопировать
+                            </q-tooltip>                    
+                        </q-icon>            
+                    </div>
+                    <div v-if="mode == 'omnireader' || mode == 'liberama'">
+                        <br>Переход по ссылке позволит автоматически ввести ключ доступа:
+                        <br><div class="text-center" style="margin-top: 5px">
+                            <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
+                            <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(setStorageKeyLink, 'Ссылка')">
+                                <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                                    Скопировать
+                                </q-tooltip>                    
+                            </q-icon>            
+                        </div>
+                    </div>
+                    <hr />
+                </div>
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="enterServerStorageKey">
+                    Ввести ключ доступа
+                </q-btn>
+            </div>
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="generateServerStorageKey">
+                    Сгенерировать новый ключ
+                </q-btn>
+            </div>
+            <div class="sets-item row">
+                <div class="sets-label label"></div>
+                <div class="text col">
+                    Рекомендуется сохранить ключ в надежном месте, чтобы всегда иметь возможность восстановить настройки,
+                    например, после переустановки ОС или чистки/смены браузера.<br>
+                    <b>ПРЕДУПРЕЖДЕНИЕ!</b> При утере ключа, НИКТО не сможет восстановить ваши данные, т.к. они сжимаются
+                    и шифруются ключом доступа перед отправкой на сервер.
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+import _ from 'lodash';
+
+import * as utils from '../../../../share/utils';
+import rstore from '../../../../store/modules/reader';
+
+const componentOptions = {
+    watch: {
+    },
+};
+class ProfilesTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    rstore = rstore;
+
+    serverStorageKeyVisible = false;
+
+    created() {
+        this.commit = this.$store.commit;
+    }
+
+    mounted() {
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    get serverSyncEnabled() {
+        return this.$store.state.reader.serverSyncEnabled;
+    }
+
+    set serverSyncEnabled(newValue) {
+        this.commit('reader/setServerSyncEnabled', newValue);
+    }
+
+    get currentProfile() {
+        return this.$store.state.reader.currentProfile;
+    }
+
+    set currentProfile(newValue) {
+        this.commit('reader/setCurrentProfile', newValue);
+    }
+
+    get profiles() {
+        return this.$store.state.reader.profiles;
+    }
+
+    get currentProfileOptions() {
+        const profNames = Object.keys(this.profiles)
+        profNames.sort();
+
+        let result = [{label: 'Нет', value: ''}];
+        profNames.forEach(name => {
+            result.push({label: name, value: name});
+        });
+        return result;
+    }
+
+    get partialStorageKey() {
+        return this.serverStorageKey.substr(0, 7) + '***';
+    }
+
+    get serverStorageKey() {
+        return this.$store.state.reader.serverStorageKey;
+    }
+
+    get setStorageKeyLink() {
+        return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
+    }
+
+    async addProfile() {
+        try {
+            if (Object.keys(this.profiles).length >= 100) {
+                this.$root.stdDialog.alert('Достигнут предел количества профилей', 'Ошибка');
+                return;
+            }
+            const result = await this.$root.stdDialog.prompt('Введите произвольное название для профиля устройства:', ' ', {
+                inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
+            });
+            if (result && result.value) {
+                if (this.profiles[result.value]) {
+                    this.$root.stdDialog.alert('Такой профиль уже существует', 'Ошибка');
+                } else {
+                    const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
+                    this.commit('reader/setAllowProfilesSave', true);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setProfiles', newProfiles);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setAllowProfilesSave', false);
+                    this.currentProfile = result.value;
+                }
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async delProfile() {
+        if (!this.currentProfile)
+            return;
+
+        try {
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.$root.sanitize(this.currentProfile)}' необратимо.` +
+                    `<br>Все настройки профиля будут потеряны, однако список читаемых книг сохранится.` +
+                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
+                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
+            });
+
+            if (result && result.value && result.value.toLowerCase() == 'да') {
+                if (this.profiles[this.currentProfile]) {
+                    const newProfiles = Object.assign({}, this.profiles);
+                    delete newProfiles[this.currentProfile];
+                    this.commit('reader/setAllowProfilesSave', true);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setProfiles', newProfiles);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setAllowProfilesSave', false);
+                    this.currentProfile = '';
+                }
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async delAllProfiles() {
+        if (!Object.keys(this.profiles).length)
+            return;
+
+        try {
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
+                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
+                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
+            });
+
+            if (result && result.value && result.value.toLowerCase() == 'да') {
+                this.commit('reader/setAllowProfilesSave', true);
+                await this.$nextTick();//ждем обработчики watch
+                this.commit('reader/setProfiles', {});
+                await this.$nextTick();//ждем обработчики watch
+                this.commit('reader/setAllowProfilesSave', false);
+                this.currentProfile = '';
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async showServerStorageKey() {
+        this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
+    }
+
+    async enterServerStorageKey(key) {
+        try {
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
+                    `<br><br>Введите новый ключ доступа:`, ' ', {
+                inputValidator: (str) => {
+                    try {
+                        if (str && utils.fromBase58(str).length == 32) {
+                            return true;
+                        }
+                    } catch (e) {
+                        //
+                    }
+                    return 'Неверный формат ключа'; 
+                },
+                inputValue: (key && _.isString(key) ? key : null),
+            });
+
+            if (result && result.value && utils.fromBase58(result.value).length == 32) {
+                this.commit('reader/setServerStorageKey', result.value);
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async generateServerStorageKey() {
+        try {
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
+                    `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, ' ', {
+                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
+            });
+
+            if (result && result.value && result.value.toLowerCase() == 'да') {
+                if (this.$root.generateNewServerStorageKey)
+                    this.$root.generateNewServerStorageKey();
+            }
+        } catch (e) {
+            //
+        }
+
+    }
+
+    async copyToClip(text, prefix) {
+        const result = await utils.copyTextToClipboard(text);
+        const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
+        const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
+        if (result)
+            this.$root.notify.success(msg);
+        else
+            this.$root.notify.error(msg);
+    }
+}
+
+export default vueComponent(ProfilesTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 75px;
+}
+
+.text {
+    font-size: 90%;
+    line-height: 130%;
+}
+
+.copy-icon {
+    margin-left: 5px;
+    cursor: pointer;
+    font-size: 120%;
+    color: var(--text-anchor-color);
+}
+</style>

client/components/Reader/SettingsPage/ResetTab/ResetTab.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <div class="sets-item row">
+            <q-btn class="col q-ma-sm" color="btn2" text-color="app" dense no-caps @click="setDefaults">
+                Установить по умолчанию
+            </q-btn>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+const componentOptions = {
+    components: {
+    },
+};
+class ResetTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    setDefaults() {
+        this.$emit('tab-event', {action: 'set-defaults'});
+    }
+}
+
+export default vueComponent(ResetTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+</style>

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -1,6 +1,6 @@
-<template lang="includer">
-    <Window ref="window" height="95%" width="600px" @close="close">
-        <template slot="header">
+<template>
+    <Window ref="window" width="600px" @close="close">
+        <template #header>
             Настройки
         </template>
 
@@ -8,175 +8,135 @@
             <div class="full-height">
                 <q-tabs
                     ref="tabs"
-                    class="bg-grey-3 text-black"
                     v-model="selectedTab"
+                    class="bg-menu-1 text-menu"
+                    style="max-width: 130px"
+                    
                     left-icon="la la-caret-up"
                     right-icon="la la-caret-down"
                     active-color="white"
                     active-bg-color="primary"
-                    indicator-color="black"
+                    indicator-color="bg-app"
                     vertical
                     no-caps
                     stretch
                     inline-label
                 >
-                    <div v-show="tabsScrollable" class="q-pt-lg"/>
-                    <q-tab class="tab" name="profiles" icon="la la-users" label="Профили" />
-                    <q-tab class="tab" name="view" icon="la la-eye" label="Вид" />
-                    <q-tab class="tab" name="buttons" icon="la la-grip-horizontal" label="Кнопки" />
-                    <q-tab class="tab" name="keys" icon="la la-gamepad" label="Управление" />
-                    <q-tab class="tab" name="pagemove" icon="la la-school" label="Листание" />
-                    <q-tab class="tab" name="others" icon="la la-list-ul" label="Прочее" />
-                    <q-tab class="tab" name="reset" icon="la la-broom" label="Сброс" />
-                    <div v-show="tabsScrollable" class="q-pt-lg"/>
+                    <q-tab v-for="item in tabs" :key="item.name" class="tab row items-center" :name="item.name">
+                        <q-icon :name="item.icon" :color="selectedTab == item.name ? 'yellow' : 'teal-7'" size="24px" />
+                        <div class="q-ml-xs" style="font-size: 90%">
+                            {{ item.label }}
+                        </div>
+                    </q-tab>
                 </q-tabs>
             </div>
 
             <div class="col fit">
                 <!-- Профили --------------------------------------------------------------------->
-                <div v-if="selectedTab == 'profiles'" class="fit tab-panel">
-                    @@include('./include/ProfilesTab.inc');
-                </div>
+                <ProfilesTab v-if="selectedTab == 'profiles'" :form="form" />
                 <!-- Вид ------------------------------------------------------------------------->                    
-                <div v-if="selectedTab == 'view'" class="fit column">
-                    @@include('./include/ViewTab.inc');
-                </div>
+                <ViewTab v-if="selectedTab == 'view'" :form="form" @tab-event="tabEvent" />
                 <!-- Кнопки ---------------------------------------------------------------------->
-                <div v-if="selectedTab == 'buttons'" class="fit tab-panel">
-                    @@include('./include/ButtonsTab.inc');
-                </div>
+                <ToolBarTab v-if="selectedTab == 'toolbar'" :form="form" />
                 <!-- Управление ------------------------------------------------------------------>
-                <div v-if="selectedTab == 'keys'" class="fit column">
-                    @@include('./include/KeysTab.inc');
-                </div>
+                <KeysTab v-if="selectedTab == 'keys'" :form="form" />
                 <!-- Листание -------------------------------------------------------------------->
-                <div v-if="selectedTab == 'pagemove'" class="fit tab-panel">
-                    @@include('./include/PageMoveTab.inc');
-                </div>
+                <PageMoveTab v-if="selectedTab == 'pagemove'" :form="form" />
+                <!-- Конвертирование ------------------------------------------------------------->
+                <ConvertTab v-if="selectedTab == 'convert'" :form="form" />
+                <!-- Обновление ------------------------------------------------------------------>
+                <UpdateTab v-if="selectedTab == 'update'" :form="form" />
                 <!-- Прочее ---------------------------------------------------------------------->
-                <div v-if="selectedTab == 'others'" class="fit tab-panel">
-                    @@include('./include/OthersTab.inc');
-                </div>
-                <!-- Сброс ----------------------------------------------------------------------->
-                <div v-if="selectedTab == 'reset'" class="fit tab-panel">
-                    @@include('./include/ResetTab.inc');
-                </div>
+                <OthersTab v-if="selectedTab == 'others'" :form="form" />
+                <!-- Сброс ----------------------------------------------------------------------->                
+                <ResetTab v-if="selectedTab == 'reset'" :form="form" @tab-event="tabEvent" />
             </div>
-
         </div>
     </Window>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
+import { reactive } from 'vue';
+
 import _ from 'lodash';
 
-import * as utils from '../../../share/utils';
+//stuff
 import Window from '../../share/Window.vue';
-import NumInput from '../../share/NumInput.vue';
-import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
 
 import rstore from '../../../store/modules/reader';
-import defPalette from './defPalette';
 
-const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
+//pages
+import ProfilesTab from './ProfilesTab/ProfilesTab.vue';
+import ViewTab from './ViewTab/ViewTab.vue';
+import ToolBarTab from './ToolBarTab/ToolBarTab.vue';
+import KeysTab from './KeysTab/KeysTab.vue';
+import PageMoveTab from './PageMoveTab/PageMoveTab.vue';
+import ConvertTab from './ConvertTab/ConvertTab.vue';
+import UpdateTab from './UpdateTab/UpdateTab.vue';
+import OthersTab from './OthersTab/OthersTab.vue';
+import ResetTab from './ResetTab/ResetTab.vue';
 
-export default @Component({
+const componentOptions = {
     components: {
         Window,
-        NumInput,
-        UserHotKeys,
-    },
-    data: function() {
-        return Object.assign({}, rstore.settingDefaults);
+        //pages
+        ProfilesTab,
+        ViewTab,
+        ToolBarTab,
+        KeysTab,
+        PageMoveTab,
+        ConvertTab,
+        UpdateTab,
+        OthersTab,
+        ResetTab,
     },
     watch: {
         settings: function() {
-            this.settingsChanged();
+            this.settingsChanged();//no await
         },
-        form: function(newValue) {
-            if (this.inited)
-                this.commit('reader/setSettings', newValue);
-        },
-        fontBold: function(newValue) {
-            this.fontWeight = (newValue ? 'bold' : '');
-        },
-        fontItalic: function(newValue) {
-            this.fontStyle = (newValue ? 'italic' : '');
-        },
-        vertShift: function(newValue) {
-            const font = (this.webFontName ? this.webFontName : this.fontName);
-            if (this.fontShifts[font] != newValue) {
-                this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
-                this.fontVertShift = newValue;
-            }
-        },
-        fontName: function(newValue) {
-            const font = (this.webFontName ? this.webFontName : newValue);
-            this.vertShift = this.fontShifts[font] || 0;
-        },
-        webFontName: function(newValue) {
-            const font = (newValue ? newValue : this.fontName);
-            this.vertShift = this.fontShifts[font] || 0;
-        },
-        wallpaper: function(newValue) {
-            if (newValue != '' && this.pageChangeAnimation == 'flip')
-                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;
+        form: {
+            handler() {
+                if (this.inited && !this.isSetsChanged) {
+                    this.debouncedCommitSettings();
+                }
+            },
+            deep: true,
         },
     },
-})
-class SettingsPage extends Vue {
-    selectedTab = 'profiles';
-    selectedViewTab = 'color';
-    selectedKeysTab = 'mouse';
+};
+class SettingsPage {
+    _options = componentOptions;
+
     form = {};
-    fontBold = false;
-    fontItalic = false;
-    vertShift = 0;
-    tabsScrollable = false;
-    textColorFiltered = '';
-    bgColorFiltered = '';
 
-    webFonts = [];
-    fonts = [];
+    tabs = [
+        { name: 'profiles', icon: 'la la-users', label: 'Профили' },
+        { name: 'view', icon: 'la la-eye', label: 'Вид'},
+        { name: 'toolbar', icon: 'la la-grip-horizontal', label: 'Панель'},
+        { name: 'keys', icon: 'la la-gamepad', label: 'Управление'},
+        { name: 'pagemove', icon: 'la la-school', label: 'Листание'},
+        { name: 'convert', icon: 'la la-magic', label: 'Конвертир.'},
+        { name: 'update', icon: 'la la-retweet', label: 'Обновление'},
+        { name: 'others', icon: 'la la-list-ul', label: 'Прочее'},
+        { name: 'reset', icon: 'la la-broom', label: 'Сброс'},
+    ];
+    selectedTab = 'profiles';
 
-    serverStorageKeyVisible = false;
-    toolButtons = [];
-    rstore = {};
+    isSetsChanged = false;
 
     created() {
         this.commit = this.$store.commit;
-        this.reader = this.$store.state.reader;
 
-        this.form = {};
-        this.rstore = rstore;
-        this.toolButtons = rstore.toolButtons;
-        this.settingsChanged();
+        this.debouncedCommitSettings = _.debounce(() => {            
+            this.commit('reader/setSettings', _.cloneDeep(this.form));
+        }, 50);
+
+        this.settingsChanged();//no await
     }
 
     mounted() {
-        this.$watch(
-            '$refs.tabs.scrollable',
-            (newValue) => {
-                this.tabsScrollable = newValue && !this.$isMobileDevice;
-            }
-        );
     }
 
     init() {
@@ -184,176 +144,20 @@ class SettingsPage extends Vue {
         this.inited = true;
     }
 
-    settingsChanged() {
-        if (_.isEqual(this.form, this.settings))
-            return;
-
-        this.form = Object.assign({}, this.settings);
-        if (!this.unwatch)
-            this.unwatch = {};
-
-        for (let prop in rstore.settingDefaults) {
-            if (this.unwatch && this.unwatch[prop])
-                this.unwatch[prop]();
-
-            this[prop] = this.form[prop];
-
-            this.unwatch[prop] = this.$watch(prop, (newValue) => {
-                this.form = Object.assign({}, this.form, {[prop]: newValue});
-            });
+    async settingsChanged() {
+        this.isSetsChanged = true;
+        try {
+            this.form = reactive(_.cloneDeep(this.settings));
+        } finally {
+            await this.$nextTick();
+            this.isSetsChanged = false;
         }
-
-        this.fontBold = (this.fontWeight == 'bold');
-        this.fontItalic = (this.fontStyle == 'italic');
-
-        this.fonts = rstore.fonts;
-        this.webFonts = rstore.webFonts;
-        const font = (this.webFontName ? this.webFontName : this.fontName);
-        this.vertShift = this.fontShifts[font] || 0;
-        this.textColorFiltered = this.textColor;
-        this.bgColorFiltered = this.backgroundColor;
-    }
-
-    get mode() {
-        return this.$store.state.config.mode;
     }
 
     get settings() {
         return this.$store.state.reader.settings;
     }
 
-    get serverSyncEnabled() {
-        return this.$store.state.reader.serverSyncEnabled;
-    }
-
-    set serverSyncEnabled(newValue) {
-        this.commit('reader/setServerSyncEnabled', newValue);
-    }
-
-    get profiles() {
-        return this.$store.state.reader.profiles;
-    }
-
-    get currentProfileOptions() {
-        const profNames = Object.keys(this.profiles)
-        profNames.sort();
-
-        let result = [{label: 'Нет', value: ''}];
-        profNames.forEach(name => {
-            result.push({label: name, value: name});
-        });
-        return result;
-    }
-
-    get wallpaperOptions() {
-        let result = [{label: 'Нет', value: ''}];
-        for (let i = 1; i < 10; i++) {
-            result.push({label: i, value: `paper${i}`});
-        }
-        return result;
-    }
-
-    get fontsOptions() {
-        let result = [];
-        this.fonts.forEach(font => {
-            result.push({label: (font.label ? font.label : font.name), value: font.name});
-        });
-        return result;
-    }
-
-    get webFontsOptions() {
-        let result = [{label: 'Нет', value: ''}];
-        this.webFonts.forEach(font => {
-            result.push({label: font.name, value: font.name});
-        });
-        return result;
-    }
-
-    get pageChangeAnimationOptions() {
-        let result = [
-            {label: 'Нет', value: ''},
-            {label: 'Вверх-вниз', value: 'downShift'},
-            {label: 'Вправо-влево', value: 'rightShift'},
-            {label: 'Протаивание', value: 'thaw'},
-            {label: 'Мерцание', value: 'blink'},
-            {label: 'Вращение', value: 'rotate'},
-        ];
-        if (this.wallpaper == '')
-            result.push({label: 'Листание', value: 'flip'});
-        return result;
-    }
-
-    get currentProfile() {
-        return this.$store.state.reader.currentProfile;
-    }
-
-    set currentProfile(newValue) {
-        this.commit('reader/setCurrentProfile', newValue);
-    }
-
-    get partialStorageKey() {
-        return this.serverStorageKey.substr(0, 7) + '***';
-    }
-
-    get serverStorageKey() {
-        return this.$store.state.reader.serverStorageKey;
-    }
-
-    get setStorageKeyLink() {
-        return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
-    }
-
-    get predefineTextColors() {
-        return defPalette.concat([
-          '#ffffff',
-          '#000000',
-          '#202020',
-          '#323232',
-          '#aaaaaa',
-          '#00c0c0',
-          '#ebe2c9',
-          '#cfdc99',
-          '#478355',
-          '#909080',
-        ]);
-    }
-
-    get predefineBackgroundColors() {
-        return defPalette.concat([
-          '#ffffff',
-          '#000000',
-          '#202020',
-          '#ebe2c9',
-          '#cfdc99',
-          '#478355',
-          '#a6caf0',
-          '#909080',
-          '#808080',
-          '#c8c8c8',
-        ]);
-    }
-
-    colorPanStyle(type) {
-        let result = 'width: 30px; height: 30px; border: 1px solid black; border-radius: 4px;';
-        switch (type) {
-            case 'text':
-                result += `background-color: ${this.textColor};`
-                break;
-            case 'bg':
-                result += `background-color: ${this.backgroundColor};`
-                break;
-        }
-        return result;
-    }
-
-    needReload() {
-        this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
-    }
-
-    needTextReload() {
-        this.$root.notify.warning('Необходимо обновить книгу в обход кэша, чтобы изменения возымели эффект');
-    }
-
     close() {
         this.$emit('do-action', {action: 'settings'});
     }
@@ -361,153 +165,23 @@ class SettingsPage extends Vue {
     async setDefaults() {
         try {
             if (await this.$root.stdDialog.confirm('Подтвердите установку настроек по умолчанию:', ' ')) {
-                this.form = Object.assign({}, rstore.settingDefaults);
-                for (let prop in rstore.settingDefaults) {
-                    this[prop] = this.form[prop];
-                }
+                this.form = _.cloneDeep(rstore.settingDefaults);
             }
         } catch (e) {
             //
         }
     }
 
-    changeShowToolButton(buttonName) {
-        this.showToolButton = Object.assign({}, this.showToolButton, {[buttonName]: !this.showToolButton[buttonName]});
-    }
-
-    async addProfile() {
-        try {
-            if (Object.keys(this.profiles).length >= 100) {
-                this.$root.stdDialog.alert('Достигнут предел количества профилей', 'Ошибка');
-                return;
-            }
-            const result = await this.$root.stdDialog.prompt('Введите произвольное название для профиля устройства:', ' ', {
-                inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
-            });
-            if (result && result.value) {
-                if (this.profiles[result.value]) {
-                    this.$root.stdDialog.alert('Такой профиль уже существует', 'Ошибка');
-                } else {
-                    const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
-                    this.commit('reader/setAllowProfilesSave', true);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setProfiles', newProfiles);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setAllowProfilesSave', false);
-                    this.currentProfile = result.value;
-                }
-            }
-        } catch (e) {
-            //
-        }
-    }
-
-    async delProfile() {
-        if (!this.currentProfile)
+    tabEvent(event) {
+        if (!event || !event.action)
             return;
 
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.$sanitize(this.currentProfile)}' необратимо.` +
-                    `<br>Все настройки профиля будут потеряны, однако список читаемых книг сохранится.` +
-                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
-                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
-            });
-
-            if (result && result.value && result.value.toLowerCase() == 'да') {
-                if (this.profiles[this.currentProfile]) {
-                    const newProfiles = Object.assign({}, this.profiles);
-                    delete newProfiles[this.currentProfile];
-                    this.commit('reader/setAllowProfilesSave', true);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setProfiles', newProfiles);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setAllowProfilesSave', false);
-                    this.currentProfile = '';
-                }
-            }
-        } catch (e) {
-            //
+        switch (event.action) {
+            case 'set-defaults': this.setDefaults(); break;
+            case 'night-mode': this.$emit('do-action', {action: 'nightMode'}); break;
         }
     }
 
-    async delAllProfiles() {
-        if (!Object.keys(this.profiles).length)
-            return;
-
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
-                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
-                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
-            });
-
-            if (result && result.value && result.value.toLowerCase() == 'да') {
-                this.commit('reader/setAllowProfilesSave', true);
-                await this.$nextTick();//ждем обработчики watch
-                this.commit('reader/setProfiles', {});
-                await this.$nextTick();//ждем обработчики watch
-                this.commit('reader/setAllowProfilesSave', false);
-                this.currentProfile = '';
-            }
-        } catch (e) {
-            //
-        }
-    }
-
-    async copyToClip(text, prefix) {
-        const result = await utils.copyTextToClipboard(text);
-        const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
-        const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
-        if (result)
-            this.$root.notify.success(msg);
-        else
-            this.$root.notify.error(msg);
-    }
-
-    async showServerStorageKey() {
-        this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
-    }
-
-    async enterServerStorageKey(key) {
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
-                    `<br><br>Введите новый ключ доступа:`, ' ', {
-                inputValidator: (str) => {
-                    try {
-                        if (str && utils.fromBase58(str).length == 32) {
-                            return true;
-                        }
-                    } catch (e) {
-                        //
-                    }
-                    return 'Неверный формат ключа'; 
-                },
-                inputValue: (key && _.isString(key) ? key : null),
-            });
-
-            if (result && result.value && utils.fromBase58(result.value).length == 32) {
-                this.commit('reader/setServerStorageKey', result.value);
-            }
-        } catch (e) {
-            //
-        }
-    }
-
-    async generateServerStorageKey() {
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
-                    `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, ' ', {
-                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
-            });
-
-            if (result && result.value && result.value.toLowerCase() == 'да') {
-                this.$root.$emit('generateNewServerStorageKey');
-            }
-        } catch (e) {
-            //
-        }
-
-    }
-
     keyHook(event) {
         if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
             this.close();
@@ -515,6 +189,8 @@ class SettingsPage extends Vue {
         return true;
     }
 }
+
+export default vueComponent(SettingsPage);
 //-----------------------------------------------------------------------------
 </script>
 
@@ -522,15 +198,17 @@ class SettingsPage extends Vue {
 .tab {
     justify-content: initial;
 }
+</style>
 
-.tab-panel {
+<style>
+.sets-tab-panel {
     overflow-x: hidden;
     overflow-y: auto;
     font-size: 90%;
     padding: 0 10px 15px 10px;
 }
 
-.part-header {
+.sets-part-header {
     border-top: 2px solid #bbbbbb;
     font-weight: bold;
     font-size: 110%;
@@ -538,25 +216,7 @@ class SettingsPage extends Vue {
     margin-bottom: 5px;
 }
 
-.item {
-    width: 100%;
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
-.label-1 {
-    width: 75px;
-}
-
-.label-2, .label-3, .label-4, .label-5 {
-    width: 110px;
-}
-
-.label-6 {
-    width: 100px;
-}
-
-.label-1, .label-2, .label-3, .label-4, .label-5, .label-6 {
+.sets-label {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -565,33 +225,14 @@ class SettingsPage extends Vue {
     overflow: hidden;
 }
 
-.text {
-    font-size: 90%;
-    line-height: 130%;
+.sets-item {
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
-.button {
+.sets-button {
     margin: 3px 15px 3px 0;
     padding: 0 5px 0 5px;
 }
-
-.copy-icon {
-    margin-left: 5px;
-    cursor: pointer;
-    font-size: 120%;
-    color: blue;
-}
-
-.input {
-    max-width: 150px;
-}
-
-.no-mp {
-    margin: 0;
-    padding: 0;
-}
-
-.col-left {
-    width: 150px;
-}
 </style>

client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <div class="sets-part-header">
+            Отображение
+        </div>
+
+        <div class="item row no-wrap">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.toolBarMultiLine" size="xs" label="Многострочная панель">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Размещать кнопки на панели в несколько рядов, если они не помещаются в одну строку
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="item row no-wrap">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.toolBarHideOnScroll" size="xs" label="Скрывать/показывать панель при прокрутке">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Скрывать/показывть панель при прокрутке текста вперед/назад
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div class="sets-part-header">
+            Показывать кнопки
+        </div>
+
+        <div v-for="item in rstore.toolButtons" :key="item.name">
+            <div class="sets-item row no-wrap">
+                <div class="sets-label label"></div>
+                <q-checkbox v-model="form.showToolButton[item.name]" size="xs" :label="rstore.readerActions[item.name]" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+import rstore from '../../../../store/modules/reader';
+
+const componentOptions = {
+    watch: {
+    },
+};
+class ToolBarTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    rstore = rstore;
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+}
+
+export default vueComponent(ToolBarTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 75px;
+}
+
+</style>

client/components/Reader/SettingsPage/UpdateTab/UpdateTab.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="fit sets-tab-panel">
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Обновление читалки
+        </div>
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.showNeedUpdateNotify" size="xs">
+                Проверять наличие новой версии
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Напоминать о необходимости обновления страницы<br>
+                    при появлении новой версии читалки
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <!---------------------------------------------->
+        <div class="sets-part-header">
+            Обновление книг
+        </div>
+        <div v-show="!configBucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <div>Сервер обновлений временно не работает</div>
+        </div>
+
+        <div v-show="configBucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.bucEnabled" size="xs">
+                Проверять обновления книг
+            </q-checkbox>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-4 column justify-center items-end q-pr-xs">
+                Разница размеров
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.bucSizeDiff" bg-color="input" style="width: 200px" />
+
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Уведомлять о наличии обновления книги в списке загруженных<br>
+                    при указанной разнице в размерах старого и нового файлов.<br>
+                    Разница указывается в байтах и может быть отрицательной.
+                </q-tooltip>
+            </div>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.bucSetOnNew" size="xs">
+                Автопроверка для вновь загружаемых
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Автоматически устанавливать флаг проверки<br>
+                    обновлений для всех вновь загружаемых книг
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <q-checkbox v-model="form.bucCancelEnabled" size="xs">
+                Отменять проверку через {{ form.bucCancelDays }} дней{{ (form.bucCancelEnabled ? ':' : '') }}
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Снимать флаг проверки с книги, если не было<br>
+                    обновлений в течение {{ form.bucCancelDays }} дней
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+
+        <div v-show="configBucEnabled && form.bucEnabled && form.bucCancelEnabled" class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-4"></div>
+            <div class="col row">
+                <NumInput v-model="form.bucCancelDays" bg-color="input" :min="1" :max="10000" />
+
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Снимать флаг проверки с книги, если не было<br>
+                    обновлений в течение {{ form.bucCancelDays }} дней
+                </q-tooltip>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+import NumInput from '../../../share/NumInput.vue';
+
+const componentOptions = {
+    components: {
+        NumInput
+    },
+};
+class UpdateTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    get configBucEnabled() {
+        return this.$store.state.config.bucEnabled;
+    }
+}
+
+export default vueComponent(UpdateTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 100px;
+}
+</style>

client/components/Reader/SettingsPage/ViewTab/Color/Color.vue

@@ -0,0 +1,332 @@
+<template>
+    <div>
+        <!---------------------------------------------->
+        <div class="hidden sets-part-header">
+            Цвет
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Текст
+            </div>
+            <div class="col row">
+                <q-input
+                    v-model="textColorFiltered"
+                    class="col-left no-mp"
+                    bg-color="input" 
+                    outlined dense
+                    
+                    :rules="['hexColor']"
+                    style="max-width: 150px"
+                >
+                    <template #prepend>
+                        <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.textColor)">
+                            <q-popup-proxy anchor="bottom middle" self="top middle">
+                                <div>
+                                    <q-color
+                                        v-model="form.textColor"
+                                        no-header default-view="palette" :palette="defPalette.predefineTextColors"
+                                    />
+                                </div>
+                            </q-popup-proxy>
+                        </q-icon>
+                    </template>
+                </q-input>
+            </div>
+        </div>
+
+        <div class="q-mt-md" />
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Фон
+            </div>
+            <div class="col row">
+                <q-input 
+                    v-model="bgColorFiltered"
+                    class="col-left no-mp"
+                    bg-color="input" 
+                    outlined dense
+                    
+                    :rules="['hexColor']"
+                    style="max-width: 150px"
+                >
+                    <template #prepend>
+                        <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.backgroundColor)">
+                            <q-popup-proxy anchor="bottom middle" self="top middle">
+                                <div>
+                                    <q-color v-model="form.backgroundColor" no-header default-view="palette" :palette="defPalette.predefineBackgroundColors" />
+                                </div>
+                            </q-popup-proxy>
+                        </q-icon>
+                    </template>
+                </q-input>
+            </div>
+        </div>
+
+        <div class="q-mt-md" />
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Обои
+            </div>
+            <div class="col row items-center">
+                <q-select 
+                    v-model="form.wallpaper"
+                    class="col-left no-mp"
+                    :options="wallpaperOptions"
+                    bg-color="input" 
+                    dropdown-icon="la la-angle-down la-sm"
+                    outlined dense emit-value map-options
+                >
+                    <template #selected-item="scope">
+                        <div>
+                            {{ scope.opt.label }}
+                        </div>
+                        <div v-show="scope.opt.value" class="q-ml-sm" :class="scope.opt.value" style="width: 40px; height: 28px;"></div>
+                    </template>
+
+                    <template #option="scope">
+                        <q-item
+                            v-bind="scope.itemProps"
+                        >
+                            <q-item-section style="min-width: 50px;">
+                                <q-item-label>
+                                    {{ scope.opt.label }}
+                                </q-item-label>
+                            </q-item-section>
+                            <q-item-section v-show="scope.opt.value" :class="scope.opt.value" style="min-width: 70px; min-height: 50px;" />
+                        </q-item>
+                    </template>
+                </q-select>
+
+                <div class="q-px-xs" />
+                <q-btn class="q-ml-sm" round dense color="blue" icon="la la-plus" @click.stop="loadWallpaperFileClick">
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        Добавить файл обоев
+                    </q-tooltip>
+                </q-btn>
+                <q-btn v-show="form.wallpaper.indexOf('user-paper') === 0" class="q-ml-sm" round dense color="blue" icon="la la-minus" @click.stop="delWallpaper">
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        Удалить выбранные обои
+                    </q-tooltip>
+                </q-btn>
+                <q-btn v-show="form.wallpaper.indexOf('user-paper') === 0" class="q-ml-sm" round dense color="blue" icon="la la-file-download" @click.stop="downloadWallpaper">
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        Скачать выбранные обои
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </div>
+
+        <div class="q-mt-sm" />
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col row items-center">
+                <q-checkbox v-model="form.wallpaperIgnoreStatusBar" size="xs" label="Не включать строку статуса в обои" />
+            </div>
+        </div>
+
+        <input ref="file" type="file" style="display: none;" @change="loadWallpaperFile" />
+        <a ref="download" style="display: none;" target="_blank"></a>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../../vueComponent.js';
+
+import _ from 'lodash';
+
+import * as helper from '../helper';
+import defPalette from '../defPalette';
+
+import * as utils from '../../../../../share/utils';
+import * as cryptoUtils from '../../../../../share/cryptoUtils';
+import wallpaperStorage from '../../../share/wallpaperStorage';
+import readerApi from '../../../../../api/reader';
+
+const componentOptions = {
+    components: {
+    },
+    watch: {
+        form: {
+            handler() {
+                this.formChanged();//no await
+            },
+            deep: true,
+        },
+        textColorFiltered(newValue) {
+            if (!this.isFormChanged && this.helper.isHexColor(newValue))
+                this.form.textColor = newValue;
+        },
+        bgColorFiltered(newValue) {
+            if (!this.isFormChanged && this.helper.isHexColor(newValue))
+                this.form.backgroundColor = newValue;
+        },
+    },
+};
+class Color {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    helper = helper;
+    defPalette = defPalette;
+
+    isFormChanged = false;
+    textColorFiltered = '';
+    bgColorFiltered = '';
+
+    created() {
+        this.formChanged();//no await
+    }
+
+    mounted() {
+    }
+
+    async formChanged() {
+        this.isFormChanged = true;
+        try {
+            this.textColorFiltered = this.form.textColor;
+            this.bgColorFiltered = this.form.backgroundColor;
+
+            if (this.form.wallpaper != '' && this.form.pageChangeAnimation == 'flip')
+                this.form.pageChangeAnimation = '';
+        } finally {
+            await this.$nextTick();
+            this.isFormChanged = false;
+        }
+    }
+
+    get wallpaperOptions() {
+        let result = [{label: 'Нет', value: ''}];
+
+        const userWallpapers = _.cloneDeep(this.form.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;
+    }
+
+    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.form.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.form.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.form.userWallpapers = newUserWallpapers;
+                    this.form.wallpaper = cssClass;
+                })();
+            }
+
+            reader.readAsDataURL(file);
+        }
+    }
+
+    async delWallpaper() {
+        if (this.form.wallpaper.indexOf('user-paper') == 0) {
+            const newUserWallpapers = [];
+            for (const wp of this.form.userWallpapers) {
+                if (wp.cssClass != this.form.wallpaper) {
+                    newUserWallpapers.push(wp);
+                }
+            }
+
+            await wallpaperStorage.removeData(this.form.wallpaper);
+
+            this.form.userWallpapers = newUserWallpapers;
+            this.form.wallpaper = '';
+        }
+    }
+
+    async downloadWallpaper() {
+        if (this.form.wallpaper.indexOf('user-paper') != 0)
+            return;
+
+        try {
+            const d = this.$refs.download;
+
+            const dataUrl = await wallpaperStorage.getData(this.form.wallpaper);
+
+            if (!dataUrl)
+                throw new Error('Файл обоев не найден');
+
+            d.href = dataUrl;
+            d.download = `wallpaper-#${this.form.wallpaper.replace('user-paper', '').substring(0, 4)}`;
+
+            d.click();
+        } catch (e) {
+            this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
+        }
+    }
+}
+
+export default vueComponent(Color);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 145px;
+}
+
+.no-mp {
+    margin: 0;
+    padding: 0;
+}
+</style>

client/components/Reader/SettingsPage/ViewTab/Font/Font.vue

@@ -0,0 +1,176 @@
+<template>
+    <div>
+        <!---------------------------------------------->
+        <div class="hidden sets-part-header">
+            Шрифт
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Локальный/веб
+            </div>
+            <div class="col row">
+                <q-select
+                    v-model="form.fontName" class="col-left" bg-color="input" :options="fontsOptions" :disable="form.webFontName != ''"
+                    dropdown-icon="la la-angle-down la-sm"
+                    outlined dense emit-value map-options
+                />
+
+                <div class="q-px-sm" />
+                <q-select
+                    v-model="form.webFontName" class="col" bg-color="input" :options="webFontsOptions"
+                    dropdown-icon="la la-angle-down la-sm"
+                    outlined dense emit-value map-options
+                >
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Веб шрифты дают большое разнообразие,<br>
+                        однако есть шанс, что шрифт будет загружаться<br>
+                        очень медленно или вовсе не загрузится
+                    </q-tooltip>
+                </q-select>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Размер
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.fontSize" bg-color="input" class="col-left" :min="5" :max="200" />
+
+                <div class="col q-pt-xs text-right">
+                    <a href="https://fonts.google.com/?subset=cyrillic" target="_blank">Примеры</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Сдвиг
+            </div>
+            <div class="col row">
+                <NumInput v-model="vertShift" bg-color="input" class="col-left" :min="-100" :max="100">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Сдвиг шрифта по вертикали в процентах от размера.<br>
+                        Отрицательное значение сдвигает вверх, положительное -<br>
+                        вниз. Значение зависит от метрики шрифта.
+                    </q-tooltip>
+                </NumInput>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Стиль
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="fontBold" size="xs" label="Жирный" />
+                <q-checkbox v-model="fontItalic" class="q-ml-sm" size="xs" label="Курсив" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../../vueComponent.js';
+
+import NumInput from '../../../../share/NumInput.vue';
+import rstore from '../../../../../store/modules/reader';
+
+const componentOptions = {
+    components: {
+        NumInput,
+    },
+    watch: {
+        form: {
+            handler() {
+                this.formChanged();//no await
+            },
+            deep: true,
+        },
+        fontBold: function(newValue) {
+            if (!this.isFormChanged)
+                this.form.fontWeight = (newValue ? 'bold' : '');
+        },
+        fontItalic: function(newValue) {
+            if (!this.isFormChanged)
+                this.form.fontStyle = (newValue ? 'italic' : '');
+        },
+        vertShift: function(newValue) {
+            if (!this.isFormChanged) {
+                const font = (this.form.webFontName ? this.form.webFontName : this.form.fontName);
+                if (this.form.fontShifts[font] != newValue || this.form.fontVertShift != newValue) {
+                    this.form.fontShifts = Object.assign({}, this.form.fontShifts, {[font]: newValue});
+                    this.form.fontVertShift = newValue;
+                }
+            }
+        },
+    },
+};
+class Font {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    fontBold = false;
+    fontItalic = false;
+    vertShift = 0;
+    webFonts = [];
+    fonts = [];    
+
+    created() {
+        this.formChanged();//no await
+    }
+
+    mounted() {
+    }
+
+    async formChanged() {
+        this.isFormChanged = true;
+        try {
+            this.fontBold = (this.form.fontWeight == 'bold');
+            this.fontItalic = (this.form.fontStyle == 'italic');
+
+            this.fonts = rstore.fonts;
+            this.webFonts = rstore.webFonts;
+            const font = (this.form.webFontName ? this.form.webFontName : this.form.fontName);
+            this.vertShift = this.form.fontShifts[font] || 0;
+        } finally {
+            await this.$nextTick();
+            this.isFormChanged = false;
+        }
+    }
+
+    get fontsOptions() {
+        let result = [];
+        this.fonts.forEach(font => {
+            result.push({label: (font.label ? font.label : font.name), value: font.name});
+        });
+        return result;
+    }
+
+    get webFontsOptions() {
+        let result = [{label: 'Нет', value: ''}];
+        this.webFonts.forEach(font => {
+            result.push({label: font.name, value: font.name});
+        });
+        return result;
+    }
+
+}
+
+export default vueComponent(Font);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 145px;
+}
+</style>

client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue

@@ -0,0 +1,244 @@
+<template>
+    <div>
+        <!---------------------------------------------->
+        <div class="hidden sets-part-header">
+            Режим
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col row">
+                <q-checkbox v-model="nightMode" size="xs" label="Ночной режим" @update:modelValue="nightModeToggle" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col row">
+                <q-checkbox v-model="form.dualPageMode" size="xs" label="Двухстраничный режим" />
+            </div>
+        </div>
+
+        <div class="sets-part-header">
+            Страницы
+        </div>
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Отступ границ
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.indentLR" bg-color="input" class="col-left" :min="0" :max="2000">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Слева/справа от края экрана
+                    </q-tooltip>
+                </NumInput>
+                <div class="q-px-sm" />
+                <NumInput v-model="form.indentTB" bg-color="input" class="col" :min="0" :max="2000">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Сверху/снизу от края экрана
+                    </q-tooltip>
+                </NumInput>
+            </div>
+        </div>
+
+        <div v-show="form.dualPageMode" class="sets-item row">
+            <div class="sets-label label">
+                Отступ внутри
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.dualIndentLR" bg-color="input" class="col-left" :min="0" :max="2000">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Слева/справа внутри страницы
+                    </q-tooltip>
+                </NumInput>
+            </div>
+        </div>
+
+        <div v-show="form.dualPageMode">
+            <div class="sets-part-header">
+                Разделитель
+            </div>
+
+            <div class="sets-item row no-wrap">
+                <div class="sets-label label">
+                    Цвет
+                </div>
+                <div class="col-left row">
+                    <q-input 
+                        v-model="dualDivColorFiltered"
+                        class="col-left no-mp"
+                        bg-color="input" 
+                        outlined dense
+                        :rules="['hexColor']"
+                        style="max-width: 150px"
+                        :disable="form.dualDivColorAsText"
+                    >
+                        <template #prepend>
+                            <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.dualDivColor)">
+                                <q-popup-proxy anchor="bottom middle" self="top middle">
+                                    <div>
+                                        <q-color
+                                            v-model="form.dualDivColor"
+                                            no-header default-view="palette" :palette="defPalette.predefineTextColors"
+                                        />
+                                    </div>
+                                </q-popup-proxy>
+                            </q-icon>
+                        </template>
+                    </q-input>
+                </div>
+                
+                <div class="q-px-xs" />
+                <q-checkbox v-model="form.dualDivColorAsText" size="xs" label="Как у текста" />
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Прозрачность
+                </div>
+                <div class="col row">
+                    <NumInput v-model="form.dualDivColorAlpha" bg-color="input" class="col-left" :min="0" :max="1" :digits="2" :step="0.1" />
+                </div>
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Ширина (px)
+                </div>
+                <div class="col row">
+                    <NumInput v-model="form.dualDivWidth" bg-color="input" class="col-left" :min="0" :max="100">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Ширина разделителя
+                        </q-tooltip>
+                    </NumInput>
+                </div>
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Высота (%)
+                </div>
+                <div class="col row">
+                    <NumInput v-model="form.dualDivHeight" bg-color="input" class="col-left" :min="0" :max="100">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Высота разделителя
+                        </q-tooltip>
+                    </NumInput>
+                </div>
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Пунктир
+                </div>
+                <div class="col row">
+                    <NumInput v-model="form.dualDivStrokeFill" bg-color="input" class="col-left" :min="0" :max="2000">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Заполнение пунктира
+                        </q-tooltip>
+                    </NumInput>
+                    <div class="q-px-sm" />
+                    <NumInput v-model="form.dualDivStrokeGap" bg-color="input" class="col" :min="0" :max="2000">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Промежуток пунктира
+                        </q-tooltip>
+                    </NumInput>
+                </div>
+            </div>
+
+            <div class="sets-item row">
+                <div class="sets-label label">
+                    Ширина тени
+                </div>
+                <div class="col row">
+                    <NumInput v-model="form.dualDivShadowWidth" bg-color="input" class="col-left" :min="0" :max="100" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../../vueComponent.js';
+import NumInput from '../../../../share/NumInput.vue';
+import * as helper from '../helper';
+import defPalette from '../defPalette';
+
+const componentOptions = {
+    components: {
+        NumInput
+    },
+    watch: {
+        form: {
+            handler() {
+                this.formChanged();//no await
+            },
+            deep: true,
+        },
+        dualDivColorFiltered(newValue) {
+            if (!this.isFormChanged && this.helper.isHexColor(newValue))
+                this.form.dualDivColor = newValue;
+        },
+    }
+};
+class Mode {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    helper = helper;
+    defPalette = defPalette;
+
+    isFormChanged = false;
+    dualDivColorFiltered = '';
+    nightMode = false;
+
+    created() {
+        this.formChanged();//no await
+    }
+
+    mounted() {
+    }
+
+    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 = '';
+
+            this.nightMode = this.form.nightMode;
+        } finally {
+            await this.$nextTick();
+            this.isFormChanged = false;
+        }
+    }
+
+    nightModeToggle() {
+        this.$emit('tab-event', {action: 'night-mode'});
+    }
+}
+
+export default vueComponent(Mode);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 145px;
+}
+
+.no-mp {
+    margin: 0;
+    padding: 0;
+}
+</style>

client/components/Reader/SettingsPage/ViewTab/Status/Status.vue

@@ -0,0 +1,154 @@
+<template>
+    <div>
+        <!---------------------------------------------->
+        <div class="hidden sets-part-header">
+            Строка статуса
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Статус
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.showStatusBar" size="xs" label="Показывать" />
+                <q-checkbox v-show="form.showStatusBar" v-model="form.statusBarTop" class="q-ml-sm" size="xs" label="Вверху/внизу" />
+            </div>
+        </div>
+
+        <div v-show="form.showStatusBar" class="sets-item row no-wrap">
+            <div class="sets-label label">
+                Цвет
+            </div>
+            <div class="col-left row">
+                <q-input
+                    v-model="statusBarColorFiltered"
+                    class="col-left no-mp"
+                    bg-color="input" 
+                    outlined dense
+                    :rules="['hexColor']"
+                    style="max-width: 150px"
+                    :disable="form.statusBarColorAsText"
+                >
+                    <template #prepend>
+                        <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.statusBarColor)">
+                            <q-popup-proxy anchor="bottom middle" self="top middle">
+                                <div>
+                                    <q-color
+                                        v-model="form.statusBarColor"
+                                        no-header default-view="palette" :palette="defPalette.predefineTextColors"
+                                    />
+                                </div>
+                            </q-popup-proxy>
+                        </q-icon>
+                    </template>
+                </q-input>
+            </div>
+            
+            <div class="q-px-xs" />
+            <q-checkbox v-model="form.statusBarColorAsText" size="xs" label="Как у текста" />
+        </div>
+
+        <div v-show="form.showStatusBar" class="sets-item row">
+            <div class="sets-label label">
+                Прозрачность
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.statusBarColorAlpha" bg-color="input" class="col-left" :min="0" :max="1" :digits="2" :step="0.1" />
+            </div>
+        </div>
+
+        <div v-show="form.showStatusBar" class="sets-item row">
+            <div class="sets-label label">
+                Высота
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.statusBarHeight" bg-color="input" class="col-left" :min="5" :max="100" />
+            </div>
+        </div>
+
+        <div v-show="form.showStatusBar" class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col row">
+                <q-checkbox v-model="form.statusBarClickOpen" size="xs" label="Открывать оригинал по клику">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        По клику на автора-название в строке статуса<br>
+                        открывать оригинал произведения в новой вкладке
+                    </q-tooltip>
+                </q-checkbox>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../../vueComponent.js';
+import NumInput from '../../../../share/NumInput.vue';
+import * as helper from '../helper';
+import defPalette from '../defPalette';
+
+const componentOptions = {
+    components: {
+        NumInput,
+    },
+    watch: {
+        form: {
+            handler() {
+                this.formChanged();//no await
+            },
+            deep: true,
+        },
+        statusBarColorFiltered(newValue) {
+            if (!this.isFormChanged && this.helper.isHexColor(newValue))
+                this.form.statusBarColor = newValue;
+        },
+    },
+};
+class Text {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    helper = helper;
+    defPalette = defPalette;
+
+    statusBarColorFiltered = '';
+
+    created() {
+        this.formChanged();//no await
+    }
+
+    mounted() {
+    }
+
+    async formChanged() {
+        this.isFormChanged = true;
+        try {
+            this.statusBarColorFiltered = this.form.statusBarColor;
+        } finally {
+            await this.$nextTick();
+            this.isFormChanged = false;
+        }
+    }
+
+}
+
+export default vueComponent(Text);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 145px;
+}
+
+.no-mp {
+    margin: 0;
+    padding: 0;
+}
+</style>

client/components/Reader/SettingsPage/ViewTab/Text/Text.vue

@@ -0,0 +1,210 @@
+<template>
+    <div>
+        <!---------------------------------------------->
+        <div class="hidden sets-part-header">
+            Текст
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Интервал
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.lineInterval" bg-color="input" class="col-left" :min="0" :max="200" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Параграф
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.p" bg-color="input" class="col-left" :min="0" :max="2000" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Сдвиг
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.textVertShift" bg-color="input" class="col-left" :min="-100" :max="100">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Сдвиг текста по вертикали в процентах от размера шрифта.<br>
+                        Отрицательное значение сдвигает вверх, положительное -<br>
+                        вниз.
+                    </q-tooltip>
+                </NumInput>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Скроллинг
+            </div>
+            <div class="col row">
+                <NumInput v-model="form.scrollingDelay" bg-color="input" class="col-left" :min="1" :max="10000">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Замедление скроллинга в миллисекундах.<br>
+                        Определяет время, за которое текст<br>
+                        прокручивается на одну строку.
+                    </q-tooltip>
+                </NumInput>
+
+                <div class="q-px-sm" />
+                <q-select
+                    v-model="form.scrollingType" bg-color="input" class="col" :options="['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']"
+                    dropdown-icon="la la-angle-down la-sm"
+                    outlined dense emit-value map-options
+                >
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Вид скроллинга: линейный,<br>
+                        ускорение-замедление и пр.
+                    </q-tooltip>
+                </q-select>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Выравнивание
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.textAlignJustify" size="xs" label="По ширине" />
+                <q-checkbox v-model="form.wordWrap" class="q-ml-sm" size="xs" label="Перенос по слогам" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-left column justify-center text-right">
+                Компактность
+            </div>
+            <div class="q-px-sm" />
+            <NumInput v-model="form.compactTextPerc" bg-color="input" class="col" :min="0" :max="100">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Степень компактности текста в процентах.<br>
+                    Чем больше компактность, тем хуже выравнивание<br>
+                    по правому краю.
+                </q-tooltip>
+            </NumInput>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Обработка
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.cutEmptyParagraphs" size="xs" label="Убирать пустые строки" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-left column justify-center text-right">
+                Добавлять пустые
+            </div>
+            <div class="q-px-sm" />
+            <NumInput v-model="form.addEmptyParagraphs" bg-color="input" class="col" :min="0" :max="2" />
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label">
+                Изображения
+            </div>
+            <div class="col row">
+                <q-checkbox v-model="form.showImages" size="xs" label="Показывать" />
+                <q-checkbox v-model="form.showInlineImagesInCenter" class="q-ml-sm" :disable="!form.showImages" size="xs" label="Инлайн в центр" @update:modelValue="needReload">
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Выносить все изображения в центр экрана
+                    </q-tooltip>
+                </q-checkbox>
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col row">
+                <q-checkbox v-model="form.imageFitWidth" size="xs" label="Ширина не более размера страницы" :disable="!form.showImages || form.dualPageMode" />
+            </div>
+        </div>
+
+        <div class="sets-item row">
+            <div class="sets-label label"></div>
+            <div class="col-left column justify-center text-right">
+                Высота не более
+            </div>
+            <div class="q-px-sm" />
+            <NumInput v-model="form.imageHeightLines" bg-color="input" class="col" :min="1" :max="100" :disable="!form.showImages">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Определяет высоту изображения количеством строк.<br>
+                    В случае превышения высоты, изображение будет<br>
+                    уменьшено с сохранением пропорций так, чтобы<br>
+                    помещаться в указанное количество строк.
+                </q-tooltip>
+            </NumInput>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../../vueComponent.js';
+import NumInput from '../../../../share/NumInput.vue';
+
+const componentOptions = {
+    components: {
+        NumInput,
+    },
+    watch: {
+        form: {
+            handler() {
+                this.formChanged();//no await
+            },
+            deep: true,
+        },
+    },
+};
+class Text {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    statusBarColorFiltered = '';
+
+    created() {
+        this.formChanged();//no await
+    }
+
+    mounted() {
+    }
+
+    async formChanged() {
+        this.isFormChanged = true;
+        try {
+            //
+        } finally {
+            await this.$nextTick();
+            this.isFormChanged = false;
+        }
+    }
+
+    needReload() {
+        this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
+    }
+}
+
+export default vueComponent(Text);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 110px;
+}
+
+.col-left {
+    width: 145px;
+}
+</style>

client/components/Reader/SettingsPage/ViewTab/ViewTab.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="fit column">
+        <q-tabs
+            v-model="selectedTab"
+            active-color="app"
+            active-bg-color="app"
+            indicator-color="bg-app"
+            dense
+            no-caps
+            class="no-mp bg-menu-2 text-menu"
+        >
+            <q-tab name="mode" label="Режим" />
+            <q-tab name="color" label="Цвет" />
+            <q-tab name="font" label="Шрифт" />
+            <q-tab name="text" label="Текст" />
+            <q-tab name="status" label="Строка статуса" />
+        </q-tabs>
+
+        <div class="q-mb-sm" />
+
+        <div class="col sets-tab-panel">
+            <Mode v-if="selectedTab == 'mode'" :form="form" @tab-event="tabEvent" />
+            <Color v-if="selectedTab == 'color'" :form="form" />
+            <Font v-if="selectedTab == 'font'" :form="form" />
+            <Text v-if="selectedTab == 'text'" :form="form" />
+            <Status v-if="selectedTab == 'status'" :form="form" />
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+import Mode from './Mode/Mode.vue';
+import Color from './Color/Color.vue';
+import Font from './Font/Font.vue';
+import Text from './Text/Text.vue';
+import Status from './Status/Status.vue';
+
+const componentOptions = {
+    components: {
+        Mode,
+        Color,
+        Font,
+        Text,
+        Status,
+    },
+};
+class ViewTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    selectedTab = 'mode';
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+    tabEvent(event) {
+        if (!event || !event.action)
+            return;
+
+        switch (event.action) {
+            case 'night-mode': this.$emit('tab-event', {action: 'night-mode'}); break;
+        }
+    }
+}
+
+export default vueComponent(ViewTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 75px;
+}
+
+</style>

client/components/Reader/SettingsPage/ViewTab/defPalette.js

@@ -14,4 +14,32 @@ const defPalette = [
     'rgb(255,255,255)', 'rgb(205,205,205)', 'rgb(178,178,178)', 'rgb(153,153,153)', 'rgb(127,127,127)', 'rgb(102,102,102)', 'rgb(76,76,76)', 'rgb(51,51,51)', 'rgb(25,25,25)', 'rgb(0,0,0)'
 ];
 
-export default defPalette;
+export default {
+    predefinePalette: defPalette,
+
+    predefineTextColors: defPalette.concat([
+        '#ffffff',
+        '#000000',
+        '#202020',
+        '#323232',
+        '#aaaaaa',
+        '#00c0c0',
+        '#ebe2c9',
+        '#cfdc99',
+        '#478355',
+        '#909080',
+    ]),
+
+    predefineBackgroundColors: defPalette.concat([
+        '#ffffff',
+        '#000000',
+        '#202020',
+        '#ebe2c9',
+        '#cfdc99',
+        '#478355',
+        '#a6caf0',
+        '#909080',
+        '#808080',
+        '#c8c8c8',
+    ]),
+};

client/components/Reader/SettingsPage/ViewTab/helper.js

@@ -0,0 +1,9 @@
+const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
+
+export function colorPanStyle(bgColor) {
+    return `width: 30px; height: 30px; border: 1px solid black; border-radius: 4px; background-color: ${bgColor}`;
+}
+
+export function isHexColor(value) {
+    return hex.test(value);
+}

client/components/Reader/SettingsPage/include/ButtonsTab.inc

@@ -1,10 +0,0 @@
-<div class="part-header">Показывать кнопки панели</div>
-
-<div class="item row" v-for="item in toolButtons" :key="item.name" v-show="item.name != 'libs' || mode == 'liberama.top'">
-    <div class="label-3"></div>
-    <div class="col row">
-        <q-checkbox size="xs" @input="changeShowToolButton(item.name)"
-            :value="showToolButton[item.name]" :label="rstore.readerActions[item.name]"
-        />
-    </div>
-</div>

client/components/Reader/SettingsPage/include/KeysTab.inc

@@ -1,33 +0,0 @@
-<div class="bg-grey-3 row">
-    <q-tabs
-        v-model="selectedKeysTab"
-        active-color="black"
-        active-bg-color="white"
-        indicator-color="white"
-        dense
-        no-caps
-        class="no-mp bg-grey-4 text-grey-7"
-    >
-        <q-tab name="mouse" label="Мышь/тачскрин" />
-        <q-tab name="keyboard" label="Клавиатура" />
-    </q-tabs>
-</div>
-
-<div class="q-mb-sm"/>
-
-<div class="col tab-panel">
-    <div v-if="selectedKeysTab == 'mouse'">
-        <div class="item row">
-            <div class="label-4"></div>
-            <div class="col row">
-                <q-checkbox size="xs" v-model="clickControl" label="Включить управление кликом" />
-            </div>
-        </div>
-    </div>
-
-    <div v-if="selectedKeysTab == 'keyboard'">
-        <div class="item row">
-            <UserHotKeys v-model="userHotKeys" />
-        </div>
-    </div>
-</div>

client/components/Reader/SettingsPage/include/OthersTab.inc

@@ -1,107 +0,0 @@
-<!---------------------------------------------->
-<div class="part-header">Подсказки, уведомления</div>
-
-<div class="item row no-wrap">
-    <div class="label-6">Подсказка</div>
-    <q-checkbox size="xs" v-model="showClickMapPage" label="Показывать области управления кликом" :disable="!clickControl" >
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать или нет подсказку при каждой загрузке книги
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Подсказка</div>
-    <q-checkbox size="xs" v-model="blinkCachedLoad" label="Предупреждать о загрузке из кэша">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Мерцать сообщением в строке статуса и на кнопке<br>
-            обновления при загрузке книги из кэша
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row no-wrap">
-    <div class="label-6">Уведомление</div>
-    <q-checkbox size="xs" v-model="showServerStorageMessages" label="Показывать сообщения синхронизации">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать уведомления и ошибки от<br>
-            синхронизатора данных с сервером
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Уведомление</div>
-    <q-checkbox size="xs" v-model="showWhatsNewDialog">
-        Показывать уведомление "Что нового"
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать уведомления "Что нового"<br>
-            при каждом выходе новой версии читалки
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Уведомление</div>
-    <q-checkbox size="xs" v-model="showDonationDialog2020">
-        Показывать "Оплатим хостинг вместе"
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Показывать уведомление "Оплатим хостинг вместе"
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<!---------------------------------------------->
-<div class="part-header">Другое</div>
-
-<div class="item row">
-    <div class="label-6">Обработка</div>
-    <div class="col row">
-        <q-checkbox v-model="enableSitesFilter" @input="needTextReload" size="xs" label="Включить html-фильтр для сайтов">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Html-фильтр вырезает лишние элементы со<br>
-                страницы для определенных сайтов, таких как:<br>
-                samlib.ru<br>
-                www.fanfiction.net<br>
-                archiveofourown.org<br>
-                и других
-            </q-tooltip>
-        </q-checkbox>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-6">Обработка</div>
-    <q-checkbox size="xs" v-model="lazyParseEnabled" label="Предварительная подготовка текста">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Включение этой опции позволяет делать предварительную<br>
-            подготовку всего текста в ленивом режиме сразу после<br>
-            загрузки книги. Это может повысить отзывчивость читалки,<br>
-            но нагружает процессор каждый раз при открытии книги.
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Парам. в URL</div>
-    <q-checkbox size="xs" v-model="allowUrlParamBookPos">
-        Добавлять параметр "__p"
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Добавление параметра "__p" в строке браузера<br>
-            позволяет передавать ссылку на книгу в читалке<br>
-            без потери текущей позиции. Однако в этом случае<br>
-            при листании забивается история браузера, т.к. на<br>
-            каждое изменение позиции происходит смена URL.
-        </q-tooltip>
-    </q-checkbox>
-</div>
-
-<div class="item row">
-    <div class="label-6">Копирование</div>
-    <q-checkbox size="xs" v-model="copyFullText" label="Загружать весь текст">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Загружать весь текст в окно<br>
-            копирования текста со страницы
-        </q-tooltip>
-    </q-checkbox>
-</div>

client/components/Reader/SettingsPage/include/PageMoveTab.inc

@@ -1,28 +0,0 @@
-<!---------------------------------------------->
-<div class="part-header">Анимация</div>
-
-<div class="item row">
-    <div class="label-5">Тип</div>
-    <q-select class="col-left" v-model="pageChangeAnimation" :options="pageChangeAnimationOptions"
-        dropdown-icon="la la-angle-down la-sm"
-        outlined dense emit-value map-options
-    />
-</div>
-
-<div class="item row">
-    <div class="label-5">Скорость</div>
-    <NumInput class="col-left" v-model="pageChangeAnimationSpeed" :min="0" :max="100" :disable="pageChangeAnimation == ''"/>
-</div>
-
-<!---------------------------------------------->
-<div class="part-header">Другое</div>
-
-<div class="item row">
-    <div class="label-5">Страница</div>
-    <q-checkbox v-model="keepLastToFirst" size="xs" label="Переносить последнюю строку">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Переносить последнюю строку страницы<br>
-            в начало следующей при листании
-        </q-tooltip>
-    </q-checkbox>
-</div>

client/components/Reader/SettingsPage/include/ProfilesTab.inc

@@ -1,101 +0,0 @@
-<div class="part-header">Управление синхронизацией данных</div>
-
-<div class="item row">
-    <div class="label-1"></div>
-    <q-checkbox class="col" v-model="serverSyncEnabled" size="xs" label="Включить синхронизацию с сервером" />
-</div>
-
-<div v-show="serverSyncEnabled">
-    <!---------------------------------------------->
-    <div class="part-header">Профили устройств</div>
-
-    <div class="item row">
-        <div class="label-1"></div>
-        <div class="text col">
-            Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
-            <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
-        </div>
-    </div>
-     <div class="item row">
-        <div class="label-1">Устройство</div>
-        <div class="col">
-            <q-select v-model="currentProfile" :options="currentProfileOptions"
-                style="width: 275px"
-                dropdown-icon="la la-angle-down la-sm"
-                outlined dense emit-value map-options display-value-sanitize options-sanitize
-            />
-        </div>
-    </div>
-    <div class="item row">
-        <div class="label-1"></div>
-        <q-btn class="button" dense no-caps @click="addProfile">Добавить</q-btn>
-        <q-btn class="button" dense no-caps @click="delProfile">Удалить</q-btn>
-        <q-btn class="button" dense no-caps @click="delAllProfiles">Удалить все</q-btn>
-    </div>
-
-    <!---------------------------------------------->
-    <div class="part-header">Ключ доступа</div>
-    
-    <div class="item row">
-        <div class="label-1"></div>
-        <div class="text col">
-            Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
-            Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
-        </div>
-    </div>
-
-    <div class="item row">
-        <div class="label-1"></div>
-        <q-btn class="button" style="width: 250px" dense no-caps @click="showServerStorageKey">
-                <span v-show="serverStorageKeyVisible">Скрыть</span>
-                <span v-show="!serverStorageKeyVisible">Показать</span>
-                &nbsp;ключ доступа
-         </q-btn>
-    </div>
-
-    <div class="item row">
-        <div class="label-1"></div>
-        <div v-if="!serverStorageKeyVisible" class="col">
-            <hr/>
-            <b>{{ partialStorageKey }}</b> (часть вашего ключа)
-            <hr/>
-        </div>
-        <div v-else class="col" style="line-height: 100%">
-            <hr/>
-            <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;">
-                <b>{{ serverStorageKey }}</b>
-                <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(serverStorageKey, 'Ключ')">
-                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                </q-icon>            
-            </div>
-            <div v-if="mode == 'omnireader' || mode == 'liberama.top'">
-                <br>Переход по ссылке позволит автоматически ввести ключ доступа:
-                <br><div class="text-center" style="margin-top: 5px">
-                    <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
-                    <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(setStorageKeyLink, 'Ссылка')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
-                    </q-icon>            
-                </div>
-            </div>
-            <hr/>
-        </div>
-    </div>
-
-    <div class="item row">
-        <div class="label-1"></div>
-        <q-btn class="button" style="width: 250px" dense no-caps @click="enterServerStorageKey">Ввести ключ доступа</q-btn>
-    </div>
-    <div class="item row">
-        <div class="label-1"></div>
-        <q-btn class="button" style="width: 250px" dense no-caps @click="generateServerStorageKey">Сгенерировать новый ключ</q-btn>
-    </div>
-    <div class="item row">
-        <div class="label-1"></div>
-        <div class="text col">
-            Рекомендуется сохранить ключ в надежном месте, чтобы всегда иметь возможность восстановить настройки,
-            например, после переустановки ОС или чистки/смены браузера.<br>
-            <b>ПРЕДУПРЕЖДЕНИЕ!</b> При утере ключа, НИКТО не сможет восстановить ваши данные, т.к. они сжимаются
-            и шифруются ключом доступа перед отправкой на сервер.
-        </div>
-    </div>
-</div>

client/components/Reader/SettingsPage/include/ResetTab.inc

@@ -1,3 +0,0 @@
-<div class="item row">
-    <q-btn class="col q-ma-sm" dense no-caps @click="setDefaults">Установить по умолчанию</q-btn>
-</div>

client/components/Reader/SettingsPage/include/ViewTab.inc

@@ -1,34 +0,0 @@
-<q-tabs
-    v-model="selectedViewTab"
-    active-color="black"
-    active-bg-color="white"
-    indicator-color="white"
-    dense
-    no-caps
-    class="no-mp bg-grey-4 text-grey-7"
->
-    <q-tab name="color" label="Цвет" />
-    <q-tab name="font" label="Шрифт" />
-    <q-tab name="text" label="Текст" />
-    <q-tab name="status" label="Строка статуса" />
-</q-tabs>
-
-<div class="q-mb-sm"/>
-
-<div class="col tab-panel">
-    <div v-if="selectedViewTab == 'color'">
-        @@include('./ViewTab/Color.inc');
-    </div>
-
-    <div v-if="selectedViewTab == 'font'">
-        @@include('./ViewTab/Font.inc');
-    </div>
-
-    <div v-if="selectedViewTab == 'text'">
-        @@include('./ViewTab/Text.inc');
-    </div>
-
-    <div v-if="selectedViewTab == 'status'">
-        @@include('./ViewTab/Status.inc');
-    </div>
-</div>

client/components/Reader/SettingsPage/include/ViewTab/Color.inc

@@ -1,58 +0,0 @@
-<!---------------------------------------------->
-<div class="hidden part-header">Цвет</div>
-
-<div class="item row">
-    <div class="label-2">Текст</div>
-    <div class="col row">
-        <q-input class="col-left no-mp"
-            outlined dense
-            v-model="textColorFiltered"
-            :rules="['hexColor']"
-            style="max-width: 150px"
-        >
-            <template v-slot:prepend>
-                <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('text')">
-                    <q-popup-proxy anchor="bottom middle" self="top middle">
-                        <div>
-                            <q-color v-model="textColor"
-                                no-header default-view="palette" :palette="predefineTextColors"
-                            />
-                        </div>
-                    </q-popup-proxy>
-                </q-icon>
-            </template>
-        </q-input>
-
-        <span class="col" style="position: relative; top: 35px; left: 15px;">Обои:</span>
-    </div>
-</div>
-
-<div class="q-mt-md"/>
-<div class="item row">
-    <div class="label-2">Фон</div>
-    <div class="col row">
-        <q-input class="col-left no-mp"
-            outlined dense
-            v-model="bgColorFiltered"
-            :rules="['hexColor']"
-            style="max-width: 150px"
-            :disable="wallpaper != ''"
-        >
-            <template v-slot:prepend>
-                <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('bg')">
-                    <q-popup-proxy anchor="bottom middle" self="top middle">
-                        <div>
-                            <q-color v-model="backgroundColor" no-header default-view="palette" :palette="predefineBackgroundColors"/>
-                        </div>
-                    </q-popup-proxy>
-                </q-icon>
-            </template>
-        </q-input>
-
-        <div class="q-px-sm"/>
-        <q-select class="col" v-model="wallpaper" :options="wallpaperOptions"
-            dropdown-icon="la la-angle-down la-sm"
-            outlined dense emit-value map-options
-        />
-    </div>
-</div>

client/components/Reader/SettingsPage/include/ViewTab/Font.inc

@@ -1,56 +0,0 @@
-<!---------------------------------------------->
-<div class="hidden part-header">Шрифт</div>
-
-<div class="item row">
-    <div class="label-2">Локальный/веб</div>
-    <div class="col row">
-        <q-select class="col-left" v-model="fontName" :options="fontsOptions" :disable="webFontName != ''"
-            dropdown-icon="la la-angle-down la-sm"
-            outlined dense emit-value map-options
-        />
-
-        <div class="q-px-sm"/>
-        <q-select class="col" v-model="webFontName" :options="webFontsOptions"
-            dropdown-icon="la la-angle-down la-sm"
-            outlined dense emit-value map-options
-        >
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Веб шрифты дают большое разнообразие,<br>
-                однако есть шанс, что шрифт будет загружаться<br>
-                очень медленно или вовсе не загрузится
-            </q-tooltip>
-        </q-select>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Размер</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="fontSize" :min="5" :max="200"/>
-
-        <div class="col q-pt-xs text-right">
-            <a href="https://fonts.google.com/?subset=cyrillic" target="_blank">Примеры</a>
-        </div>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Сдвиг</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="vertShift" :min="-100" :max="100">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Сдвиг шрифта по вертикали в процентах от размера.<br>
-                Отрицательное значение сдвигает вверх, положительное -<br>
-                вниз. Значение зависит от метрики шрифта.
-            </q-tooltip>
-        </NumInput>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Стиль</div>
-    <div class="col row">
-        <q-checkbox v-model="fontBold" size="xs" label="Жирный" />
-        <q-checkbox class="q-ml-sm" v-model="fontItalic" size="xs" label="Курсив" />
-    </div>
-</div>

client/components/Reader/SettingsPage/include/ViewTab/Status.inc

@@ -1,36 +0,0 @@
-<!---------------------------------------------->
-<div class="hidden part-header">Строка статуса</div>
-
-<div class="item row">
-    <div class="label-2">Статус</div>
-    <div class="col row">
-        <q-checkbox v-model="showStatusBar" size="xs" label="Показывать" />
-        <q-checkbox class="q-ml-sm" v-model="statusBarTop" size="xs" :disable="!showStatusBar" label="Вверху/внизу" />
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Высота</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="statusBarHeight" :min="5" :max="100" :disable="!showStatusBar"/>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Прозрачность</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="statusBarColorAlpha" :min="0" :max="1" :digits="2" :step="0.1" :disable="!showStatusBar"/>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2"></div>
-    <div class="col row">
-        <q-checkbox v-model="statusBarClickOpen" size="xs" label="Открывать оригинал по клику">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                По клику на автора-название в строке статуса<br>
-                открывать оригинал произведения в новой вкладке
-            </q-tooltip>
-        </q-checkbox>
-    </div>
-</div>

client/components/Reader/SettingsPage/include/ViewTab/Text.inc

@@ -1,144 +0,0 @@
-<!---------------------------------------------->
-<div class="hidden part-header">Текст</div>
-
-<div class="item row">
-    <div class="label-2">Интервал</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="lineInterval" :min="0" :max="200"/>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Параграф</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="p" :min="0" :max="2000"/>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Отступ</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="indentLR" :min="0" :max="2000">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Слева/справа
-            </q-tooltip>
-        </NumInput>
-        <div class="q-px-sm"/>
-        <NumInput class="col" v-model="indentTB" :min="0" :max="2000">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Сверху/снизу
-            </q-tooltip>
-        </NumInput>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Сдвиг</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="textVertShift" :min="-100" :max="100">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Сдвиг текста по вертикали в процентах от размера шрифта.<br>
-                Отрицательное значение сдвигает вверх, положительное -<br>
-                вниз.
-            </q-tooltip>
-        </NumInput>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Скроллинг</div>
-    <div class="col row">
-        <NumInput class="col-left" v-model="scrollingDelay" :min="1" :max="10000">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Замедление скроллинга в миллисекундах.<br>
-                Определяет время, за которое текст<br>
-                прокручивается на одну строку.
-            </q-tooltip>
-        </NumInput>
-
-        <div class="q-px-sm"/>
-        <q-select class="col" v-model="scrollingType" :options="['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']"
-            dropdown-icon="la la-angle-down la-sm"
-            outlined dense emit-value map-options
-        >
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Вид скроллинга: линейный,<br>
-                ускорение-замедление и пр.
-            </q-tooltip>
-        </q-select>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2">Выравнивание</div>
-    <div class="col row">
-        <q-checkbox v-model="textAlignJustify" size="xs" label="По ширине" />
-        <q-checkbox class="q-ml-sm" v-model="wordWrap" size="xs" label="Перенос по слогам" />
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2"></div>
-    <div class="col-left column justify-center text-right">
-        Компактность
-    </div>
-    <div class="q-px-sm"/>
-    <NumInput class="col" v-model="compactTextPerc" :min="0" :max="100">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Степень компактности текста в процентах.<br>
-            Чем больше компактность, тем хуже выравнивание<br>
-            по правому краю.
-        </q-tooltip>
-    </NumInput>
-</div>
-
-<div class="item row">
-    <div class="label-2">Обработка</div>
-    <div class="col row">
-        <q-checkbox v-model="cutEmptyParagraphs" size="xs" label="Убирать пустые строки" />
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2"></div>
-    <div class="col-left column justify-center text-right">
-        Добавлять пустые
-    </div>
-    <div class="q-px-sm"/>
-    <NumInput class="col" v-model="addEmptyParagraphs" :min="0" :max="2"/>
-</div>
-
-<div class="item row">
-    <div class="label-2">Изображения</div>
-    <div class="col row">
-        <q-checkbox v-model="showImages" size="xs" label="Показывать" />
-        <q-checkbox class="q-ml-sm" v-model="showInlineImagesInCenter" @input="needReload" :disable="!showImages" size="xs" label="Инлайн в центр">
-            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                Выносить все изображения в центр экрана
-            </q-tooltip>
-        </q-checkbox>
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2"></div>
-    <div class="col row">
-        <q-checkbox v-model="imageFitWidth" :disable="!showImages" size="xs" label="Ширина не более размера экрана" />
-    </div>
-</div>
-
-<div class="item row">
-    <div class="label-2"></div>
-    <div class="col-left column justify-center text-right">
-        Высота не более
-    </div>
-    <div class="q-px-sm"/>
-    <NumInput class="col" v-model="imageHeightLines" :min="1" :max="100" :disable="!showImages">
-        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-            Определяет высоту изображения количеством строк.<br>
-            В случае превышения высоты, изображение будет<br>
-            уменьшено с сохранением пропорций так, чтобы<br>
-            помещаться в указанное количество строк.
-        </q-tooltip>
-    </NumInput>
-</div>

client/components/Reader/TextPage/DrawHelper.js

@@ -2,11 +2,11 @@ import {sleep} from '../../../share/utils';
 
 export default class DrawHelper {
     fontBySize(size) {
-        return `${size}px ${this.fontName}`;
+        return `${size}px '${this.fontName}'`;
     }
 
     fontByStyle(style) {
-        return `${style.italic ? 'italic' : this.fontStyle} ${style.bold ? 'bold' : this.fontWeight} ${this.fontSize}px ${this.fontName}`;
+        return `${style.italic ? 'italic' : this.fontStyle} ${style.bold ? 'bold' : this.fontWeight} ${this.fontSize}px '${this.fontName}'`;
     }
 
     measureText(text, style) {// eslint-disable-line no-unused-vars
@@ -14,11 +14,134 @@ export default class DrawHelper {
         return this.context.measureText(text).width;
     }
 
+    measureTextMetrics(text, style) {// eslint-disable-line no-unused-vars
+        this.context.font = this.fontByStyle(style);
+        return this.context.measureText(text);
+    }
+
     measureTextFont(text, font) {// eslint-disable-line no-unused-vars
         this.context.font = font;
         return this.context.measureText(text).width;
     }
 
+    drawLine(line, lineIndex, baseLineIndex, sel, imageDrawn) {
+        /* line:
+        {
+            begin: Number,
+            end: Number,
+            first: Boolean,
+            last: Boolean,
+            parts: array of {
+                style: {bold: Boolean, italic: Boolean, center: Boolean},
+                image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
+                text: String,
+            }            
+        }*/
+
+        let out = '<div>';
+
+        let lineText = '';
+        let center = false;
+        let space = 0;
+        let j = 0;
+        //формируем строку
+        for (const part of line.parts) {
+            let tOpen = '';
+            tOpen += (part.style.bold ? '<b>' : '');
+            tOpen += (part.style.italic ? '<i>' : '');
+            tOpen += (part.style.sup ? '<span style="vertical-align: baseline; position: relative; line-height: 0; top: -0.3em">' : '');
+            tOpen += (part.style.sub ? '<span style="vertical-align: baseline; position: relative; line-height: 0; top: 0.3em">' : '');
+            if (part.style.note) {
+                const t = part.text;
+                const m = this.measureTextMetrics(t, part.style);
+                const d = this.fontSize - 1.1*m.fontBoundingBoxAscent;
+                const w = m.width;
+                const size = (this.fontSize > 18 ?  this.fontSize : 18);
+                const pad = size/2;
+                const btnW = (w >= size ? w : size) + pad*2;
+
+                tOpen += `<span style="position: relative;">` +
+                    `<span style="position: absolute; background-color: ${this.textColor}; opacity: 0.1; cursor: pointer; pointer-events: auto; ` +
+                    `height: ${this.fontSize + pad*2}px; padding: ${pad}px; left: -${(btnW - w)/2 - pad*0.05}px; top: -${pad + d}px; width: ${btnW}px; border-radius: ${size}px;" ` +
+                    `onclick="onNoteClickLiberama('${part.style.note.id}', ${part.style.note.orig ? 1 : 0})"><span style="visibility: hidden;" class="dborder">${t}</span></span>`;
+            }
+            let tClose = '';
+            tClose += (part.style.note ? '</span>' : '');
+            tClose += (part.style.sub ? '</span>' : '');
+            tClose += (part.style.sup ? '</span>' : '');
+            tClose += (part.style.italic ? '</i>' : '');
+            tClose += (part.style.bold ? '</b>' : '');
+
+            let text = '';
+            if (lineIndex == 0 && this.searching) {
+                for (let k = 0; k < part.text.length; k++) {
+                    text += (sel.has(j) ? `<ins>${part.text[k]}</ins>` : part.text[k]);
+                    j++;
+                }
+            } else
+                text = part.text;
+
+            if (text && text.trim() == '')
+                text = `<span style="white-space: pre">${text}</span>`;
+
+            lineText += `${tOpen}${text}${tClose}`;
+
+            center = center || part.style.center;
+            space = (part.style.space > space ? part.style.space : space);
+
+            //избражения
+            //image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number, w: Number, h: Number},
+            const img = part.image;
+            if (img && img.id && !img.inline && !imageDrawn.has(img.paraIndex)) {
+                const bin = this.parsed.binary[img.id];
+                if (bin) {
+                    let resize = '';                        
+                    if (bin.h > img.h) {
+                        resize = `height: ${img.h}px`;
+                    }
+
+                    const left = (this.w - img.w)/2;
+                    const top = ((img.lineCount*this.lineHeight - img.h)/2) + (lineIndex - baseLineIndex - img.imageLine)*this.lineHeight;
+                    if (img.local) {
+                        lineText += `<img src="data:${bin.type};base64,${bin.data}" style="position: absolute; left: ${left}px; top: ${top}px; ${resize}"/>`;
+                    } else {
+                        lineText += `<img src="${img.id}" style="position: absolute; left: ${left}px; top: ${top}px; ${resize}"/>`;
+                    }
+                }
+                imageDrawn.add(img.paraIndex);
+            }
+
+            if (img && img.id && img.inline) {
+                if (img.local) {
+                    const bin = this.parsed.binary[img.id];
+                    if (bin) {
+                        let resize = '';
+                        if (bin.h > this.fontSize) {
+                            resize = `height: ${this.fontSize - 3}px`;
+                        }
+                        lineText += `<img src="data:${bin.type};base64,${bin.data}" style="${resize}"/>`;
+                    }
+                } else {
+                    //
+                }
+            }
+        }
+
+        const centerStyle = (center ? `text-align: center; text-align-last: center; width: ${this.w}px` : '')
+        if ((line.first || space) && !center) {
+            let p = (line.first ? this.p : 0);
+            p = (space ? p + this.p*space : p);
+            lineText = `<span style="display: inline-block; margin-left: ${p}px"></span>${lineText}`;
+        }
+
+        if (line.last || center)
+            lineText = `<span style="display: inline-block; ${centerStyle}">${lineText}</span>`;
+
+        out += lineText + '</div>';
+
+        return out;
+    }
+
     drawPage(lines, isScrolling) {
         if (!this.lastBook || this.pageLineCount < 1 || !this.book || !lines || !this.parsed.textLength)
             return '';
@@ -26,140 +149,78 @@ export default class DrawHelper {
         const font = this.fontByStyle({});
         const justify = (this.textAlignJustify ? 'text-align: justify; text-align-last: justify;' : '');
 
-        let out = `<div style="width: ${this.w}px; height: ${this.h + (isScrolling ? this.lineHeight : 0)}px;` + 
+        const boxH = this.h + (isScrolling ? this.lineHeight : 0);
+        let out = `<div class="row no-wrap" style="width: ${this.boxW}px; height: ${boxH}px;` + 
             ` position: absolute; top: ${this.fontSize*this.textShift}px; color: ${this.textColor}; font: ${font}; ${justify}` +
             ` line-height: ${this.lineHeight}px; white-space: nowrap;">`;
 
-        let imageDrawn = new Set();
+        let imageDrawn1 = new Set();
+        let imageDrawn2 = new Set();
         let len = lines.length;
         const lineCount = this.pageLineCount + (isScrolling ? 1 : 0);
         len = (len > lineCount ? lineCount : len);
 
-        for (let i = 0; i < len; i++) {
-            const line = lines[i];
-            /* line:
-            {
-                begin: Number,
-                end: Number,
-                first: Boolean,
-                last: Boolean,
-                parts: array of {
-                    style: {bold: Boolean, italic: Boolean, center: Boolean},
-                    image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
-                    text: String,
-                }
-            }*/
-            let sel = new Set();
-            //поиск
-            if (i == 0 && this.searching) {
-                let pureText = '';
-                for (const part of line.parts) {
-                    pureText += part.text;
-                }
-
-                pureText = pureText.toLowerCase();
-                let j = 0;
-                while (1) {// eslint-disable-line no-constant-condition
-                    j = pureText.indexOf(this.needle, j);
-                    if (j >= 0) {
-                        for (let k = 0; k < this.needle.length; k++) {
-                            sel.add(j + k);
-                        }
-                    } else
-                        break;
-                    j++;
-                }
+        //поиск
+        let sel = new Set();
+        if (len > 0 && this.searching) {
+            const line = lines[0];
+            let pureText = '';
+            for (const part of line.parts) {
+                pureText += part.text;
             }
 
-            let lineText = '';
-            let center = false;
-            let space = 0;
+            pureText = pureText.toLowerCase();
             let j = 0;
-            //формируем строку
-            for (const part of line.parts) {
-                let tOpen = (part.style.bold ? '<b>' : '');
-                tOpen += (part.style.italic ? '<i>' : '');
-                let tClose = (part.style.italic ? '</i>' : '');
-                tClose += (part.style.bold ? '</b>' : '');
-
-                let text = '';
-                if (i == 0 && this.searching) {
-                    for (let k = 0; k < part.text.length; k++) {
-                        text += (sel.has(j) ? `<ins>${part.text[k]}</ins>` : part.text[k]);
-                        j++;
+            while (1) {// eslint-disable-line no-constant-condition
+                j = pureText.indexOf(this.needle, j);
+                if (j >= 0) {
+                    for (let k = 0; k < this.needle.length; k++) {
+                        sel.add(j + k);
                     }
                 } else
-                    text = part.text;
-
-                if (text && text.trim() == '')
-                    text = `<span style="white-space: pre">${text}</span>`;
-
-                lineText += `${tOpen}${text}${tClose}`;
-
-                center = center || part.style.center;
-                space = (part.style.space > space ? part.style.space : space);
-
-                //избражения
-                //image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number, w: Number, h: Number},
-                const img = part.image;
-                if (img && img.id && !img.inline && !imageDrawn.has(img.paraIndex)) {
-                    const bin = this.parsed.binary[img.id];
-                    if (bin) {
-                        let resize = '';                        
-                        if (bin.h > img.h) {
-                            resize = `height: ${img.h}px`;
-                        }
-
-                        const left = (this.w - img.w)/2;
-                        const top = ((img.lineCount*this.lineHeight - img.h)/2) + (i - img.imageLine)*this.lineHeight;
-                        if (img.local) {
-                            lineText += `<img src="data:${bin.type};base64,${bin.data}" style="position: absolute; left: ${left}px; top: ${top}px; ${resize}"/>`;
-                        } else {
-                            lineText += `<img src="${img.id}" style="position: absolute; left: ${left}px; top: ${top}px; ${resize}"/>`;
-                        }
-                    }
-                    imageDrawn.add(img.paraIndex);
-                }
-
-                if (img && img.id && img.inline) {
-                    if (img.local) {
-                        const bin = this.parsed.binary[img.id];
-                        if (bin) {
-                            let resize = '';
-                            if (bin.h > this.fontSize) {
-                                resize = `height: ${this.fontSize - 3}px`;
-                            }
-                            lineText += `<img src="data:${bin.type};base64,${bin.data}" style="${resize}"/>`;
-                        }
-                    } else {
-                        //
-                    }
-                }
+                    break;
+                j++;
             }
+        }
 
-            const centerStyle = (center ? `text-align: center; text-align-last: center; width: ${this.w}px` : '')
-            if ((line.first || space) && !center) {
-                let p = (line.first ? this.p : 0);
-                p = (space ? p + this.p*space : p);
-                lineText = `<span style="display: inline-block; margin-left: ${p}px"></span>${lineText}`;
+        //отрисовка строк
+        if (!this.dualPageMode) {
+            out += `<div class="fit">`;
+            for (let i = 0; i < len; i++) {
+                out += this.drawLine(lines[i], i, 0, sel, imageDrawn1);
             }
+            out += `</div>`;
+        } else {
+            //левая страница
+            out += `<div style="width: ${this.w}px; margin-left: ${this.dualIndentLR}px; position: relative;">`;
+            const l2 = (this.pageRowsCount > len ? len : this.pageRowsCount);
+            for (let i = 0; i < l2; i++) {
+                out += this.drawLine(lines[i], i, 0, sel, imageDrawn1);
+            }
+            out += '</div>';
 
-            if (line.last || center)
-                lineText = `<span style="display: inline-block; ${centerStyle}">${lineText}</span>`;
+            //разделитель
+            out += `<div style="width: ${this.dualIndentLR*2}px;"></div>`;
 
-            out += (i > 0 ? '<br>' : '') + lineText;
+            //правая страница
+            out += `<div style="width: ${this.w}px; margin-right: ${this.dualIndentLR}px; position: relative;">`;
+            for (let i = l2; i < len; i++) {
+                out += this.drawLine(lines[i], i, l2, sel, imageDrawn2);
+            }
+            out += '</div>';
         }
 
         out += '</div>';
         return out;
     }
 
-    drawPercentBar(x, y, w, h, font, fontSize, bookPos, textLength) {
+    drawPercentBar(x, y, w, h, font, fontSize, bookPos, textLength, imageNum, imageLength) {
         const pad = 3;
         const fh = h - 2*pad;
         const fh2 = fh/2;
 
-        const t1 = `${Math.floor((bookPos + 1)/1000)}k/${Math.floor(textLength/1000)}k`;
+        const tImg = (imageNum > 0 ? ` (${imageNum}/${imageLength})` : '');
+        const t1 = `${Math.floor((bookPos + 1)/1000)}/${Math.floor(textLength/1000)}${tImg}`;
         const w1 = this.measureTextFont(t1, font) + fh2;
         const read = (bookPos + 1)/textLength;
         const t2 = `${(read*100).toFixed(2)}%`;
@@ -172,8 +233,8 @@ export default class DrawHelper {
         
         if (w1 + w2 + w3 <= w && w3 > (10 + fh2)) {
             const barWidth = w - w1 - w2 - fh2;
-            out += this.strokeRect(x + w1, y + pad, barWidth, fh - 2, this.statusBarColor);
-            out += this.fillRect(x + w1 + 2, y + pad + 2, (barWidth - 4)*read, fh - 6, this.statusBarColor);
+            out += this.strokeRect(x + w1, y + pad, barWidth, fh - 2, this.statusBarRgbaColor);
+            out += this.fillRect(x + w1 + 2, y + pad + 2, (barWidth - 4)*read, fh - 6, this.statusBarRgbaColor);
         }
 
         if (w1 <= w)
@@ -182,16 +243,16 @@ export default class DrawHelper {
         return out;
     }
 
-    drawStatusBar(statusBarTop, statusBarHeight, bookPos, textLength, title) {
+    drawStatusBar(statusBarTop, statusBarHeight, bookPos, textLength, title, imageNum, imageLength) {
 
         let out = `<div class="layout" style="` + 
             `width: ${this.realWidth}px; height: ${statusBarHeight}px; ` + 
-            `color: ${this.statusBarColor}">`;
+            `color: ${this.statusBarRgbaColor}">`;
 
         const fontSize = statusBarHeight*0.75;
         const font = 'bold ' + this.fontBySize(fontSize);
 
-        out += this.fillRect(0, (statusBarTop ? statusBarHeight : 0), this.realWidth, 1, this.statusBarColor);
+        out += this.fillRect(0, (statusBarTop ? statusBarHeight : 0), this.realWidth, 1, this.statusBarRgbaColor);
 
         const date = new Date();
         const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
@@ -200,7 +261,7 @@ export default class DrawHelper {
 
         out += this.fillTextShift(this.fittingString(title, this.realWidth/2 - fontSize - 3, font), fontSize, 2, font, fontSize);
 
-        out += this.drawPercentBar(this.realWidth/2, 2, this.realWidth/2 - timeW - 2*fontSize, statusBarHeight, font, fontSize, bookPos, textLength);
+        out += this.drawPercentBar(this.realWidth/2 + fontSize, 2, this.realWidth/2 - timeW - 3*fontSize, statusBarHeight, font, fontSize, bookPos, textLength, imageNum, imageLength);
         
         out += '</div>';
         return out;
@@ -267,7 +328,7 @@ export default class DrawHelper {
     }
 
     async doPageAnimationRightShift(page1, page2, duration, isDown, animation1Finish) {
-        const s = this.w + this.fontSize;
+        const s = this.boxW + this.fontSize;
 
         if (isDown) {
             page1.style.transform = `translateX(${s}px)`;

client/components/Reader/TextPage/TextPage.css

@@ -0,0 +1,93 @@
+@keyframes page1-animation-thaw {
+    0%   { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@keyframes page2-animation-thaw {
+    0%   { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+.paper1 {
+    background: url("images/paper1.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper2 {
+    background: url("images/paper2.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper3 {
+    background: url("images/paper3.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper4 {
+    background: url("images/paper4.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper5 {
+    background: url("images/paper5.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper6 {
+    background: url("images/paper6.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper7 {
+    background: url("images/paper7.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper8 {
+    background: url("images/paper8.jpg") center;
+    background-size: 100% 100%;
+}
+
+.paper9 {
+    background: url("images/paper9.jpg");
+}
+
+.paper10 {
+    background: url("images/paper10.png") center;
+    background-size: 100% 100%;
+}
+
+.paper11 {
+    background: url("images/paper11.png") center;
+    background-size: 100% 100%;
+}
+
+.paper12 {
+    background: url("images/paper12.png") center;
+    background-size: 100% 100%;
+}
+
+.paper13 {
+    background: url("images/paper13.png") center;
+    background-size: 100% 100%;
+}
+
+.paper14 {
+    background: url("images/paper14.png") center;
+    background-size: 100% 100%;
+}
+
+.paper15 {
+    background: url("images/paper15.png") center;
+    background-size: 100% 100%;
+}
+
+.paper16 {
+    background: url("images/paper16.png") center;
+    background-size: 100% 100%;
+}
+
+.paper17 {
+    background: url("images/paper17.png") center;
+    background-size: 100% 100%;
+}

client/components/Reader/share/bookManager.js

@@ -1,21 +1,28 @@
 import localForage from 'localforage';
+import path from 'path-browserify';
 import _ from 'lodash';
 
-import * as utils from '../../../share/utils';
 import BookParser from './BookParser';
+import readerApi from '../../../api/reader';
+import coversStorage from './coversStorage';
+import * as utils from '../../../share/utils';
 
-const maxDataSize = 300*1024*1024;//compressed bytes
+const maxDataSize = 500*1024*1024;//compressed bytes
+const maxRecentLength = 5000;
 
+//локальный кэш метаданных книг, ограничение maxDataSize
 const bmMetaStore = localForage.createInstance({
     name: 'bmMetaStore'
 });
 
+//локальный кэш самих книг, ограничение maxDataSize
 const bmDataStore = localForage.createInstance({
     name: 'bmDataStore'
 });
 
-const bmRecentStore = localForage.createInstance({
-    name: 'bmRecentStore'
+//список недавно открытых книг
+const bmRecentStoreNew = localForage.createInstance({
+    name: 'bmRecentStoreNew'
 });
 
 class BookManager {
@@ -25,15 +32,41 @@ class BookManager {
 
         this.eventListeners = [];
         this.books = {};
-        this.recent = {};
 
-        this.recentLast = await bmRecentStore.getItem('recent-last');
-        if (this.recentLast) {
-            this.recent[this.recentLast.key] = this.recentLast;
-            const meta = await bmMetaStore.getItem(`bmMeta-${this.recentLast.key}`);
-            if (_.isObject(meta)) {
-                this.books[meta.key] = meta;
+        this.recent = {};
+        this.saveRecent = _.debounce(() => {
+            bmRecentStoreNew.setItem('recent', this.recent);
+        }, 300, {maxWait: 800});
+
+        this.saveRecentItem = _.debounce(() => {
+            bmRecentStoreNew.setItem('recent-item', this.recentItem);
+            this.recentRev = (this.recentRev < maxRecentLength ? this.recentRev + 1 : 1);
+            bmRecentStoreNew.setItem('rev', this.recentRev);
+        }, 200, {maxWait: 300});
+
+        //загрузка bmRecentStore
+        this.recentRev = await bmRecentStoreNew.getItem('rev') || 0;
+        if (this.recentRev) {
+            this.recent = await bmRecentStoreNew.getItem('recent');
+            if (!this.recent)
+                this.recent = {};
+
+            this.recentItem = await bmRecentStoreNew.getItem('recent-item');
+            if (this.recentItem)
+                this.recent[this.recentItem.key] = this.recentItem;
+
+            //конвертируем в новые ключи
+            await this.convertRecent();
+
+            this.recentLastKey = await bmRecentStoreNew.getItem('recent-last-key');
+            if (this.recentLastKey) {
+                const meta = await bmMetaStore.getItem(`bmMeta-${this.recentLastKey}`);
+                if (_.isObject(meta)) {
+                    this.books[meta.key] = meta;
+                }
             }
+
+            await this.cleanRecentBooks();
         }
 
         this.recentChanged = true;
@@ -41,9 +74,41 @@ class BookManager {
         this.loadStored();//no await
     }
 
-    //Долгая асинхронная загрузка из хранилища.
-    //Хранение в отдельных записях дает относительно
-    //нормальное поведение при нескольких вкладках с читалкой в браузере.
+    //TODO: убрать в 2025г
+    async convertRecent() {
+        const converted = await bmRecentStoreNew.getItem('recent-converted');
+
+        if (converted)
+            return;
+
+        const newRecent = {};
+        for (const book of Object.values(this.recent)) {
+
+            if (!book.path) {
+                continue;
+            }
+
+            const newKey = this.keyFromPath(book.path);
+
+            newRecent[newKey] = _.cloneDeep(book);
+            newRecent[newKey].key = newKey;
+            if (!newRecent[newKey].loadTime)
+                newRecent[newKey].loadTime = newRecent[newKey].addTime;
+        }
+
+        this.recent = newRecent;
+
+        //console.log(converted);
+        (async() => {
+            await utils.sleep(3000);
+            this.saveRecent();
+            this.emit('recent-changed');
+            this.emit('set-recent');
+            await bmRecentStoreNew.setItem('recent-converted', true);
+        })();
+    }
+
+    //Ленивая асинхронная загрузка bmMetaStore
     async loadStored() {
         //даем время для загрузки последней читаемой книги, чтобы не блокировать приложение
         await utils.sleep(2000);
@@ -70,32 +135,7 @@ class BookManager {
             }
         }
 
-        let key = null;
-        len = await bmRecentStore.length();
-        for (let i = len - 1; i >= 0; i--) {
-            key = await bmRecentStore.key(i);
-            if (key) {
-                let r = await bmRecentStore.getItem(key);
-                if (_.isObject(r) && r.key) {
-                    this.recent[r.key] = r;
-                }
-            } else  {
-                await bmRecentStore.removeItem(key);
-            }
-        }
-
-        //размножение для дебага
-        /*if (key) {
-            for (let i = 0; i < 1000; i++) {
-                const k = this.keyFromUrl(i.toString());
-                this.recent[k] = Object.assign({}, _.cloneDeep(this.recent[key]), {key: k, touchTime: Date.now() - 1000000, url: utils.randomHexString(300)});
-            }
-        }*/
-        
         await this.cleanBooks();
-        await this.cleanRecentBooks();
-
-        this.recentChanged = true;
         this.loaded = true;
         this.emit('load-stored-finish');
     }
@@ -125,7 +165,7 @@ class BookManager {
     }
 
     async deflateWithProgress(data, callback) {
-        const chunkSize = 128*1024;
+        const chunkSize = 512*1024;
         const deflator = new utils.pako.Deflate({level: 5});
 
         let chunkTotal = 1 + Math.floor(data.length/chunkSize);
@@ -159,7 +199,7 @@ class BookManager {
     }
 
     async inflateWithProgress(data, callback) {
-        const chunkSize = 64*1024;
+        const chunkSize = 512*1024;
         const inflator = new utils.pako.Inflate({to: 'string'});
 
         let chunkTotal = 1 + Math.floor(data.length/chunkSize);
@@ -194,8 +234,12 @@ class BookManager {
 
     async addBook(newBook, callback) {        
         let meta = {url: newBook.url, path: newBook.path};
-        meta.key = this.keyFromUrl(meta.url);
-        meta.addTime = Date.now();
+
+        if (newBook.downloadSize !== undefined && newBook.downloadSize >= 0)
+            meta.downloadSize = newBook.downloadSize;
+
+        meta.key = this.keyFromPath(meta.path);
+        meta.addTime = Date.now();//время добавления в кеш
 
         const cb = (perc) => {
             const p = Math.round(30*perc/100);
@@ -230,15 +274,15 @@ class BookManager {
     async hasBookParsed(meta) {
         if (!this.books) 
             return false;
-        if (!meta.url)
+        if (!meta.path)
             return false;
         if (!meta.key)
-            meta.key = this.keyFromUrl(meta.url);
+            meta.key = this.keyFromPath(meta.path);
 
         let book = this.books[meta.key];
 
         if (!book && !this.loaded) {
-            book = await bmDataStore.getItem(`bmMeta-${meta.key}`);
+            book = await bmMetaStore.getItem(`bmMeta-${meta.key}`);
             if (book)
                 this.books[meta.key] = book;
         }
@@ -248,22 +292,21 @@ class BookManager {
 
     async getBook(meta, callback) {
         let result = undefined;
+
+        if (!meta.path)
+            return;
+
         if (!meta.key)
-            meta.key = this.keyFromUrl(meta.url);
+            meta.key = this.keyFromPath(meta.path);
 
         result = this.books[meta.key];
 
         if (!result) {
-            result = await bmDataStore.getItem(`bmMeta-${meta.key}`);
+            result = await bmMetaStore.getItem(`bmMeta-${meta.key}`);
             if (result)
                 this.books[meta.key] = result;
         }
 
-        //Если файл на сервере изменился, считаем, что в кеше его нету
-        if (meta.path && result && meta.path != result.path) {
-            return;
-        }
-
         if (result && !result.parsed) {
             let data = await bmDataStore.getItem(`bmData-${meta.key}`);
             callback(5);
@@ -308,9 +351,38 @@ class BookManager {
         const parsed = new BookParser(this.settings);
 
         const parsedMeta = await parsed.parse(data, callback);
+
+        //cover page
+        let coverPageUrl = '';
+        if (parsed.coverPageId && parsed.binary[parsed.coverPageId]) {
+            const bin = parsed.binary[parsed.coverPageId];
+            let dataUrl = `data:${bin.type};base64,${bin.data}`;
+            try {
+                dataUrl = await utils.resizeImage(dataUrl, 160, 160, 0.94);
+            } catch (e) {
+                console.error(e);
+            }
+
+            coverPageUrl = readerApi.makeUrlFromBuf(dataUrl);
+
+            //далее асинхронно 
+            (async() => {
+                //отправим dataUrl на сервер в /upload
+                try {
+                    await readerApi.uploadFileBuf(dataUrl, coverPageUrl);
+                } catch (e) {
+                    console.error(e);
+                }
+
+                //сохраним в storage
+                await coversStorage.setData(coverPageUrl, dataUrl);
+            })();
+        }
+
         const result = Object.assign({}, meta, parsedMeta, {
             length: data.length,
             textLength: parsed.textLength,
+            coverPageUrl,
             parsed
         });
 
@@ -323,95 +395,183 @@ class BookManager {
         return result;
     }
 
-    keyFromUrl(url) {
+    /*keyFromUrl(url) {
         return utils.stringToHex(url);
+    }*/
+
+    keyFromPath(bookPath) {
+        return path.basename(bookPath);
     }
 
+    keysEqual(bookPath1, bookPath2) {
+        if (bookPath1 === undefined || bookPath2 === undefined)
+            return false;
+        
+        return (this.keyFromPath(bookPath1) === this.keyFromPath(bookPath2));
+    }
     //-- recent --------------------------------------------------------------
-    async setRecentBook(value) {
-        const result = this.metaOnly(value);
-        result.touchTime = Date.now();
-        result.deleted = 0;
-
-        if (this.recent[result.key] && this.recent[result.key].deleted) {
-            //восстановим из небытия пользовательские данные
-            if (!result.bookPos)
-                result.bookPos = this.recent[result.key].bookPos;
-            if (!result.bookPosSeen)
-                result.bookPosSeen = this.recent[result.key].bookPosSeen;
+    async recentSetItem(item = null, skipCheck = false) {
+        const rev = await bmRecentStoreNew.getItem('rev');
+        if (rev != this.recentRev && !skipCheck) {//если изменение произошло в другой вкладке барузера
+            const newRecent = await bmRecentStoreNew.getItem('recent');
+            Object.assign(this.recent, newRecent);
+            this.recentItem = await bmRecentStoreNew.getItem('recent-item');
+            this.recentRev = rev;
         }
 
-        this.recent[result.key] = result;
+        const prevKey = (this.recentItem ? this.recentItem.key : '');
+        if (item) {
+            this.recent[item.key] = item;
+            this.recentItem = item;
+        } else {
+            this.recentItem = null;
+        }
 
-        await bmRecentStore.setItem(result.key, result);
+        this.saveRecentItem();
 
-        this.recentLast = result;
-        await bmRecentStore.setItem('recent-last', this.recentLast);
+        if (!item || prevKey != item.key) {
+            this.saveRecent();
+        }
 
         this.recentChanged = true;
-        this.emit('recent-changed', result.key);
+
+        if (item) {
+            this.emit('recent-changed', item.key);
+        } else {
+            this.emit('recent-changed');
+        }
+    }
+
+    async recentSetLastKey(key) {
+        this.recentLastKey = key;
+        await bmRecentStoreNew.setItem('recent-last-key', this.recentLastKey);
+    }
+
+    async setRecentBook(value) {
+        let result = this.metaOnly(value);
+        result.touchTime = Date.now();//время последнего чтения
+        if (!result.loadTime)
+            result.loadTime = Date.now();//время загрузки файла
+
+        result.deleted = 0;
+
+        if (this.recent[result.key]) {
+            result = Object.assign({}, this.recent[result.key], result);
+        }
+
+        await this.recentSetLastKey(result.key);
+        await this.recentSetItem(result);
         return result;
     }
 
     async getRecentBook(value) {
-        let result = this.recent[value.key];
-        if (!result) {
-            result = await bmRecentStore.getItem(value.key);
-            if (result)
-                this.recent[value.key] = result;
+        return this.recent[value.key];
+    }
+/*
+    async delRecentBook(value, delFlag = 1) {
+        const item = this.recent[value.key];
+        item.deleted = delFlag;
+
+        if (this.recentLastKey == value.key) {
+            await this.recentSetLastKey(null);
+        }
+
+        await this.recentSetItem(item);
+        this.emit('recent-deleted', value.key);
+    }
+*/
+    async delRecentBooks(values, delFlag = 1) {
+        for (const value of values) {
+            const item = this.recent[value.key];
+            item.deleted = delFlag;
+
+            if (this.recentLastKey == value.key) {
+                await this.recentSetLastKey(null);
+            }
+
+            await this.recentSetItem(item);
+        }
+        
+        this.emit('recent-deleted');
+    }
+/*
+    async restoreRecentBook(value) {
+        const item = this.recent[value.key];
+        item.deleted = 0;
+
+        await this.recentSetItem(item);
+    }
+*/
+    async restoreRecentBooks(values) {
+        for (const value of values) {
+            const item = this.recent[value.key];
+            item.deleted = 0;
+
+            await this.recentSetItem(item);
         }
-        return result;
     }
 
-    async delRecentBook(value) {
-        this.recent[value.key].deleted = 1;
-        await bmRecentStore.setItem(value.key, this.recent[value.key]);
+    async setCheckBuc(value, checkBuc) {
+        const item = this.recent[value.key];
 
-        if (this.recentLast.key == value.key) {
-            this.recentLast = null;
-            await bmRecentStore.setItem('recent-last', this.recentLast);
+        const updateItems = [];
+        if (item) {
+            if (item.sameBookKey !== undefined) {
+                const sorted = this.getSortedRecent();
+                for (const book of sorted) {
+                    if (!book.deleted && book.sameBookKey === item.sameBookKey)
+                        updateItems.push(book);
+                }
+            } else {
+                updateItems.push(item);
+            }
+        }
+
+        const now = Date.now();
+        for (const book of updateItems) {
+            book.checkBuc = checkBuc;
+            if (checkBuc)
+                book.checkBucTime = now;
+            await this.recentSetItem(book);
         }
-        this.emit('recent-deleted', value.key);
-        this.emit('recent-changed', value.key);
     }
 
     async cleanRecentBooks() {
         const sorted = this.getSortedRecent();
 
         let isDel = false;
-        for (let i = 1000; i < sorted.length; i++) {
-            await bmRecentStore.removeItem(sorted[i].key);
+        for (let i = maxRecentLength; i < sorted.length; i++) {
             delete this.recent[sorted[i].key];
-            await bmRecentStore.removeItem(sorted[i].key);
             isDel = true;
         }
 
         this.sortedRecentCached = null;
 
         if (isDel)
-            this.emit('recent-changed');
+            await this.recentSetItem();
         return isDel;
     }
 
     mostRecentBook() {
-        if (this.recentLast) {
-            return this.recentLast;
+        if (this.recentLastKey) {
+            return this.recent[this.recentLastKey];
         }
-        const oldRecentLast = this.recentLast;
+        const oldKey = this.recentLastKey;
 
         let max = 0;
         let result = null;
-        for (let key in this.recent) {
+        for (const key in this.recent) {
             const book = this.recent[key];
             if (!book.deleted && book.touchTime > max) {
                 max = book.touchTime;
                 result = book;
             }
         }
-        this.recentLast = result;
-        bmRecentStore.setItem('recent-last', this.recentLast);//no await
+        
+        const newRecentLastKey = (result ? result.key : null);
+        this.recentSetLastKey(newRecentLastKey);//no await
 
-        if (this.recentLast !== oldRecentLast)
+        if (newRecentLastKey !== oldKey)
             this.emit('recent-changed');
 
         return result;
@@ -431,6 +591,43 @@ class BookManager {
         return result;
     }
 
+    findRecentByUrlAndPath(url, bookPath) {
+        if (bookPath) {
+            const key = this.keyFromPath(bookPath);
+            const book = this.recent[key];
+            if (book && !book.deleted)
+                return book;
+        }
+
+        let max = 0;
+        let result = null;
+
+        for (const key in this.recent) {
+            const book = this.recent[key];
+            if (!book.deleted && book.url == url && book.loadTime > max) {
+                max = book.loadTime;
+                result = book;
+            }
+        }
+
+        return result;
+    }
+
+    findRecentBySameBookKey(sameKey) {
+        let max = 0;
+        let result = null;
+
+        for (const key in this.recent) {
+            const book = this.recent[key];
+            if (!book.deleted && book.sameBookKey == sameKey && book.loadTime > max) {
+                max = book.loadTime;
+                result = book;
+            }
+        }
+
+        return result;
+    }
+
     async setRecent(value) {
         const mergedRecent = _.cloneDeep(this.recent);
 
@@ -442,24 +639,12 @@ class BookManager {
                 delete mergedRecent[i];
         }
         
-        //"ленивое" обновление хранилища
-        (async() => {
-            for (const rec of Object.values(mergedRecent)) {
-                if (rec.key) {
-                    await bmRecentStore.setItem(rec.key, rec);
-                    await utils.sleep(1);
-                }
-            }
-        })();
-
         this.recent = mergedRecent;
 
-        this.recentLast = null;
-        await bmRecentStore.setItem('recent-last', this.recentLast);
+        await this.recentSetLastKey(null);
+        await this.recentSetItem(null, true);
 
-        this.recentChanged = true;
         this.emit('set-recent');
-        this.emit('recent-changed');
     }
 
     addEventListener(listener) {

client/components/Reader/share/coversStorage.js

@@ -0,0 +1,61 @@
+import localForage from 'localforage';
+//import _ from 'lodash';
+import * as utils from '../../../share/utils';
+
+const maxDataSize = 100*1024*1024;
+
+const coversStore = localForage.createInstance({
+    name: 'coversStorage'
+});
+
+class CoversStorage {
+    constructor() {
+    }
+
+    async init() {
+        this.cleanCovers(); //no await
+    }
+
+    async setData(key, data) {
+        await coversStore.setItem(key, {addTime: Date.now(), data});
+    }
+
+    async getData(key) {
+        const item = await coversStore.getItem(key);
+        return (item ? item.data : undefined);
+    }
+
+    async removeData(key) {
+        await coversStore.removeItem(key);
+    }
+
+    async cleanCovers() {
+        await utils.sleep(10000);
+
+        while (1) {// eslint-disable-line no-constant-condition
+            let size = 0;
+            let min = Date.now();
+            let toDel = null;
+            for (const key of (await coversStore.keys())) {
+                const item = await coversStore.getItem(key);
+
+                size += item.data.length;
+
+                if (item.addTime < min) {
+                    toDel = key;
+                    min = item.addTime;
+                }
+            }
+
+
+            if (size > maxDataSize && toDel) {
+                await this.removeData(toDel);
+            } else {
+                break;
+            }
+        }
+    }
+
+}
+
+export default new CoversStorage();

client/components/Reader/share/wallpaperStorage.js

@@ -0,0 +1,44 @@
+import localForage from 'localforage';
+//import _ from 'lodash';
+
+const wpStore = localForage.createInstance({
+    name: 'wallpaperStorage'
+});
+
+class WallpaperStorage {
+    constructor() {
+        this.cachedKeys = [];
+    }
+
+    async init() {
+        this.cachedKeys = await wpStore.keys();
+    }
+
+    async getLength() {
+        return await wpStore.length();
+    }
+
+    async setData(key, data) {
+        await wpStore.setItem(key, data);
+        this.cachedKeys = await wpStore.keys();
+    }
+
+    async getData(key) {
+        return await wpStore.getItem(key);
+    }
+
+    async removeData(key) {
+        await wpStore.removeItem(key);
+        this.cachedKeys = await wpStore.keys();
+    }
+
+    async getKeys() {
+        return await wpStore.keys();
+    }
+
+    keyExists(key) {//не асинхронная
+        return this.cachedKeys.includes(key);
+    }
+}
+
+export default new WallpaperStorage();

client/components/Reader/versionHistory.js

@@ -1,31 +1,407 @@
 export const versionHistory = [
 {
+    version: '1.2.3',
+    releaseDate: '2024-08-02',
+    showUntil: '2024-08-01',
+    content:
+`
+<ul>
+    <li>исправление багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '1.2.2',
+    releaseDate: '2024-07-28',
+    showUntil: '2024-07-27',
+    content:
+`
+<ul>
+    <li>добавлено отображение примечаний на месте, по клику на сноске (#50)</li>
+    <li>исправление багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '1.2.0',
+    releaseDate: '2024-03-25',
+    showUntil: '2024-03-24',
+    content:
+`
+<ul>
+    <li>в списке загруженных, книга в архив (из архива) переносится теперь со всей группой своих версий</li>
+    <li>добавлена возможность задавать в конфиге любую ссылку для кнопки "Сетевая библиотека", параметр networkLibraryLink (#47)</li>
+</ul>
+
+`
+},
+
+{
+    version: '1.1.3',
+    releaseDate: '2023-02-06',
+    showUntil: '2023-02-05',
+    content:
+`
+<ul>
+    <li>исправление багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '1.1.2',
+    releaseDate: '2023-01-22',
+    showUntil: '2023-01-21',
+    content:
+`
+<ul>
+    <li>исправление багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '1.1.1',
+    releaseDate: '2023-01-11',
+    showUntil: '2023-01-15',
+    content:
+`
+<ul>
+    <li>добавлена опция "Ночной режим" и кнопка на панель</li>
+    <li>исправление багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '1.0.0',
+    releaseDate: '2022-12-18',
+    showUntil: '2022-12-25',
+    content:
+`
+<ul>
+    <li>на мобильных устройствах переход в полноэкранный режим теперь возможен через двойной тап по центру</li>
+    <li>добавлено окно "Сетевая библиотека" для omnireader.ru</li>
+    <li>улучшена работа синхронизации с сервером при плохом качестве связи</li>
+    <li>добавлена сборка релизов читалки: <a href="https://github.com/bookpauk/liberama/releases" target="_blank">https://github.com/bookpauk/liberama/releases</a></li>
+</ul>
+
+`
+},
+
+{
+    version: '0.12.2',
+    releaseDate: '2022-09-04',
+    showUntil: '2022-09-11',
+    content:
+`
+<ul>
+    <li>исправлен баг с формой для доната, показывалась каждый день, а не каждый месяц</li>
+    <li>автор приносит извинения за доставленные неудобства</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.12.1',
+    releaseDate: '2022-09-01',
+    showUntil: '2022-08-30',
+    content:
+`
+<ul>
+    <li>добавлена форма для доната</li>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.12.0',
+    releaseDate: '2022-07-27',
+    showUntil: '2022-08-03',
+    content:
+`
+<ul>
+    <li>запущен сервер проверки обновлений книг:</li>
+        <ul>
+            <li>проверка обновления той или иной книги настраивается в списке загруженных (чекбокс)</li>
+            <li>для того, чтобы чекбокс появился у ранее загруженной, необходимо принудительно обновить книгу</li>
+            <li>в настройках можно указать разницу размеров, при которой требуется делать уведомление</li>
+        </ul>
+</ul>
+
+`
+},
+
+{
+    version: '0.11.8',
+    releaseDate: '2022-07-14',
+    showUntil: '2022-07-13',
+    content:
+`
+<ul>
+    <li>добавлено отображение и синхронизация обложек в окне загруженных книг</li>
+    <li>добавлена синхронизация обоев</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.11.7',
+    releaseDate: '2022-07-12',
+    showUntil: '2022-07-19',
+    content:
+`
+<ul>
+    <li>добавлено автосокрытие панели управления при листании, отключается в настройках</li>
+    <li>изменения в окне загруженных книг:</li>
+        <ul>
+            <li>добавлена группировка по версиям файла одной и той же книги</li>
+            <li>группировка происходит по имени загружаемого файла, либо по URL книги</li>
+            <li>добавлены различные методы сортировки списка загруженных книг</li>
+            <li>нумерация всегда осуществляется по времени загрузки</li>
+        </ul>
+    <li>незначительные общие изменения интерфейса, приведение к единому стилю</li>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.11.6',
+    releaseDate: '2022-07-02',
+    showUntil: '2022-07-01',
+    content:
+`
+<ul>
+    <li>улучшено копирование текста прямо со страницы, для переводчиков</li>
+    <li>актуализация используемых пакетов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.11.5',
+    releaseDate: '2022-04-15',
+    showUntil: '2022-04-14',
+    content:
+`
+<ul>
+    <li>небольшие дополнения интерфейса</li>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.11.1',
+    releaseDate: '2021-12-03',
+    showUntil: '2021-12-02',
+    content:
+`
+<ul>
+    <li>переход на JembaDb вместо SQLite</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.11.0',
+    releaseDate: '2021-11-18',
+    showUntil: '2021-11-17',
+    content:
+`
+<ul>
+    <li>переход на Vue 3</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.10.3',
+    releaseDate: '2021-10-24',
+    showUntil: '2021-10-23',
+    content:
+`
+<ul>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.10.2',
+    releaseDate: '2021-10-19',
+    showUntil: '2021-10-18',
+    content:
+`
+<ul>
+    <li>актуализация версий пакетов и стека используемых технологий</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.10.1',
+    releaseDate: '2021-10-10',
+    showUntil: '2021-10-09',
+    content:
+`
+<ul>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.10.0',
+    releaseDate: '2021-02-09',
+    showUntil: '2021-02-16',
+    content:
+`
+<ul>
+    <li>добавлен двухстраничный режим</li>
+    <li>в настройки добавлены все кириллические веб-шрифты от google</li>
+    <li>в настройки добавлена возможность загрузки пользовательских обоев (пока без синхронизации)</li>
+    <li>немного улучшен парсинг fb2</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.9.12',
+    releaseDate: '2020-12-18',
+    showUntil: '2020-12-17',
+    content:
+`
+<ul>
+    <li>добавлена вкладка "Изображения" в окно оглавления</li>
+    <li>настройки конвертирования вынесены в отдельную вкладку</li>
+    <li>добавлена кнопка для быстрого доступа к настройкам конвертирования</li>
+    <li>улучшения работы конвертеров</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.9.11',
+    releaseDate: '2020-12-09',
+    showUntil: '2020-12-08',
+    content:
+`
+<ul>
+    <li>оптимизации, улучшения работы конвертеров</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.9.10',
+    releaseDate: '2020-12-03',
+    showUntil: '2020-12-10',
+    content:
+`
+<ul>
+    <li>добавлена частичная поддержка формата Djvu</li>
+    <li>добавлена поддержка Rar-архивов</li>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.9.9',
+    releaseDate: '2020-11-21',
+    showUntil: '2020-11-20',
+    content:
+`
+<ul>
+    <li>оптимизации, исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.9.8',
+    releaseDate: '2020-11-13',
+    showUntil: '2020-11-12',
+    content:
+`
+<ul>
+    <li>добавлено окно "Оглавление/закладки"</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.9.7',
+    releaseDate: '2020-11-12',
+    showUntil: '2020-11-11',
+    content:
+`
+<ul>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.9.6',
+    releaseDate: '2020-11-06',
     showUntil: '2020-11-05',
-    header: '0.9.6 (2020-11-06)',
     content:
 `
 <ul>
     <li>завершена работа над новым окном "Библиотека"</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.9.5',
+    releaseDate: '2020-11-01',
     showUntil: '2020-10-31',
-    header: '0.9.5 (2020-11-01)',
     content:
 `
 <ul>
     <li>на панель инструментов добавлена новая кнопка "Обновить с разбиением на параграфы"</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.9.4',
+    releaseDate: '2020-10-29',
     showUntil: '2020-10-28',
-    header: '0.9.4 (2020-10-29)',
     content:
 `
 <ul>
@@ -33,23 +409,27 @@ export const versionHistory = [
     <li>для liberama.top добавлено новое окно: "Библиотека"</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.9.3',
+    releaseDate: '2020-05-21',
     showUntil: '2020-05-20',
-    header: '0.9.3 (2020-05-21)',
     content:
 `
 <ul>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.9.2',
+    releaseDate: '2020-03-15',
     showUntil: '2020-04-25',
-    header: '0.9.2 (2020-03-15)',
     content:
 `
 <ul>
@@ -57,119 +437,139 @@ export const versionHistory = [
     <li>переход на Service Worker вместо AppCache для автономного режима работы</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.9.1',
+    releaseDate: '2020-03-03',
     showUntil: '2020-03-02',
-    header: '0.9.1 (2020-03-03)',
     content:
 `
 <ul>
     <li>улучшение работы серверной части</li>
     <li>незначительные изменения интерфейса</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.9.0',
+    releaseDate: '2020-02-26',
     showUntil: '2020-02-25',
-    header: '0.9.0 (2020-02-26)',
     content:
 `
 <ul>
     <li>переход на UI-фреймфорк Quasar</li>
     <li>незначительные изменения интерфейса</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.8.4',
+    releaseDate: '2020-02-06',
     showUntil: '2020-02-05',
-    header: '0.8.4 (2020-02-06)',
     content:
 `
 <ul>
     <li>добавлен paypal-адрес для пожертвований</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.8.3',
+    releaseDate: '2020-01-28',
     showUntil: '2020-01-27',
-    header: '0.8.3 (2020-01-28)',
     content:
 `
 <ul>
     <li>добавлено всплывающее окно с акцией "Оплатим хостинг вместе"</li>
     <li>внутренние оптимизации</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.8.2',
+    releaseDate: '2020-01-20',
     showUntil: '2020-01-19',
-    header: '0.8.2 (2020-01-20)',
     content:
 `
 <ul>
     <li>внутренние оптимизации</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.8.1',
+    releaseDate: '2020-01-07',
     showUntil: '2020-01-06',
-    header: '0.8.1 (2020-01-07)',
     content:
 `
 <ul>
     <li>добавлена частичная поддержка формата FB3</li>
     <li>исправлен баг "Request path contains unescaped characters"</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.8.0',
+    releaseDate: '2020-01-02',
     showUntil: '2020-01-05',
-    header: '0.8.0 (2020-01-02)',
     content:
 `
 <ul>
     <li>окончательный переход на https</li>
     <li>код проекта теперь Open Source: <a href="https://github.com/bookpauk/liberama" target="_blank">https://github.com/bookpauk/liberama</a></li>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.9',
+    releaseDate: '2019-11-27',
     showUntil: '2019-11-26',
-    header: '0.7.9 (2019-11-27)',
     content:
 `
 <ul>
     <li>добавлен неубираемый баннер для http-версии о переходе на httpS</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.8',
+    releaseDate: '2019-11-25',
     showUntil: '2019-11-24',
-    header: '0.7.8 (2019-11-25)',
     content:
 `
 <ul>
     <li>улучшение html-фильтров для сайтов</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.7',
+    releaseDate: '2019-11-06',
     showUntil: '2019-11-10',
-    header: '0.7.7 (2019-11-06)',
     content:
 `
 <ul>
@@ -181,34 +581,40 @@ export const versionHistory = [
         <li style="list-style-type: square">от центра влево: уменьшить скорость скроллинга</li>
     </ul>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.6',
+    releaseDate: '2019-10-30',
     showUntil: '2019-10-29',
-    header: '0.7.6 (2019-10-30)',
     content:
 `
 <ul>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.5',
+    releaseDate: '2019-10-22',
     showUntil: '2019-10-21',
-    header: '0.7.5 (2019-10-22)',
     content:
 `
 <ul>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.3',
+    releaseDate: '2019-10-18',
     showUntil: '2019-10-17',
-    header: '0.7.3 (2019-10-18)',
     content:
 `
 <ul>
@@ -217,12 +623,14 @@ export const versionHistory = [
     <li>добавлен параметр "Включить html-фильтр для сайтов" в раздел "Вид"->"Текст" в настройках</li>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.1',
+    releaseDate: '2019-09-20',
     showUntil: '2019-09-19',
-    header: '0.7.1 (2019-09-20)',
     content:
 `
 <ul>
@@ -230,12 +638,14 @@ export const versionHistory = [
     <li>на панель управления добавлена кнопка "Автономный режим"</li>
     <li>актуализирована справка</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.7.0',
+    releaseDate: '2019-09-07',
     showUntil: '2019-10-01',
-    header: '0.7.0 (2019-09-07)',
     content:
 `
 <ul>
@@ -246,23 +656,27 @@ export const versionHistory = [
     <li>немного улучшен внешний вид и управление на смартфонах</li>
     <li>добавлен параметр "Компактность" в раздел "Вид"->"Текст" в настройках</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.6.10',
+    releaseDate: '2019-07-21',
     showUntil: '2019-07-20',
-    header: '0.6.10 (2019-07-21)',
     content:
 `
 <ul>
     <li>исправления багов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.6.9',
+    releaseDate: '2019-06-23',
     showUntil: '2019-06-22',
-    header: '0.6.9 (2019-06-23)',
     content:
 `
 <ul>
@@ -273,12 +687,14 @@ export const versionHistory = [
     <li>улучшены прогрессбары</li>
     <li>исправления недочетов, небольшие оптимизации</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.6.7',
+    releaseDate: '2019-05-30',
     showUntil: '2019-06-05',
-    header: '0.6.7 (2019-05-30)',
     content:
 `
 <ul>
@@ -291,36 +707,42 @@ export const versionHistory = [
     <li>добавлен GET-параметр вида "/reader?__pp=50.5&url=..." для указания позиции в книге в процентах</li>
     <li>исправления багов и недочетов</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.6.6',
+    releaseDate: '2019-03-29',
     showUntil: '2019-03-29',
-    header: '0.6.6 (2019-03-29)',
     content:
 `
 <ul>
     <li>в справку добавлено описание настройки браузеров для автономной работы читалки (без доступа к интернету)</li>
     <li>оптимизации процесса синхронизации, внутренние переделки</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.6.4',
+    releaseDate: '2019-03-24',
     showUntil: '2019-03-24',
-    header: '0.6.4 (2019-03-24)',
     content:
 `
 <ul>
     <li>исправления багов, оптимизации</li>
     <li>добавлена возможность синхронизации данных между устройствами</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.5.4',
+    releaseDate: '2019-03-04',
     showUntil: '2019-03-04',
-    header: '0.5.4 (2019-03-04)',
     content:
 `
 <ul>
@@ -329,12 +751,14 @@ export const versionHistory = [
     <li>(0.4.2) фильтр для СИ больше не вырезает изображения</li>
     <li>(0.4.0) добавлено отображение картинок в fb2</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.3.0',
+    releaseDate: '2019-02-17',
     showUntil: '2019-02-17',
-    header: '0.3.0 (2019-02-17)',
     content:
 `
 <ul>
@@ -342,12 +766,14 @@ export const versionHistory = [
     <li>улучшено распознавание текста</li>
     <li>изменена верстка страницы - убрано позиционирование каждого слова</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.1.7',
+    releaseDate: '2019-02-14',
     showUntil: '2019-02-14',
-    header: '0.1.7 (2019-02-14)',
     content:
 `
 <ul>
@@ -357,17 +783,20 @@ export const versionHistory = [
     <li>добавлена возможность сброса настроек</li>
     <li>убран автоматический редирект на последнюю загруженную книгу, если не задан url в маршруте</li>
 </ul>
+
 `
 },
 
 {
+    version: '0.1.0',
+    releaseDate: '2019-02-12',
     showUntil: '2019-02-12',
-    header: '0.1.0 (2019-02-12)',
     content:
 `
 <ul>
     <li>первый деплой проекта, длительность разработки - 2 месяца</li>
 </ul>
+
 `
 },
 

client/components/Settings/Settings.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел Settings в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class Settings extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/Sources/Sources.vue

@@ -1,20 +0,0 @@
-<template>
-    <div>
-        Раздел Sources в разработке
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
-
-export default @Component({
-})
-class Sources extends Vue {
-    created() {
-    }
-
-}
-//-----------------------------------------------------------------------------
-</script>

client/components/share/Dialog.vue

@@ -1,12 +1,12 @@
 <template>
-    <q-dialog v-model="active">
-        <div class="column bg-white no-wrap">
+    <q-dialog v-model="active" no-route-dismiss @show="onShow" @hide="onHide">
+        <div class="column bg-dialog no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <slot name="header"></slot>
                 </div>
                 <div class="close-icon column justify-center items-center">
-                    <q-btn flat round dense v-close-popup>
+                    <q-btn v-close-popup flat round dense>
                         <q-icon name="la la-times" size="18px"></q-icon>
                     </q-btn>
                 </div>
@@ -25,26 +25,42 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../vueComponent.js';
+import * as utils from '../../share/utils';
 
-const DialogProps = Vue.extend({
-    props: {
-        value: Boolean,
-    }
-});
+class Dialog {
+    _props = {
+        modelValue: Boolean,
+    };
+
+    shown = false;
 
-export default @Component({
-})
-class Dialog extends DialogProps {
     get active() {
-        return this.value;
+        return this.modelValue;
     }
 
     set active(value) {
-        this.$emit('input', value);
+        this.$emit('update:modelValue', value);
+    }
+
+    onShow() {
+        this.shown = true;
+    }
+
+    onHide() {
+        this.shown = false;
+    }
+
+    async waitShown() {
+        let i = 100;
+        while (!this.shown && i > 0) {
+            await utils.sleep(10);
+            i--;
+        }
     }
 }
+
+export default vueComponent(Dialog);
 //-----------------------------------------------------------------------------
 </script>
 

client/components/share/Notify.vue

@@ -4,12 +4,9 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../vueComponent.js';
 
-export default @Component({
-})
-class Notify extends Vue {
+class Notify {
     notify(opts) {
         let {
             caption = null,
@@ -32,7 +29,7 @@ class Notify extends Vue {
             html: true,
 
             message: 
-                `<div style="max-width: 350px;">
+                `<div style="max-width: 350px">
                     ${caption}
                     <div style="color: ${messageColor}; overflow-wrap: break-word; word-wrap: break-word;">${message}</div>
                 </div>`
@@ -55,5 +52,7 @@ class Notify extends Vue {
         this.notify(Object.assign({color: 'info', icon: 'la la-bell', message, caption}, options));
     }
 }
+
+export default vueComponent(Notify);
 //-----------------------------------------------------------------------------
 </script>