Merge branch 'release/0.9.6-1'

0.9.6

client/components/App.vue

@@ -248,7 +248,7 @@ body, html, #app {
 }
 
 .dborder {
-    border: 2px solid yellow !important;
+    border: 2px solid magenta !important;
 }
 
 .icon-rotate {

client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

@@ -0,0 +1,349 @@
+<template>
+    <Window ref="window" width="600px" height="95%" @close="close">
+        <template slot="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>
+                </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"/>
+                    </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>
+                    </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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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="Выбрать все" />
+                    </div>
+                    <q-tree
+                        class="q-my-xs"
+                        :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>
+                    </q-tree>
+                </div>
+            </div>
+        </div>
+    </Window>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+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({
+    components: {
+        Window,
+    },
+    watch: {
+        ticked: function() {
+            this.checkAllTicked();
+        },
+    }    
+})
+class BookmarkSettings extends BookmarkSettingsProps {
+    search = '';
+    selected = '';
+    ticked = [];
+    expanded = [];
+    tickAll = false;
+
+    created() {
+        this.afterInit = true;
+    }
+
+    mounted() {
+    }
+
+    init() {
+        this.$refs.window.init();
+    }
+
+    get nodes() {
+        const result = [];
+
+        const expanded = [];
+        this.links = {};
+        this.libs.groups.forEach(group => {
+            const rkey = `r-${group.r}`;
+            const g = {label: group.r, key: rkey, children: []};
+            this.links[rkey] = {l: group.r, c: ''};
+
+            group.list.forEach(link => {
+                const key = link.l;
+                g.children.push({
+                    label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l),
+                    key
+                });
+
+                this.links[key] = link;
+                if (link.l == this.libs.startLink && expanded.indexOf(rkey) < 0) {
+                    expanded.push(rkey);
+                }
+
+            });
+
+            result.push(g);
+        });
+
+        if (this.afterInit) {
+            this.$nextTick(() => {
+                this.expanded = expanded;
+            });
+            this.afterInit = false;
+        }
+
+        return result;
+    }
+
+    makeTickAll() {
+        if (this.tickAll) {
+            const newTicked = [];
+            for (const key of Object.keys(this.links)) {
+                if (key.indexOf('r-') != 0)
+                    newTicked.push(key);
+            }
+            this.ticked = newTicked;
+        } else {
+            this.ticked = [];
+        }
+    }
+
+    checkAllTicked() {
+        const ticked = new Set(this.ticked);
+
+        let newTickAll = !!(this.nodes.length);
+        for (const key of Object.keys(this.links)) {
+            if (key.indexOf('r-') != 0 && !ticked.has(key))
+                newTickAll = false;
+        }
+        this.tickAll = newTickAll;
+    }
+
+    resetSearch() {
+        this.search = '';
+        this.$refs.search.focus();
+    }
+
+    openSelected() {
+        if (!this.selected)
+            return;
+        if (this.selected.indexOf('r-') === 0) {//rootLink
+            this.$emit('do-action', {action: 'setRootLink', data: this.links[this.selected].l});
+        } else {//selectedLink
+            this.$emit('do-action', {action: 'setSelectedLink', data: this.links[this.selected].l});
+        }
+        this.close();
+    }
+
+    editBookmark() {
+        this.$emit('do-action', {action: 'editBookmark', data: {link: this.links[this.selected].l, desc: this.links[this.selected].c}});
+    }
+
+    addBookmark() {
+        this.$emit('do-action', {action: 'addBookmark'});
+    }
+
+    async delBookmark() {
+        const newLibs = _.cloneDeep(this.libs);
+
+        if (await this.$root.stdDialog.confirm(`Подтвердите удаление ${this.ticked.length} закладок:`, ' ')) {
+            const ticked = new Set(this.ticked);
+            for (let i = newLibs.groups.length - 1; i >= 0; i--) {
+                const g = newLibs.groups[i];
+                for (let j = g.list.length - 1; j >= 0; j--) {
+                    if (ticked.has(g.list[j].l)) {
+                        delete g.list[j];
+                    }
+                }
+                g.list = g.list.filter(v => v);
+                if (!g.list.length)
+                    delete newLibs.groups[i];
+                else {
+                    const item = lu.getListItemByLink(g.list, g.s);
+                    if (!item)
+                        g.s = g.list[0].l;
+                }
+            }
+
+            newLibs.groups = newLibs.groups.filter(v => v);
+            this.ticked = [];
+            this.selected = '';
+            this.$emit('do-action', {action: 'setLibs', data: newLibs});
+        }
+    }
+
+    moveBookmark(down = false) {
+        const newLibs = _.cloneDeep(this.libs);
+
+        const ticked = new Set(this.ticked);
+        let moved = false;
+        let prevFull = false;
+        if (!down) {
+            for (let i = 0; i < newLibs.groups.length; i++) {
+                const g = newLibs.groups[i];
+                let count = 0;
+                for (let j = 0; j < g.list.length; j++) {
+                    if (ticked.has(g.list[j].l)) {
+                        if (j > 0 && !ticked.has(g.list[j - 1].l)) {
+                            [g.list[j], g.list[j - 1]] = [g.list[j - 1], g.list[j]];
+                            moved = true;
+                        }
+                        count++;
+                    }
+                }
+
+                if (count == g.list.length && !prevFull && i > 0) {
+                    const gs = newLibs.groups;
+                    [gs[i], gs[i - 1]] = [gs[i - 1], gs[i]];
+                    moved = true;
+                } else
+                    prevFull = (count == g.list.length);
+            }
+        } else {
+            for (let i = newLibs.groups.length - 1; i >= 0; i--) {
+                const g = newLibs.groups[i];
+                let count = 0;
+                for (let j = g.list.length - 1; j >= 0; j--) {
+                    if (ticked.has(g.list[j].l)) {
+                        if (j < g.list.length - 1 && !ticked.has(g.list[j + 1].l)) {
+                            [g.list[j], g.list[j + 1]] = [g.list[j + 1], g.list[j]];
+                            moved = true;
+                        }
+                        count++;
+                    }
+                }
+
+                if (count == g.list.length && !prevFull && i < newLibs.groups.length - 1) {
+                    const gs = newLibs.groups;
+                    [gs[i], gs[i + 1]] = [gs[i + 1], gs[i]];
+                    moved = true;
+                } else
+                    prevFull = (count == g.list.length);
+            }
+        }
+
+        if (moved)
+            this.$emit('do-action', {action: 'setLibs', data: newLibs});
+    }
+
+    async setDefaultBookmarks() {
+        const result = await this.$root.stdDialog.prompt(`Введите 'да' для сброса всех закладок в предустановленные значения:`, ' ', {
+            inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
+        });
+
+        if (result && result.value && result.value.toLowerCase() == 'да') {
+            this.$emit('do-action', {action: 'setLibs', data: _.cloneDeep(
+                Object.assign({helpShowed: true}, rstore.libsDefaults)
+            )});
+        }
+    }
+
+    close() {
+        this.afterInit = false;
+        this.$emit('close');
+    }
+
+    keyHook(event) {
+        if (this.addBookmarkVisible)
+            return false;
+
+        if (event.type == 'keydown' && event.key == 'Escape') {
+            this.close();
+            return true;
+        }
+        return false;
+    }
+
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.top-panel {
+    height: 50px;
+    border-bottom: 1px solid gray;
+    padding: 0 10px 0 12px;
+}
+
+.left-panel {
+    width: 60px;
+    height: 100%;
+    border-right: 1px solid gray;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.tree {
+    padding: 0px 10px 10px 10px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+.selected {
+    text-shadow: 0 0 20px yellow, 0 0 15px yellow, 0 0 10px yellow, 0 0 10px yellow, 0 0 5px yellow;
+}
+
+.checkbox-tick-all {
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 7px;
+    padding: 5px 5px 2px 16px;
+}
+
+.space {
+    min-height: 1px;
+    width: 1px;
+}
+</style>

client/components/ExternalLibs/ExternalLibs.vue

@@ -1,5 +1,5 @@
 <template>
-    <Window ref="window" @close="close">
+    <Window ref="window" @close="close" margin="2px">
         <template slot="header">
             {{ header }}
         </template>
@@ -9,11 +9,24 @@
                 <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"/>
+                <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"/>
+                <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"/>
+                <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" v-model="rootLink" :options="rootLinkOptions"
+                <q-select class="q-mr-sm" ref="rootLink" v-model="rootLink" :options="rootLinkOptions" @input="rootLinkInput"
+                    @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
                     style="width: 230px"
                     dropdown-icon="la la-angle-down la-sm"
                     rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
@@ -22,52 +35,69 @@
                         <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" disabled>
-                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Настроить закладки (пока недоступно)</q-tooltip>                            
+                        <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;">{{ removeProtocol(rootLink) }}</div>
+                        <div style="overflow: hidden; white-space: nowrap;">{{ rootLinkWithoutProtocol }}</div>
                     </template>
                 </q-select>
-                <q-select class="q-mr-sm" v-model="selectedLink" :options="selectedLinkOptions" style="width: 50px"
+
+                <q-select class="q-mr-sm" ref="selectedLink" v-model="selectedLink" :options="selectedLinkOptions" @input="selectedLinkInput" style="width: 50px"
+                    @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>
                 </q-select>
-                <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги" @focus="onInputFocus">
+
+                <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги"
+                    @focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
+                >
                     <template v-slot:prepend>
-                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(libs.startLink)" size="12px">
+                        <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>
                         </q-btn>
-                        <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px">
+                        <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>
                     </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>
+                        </q-btn>
+                    </template>
                 </q-input>
-                <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl">Открыть
+
+                <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>
             </div>
             <div class="separator"></div>
 
-            <iframe v-if="frameVisible" class="col fit" ref="frame" :src="frameSrc" frameborder="0"></iframe>
+            <div class="col fit" ref="frameBox" style="position: relative;">
+                <div ref="frameWrap" class="overflow-hidden">
+                    <iframe v-if="frameVisible" ref="frame" :src="frameSrc" frameborder="0"></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">
                     <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>
                 </template>
 
                 <div class="q-mx-md row">
-                    <q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink" 
-                        placeholder="Ссылка для закладки" maxlength="2000" @focus="onInputFocus">
+                    <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>
 
-                    <q-select class="q-mr-sm" v-model="defaultRootLink" :options="defaultRootLinkOptions" style="width: 50px"
+                    <q-select class="q-mr-sm" ref="defaultRootLink" v-model="defaultRootLink" :options="defaultRootLinkOptions" @input="defaultRootLinkInput" style="width: 50px"
                         dropdown-icon="la la-angle-down la-sm"
                         outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
                     >
@@ -76,8 +106,8 @@
                 </div>
 
                 <div class="q-mx-md q-mt-md">
-                    <q-input class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkDesc" 
-                        placeholder="Описание" style="width: 400px" maxlength="100" @focus="onInputFocus">
+                    <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>
                 </div>
 
@@ -86,7 +116,30 @@
                     <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark" :disabled="!bookmarkLink">OK</q-btn>
                 </template>
             </Dialog>
+
+            <Dialog ref="options" v-model="optionsVisible">
+                <template slot="header">
+                    <div class="row items-center">
+                        <q-icon class="q-mr-sm" name="la la-cog" size="28px"></q-icon>
+                        Опции
+                    </div>
+                </template>
+
+                <div class="q-mx-md column">
+                    <q-checkbox v-model="closeAfterSubmit" size="36px" label="Закрыть окно при отправке ссылки в читалку" />
+                    <q-checkbox v-model="openInFrameOnEnter" size="36px" label="Открывать ссылку во фрейме при нажатии 'Enter'" />
+                    <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>
+            </Dialog>
         </div>
+
+        <BookmarkSettings v-if="bookmarkSettingsActive" ref="bookmarkSettings" :libs="libs" :addBookmarkVisible="addBookmarkVisible"
+            @do-action="doAction" @close="closeBookmarkSettings">
+        </BookmarkSettings>
     </Window>
 </template>
 
@@ -98,8 +151,11 @@ import _ from 'lodash';
 
 import Window from '../share/Window.vue';
 import Dialog from '../share/Dialog.vue';
+import BookmarkSettings from './BookmarkSettings/BookmarkSettings.vue';
+
 import rstore from '../../store/modules/reader';
 import * as utils from '../../share/utils';
+import * as lu from './linkUtils';
 
 const proxySubst = {
     'http://flibusta.is': 'http://b.liberama.top:23480',
@@ -108,48 +164,116 @@ const proxySubst = {
 export default @Component({
     components: {
         Window,
-        Dialog
+        Dialog,
+        BookmarkSettings
     },
     watch: {
         libs: function() {
             this.loadLibs();
         },
-        rootLink: function() {
-            this.updateSelectedLink();
-            this.updateStartLink();
-        },
-        selectedLink: function() {
-            this.updateStartLink();
-        },
         defaultRootLink: function() {
             this.updateBookmarkLink();
-        }
+        },
+        bookUrl: function(newValue) {
+            const value = lu.addProtocol(newValue);
+            const subst = this.makeProxySubst(value, true);
+            if (value != subst) {
+                this.$nextTick(() => {
+                    this.bookUrl = subst;
+                });
+            }
+        },
+        bookmarkLink: function(newValue) {
+            const value = lu.addProtocol(newValue);
+            const subst = this.makeProxySubst(value, true);
+            if (value != subst) {
+                this.$nextTick(() => {
+                    this.bookmarkLink = subst;
+                });
+            }
+        },
+        closeAfterSubmit: function(newValue) {
+            this.commitProp('closeAfterSubmit', newValue);
+        },
+        openInFrameOnEnter: function(newValue) {
+            this.commitProp('openInFrameOnEnter', newValue);
+        },
+        openInFrameOnAdd: function(newValue) {
+            this.commitProp('openInFrameOnAdd', newValue);
+        },
     }    
 })
 class ExternalLibs extends Vue {
     ready = false;
     frameVisible = false;
-    startLink = '';
     rootLink = '';
     selectedLink = '';
     frameSrc = '';
     bookUrl = '';
     libs = {};
     fullScreenActive = false;
-    addBookmarkVisible = false;
+    transparentLayoutVisible = false;
 
+    addBookmarkVisible = false;
+    optionsVisible = false;
+
+    addBookmarkMode = '';
     bookmarkLink = '';
     bookmarkDesc = '';
     defaultRootLink = '';
 
+    bookmarkSettingsActive = false;
+
+    closeAfterSubmit = false;
+    openInFrameOnEnter = false;
+    openInFrameOnAdd = false;
+    frameScale = 1;
+
     created() {
+        this.oldStartLink = '';
+        this.justOpened = true;
         this.$root.addKeyHook(this.keyHook);
 
+        this.$root.$on('resize', async() => {
+            await utils.sleep(200);
+            this.frameResize();
+        });
+
+        document.addEventListener('fullscreenchange', () => {
+            this.fullScreenActive = (document.fullscreenElement !== null);
+        });
+
+        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;
@@ -214,8 +338,6 @@ class ExternalLibs extends Vue {
         } else if (d.type == 'libs') {
             this.ready = true;
             this.libs = _.cloneDeep(d.data);
-            if (!this.frameSrc)
-                this.goToLink(this.libs.startLink);
         } else if (d.type == 'notify') {
             this.$root.notify.success(d.data, '', {position: 'bottom-right'});
         }
@@ -240,11 +362,44 @@ class ExternalLibs extends Vue {
         this.sendMessage({type: 'libs', data: libs});
     }
 
+    commitProp(prop, value) {
+        let libs = _.cloneDeep(this.libs);
+        libs[prop] = value;
+        this.commitLibs(libs);
+    }
+
     loadLibs() {
         const libs = this.libs;
-        this.startLink = (libs.comment ? libs.comment + ' ': '') + this.removeProtocol(libs.startLink);
-        this.rootLink = this.getOrigin(libs.startLink);
-        this.updateSelectedLink();
+
+        if (!libs.helpShowed) {
+            this.showHelp();
+            (async() => {
+                await utils.sleep(1000);
+                this.commitProp('helpShowed', true);
+            })();
+        }
+
+        this.selectedLink = libs.startLink;
+        this.closeAfterSubmit = libs.closeAfterSubmit || false;
+        this.openInFrameOnEnter = libs.openInFrameOnEnter || false;
+        this.openInFrameOnAdd = libs.openInFrameOnAdd || false;
+
+        this.frameScale = 1;
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.selectedLink);
+        if (index >= 0)
+            this.frameScale = this.libs.groups[index].frameScale || 1;
+
+        this.updateStartLink();
+    }
+
+    doAction(event) {
+        switch (event.action) {
+            case 'setLibs': this.commitLibs(event.data); break;
+            case 'setRootLink': this.rootLink = event.data; this.rootLinkInput(); break;
+            case 'setSelectedLink': this.selectedLink = event.data; this.selectedLinkInput(); break;
+            case 'editBookmark': this.addBookmark('edit', event.data.link, event.data.desc); break;
+            case 'addBookmark': this.addBookmark('add'); break;
+        }
     }
 
     get mode() {
@@ -253,32 +408,60 @@ class ExternalLibs extends Vue {
 
     get header() {
         let result = (this.ready ? 'Библиотека' : 'Загрузка...');
-        if (this.ready && this.startLink) {
-            result += ` | ${this.startLink}`;
+        if (this.ready && this.selectedLink) {
+            result += ` | ${(this.libs.comment ? this.libs.comment + ' ': '') + lu.removeProtocol(this.libs.startLink)}`;
         }
         this.$root.$emit('set-app-title', result);
         return result;
     }
 
-    updateSelectedLink() {
-        if (!this.ready)
-            return;
-        const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
-        if (index >= 0)
-            this.selectedLink = this.libs.groups[index].s;
+    get rootLinkWithoutProtocol() {
+        return lu.removeProtocol(this.rootLink);
     }
 
-    updateStartLink() {
+    updateSelectedLinkByRoot() {
         if (!this.ready)
             return;
-        const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
+
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
+        if (index >= 0)
+            this.selectedLink = this.libs.groups[index].s;
+        else
+            this.selectedLink = '';
+    }
+
+    updateStartLink(force) {
+        if (!this.ready)
+            return;
+
+        let index = -1;
+        try {
+            this.rootLink = lu.getOrigin(this.selectedLink);
+            index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        } catch(e) {
+            //
+        }
+
         if (index >= 0) {
             let libs = _.cloneDeep(this.libs);
-            libs.groups[index].s = this.selectedLink;
-            libs.startLink = this.selectedLink;
-            libs.comment = this.getCommentByLink(libs.groups[index].list, this.selectedLink);
-            this.goToLink(this.selectedLink);
-            this.commitLibs(libs);
+            const com = this.getCommentByLink(libs.groups[index].list, this.selectedLink);
+            if (libs.groups[index].s != this.selectedLink ||
+                libs.startLink != this.selectedLink ||
+                libs.comment != com) {
+                libs.groups[index].s = this.selectedLink;
+                libs.startLink = this.selectedLink;
+                libs.comment = com;
+                this.commitLibs(libs);
+            }
+
+            if (force || this.oldStartLink != libs.startLink) {
+                this.oldStartLink = libs.startLink;
+                this.debouncedGoToLink(this.selectedLink);
+            }
+        } else {
+            this.rootLink = '';
+            this.selectedLink = '';
+            this.debouncedGoToLink(this.selectedLink);
         }
     }
 
@@ -288,7 +471,7 @@ class ExternalLibs extends Vue {
             return result;
 
         this.libs.groups.forEach(group => {
-            result.push({label: this.removeProtocol(group.r), value: group.r});
+            result.push({label: lu.removeProtocol(group.r), value: group.r});
         });
 
         return result;
@@ -298,7 +481,7 @@ class ExternalLibs extends Vue {
         let result = [];
 
         rstore.libsDefaults.groups.forEach(group => {
-            result.push({label: this.removeProtocol(group.r), value: group.r});
+            result.push({label: lu.removeProtocol(group.r), value: group.r});
         });
 
         return result;
@@ -309,10 +492,10 @@ class ExternalLibs extends Vue {
         if (!this.ready)
             return result;
 
-        const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
         if (index >= 0) {
             this.libs.groups[index].list.forEach(link => {
-                result.push({label: (link.c ? link.c + ' ': '') + this.removeOrigin(link.l), value: link.l});
+                result.push({label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l), value: link.l});
             });
         }
 
@@ -320,63 +503,70 @@ class ExternalLibs extends Vue {
     }
 
     openBookUrlInFrame() {
-        if (this.bookUrl)
-            this.goToLink(this.addProtocol(this.bookUrl));
+        if (this.bookUrl) {
+            this.goToLink(lu.addProtocol(this.bookUrl));
+        }
     }
 
     goToLink(link) {
-        if (!this.ready)
+        if (!this.ready || !link)
             return;
 
+        if (!link) {
+            this.frameVisible = false;
+            return;
+        }
+
         this.frameSrc = this.makeProxySubst(link);
+
         this.frameVisible = false;
         this.$nextTick(() => {
             this.frameVisible = true;
+            this.$nextTick(() => {
+                if (this.$refs.frame) {
+                    this.$refs.frame.contentWindow.focus();
+                    this.frameResize();
+                }
+            });
         });
     }
 
-    addProtocol(url) {
-        if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
-            return 'http://' + url;
-        return url;
+    frameResize() {
+        this.$refs.frameWrap.style = 'width: 1px; height: 1px;';
+        this.$nextTick(() => {
+            if (this.$refs.frame) {
+                const w = this.$refs.frameBox.offsetWidth;
+                const h = this.$refs.frameBox.offsetHeight;
+                const normalSize = `width: ${w}px; height: ${h}px;`;
+                this.$refs.frameWrap.style = normalSize;
+                if (this.frameScale != 1) {
+                    const s = this.frameScale;
+                    this.$refs.frame.style = `width: ${w/s}px; height: ${h/s}px; transform: scale(${s}); transform-origin: 0 0;`;
+                } else {
+                    this.$refs.frame.style = normalSize;
+                }
+            }
+        });
     }
 
-    removeProtocol(url) {
-        return url.replace(/(^\w+:|^)\/\//, '');
-    }
+    changeScale(delta) {
+        if ((this.frameScale > 0.1 && delta <= 0) || (this.frameScale < 5 && delta >= 0)) {
+             this.frameScale = _.round(this.frameScale + delta, 1);
 
-    getOrigin(url) {
-        const parsed = new URL(url);
-        return parsed.origin;
-    }
+            const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.selectedLink);
+            if (index >= 0) {
+                let libs = _.cloneDeep(this.libs);
+                libs.groups[index].frameScale = this.frameScale;
+                this.commitLibs(libs);
+            }
 
-    removeOrigin(url) {
-        const parsed = new URL(url);
-        const result = url.substring(parsed.origin.length);
-        return (result ? result : '/');
-    }
-
-    getRootIndexByUrl(groups, url) {
-        if (!this.ready)
-            return -1;
-        const origin = this.getOrigin(url);
-        for (let i = 0; i < groups.length; i++) {
-            if (groups[i].r == origin)
-                return i;
+            this.frameResize();
+            this.$root.notify.success(`Масштаб изменен: ${(this.frameScale*100).toFixed(0)}%`, '', {position: 'bottom-right'});
         }
-        return -1;
-    }
-
-    getListItemByLink(list, link) {
-        for (const item of list) {
-            if (item.l == link)
-                return item;
-        }
-        return null;
     }
 
     getCommentByLink(list, link) {
-        const item = this.getListItemByLink(list, link);
+        const item = lu.getListItemByLink(list, link);
         return (item ? item.c : '');
     }
 
@@ -384,7 +574,7 @@ class ExternalLibs extends Vue {
         for (const [key, value] of Object.entries(proxySubst)) {
             if (reverse && value == url.substring(0, value.length)) {
                 return key + url.substring(value.length);
-            } else if (key == url.substring(0, key.length)) {
+            } else if (!reverse && key == url.substring(0, key.length)) {
                 return value + url.substring(key.length);
             }
         }
@@ -392,34 +582,52 @@ class ExternalLibs extends Vue {
         return url;
     }
 
-    onInputFocus(event) {
+    selectAllOnFocus(event) {
         if (event.target.select)
             event.target.select();
     }
 
+    rootLinkInput() {
+        this.updateSelectedLinkByRoot();
+        this.updateStartLink(true);
+    }
+
+    selectedLinkInput() {
+        this.updateStartLink(true);
+    }
+
     submitUrl() {
         if (this.bookUrl) {
             this.sendMessage({type: 'submitUrl', data: {
-                url: this.makeProxySubst(this.addProtocol(this.bookUrl), true), 
+                url: this.bookUrl,
                 force: true
             }});
             this.bookUrl = '';
-            if (this.libs.closeAfterSubmit)
+            if (this.closeAfterSubmit)
                 this.close();
         }
     }
 
-    addBookmark() {
-        this.bookmarkLink = (this.bookUrl ? this.makeProxySubst(this.addProtocol(this.bookUrl), true) : '');
-        this.bookmarkDesc = '';
+    addBookmark(mode = 'add', link = '', desc = '') {
+
+        if (mode == 'edit') {
+            this.editBookmarkLink = this.bookmarkLink = link;
+            this.editBookmarkDesc = this.bookmarkDesc = desc;
+        } else {
+            this.bookmarkLink = this.bookUrl;
+            this.bookmarkDesc = '';
+        }
+
+        this.addBookmarkMode = mode;
         this.addBookmarkVisible = true;
         this.$nextTick(() => {
             this.$refs.bookmarkLink.focus();
+            this.$refs.defaultRootLink.toggleOption = this.toggleOption;
         });
     }
 
     updateBookmarkLink() {
-        const index = this.getRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
+        const index = lu.getSafeRootIndexByUrl(rstore.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);
@@ -429,56 +637,105 @@ class ExternalLibs extends Vue {
         }
     }
 
+    defaultRootLinkInput() {
+        this.updateBookmarkLink();
+    }
+
+    bookmarkLinkKeyDown(event) {
+        if (event.key == 'Enter') {
+            this.$refs.bookmarkDesc.focus();
+            event.preventDefault();
+        }
+    }
+
+    bookmarkDescKeyDown(event) {
+        if (event.key == 'Enter') {
+            event.stopPropagation();
+            event.preventDefault();
+            this.okAddBookmark();
+        }
+    }
+
     async okAddBookmark() {
-        const link = this.addProtocol(this.bookmarkLink);
+        if (!this.bookmarkLink)
+            return;
+
+        const link = (this.addBookmarkMode == 'edit' ? lu.addProtocol(this.editBookmarkLink) : lu.addProtocol(this.bookmarkLink));
         let index = -1;
         try {
-            index = this.getRootIndexByUrl(this.libs.groups, link);
+            index = lu.getRootIndexByUrl(this.libs.groups, link);
         } catch (e) {
             await this.$root.stdDialog.alert('Неверный формат ссылки', 'Ошибка');
             return;
         }
 
+        let libs = _.cloneDeep(this.libs);
+
+        //добавление
         //есть группа в закладках
         if (index >= 0) {
-            const item = this.getListItemByLink(this.libs.groups[index].list, link);
-            
-            if (!item || item.c != this.bookmarkDesc) {
-                //добавляем
-                let libs = _.cloneDeep(this.libs);
+            const item = lu.getListItemByLink(libs.groups[index].list, link);
 
+            //редактирование
+            if (item && this.addBookmarkMode == 'edit') {
+                if (item) {
+                    //редактируем
+                    item.l = link;
+                    item.c = this.bookmarkDesc;
+                    this.commitLibs(libs);
+                } else {
+                    await this.$root.stdDialog.alert('Не удалось отредактировать закладку', 'Ошибка');
+                }
+            } else if (!item) {
+                //добавляем
                 if (libs.groups[index].list.length >= 100) {
                     await this.$root.stdDialog.alert('Достигнут предел количества закладок для этого сайта', 'Ошибка');
                     return;
                 }
 
                 libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
+
+                if (this.openInFrameOnAdd) {
+                    libs.startLink = link;
+                    libs.comment = this.bookmarkDesc;
+                }
+
                 this.commitLibs(libs);
+            } else if (item.c != this.bookmarkDesc) {
+                if (await this.$root.stdDialog.confirm(`Такая закладка уже существует с другим описанием.<br>` +
+                    `Заменить '${this.$sanitize(item.c)}' на '${this.$sanitize(this.bookmarkDesc)}'?`, ' ')) {
+                    item.c = this.bookmarkDesc;
+                    this.commitLibs(libs);                    
+                } else 
+                    return;
+            } else {
+                await this.$root.stdDialog.alert('Такая закладка уже существует', ' ');
+                return;
             }
         } else {//нет группы в закладках
-            let libs = _.cloneDeep(this.libs);
-
             if (libs.groups.length >= 100) {
                 await this.$root.stdDialog.alert('Достигнут предел количества различных сайтов в закладках', 'Ошибка');
                 return;
             }
 
             //добавляем сначала группу
-            libs.groups.push({r: this.getOrigin(link), s: link, list: []});
+            libs.groups.push({r: lu.getOrigin(link), s: link, list: []});
             
-            index = this.getRootIndexByUrl(libs.groups, link);
+            index = lu.getSafeRootIndexByUrl(libs.groups, link);
             if (index >= 0)
                 libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
 
+            if (this.openInFrameOnAdd) {
+                libs.startLink = link;
+                libs.comment = this.bookmarkDesc;
+            }
+
             this.commitLibs(libs);
         }
 
         this.addBookmarkVisible = false;
     }
 
-    bookmarkSettings() {
-    }
-
     fullScreenToggle() {
         this.fullScreenActive = !this.fullScreenActive;
         if (this.fullScreenActive) {
@@ -488,30 +745,90 @@ class ExternalLibs extends Vue {
         }
     }
 
+    transparentLayoutClick() {
+        this.transparentLayoutVisible = false;
+    }
+
+    onSelectPopupShow() {
+        this.transparentLayoutVisible = true;
+    }
+
+    onSelectPopupHide() {
+        this.transparentLayoutVisible = false;
+    }
+
     close() {
         this.sendMessage({type: 'close'});
     }
 
-    keyHook() {
+    bookUrlKeyDown(event) {
+        if (event.key == 'Enter') {
+            if (!this.openInFrameOnEnter) {
+                this.submitUrl();
+            } else {
+                if (this.bookUrl)
+                    this.goToLink(this.bookUrl);
+            }
+            event.preventDefault();
+        }
+    }
+
+    bookmarkSettings() {
+        this.bookmarkSettingsActive = true;
+        this.$nextTick(() => {
+            this.$refs.bookmarkSettings.init();
+        });
+    }
+
+    closeBookmarkSettings() {
+        this.bookmarkSettingsActive = false;
+    }
+
+    showHelp() {
+        this.$root.stdDialog.alert(`
+<p>Окно 'Библиотека' позволяет открывать ссылки в читалке без переключения между окнами,
+что особенно актуально для мобильных устройств.</p>
+
+<p>'Библиотека' разрешает свободный доступ к сайту flibusta.is. Имеется возможность управлять закладками
+на понравившиеся ресурсы, книги или страницы авторов. Открытие ссылок и навигация происходят во фрейме, но,
+к сожалению, в нем открываются не все страницы.
+</p>
+
+<p>Из-за проблем с безопасностью, навигация 'вперед-назад' во фрейме осуществляется с помощью контекстного меню правой кнопкой мыши.
+На мобильных устройствах для этого служит системная клавиша 'Назад (стрелка влево)' и опция 'Вперед (стрелка вправо)' в меню браузера. 
+</p>
+
+<p>Приятного пользования ;-)
+</p>
+            `, 'Справка', {iconName: 'la la-info-circle'});
+    }
+
+    keyHook(event) {
         if (this.$root.rootRoute() == '/external-libs') {
-            if (this.$refs.dialogAddBookmark.active)
+            if (this.$root.stdDialog.active)
                 return false;
 
-            //недостатки сторонних ui
-            const input = this.$refs.input.$refs.input;
-            if (document.activeElement === input && event.type == 'keydown' && event.key == 'Enter') {
-                this.submitUrl();
+            if (this.bookmarkSettingsActive && this.$refs.bookmarkSettings.keyHook(event))
+                return true;
+
+            if (this.addBookmarkVisible || this.optionsVisible)
+                return false;
+
+            if (event.type == 'keydown' && event.key == 'F4') {
+                this.addBookmark();
                 return true;
             }
 
-            if (event.type == 'keydown' && event.key == 'Escape') {
+            if (event.type == 'keydown' && event.key == 'Escape' &&
+                (document.activeElement != this.$refs.rootLink.$refs.target || !this.$refs.rootLink.menu) &&
+                (document.activeElement != this.$refs.selectedLink.$refs.target || !this.$refs.selectedLink.menu)
+               ) {
                 this.close();
+                return true;
             }
-            return true;
         }
         return false;
     }
-
 }
 //-----------------------------------------------------------------------------
 </script>
@@ -532,4 +849,9 @@ class ExternalLibs extends Vue {
     background-color: #69C05F;
 }
 
+.transparent-layout {
+    top: 0;
+    left: 0;
+    position: absolute;
+}
 </style>

client/components/ExternalLibs/linkUtils.js

@@ -0,0 +1,48 @@
+export function addProtocol(url) {
+    if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
+        return 'http://' + url;
+    return url;
+}
+
+export function removeProtocol(url) {
+    return url.replace(/(^\w+:|^)\/\//, '');
+}
+
+export function getOrigin(url) {
+    const parsed = new URL(url);
+    return parsed.origin;
+}
+
+export function removeOrigin(url) {
+    const parsed = new URL(url);
+    const result = url.substring(parsed.origin.length);
+    return (result ? result : '/');
+}
+
+export function getRootIndexByUrl(groups, url) {
+    const origin = getOrigin(url);
+    for (let i = 0; i < groups.length; i++) {
+        if (groups[i].r == origin)
+            return i;
+    }
+    return -1;
+}
+
+export function getSafeRootIndexByUrl(groups, url) {
+    let index = -1;
+    try {
+        index = getRootIndexByUrl(groups, url);
+    } catch(e) {
+        //
+    }
+    return index;
+}
+
+export function getListItemByLink(list, link) {
+    for (const item of list) {
+        if (item.l == link)
+            return item;
+    }
+    return null;
+}
+

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="main" class="column no-wrap" style="min-height: 500px">
-        <div class="relative-position">
+        <div v-if="mode != 'liberama.top'" class="relative-position">
             <GithubCorner url="https://github.com/bookpauk/liberama" cornerColor="#1B695F" gitColor="#EBE2C9"></GithubCorner>
         </div>
         <div class="col column justify-center items-center no-wrap overflow-hidden" style="min-height: 230px">

client/components/Reader/Reader.vue

@@ -39,6 +39,10 @@
                         <q-icon name="la la-copy" size="32px"/>
                         <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['copyText'] }}</q-tooltip>
                     </button>
+                    <button ref="splitToPara" v-show="showToolButton['splitToPara']" class="tool-button" :class="buttonActiveClass('splitToPara')" @click="buttonClick('splitToPara')" v-ripple>
+                        <q-icon name="la la-retweet" size="32px"/>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['splitToPara'] }}</q-tooltip>
+                    </button>
                     <button ref="refresh" v-show="showToolButton['refresh']" class="tool-button" :class="buttonActiveClass('refresh')" @click="buttonClick('refresh')" v-ripple>
                         <q-icon name="la la-sync" size="32px" :class="{clear: !showRefreshIcon}"/>
                         <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['refresh'] }}</q-tooltip>
@@ -92,64 +96,7 @@
             <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
             <ServerStorage v-show="hidden" ref="serverStorage"></ServerStorage>
 
-            <Dialog ref="dialog1" v-model="whatsNewVisible">
-                <template slot="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>
-
-                <span slot="footer">
-                    <span class="clickable row justify-end" style="font-size: 60%; color: grey" @click="donationDialogDisable">Больше не показывать</span>                        
-                    <br>
-                    <q-btn class="q-px-sm" dense no-caps @click="donationDialogRemind">Напомнить позже</q-btn>
-                </span>
-            </Dialog>
-
+            <ReaderDialogs ref="dialogs" @donate-toggle="donateToggle" @version-history-toggle="versionHistoryToggle"></ReaderDialogs>
         </div>
     </div>
 </template>
@@ -174,13 +121,12 @@ import SettingsPage from './SettingsPage/SettingsPage.vue';
 import HelpPage from './HelpPage/HelpPage.vue';
 import ClickMapPage from './ClickMapPage/ClickMapPage.vue';
 import ServerStorage from './ServerStorage/ServerStorage.vue';
-import Dialog from '../share/Dialog.vue';
+import ReaderDialogs from './ReaderDialogs/ReaderDialogs.vue';
 
 import bookManager from './share/bookManager';
 import rstore from '../../store/modules/reader';
 import readerApi from '../../api/reader';
 import * as utils from '../../share/utils';
-import {versionHistory} from './versionHistory';
 
 export default @Component({
     components: {
@@ -197,7 +143,7 @@ export default @Component({
         HelpPage,
         ClickMapPage,
         ServerStorage,
-        Dialog,
+        ReaderDialogs,
     },
     watch: {
         bookPos: function(newValue) {
@@ -327,10 +273,15 @@ class Reader extends Vue {
             this.checkActivateDonateHelpPage();
             this.loading = false;
 
+            //проверим состояние Settings, и обновим, если надо
+            const newSettings = rstore.addDefaultsToSettings(this.settings);
+            if (newSettings) {
+                this.commit('reader/setSettings', newSettings);
+            }
+
             this.updateRoute();
 
-            await this.showWhatsNew();
-            await this.showDonation();
+            await this.$refs.dialogs.init();
         })();
     }
 
@@ -341,8 +292,6 @@ class Reader extends Vue {
         this.showClickMapPage = settings.showClickMapPage;
         this.clickControl = settings.clickControl;
         this.blinkCachedLoad = settings.blinkCachedLoad;
-        this.showWhatsNewDialog = settings.showWhatsNewDialog;
-        this.showDonationDialog2020 = settings.showDonationDialog2020;
         this.showToolButton = settings.showToolButton;
         this.enableSitesFilter = settings.enableSitesFilter;
 
@@ -406,64 +355,6 @@ class Reader extends Vue {
         }
     }
 
-    async showWhatsNew() {
-        await utils.sleep(2000);
-
-        const whatsNew = versionHistory[0];
-        if (this.showWhatsNewDialog &&
-            whatsNew.showUntil >= utils.formatDate(new Date(), 'coDate') &&
-            whatsNew.header != this.whatsNewContentHash) {
-            this.whatsNewContent = 'Версия ' + whatsNew.header + whatsNew.content;
-            this.whatsNewVisible = true;
-        }
-    }
-
-    async showDonation() {
-        await utils.sleep(3000);
-        const today = utils.formatDate(new Date(), 'coDate');
-
-        if ((this.mode == 'omnireader' || this.mode == 'liberama.top') && today < '2020-03-01' && this.showDonationDialog2020 && this.donationRemindDate != today) {
-            this.donationVisible = true;
-        }
-    }
-
-    donationDialogDisable() {
-        this.donationVisible = false;
-        if (this.showDonationDialog2020) {
-            const newSettings = Object.assign({}, this.settings, { showDonationDialog2020: false });
-            this.commit('reader/setSettings', newSettings);
-        }
-    }
-
-    donationDialogRemind() {
-        this.donationVisible = false;
-        this.commit('reader/setDonationRemindDate', utils.formatDate(new Date(), 'coDate'));
-    }
-
-    openDonate() {
-        this.donationVisible = false;
-        this.donateToggle();
-    }
-
-    async copyLink(link) {
-        const result = await utils.copyTextToClipboard(link);
-        if (result)
-            this.$root.notify.success(`Ссылка ${link} успешно скопирована в буфер обмена`);
-        else
-            this.$root.notify.error('Копирование не удалось');
-    }
-
-    openVersionHistory() {
-        this.whatsNewVisible = false;
-        this.versionHistoryToggle();
-    }
-
-    whatsNewDisable() {
-        this.whatsNewVisible = false;
-        const whatsNew = versionHistory[0];
-        this.commit('reader/setWhatsNewContentHash', whatsNew.header);
-    }
-
     get routeParamPos() {
         let result = undefined;
         const q = this.$route.query;
@@ -567,14 +458,6 @@ class Reader extends Vue {
         return this.$store.state.reader.settings;
     }
 
-    get whatsNewContentHash() {
-        return this.$store.state.reader.whatsNewContentHash;
-    }
-
-    get donationRemindDate() {
-        return this.$store.state.reader.donationRemindDate;
-    }
-
     addAction(pos) {
         let a = this.actionList;
         if (!a.length || a[a.length - 1] != pos) {
@@ -699,6 +582,12 @@ class Reader extends Vue {
         }
     }
 
+    refreshBookSplitToPara() {
+        if (this.mostRecentBook()) {
+            this.loadBook({url: this.mostRecentBook().url, skipCheck: true, isText: true, force: true});
+        }
+    }
+
     recentBooksClose() {
         this.recentBooksActive = false;
     }
@@ -816,6 +705,7 @@ class Reader extends Vue {
             case 'scrolling':
             case 'search':
             case 'copyText':
+            case 'splitToPara':
             case 'refresh':
             case 'libs':
             case 'recentBooks':
@@ -847,8 +737,9 @@ class Reader extends Vue {
                 case 'copyText':
                     classResult = classDisabled;
                     break;
-                case 'recentBooks':
+                case 'splitToPara':
                 case 'refresh':
+                case 'recentBooks':
                     if (!this.mostRecentBookReactive)
                         classResult = classDisabled;
                     break;
@@ -1001,9 +892,16 @@ class Reader extends Vue {
             // не удалось, скачиваем книгу полностью с конвертацией
             let loadCached = true;
             if (!book) {
-                book = await readerApi.loadBook({url, enableSitesFilter: this.enableSitesFilter}, (state) => {
-                    progress.setState(state);
-                });
+                book = await readerApi.loadBook({
+                        url,
+                        skipCheck: (opts.skipCheck ? true : false),
+                        isText: (opts.isText ? true : false),
+                        enableSitesFilter: this.enableSitesFilter
+                    },
+                    (state) => {
+                        progress.setState(state);
+                    }
+                );
                 loadCached = false;
             }
 
@@ -1122,6 +1020,9 @@ class Reader extends Vue {
             case 'copyText':
                 this.copyTextToggle();
                 break;
+            case 'splitToPara':
+                this.refreshBookSplitToPara();
+                break;
             case 'refresh':
                 this.refreshBook();
                 break;
@@ -1200,9 +1101,12 @@ class Reader extends Vue {
     keyHook(event) {
         let result = false;
         if (this.$root.rootRoute() == '/reader') {
-            if (this.$root.stdDialog.active || this.$refs.dialog1.active || this.$refs.dialog2.active)
+            if (this.$root.stdDialog.active)
                 return result;
 
+            if (!result)
+                result = this.$refs.dialogs.keyHook(event);
+
             if (!result && this.helpActive)
                 result = this.$refs.helpPage.keyHook(event);
 
@@ -1311,16 +1215,4 @@ class Reader extends Vue {
 .clear {
     color: rgba(0,0,0,0);
 }
-
-.clickable {
-    color: blue;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.copy-icon {
-    cursor: pointer;
-    font-size: 120%;
-    color: blue;
-}
 </style>

client/components/Reader/ReaderDialogs/ReaderDialogs.vue

@@ -0,0 +1,250 @@
+<template>
+    <div>
+        <Dialog ref="dialog1" v-model="whatsNewVisible">
+            <template slot="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>
+
+            <span slot="footer">
+                <span class="clickable row justify-end" style="font-size: 60%; color: grey" @click="donationDialogDisable">Больше не показывать</span>                        
+                <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>
+            </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 Dialog from '../../share/Dialog.vue';
+import * as utils from '../../../share/utils';
+import {versionHistory} from '../versionHistory';
+
+export default @Component({
+    components: {
+        Dialog
+    },
+    watch: {
+        settings: function() {
+            this.loadSettings();
+        },
+    },
+})
+class ReaderDialogs extends Vue {
+    whatsNewVisible = false;
+    whatsNewContent = '';
+    donationVisible = false;
+    liberamaTopVisible = false;
+
+    created() {
+        this.commit = this.$store.commit;
+        this.loadSettings();
+    }
+
+    mounted() {
+    }
+
+    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;
+    }
+
+    async showWhatsNew() {
+        const whatsNew = versionHistory[0];
+        if (this.showWhatsNewDialog &&
+            whatsNew.showUntil >= utils.formatDate(new Date(), 'coDate') &&
+            whatsNew.header != this.whatsNewContentHash) {
+            await utils.sleep(2000);
+            this.whatsNewContent = 'Версия ' + whatsNew.header + 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) {
+            await utils.sleep(3000);
+            this.donationVisible = true;
+        }
+    }
+
+    donationDialogDisable() {
+        this.donationVisible = false;
+        if (this.showDonationDialog2020) {
+            this.commit('reader/setSettings', { showDonationDialog2020: false });
+        }
+    }
+
+    donationDialogRemind() {
+        this.donationVisible = false;
+        this.commit('reader/setDonationRemindDate', utils.formatDate(new Date(), 'coDate'));
+    }
+
+    openDonate() {
+        this.donationVisible = false;
+        this.liberamaTopVisible = false;
+        this.$emit('donate-toggle');
+    }
+
+    async copyLink(link) {
+        const result = await utils.copyTextToClipboard(link);
+        if (result)
+            this.$root.notify.success(`Ссылка ${link} успешно скопирована в буфер обмена`);
+        else
+            this.$root.notify.error('Копирование не удалось');
+    }
+
+    openVersionHistory() {
+        this.whatsNewVisible = false;
+        this.$emit('version-history-toggle');
+    }
+
+    whatsNewDisable() {
+        this.whatsNewVisible = false;
+        const whatsNew = versionHistory[0];
+        this.commit('reader/setWhatsNewContentHash', whatsNew.header);
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    get settings() {
+        return this.$store.state.reader.settings;
+    }
+
+    get whatsNewContentHash() {
+        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 });
+        }
+    }
+
+    keyHook() {
+        if (this.$refs.dialog1.active || this.$refs.dialog2.active || this.$refs.dialog3.active)
+            return true;
+        return false;
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.clickable {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.copy-icon {
+    cursor: pointer;
+    font-size: 120%;
+    color: blue;
+}
+</style>

client/components/Reader/ServerStorage/ServerStorage.vue

@@ -69,15 +69,15 @@ class ServerStorage extends Vue {
         try {
             this.cachedRecent = await ssCacheStore.getItem('recent');
             if (!this.cachedRecent)
-                await this.setCachedRecent({rev: 0, data: {}});
+                await this.cleanCachedRecent('cachedRecent');
 
             this.cachedRecentPatch = await ssCacheStore.getItem('recent-patch');
             if (!this.cachedRecentPatch)
-                await this.setCachedRecentPatch({rev: 0, data: {}});
+                await this.cleanCachedRecent('cachedRecentPatch');
 
             this.cachedRecentMod = await ssCacheStore.getItem('recent-mod');
             if (!this.cachedRecentMod)
-                await this.setCachedRecentMod({rev: 0, data: {}});
+                await this.cleanCachedRecent('cachedRecentMod');
 
             if (!this.serverStorageKey) {
                 //генерируем новый ключ
@@ -105,6 +105,15 @@ class ServerStorage extends Vue {
         this.cachedRecentMod = value;
     }
 
+    async cleanCachedRecent(whatToClean) {
+        if (whatToClean == 'cachedRecent' || whatToClean == 'all')
+            await this.setCachedRecent({rev: 0, data: {}});
+        if (whatToClean == 'cachedRecentPatch' || whatToClean == 'all')
+            await this.setCachedRecentPatch({rev: 0, data: {}});
+        if (whatToClean == 'cachedRecentMod' || whatToClean == 'all')
+            await this.setCachedRecentMod({rev: 0, data: {}});
+    }
+
     async generateNewServerStorageKey() {
         const key = utils.toBase58(utils.randomArray(32));
         this.commit('reader/setServerStorageKey', key);
@@ -134,9 +143,12 @@ class ServerStorage extends Vue {
             await this.currentProfileChanged(force);
             await this.loadLibs(force);
 
+            if (force)
+                await this.cleanCachedRecent('all');
             const loadSuccess = await this.loadRecent();
-            if (loadSuccess && force)
+            if (loadSuccess && force) {
                 await this.saveRecent();
+            }
         }
     }
 
@@ -493,7 +505,7 @@ class ServerStorage extends Vue {
 
                 const md = newRecentMod.data;
                 if (md.key && result[md.key])
-                    result[md.key] = utils.applyObjDiff(result[md.key], md.mod, true);
+                    result[md.key] = utils.applyObjDiff(result[md.key], md.mod, {isAddChanged: true});
 
                 if (!bookManager.loaded) {
                     this.warning('Ожидание загрузки списка книг перед синхронизацией');
@@ -557,7 +569,7 @@ class ServerStorage extends Vue {
 
                 let applyMod = this.cachedRecentMod.data;
                 if (applyMod && applyMod.key && newRecentPatch.data[applyMod.key])
-                    newRecentPatch.data[applyMod.key] = utils.applyObjDiff(newRecentPatch.data[applyMod.key], applyMod.mod, true);
+                    newRecentPatch.data[applyMod.key] = utils.applyObjDiff(newRecentPatch.data[applyMod.key], applyMod.mod, {isAddChanged: true});
 
                 newRecentMod = {rev: this.cachedRecentMod.rev + 1, data: {}};
                 needSaveRecentPatch = true;

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -108,8 +108,10 @@ export default @Component({
         },
         vertShift: function(newValue) {
             const font = (this.webFontName ? this.webFontName : this.fontName);
-            this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
-            this.fontVertShift = newValue;
+            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);
@@ -185,10 +187,18 @@ class SettingsPage extends Vue {
     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.$watch(prop, (newValue) => {
+
+            this.unwatch[prop] = this.$watch(prop, (newValue) => {
                 this.form = Object.assign({}, this.form, {[prop]: newValue});
             });
         }
@@ -397,7 +407,7 @@ class SettingsPage extends Vue {
             return;
 
         try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.currentProfile}' необратимо.` +
+            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 'Удаление не подтверждено'; },

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

@@ -22,7 +22,7 @@
             <q-select v-model="currentProfile" :options="currentProfileOptions"
                 style="width: 275px"
                 dropdown-icon="la la-angle-down la-sm"
-                outlined dense emit-value map-options
+                outlined dense emit-value map-options display-value-sanitize options-sanitize
             />
         </div>
     </div>

client/components/Reader/TextPage/TextPage.vue

@@ -904,8 +904,7 @@ class TextPage extends Vue {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
             const newSize = (this.settings.fontSize + 1 < 200 ? this.settings.fontSize + 1 : 100);
-            const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
-            this.commit('reader/setSettings', newSettings);
+            this.commit('reader/setSettings', {fontSize: newSize});
             await sleep(50);
             this.settingsChanging = false;
         }
@@ -915,8 +914,7 @@ class TextPage extends Vue {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
             const newSize = (this.settings.fontSize - 1 > 5 ? this.settings.fontSize - 1 : 5);
-            const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
-            this.commit('reader/setSettings', newSettings);
+            this.commit('reader/setSettings', {fontSize: newSize});
             await sleep(50);
             this.settingsChanging = false;
         }
@@ -926,8 +924,7 @@ class TextPage extends Vue {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
             const newDelay = (this.settings.scrollingDelay - 50 > 1 ? this.settings.scrollingDelay - 50 : 1);
-            const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
-            this.commit('reader/setSettings', newSettings);
+            this.commit('reader/setSettings', {scrollingDelay: newDelay});
             await sleep(50);
             this.settingsChanging = false;
         }
@@ -937,8 +934,7 @@ class TextPage extends Vue {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
             const newDelay = (this.settings.scrollingDelay + 50 < 10000 ? this.settings.scrollingDelay + 50 : 10000);
-            const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
-            this.commit('reader/setSettings', newSettings);
+            this.commit('reader/setSettings', {scrollingDelay: newDelay});
             await sleep(50);
             this.settingsChanging = false;
         }

client/components/Reader/versionHistory.js

@@ -1,4 +1,28 @@
 export const versionHistory = [
+{
+    showUntil: '2020-11-05',
+    header: '0.9.6 (2020-11-06)',
+    content:
+`
+<ul>
+    <li>завершена работа над новым окном "Библиотека"</li>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-10-31',
+    header: '0.9.5 (2020-11-01)',
+    content:
+`
+<ul>
+    <li>на панель инструментов добавлена новая кнопка "Обновить с разбиением на параграфы"</li>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
 {
     showUntil: '2020-10-28',
     header: '0.9.4 (2020-10-29)',

client/components/share/Dialog.vue

@@ -32,7 +32,7 @@ const DialogProps = Vue.extend({
     props: {
         value: Boolean,
     }
-})
+});
 
 export default @Component({
 })

client/components/share/StdDialog.vue

@@ -6,7 +6,7 @@
         <div v-show="type == 'alert'" class="bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
                 <div class="close-icon column justify-center items-center">
@@ -29,7 +29,7 @@
         <div v-show="type == 'confirm'" class="bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
                 <div class="close-icon column justify-center items-center">
@@ -53,7 +53,7 @@
         <div v-show="type == 'prompt'" class="bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
                 <div class="close-icon column justify-center items-center">
@@ -79,7 +79,7 @@
         <div v-show="type == 'hotKey'" class="bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
                 <div class="close-icon column justify-center items-center">
@@ -127,6 +127,7 @@ class StdDialog extends Vue {
     inputValue = '';
     error = '';
     iconColor = '';
+    iconName = '';
     hotKeyCode = '';
 
     created() {
@@ -144,12 +145,18 @@ class StdDialog extends Vue {
         this.inputValidator = null;
         this.inputValue = '';
         this.error = '';
+        this.showed = false;
 
         this.iconColor = 'text-warning';
         if (opts && opts.color) {
             this.iconColor = `text-${opts.color}`;
         }
 
+        this.iconName = 'las la-exclamation-circle';
+        if (opts && opts.iconName) {
+            this.iconName = opts.iconName;
+        }
+
         this.hotKeyCode = '';
         if (opts && opts.hotKeyCode) {
             this.hotKeyCode = opts.hotKeyCode;
@@ -161,6 +168,7 @@ class StdDialog extends Vue {
             this.hideTrigger();
             this.hideTrigger = null;
         }
+        this.showed = false;
     }
 
     onShow() {
@@ -170,6 +178,7 @@ class StdDialog extends Vue {
                 this.validate(this.inputValue);
             this.$refs.input.focus();
         }
+        this.showed = true;
     }
 
     validate(value) {
@@ -276,7 +285,7 @@ class StdDialog extends Vue {
     }
 
     keyHook(event) {
-        if (this.active) {
+        if (this.active && this.showed) {
             let handled = false;
             if (this.type == 'hotKey') {
                 if (event.type == 'keydown') {

client/components/share/Window.vue

@@ -1,7 +1,7 @@
 <template>
     <div ref="main" class="main xyfit absolute" @click="close" @mouseup="onMouseUp" @mousemove="onMouseMove">
         <div ref="windowBox" class="xyfit absolute flex no-wrap" @click.stop>
-            <div class="window flexfit column no-wrap">
+            <div ref="window" class="window flexfit column no-wrap">
                 <div ref="header" class="header row justify-end" @mousedown.prevent.stop="onMouseDown"
                     @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove">
                     <span class="header-text col"><slot name="header"></slot></span>
@@ -26,11 +26,15 @@ export default @Component({
         width: { type: String, default: '100%' },
         maxWidth: { type: String, default: '' },
         topShift: { type: Number, default: 0 },
+        margin: '',
     }
 })
 class Window extends Vue {
     init() {
         this.$nextTick(() => {
+            this.$refs.main.style.top = 0;
+            this.$refs.main.style.left = 0;
+
             this.$refs.windowBox.style.height = this.height;
             this.$refs.windowBox.style.width = this.width;
             if (this.maxWidth)
@@ -40,6 +44,9 @@ class Window extends Vue {
             const top = (this.$refs.main.offsetHeight - this.$refs.windowBox.offsetHeight)/2 + this.topShift;
             this.$refs.windowBox.style.left = (left > 0 ? left : 0) + 'px';
             this.$refs.windowBox.style.top = (top > 0 ? top : 0) + 'px';
+
+            if (this.margin)
+                this.$refs.window.style.margin = this.margin;
         });
     }
 

client/main.js

@@ -4,6 +4,9 @@ import router from './router';
 import store from './store';
 import './quasar';
 
+import vueSanitize from 'vue-sanitize';
+Vue.use(vueSanitize);
+
 import App from './components/App.vue';
 //Vue.config.productionTip = false;
 Vue.prototype.$isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

client/quasar.js

@@ -31,6 +31,7 @@ import {QColor} from 'quasar/src/components/color';
 import {QPopupProxy} from 'quasar/src/components/popup-proxy';
 import {QDialog} from 'quasar/src/components/dialog';
 import {QChip} from 'quasar/src/components/chip';
+import {QTree} from 'quasar/src/components/tree';
 
 const components = {
     //QLayout,
@@ -57,6 +58,7 @@ const components = {
     QPopupProxy,
     QDialog,
     QChip,
+    QTree
 };
 
 //directives 

client/share/utils.js

@@ -130,20 +130,53 @@ export function getObjDiff(oldObj, newObj) {
 }
 
 export function isObjDiff(diff) {
-    return (_.isObject(diff) && diff.__isDiff);
+    return (_.isObject(diff) && diff.__isDiff && diff.change && diff.add && diff.del);
 }
 
 export function isEmptyObjDiff(diff) {
-    return (!_.isObject(diff) || !diff.__isDiff ||
-        (!Object.keys(diff.change).length &&
-            !Object.keys(diff.add).length &&
-            !diff.del.length
+    return (!isObjDiff(diff) ||
+        !(Object.keys(diff.change).length ||
+          Object.keys(diff.add).length ||
+          diff.del.length
         )
     );
 }
 
-export function applyObjDiff(obj, diff, isAddChanged) {
-    const result = _.cloneDeep(obj);
+export function isEmptyObjDiffDeep(diff, opts = {}) {
+    if (!isObjDiff(diff))
+        return true;
+
+    const {
+        isApplyChange = true,
+        isApplyAdd = true,
+        isApplyDel = true,
+    } = opts;
+
+    let notEmptyDeep = false;
+    const change = diff.change;
+    for (const key of Object.keys(change)) {
+        if (_.isObject(change[key]))
+            notEmptyDeep |= !isEmptyObjDiffDeep(change[key], opts);
+        else if (isApplyChange)
+            notEmptyDeep = true;
+    }
+
+    return !(
+        notEmptyDeep ||
+        (isApplyAdd && Object.keys(diff.add).length) ||
+        (isApplyDel && diff.del.length)
+    );
+}
+
+export function applyObjDiff(obj, diff, opts = {}) {
+    const {
+        isAddChanged = false,
+        isApplyChange = true,
+        isApplyAdd = true,
+        isApplyDel = true,
+    } = opts;
+
+    let result = _.cloneDeep(obj);
     if (!diff.__isDiff)
         return result;
 
@@ -151,21 +184,28 @@ export function applyObjDiff(obj, diff, isAddChanged) {
     for (const key of Object.keys(change)) {
         if (result.hasOwnProperty(key)) {
             if (_.isObject(change[key])) {
-                result[key] = applyObjDiff(result[key], change[key], isAddChanged);
+                result[key] = applyObjDiff(result[key], change[key], opts);
             } else {
-                result[key] = _.cloneDeep(change[key]);
+                if (isApplyChange)
+                    result[key] = _.cloneDeep(change[key]);
             }
         } else if (isAddChanged) {
             result[key] = _.cloneDeep(change[key]);
         }
     }
 
-    for (const key of Object.keys(diff.add)) {
-        result[key] = _.cloneDeep(diff.add[key]);
+    if (isApplyAdd) {
+        for (const key of Object.keys(diff.add)) {
+            result[key] = _.cloneDeep(diff.add[key]);
+        }
     }
 
-    for (const key of diff.del) {
-        delete result[key];
+    if (isApplyDel && diff.del.length) {
+        for (const key of diff.del) {
+            delete result[key];
+        }
+        if (_.isArray(result))
+            result = result.filter(v => v);
     }
 
     return result;

client/store/modules/reader.js

@@ -1,3 +1,5 @@
+import * as utils from '../../share/utils';
+
 const readerActions = {
     'help': 'Вызвать cправку',
     'loader': 'На страницу загрузки',
@@ -10,6 +12,7 @@ const readerActions = {
     'setPosition': 'Установить позицию',
     'search': 'Найти в тексте',
     'copyText': 'Скопировать текст со страницы',
+    'splitToPara': 'Обновить с разбиением на параграфы',
     'refresh': 'Принудительно обновить книгу',
     'offlineMode': 'Автономный режим (без интернета)',
     'libs': 'Библиотека',
@@ -37,6 +40,7 @@ const toolButtons = [
     {name: 'setPosition', show: true},
     {name: 'search',      show: true},
     {name: 'copyText',    show: false},
+    {name: 'splitToPara', show: false},
     {name: 'refresh',     show: true},
     {name: 'libs',        show: true},
     {name: 'recentBooks', show: true},
@@ -55,6 +59,7 @@ const hotKeys = [
     {name: 'setPosition', codes: ['P']},
     {name: 'search', codes: ['Ctrl+F']},
     {name: 'copyText', codes: ['Ctrl+C']},
+    {name: 'splitToPara', codes: ['Shift+R']},
     {name: 'refresh', codes: ['R']},
     {name: 'offlineMode', codes: ['O']},
     {name: 'libs', codes: ['L']},
@@ -246,6 +251,7 @@ const settingDefaults = {
     showServerStorageMessages: true,
     showWhatsNewDialog: true,
     showDonationDialog2020: true,
+    showLiberamaTopDialog2020: true,
     enableSitesFilter: true,
 
     fontShifts: {},
@@ -253,14 +259,38 @@ const settingDefaults = {
     userHotKeys: {},
 };
 
+for (const font of fonts)
+    settingDefaults.fontShifts[font.name] = font.fontVertShift;
+for (const font of webFonts)
+    settingDefaults.fontShifts[font.name] = font.fontVertShift;
+for (const button of toolButtons)
+    settingDefaults.showToolButton[button.name] = button.show;
+for (const hotKey of hotKeys)
+    settingDefaults.userHotKeys[hotKey.name] = hotKey.codes;
+
+function addDefaultsToSettings(settings) {
+    const diff = utils.getObjDiff(settings, settingDefaults);
+    
+    if (!utils.isEmptyObjDiffDeep(diff, {isApplyChange: false})) {
+        return utils.applyObjDiff(settings, diff, {isApplyChange: false});
+    }
+
+    return false;
+}
+
 const libsDefaults = {
     startLink: 'http://flibusta.is',
     comment: 'Флибуста | Книжное братство',
     closeAfterSubmit: false,
+    openInFrameOnEnter: false,
+    openInFrameOnAdd: false,
     groups: [
         {r: 'http://flibusta.is', s: 'http://flibusta.is', list: [
             {l: 'http://flibusta.is', c: 'Флибуста | Книжное братство'},
         ]},
+        {r: 'https://flibs.in', s: 'https://flibs.in', list: [
+            {l: 'https://flibs.in', c: 'Flibs'},
+        ]},
         {r: 'http://samlib.ru', s: 'http://samlib.ru', list: [
             {l: 'http://samlib.ru', c: 'Журнал "Самиздат"'},
         ]},
@@ -276,15 +306,6 @@ const libsDefaults = {
     ]
 };
 
-for (const font of fonts)
-    settingDefaults.fontShifts[font.name] = font.fontVertShift;
-for (const font of webFonts)
-    settingDefaults.fontShifts[font.name] = font.fontVertShift;
-for (const button of toolButtons)
-    settingDefaults.showToolButton[button.name] = button.show;
-for (const hotKey of hotKeys)
-    settingDefaults.userHotKeys[hotKey.name] = hotKey.codes;
-
 // initial state
 const state = {
     toolBarActive: true,
@@ -338,7 +359,13 @@ const mutations = {
         state.currentProfile = value;
     },
     setSettings(state, value) {
-        state.settings = Object.assign({}, state.settings, value);
+        const newSettings = Object.assign({}, state.settings, value);
+        const added = addDefaultsToSettings(newSettings);
+        if (added) {
+            state.settings = added;
+        } else {
+            state.settings = newSettings;
+        }
     },
     setSettingsRev(state, value) {
         state.settingsRev = Object.assign({}, state.settingsRev, value);
@@ -358,6 +385,7 @@ export default {
     fonts,
     webFonts,
     settingDefaults,
+    addDefaultsToSettings,
     libsDefaults,
 
     namespaced: true,

docs/beta/beta.liberama

@@ -0,0 +1,85 @@
+server {
+  listen 443 ssl; # managed by Certbot
+  ssl_certificate /etc/letsencrypt/live/beta.liberama.top/fullchain.pem; # managed by Certbot
+  ssl_certificate_key /etc/letsencrypt/live/beta.liberama.top/privkey.pem; # managed by Certbot
+  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
+
+  server_name beta.liberama.top;
+
+  client_max_body_size 50m;
+  proxy_read_timeout 1h;
+
+  gzip on;
+  gzip_min_length 1024;
+  gzip_proxied expired no-cache no-store private auth;
+  gzip_types *;
+
+  location /api {
+    proxy_pass http://127.0.0.1:34082;
+  }
+
+  location /ws {
+    proxy_pass http://127.0.0.1:34082;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    root /home/beta.liberama/public;
+
+    location /tmp {
+      types { } default_type "application/xml; charset=utf-8";
+      add_header Content-Encoding gzip;
+    }
+
+    location ~* \.(?:manifest|appcache|html)$ {
+      expires -1;
+    }
+  }
+}
+
+server {
+  listen 80;
+  server_name beta.liberama.top;
+
+  return 301 https://$host$request_uri;
+}
+
+server {
+  listen 80;
+  server_name b.beta.liberama.top;
+
+  client_max_body_size 50m;
+  proxy_read_timeout 1h;
+
+  gzip on;
+  gzip_min_length 1024;
+  gzip_proxied expired no-cache no-store private auth;
+  gzip_types *;
+
+  location /api {
+    proxy_pass http://127.0.0.1:34082;
+  }
+
+  location /ws {
+    proxy_pass http://127.0.0.1:34082;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    root /home/beta.liberama/public;
+
+    location /tmp {
+      types { } default_type "application/xml; charset=utf-8";
+      add_header Content-Encoding gzip;
+    }
+
+    location ~* \.(?:manifest|appcache|html)$ {
+      expires -1;
+    }
+  }
+}

docs/omnireader.ru/README.md

@@ -64,7 +64,7 @@ sudo -u www-data cp -r docs/omnireader.ru/old/* /home/oldreader
 
 ## Запуск по крону
 ```
-* * * * * /root/liberama/docs/omnireader/cron_server.sh
+* * * * * /root/liberama/docs/omnireader.ru/cron_server.sh
 ```
 
 ## Деплой и запуск

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "Liberama",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -36,12 +36,6 @@
             "pkg-up": "^2.0.0"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001062",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz",
-          "integrity": "sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==",
-          "dev": true
-        },
         "electron-to-chromium": {
           "version": "1.3.446",
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.446.tgz",
@@ -321,12 +315,6 @@
             "pkg-up": "^2.0.0"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001062",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz",
-          "integrity": "sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==",
-          "dev": true
-        },
         "electron-to-chromium": {
           "version": "1.3.446",
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.446.tgz",
@@ -1603,12 +1591,6 @@
             "pkg-up": "^2.0.0"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001062",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz",
-          "integrity": "sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==",
-          "dev": true
-        },
         "electron-to-chromium": {
           "version": "1.3.446",
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.446.tgz",
@@ -4017,9 +3999,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000989",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz",
-      "integrity": "sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==",
+      "version": "1.0.30001154",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001154.tgz",
+      "integrity": "sha512-y9DvdSti8NnYB9Be92ddMZQrcOe04kcQtcxtBx4NkB04+qZ+JUWotnXBJTmxlKudhxNTQ3RRknMwNU2YQl/Org==",
       "dev": true
     },
     "caseless": {
@@ -4373,6 +4355,11 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw=="
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4759,12 +4746,6 @@
             "pkg-up": "^2.0.0"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001062",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz",
-          "integrity": "sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==",
-          "dev": true
-        },
         "electron-to-chromium": {
           "version": "1.3.446",
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.446.tgz",
@@ -8696,6 +8677,11 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA=="
+    },
     "last-call-webpack-plugin": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
@@ -8790,6 +8776,30 @@
         "immediate": "~3.0.5"
       }
     },
+    "line-column": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/line-column/-/line-column-1.0.2.tgz",
+      "integrity": "sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=",
+      "requires": {
+        "isarray": "^1.0.0",
+        "isobject": "^2.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        },
+        "isobject": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+          "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+          "requires": {
+            "isarray": "1.0.0"
+          }
+        }
+      }
+    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -9372,6 +9382,11 @@
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
     },
+    "nanoid": {
+      "version": "3.1.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
+      "integrity": "sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -10010,6 +10025,11 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha1-8r0iH2zJcKk42IVWq8WJyqqiveE="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -13306,6 +13326,97 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sanitize-html": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.1.1.tgz",
+      "integrity": "sha512-yb+I+K25cn6PzsRJb+kGdlOBC3SkvEwJrr/Xl+6YR42oDZDeu61yWeEMSEi0hCKlRSYlWWE4tUnF2Ds+c/M1Vg==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^4.1.0",
+        "is-plain-object": "^5.0.0",
+        "klona": "^2.0.3",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.0.2"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
+          "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
+          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA=="
+        },
+        "domhandler": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+          "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
+          "integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.3.0"
+          }
+        },
+        "entities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "htmlparser2": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
+          "integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "domutils": "^2.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        },
+        "postcss": {
+          "version": "8.1.4",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.4.tgz",
+          "integrity": "sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==",
+          "requires": {
+            "colorette": "^1.2.1",
+            "line-column": "^1.0.2",
+            "nanoid": "^3.1.15",
+            "source-map": "^0.6.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -15193,6 +15304,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
       "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
     },
+    "vue-sanitize": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue-sanitize/-/vue-sanitize-0.2.1.tgz",
+      "integrity": "sha512-MhrfAaAqIQ8JXWfdlhK6f+H2WnZ7KQwkOgLNeUyfACI2bq/3HPZ2zeUQDathnLdsXMXAa8pJehOgPYtlaG9Jew==",
+      "requires": {
+        "sanitize-html": "^2.1.1"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Liberama",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "author": "Book Pauk <bookpauk@gmail.com>",
   "license": "CC0-1.0",
   "repository": "bookpauk/liberama",
@@ -81,6 +81,7 @@
     "unbzip2-stream": "^1.3.3",
     "vue": "github:bookpauk/vue",
     "vue-router": "^3.1.6",
+    "vue-sanitize": "^0.2.1",
     "vuex": "^3.1.2",
     "vuex-persistedstate": "^2.7.1",
     "webdav": "^2.10.2",

server/controllers/ReaderController.js

@@ -19,7 +19,9 @@ class ReaderController extends BaseController {
                 throw new Error(`key 'url' is empty`);
             const workerId = this.readerWorker.loadBookUrl({
                 url: request.url, 
-                enableSitesFilter: (request.hasOwnProperty('enableSitesFilter') ? request.enableSitesFilter : true)
+                enableSitesFilter: (request.hasOwnProperty('enableSitesFilter') ? request.enableSitesFilter : true),
+                skipCheck: (request.hasOwnProperty('skipCheck') ? request.skipCheck : false),
+                isText: (request.hasOwnProperty('isText') ? request.isText : false),
             });
             const state = this.workerState.getState(workerId);
             return (state ? state : {});

server/core/Reader/BookConverter/ConvertHtml.js

@@ -200,7 +200,7 @@ class ConvertHtml extends ConvertBase {
 
         titleInfo['book-title'] = title;
         //подозрение на чистый текст, надо разбить на параграфы
-        if (isText || pars.length < buf.length/2000) {
+        if (isText || (buf.length > 30*1024 && pars.length < buf.length/2000)) {
             let total = 0;
             let count = 1;
             for (let i = 0; i < spaceCounter.length; i++) {