From 9fb7892bfe73d6bc9e8139395a5bb52915372f0f Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Thu, 5 Nov 2020 16:40:33 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20ExternalLibs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ExternalLibs/ExternalLibs.vue  | 30 +++++++++++++++----
 client/components/share/StdDialog.vue         | 14 ++++++---
 client/store/modules/reader.js                |  1 -
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/client/components/ExternalLibs/ExternalLibs.vue b/client/components/ExternalLibs/ExternalLibs.vue
index d59ca769..41b3d361 100644
--- a/client/components/ExternalLibs/ExternalLibs.vue
+++ b/client/components/ExternalLibs/ExternalLibs.vue
@@ -5,6 +5,10 @@
         </template>
 
         <template slot="buttons">
+            <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>
             <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
                 <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="16px"/>
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На весь экран</q-tooltip>
@@ -114,7 +118,6 @@
                 <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="openFullscreen" size="36px" label="Открывать окно на весь экран" />                    
                 </div>
 
                 <template slot="footer">
@@ -184,9 +187,6 @@ export default @Component({
         openInFrameOnEnter: function(newValue) {
             this.commitProp('openInFrameOnEnter', newValue);
         },
-        openFullscreen: function(newValue) {
-            this.commitProp('openFullscreen', newValue);
-        },
     }    
 })
 class ExternalLibs extends Vue {
@@ -212,10 +212,10 @@ class ExternalLibs extends Vue {
 
     closeAfterSubmit = false;
     openInFrameOnEnter = false;
-    openFullscreen = false;
 
     created() {
         this.oldStartLink = '';
+        this.justOpened = true;
         this.$root.addKeyHook(this.keyHook);
 
         document.addEventListener('fullscreenchange', () => {
@@ -353,7 +353,6 @@ class ExternalLibs extends Vue {
         this.selectedLink = libs.startLink;
         this.closeAfterSubmit = libs.closeAfterSubmit || false;
         this.openInFrameOnEnter = libs.openInFrameOnEnter || false;
-        this.openFullscreen = libs.openFullscreen || false;
 
         this.updateStartLink();
     }
@@ -703,6 +702,25 @@ class ExternalLibs extends Vue {
         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.$root.stdDialog.active)
diff --git a/client/components/share/StdDialog.vue b/client/components/share/StdDialog.vue
index 9bda6e51..4c673d36 100644
--- a/client/components/share/StdDialog.vue
+++ b/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() {
@@ -151,6 +152,11 @@ class StdDialog extends Vue {
             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;
diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js
index 8933e6da..0aa9ee07 100644
--- a/client/store/modules/reader.js
+++ b/client/store/modules/reader.js
@@ -282,7 +282,6 @@ const libsDefaults = {
     comment: 'Флибуста | Книжное братство',
     closeAfterSubmit: false,
     openInFrameOnEnter: false,
-    openFullscreen: false,
     groups: [
         {r: 'http://flibusta.is', s: 'http://flibusta.is', list: [
             {l: 'http://flibusta.is', c: 'Флибуста | Книжное братство'},