Работа над LibsPage

client/components/Reader/LibsPage/LibsPage.vue

@@ -0,0 +1,113 @@
+<template>
+    <Window ref="window" @close="close">
+        <template slot="header">
+            Библиотеки <span v-show="startLink">(выбрана {{ startLink }})</span>
+        </template>
+
+        <div 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="externalLib" :options="externalLibOptions"
+                    style="width: 250px"
+                    dropdown-icon="la la-angle-down la-sm"
+                    rounded outlined dense emit-value map-options
+                >
+                    <template v-slot:prepend>
+                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" size="12px"/>
+                        <q-btn round dense color="blue" icon="la la-bars" size="12px"/>
+                    </template>
+                </q-select>
+                <q-select class="q-mr-sm" v-model="startPageModel" :options="startPageOptions" style="width: 50px"
+                    dropdown-icon="la la-angle-down la-sm"
+                    rounded outlined dense emit-value map-options
+                />                
+                <q-input ref="input" class="col" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги" @focus="onInputFocus">
+                    <template v-slot:prepend>
+                        <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px"/>
+                    </template>
+                </q-input>
+                <q-btn class="q-mx-sm" rounded color="green-5" no-caps size="14px">Открыть</q-btn>
+            </div>
+            <div class="separator"></div>
+            <iframe class="col fit" :src="frameSrc" frameborder="0"></iframe>
+        </div>
+    </Window>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import Window from '../../share/Window.vue';
+
+export default @Component({
+    components: {
+        Window
+    },
+    watch: {
+    }    
+})
+class LibsPage extends Vue {
+    startLink = '';
+    frameSrc = '';
+    bookUrl = '';
+
+    created() {
+        this.commit = this.$store.commit;
+        this.loadLibs();
+    }
+
+    init() {
+        this.$refs.window.init();
+        if (!this.frameSrc)
+            this.frameSrc = this.libs.startLink;
+    }
+
+    get libs() {
+        return this.$store.state.reader.libs;
+    }
+
+    loadLibs() {
+        const libs = this.libs;
+        this.startLink = this.removeProtocol(libs.startLink);
+    }
+
+    openBookUrlInFrame() {
+        if (this.bookUrl)
+            this.frameSrc = this.addProtocol(this.bookUrl);
+    }
+
+    addProtocol(url) {
+        if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
+            return 'http://' + url;
+        return url;
+    }
+
+    removeProtocol(url) {
+        return url.replace(/(^\w+:|^)\/\//, '');
+    }
+
+    onInputFocus() {
+        this.$refs.input.select();
+    }
+
+    close() {
+        this.$emit('do-action', {action: 'libs'});
+    }
+
+    keyHook() {
+        if (event.type == 'keydown' && (event.code == 'Escape')) {
+            this.close();
+        }
+        return true;
+    }
+
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.separator {
+    height: 1px;
+    background-color: #A0A0A0;
+}</style>

client/components/Reader/Reader.vue

@@ -85,6 +85,7 @@
                 @stop-text-search="stopTextSearch">
             </SearchPage>
             <CopyTextPage v-if="copyTextActive" ref="copyTextPage" @do-action="doAction"></CopyTextPage>
+            <LibsPage v-show="libsActive" ref="libsPage" @do-action="doAction"></LibsPage>
             <RecentBooksPage v-show="recentBooksActive" ref="recentBooksPage" @load-book="loadBook" @recent-books-close="recentBooksClose"></RecentBooksPage>
             <SettingsPage v-show="settingsActive" ref="settingsPage" @do-action="doAction"></SettingsPage>
             <HelpPage v-if="helpActive" ref="helpPage" @do-action="doAction"></HelpPage>
@@ -167,6 +168,7 @@ import ProgressPage from './ProgressPage/ProgressPage.vue';
 import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
 import SearchPage from './SearchPage/SearchPage.vue';
 import CopyTextPage from './CopyTextPage/CopyTextPage.vue';
+import LibsPage from './LibsPage/LibsPage.vue';
 import RecentBooksPage from './RecentBooksPage/RecentBooksPage.vue';
 import SettingsPage from './SettingsPage/SettingsPage.vue';
 import HelpPage from './HelpPage/HelpPage.vue';
@@ -189,6 +191,7 @@ export default @Component({
         SetPositionPage,
         SearchPage,
         CopyTextPage,
+        LibsPage,
         RecentBooksPage,
         SettingsPage,
         HelpPage,
@@ -599,6 +602,7 @@ class Reader extends Vue {
     closeAllWindows() {
         this.setPositionActive = false;
         this.copyTextActive = false;
+        this.libsActive = false;
         this.recentBooksActive = false;
         this.settingsActive = false;
         this.stopScrolling();
@@ -711,6 +715,17 @@ class Reader extends Vue {
         }
     }
 
+    libsToogle() {
+        this.libsActive = !this.libsActive;
+        if (this.libsActive) {
+            this.closeAllWindows();
+            this.$refs.libsPage.init();
+            this.libsActive = true;
+        } else {
+            this.libsActive = false;
+        }
+    }
+
     offlineModeToggle() {
         this.offlineModeActive = !this.offlineModeActive;
         this.$refs.serverStorage.offlineModeActive = this.offlineModeActive;
@@ -1205,6 +1220,9 @@ class Reader extends Vue {
             if (!handled && this.copyTextActive)
                 handled = this.$refs.copyTextPage.keyHook(event);
 
+            if (!handled && this.libsActive)
+                handled = this.$refs.libsPage.keyHook(event);
+
             if (!handled && this.$refs.page && this.$refs.page.keyHook)
                 handled = this.$refs.page.keyHook(event);