Работа над LibsPage (ExternalLibs)

client/components/App.vue

@@ -189,7 +189,7 @@ class App extends Vue {
     }
 
     get isReaderActive() {
-        return this.rootRoute == '/reader';
+        return (this.rootRoute == '/reader' || this.rootRoute == '/external-libs');
     }
 
     redirectIfNeeded() {

client/components/ExternalLibs/ExternalLibs.vue

@@ -50,8 +50,8 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import _ from 'lodash';
 
-import Window from '../../share/Window.vue';
-//import rstore from '../../../store/modules/reader';
+import Window from '../share/Window.vue';
+//import rstore from '../../store/modules/reader';
 
 export default @Component({
     components: {
@@ -70,7 +70,7 @@ export default @Component({
         }
     }    
 })
-class LibsPage extends Vue {
+class ExternalLibs extends Vue {
     frameVisible = false;
     startLink = '';
     rootLink = '';
@@ -84,7 +84,7 @@ class LibsPage extends Vue {
         //this.commit('reader/setLibs', rstore.libsDefaults);
     }
 
-    init() {
+    mounted() {
         this.$refs.window.init();
         if (!this.frameSrc)
             this.frameSrc = this.libs.startLink;

client/components/Reader/LibsPage/LibsPage.vue

@@ -1,54 +1,11 @@
 <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="rootLink" :options="rootLinkOptions"
-                    style="width: 230px"
-                    dropdown-icon="la la-angle-down la-sm"
-                    rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
-                >
-                    <template v-slot:prepend>
-                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" size="12px"/>
-                        <q-btn round dense color="blue" icon="la la-bars" size="12px"/>
-                    </template>
-                    <template v-slot:selected>
-                        <div style="overflow: hidden; white-space: nowrap;">{{ removeProtocol(rootLink) }}</div>
-                    </template>
-                </q-select>
-                <q-select class="q-mr-sm" v-model="selectedLink" :options="selectedLinkOptions" style="width: 50px"
-                    dropdown-icon="la la-angle-down la-sm"
-                    rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
-                >
-                </q-select>
-                <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги" @focus="onInputFocus">
-                    <template v-slot:prepend>
-                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToStartLink" 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-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
-                        </q-btn>
-                    </template>
-                </q-input>
-                <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl">Открыть
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть в читалке</q-tooltip>
-                </q-btn>
-            </div>
-            <div class="separator"></div>
-            <iframe v-if="frameVisible" class="col fit" ref="frame" :src="frameSrc" sandbox="allow-same-origin" frameborder="0"></iframe>
-        </div>
-    </Window>
+    <div></div>
 </template>
 
 <script>
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import _ from 'lodash';
 
 import Window from '../../share/Window.vue';
 //import rstore from '../../../store/modules/reader';
@@ -61,35 +18,25 @@ export default @Component({
         libs: function() {
             this.loadLibs();
         },
-        rootLink: function() {
-            this.updateSelectedLink();
-            this.updateStartLink();
-        },
-        selectedLink: function() {
-            this.updateStartLink();
-        }
     }    
 })
 class LibsPage extends Vue {
-    frameVisible = false;
-    startLink = '';
-    rootLink = '';
-    selectedLink = '';
-    frameSrc = '';
-    bookUrl = '';
-
     created() {
+        this.popupWindow = null;
         this.commit = this.$store.commit;
-        this.loadLibs();
         //this.commit('reader/setLibs', rstore.libsDefaults);
     }
 
     init() {
-        this.$refs.window.init();
-        if (!this.frameSrc)
-            this.frameSrc = this.libs.startLink;
-        this.frameVisible = false;
-        this.frameVisible = true;
+        this.popupWindow = window.open(`http://${window.location.host}/?p=external-libs#/external-libs`);
+        this.loadLibs();
+    }
+
+    done() {
+        if (this.popupWindow) {
+            this.popupWindow.close();
+            this.popupWindow = null;
+        }
     }
 
     get libs() {
@@ -97,132 +44,18 @@ class LibsPage extends Vue {
     }
 
     loadLibs() {
-        const libs = this.libs;
-        this.startLink = (libs.comment ? libs.comment + ' ': '') + this.removeProtocol(libs.startLink);
-        this.rootLink = this.getOrigin(libs.startLink);
-        this.updateSelectedLink();
     }
 
-    updateSelectedLink() {
-        const index = this.getRootIndexByUrl(this.rootLink);
-        if (index >= 0)
-            this.selectedLink = this.libs.groups[index].s;
-    }
-
-    updateStartLink() {
-        const index = this.getRootIndexByUrl(this.rootLink);
-        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.frameSrc = this.selectedLink;
-            this.commit('reader/setLibs', libs);
-        }
-    }
-
-    get rootLinkOptions() {
-        let result = [];
-        this.libs.groups.forEach(group => {
-            result.push({label: this.removeProtocol(group.r), value: group.r});
-        });
-
-        return result;
-    }
-
-    get selectedLinkOptions() {
-        let result = [];
-        const index = this.getRootIndexByUrl(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});
-            });
-        }
-
-        return result;
-    }
-
-    openBookUrlInFrame() {
-        if (this.bookUrl)
-            this.frameSrc = this.addProtocol(this.bookUrl);
-    }
-
-    goToStartLink() {
-        this.frameSrc = this.libs.startLink;
-        this.frameVisible = false;
-        this.$nextTick(() => {
-            this.frameVisible = true;
-        });
-    }
-
-    addProtocol(url) {
-        if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
-            return 'http://' + url;
-        return url;
-    }
-
-    removeProtocol(url) {
-        return url.replace(/(^\w+:|^)\/\//, '');
-    }
-
-    getOrigin(url) {
-        const parsed = new URL(url);
-        return parsed.origin;
-    }
-
-    removeOrigin(url) {
-        const parsed = new URL(url);
-        const result = url.substring(parsed.origin.length);
-        return (result ? result : '/');
-    }
-
-    getRootIndexByUrl(url) {
-        const origin = this.getOrigin(url);
-        const groups = this.libs.groups;
-        for (let i = 0; i < groups.length; i++) {
-            if (groups[i].r == origin)
-                return i;
-        }
-        return -1;
-    }
-
-    getCommentByLink(list, link) {
-        for (const item of list) {
-            if (item.l == link)
-                return item.c;
-        }
-        return '';
-    }
-
-    onInputFocus() {
-        this.$refs.input.select();
-    }
-
-    submitUrl() {
+/*    submitUrl() {
         if (this.bookUrl) {
             this.$emit('load-book', {url: this.addProtocol(this.bookUrl), force: true});
             this.bookUrl = '';
         }
-    }
+    }*/
 
     close() {
         this.$emit('do-action', {action: 'libs'});
     }
-
-    keyHook() {
-        //недостатки сторонних ui
-        const input = this.$refs.input.$refs.input;
-        if (document.activeElement === input && event.type == 'keydown' && event.code == 'Enter') {
-            this.submitUrl();
-            return true;
-        }
-
-        if (event.type == 'keydown' && (event.code == 'Escape')) {
-            this.close();
-        }
-        return true;
-    }
-
 }
 //-----------------------------------------------------------------------------
 </script>

client/components/Reader/Reader.vue

@@ -602,7 +602,6 @@ class Reader extends Vue {
     closeAllWindows() {
         this.setPositionActive = false;
         this.copyTextActive = false;
-        this.libsActive = false;
         this.recentBooksActive = false;
         this.settingsActive = false;
         this.stopScrolling();
@@ -718,11 +717,9 @@ 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;
+            this.$refs.libsPage.done();
         }
     }
 

client/router.js

@@ -7,11 +7,12 @@ const Search = () => import('./components/CardIndex/Search/Search.vue');
 const Card = () => import('./components/CardIndex/Card/Card.vue');
 const Book = () => import('./components/CardIndex/Book/Book.vue');
 const History = () => import('./components/CardIndex/History/History.vue');
-const Reader = () => import('./components/Reader/Reader.vue');
+
 //немедленная загрузка
 //import Reader from './components/Reader/Reader.vue';
+const Reader = () => import('./components/Reader/Reader.vue');
+const ExternalLibs = () => import('./components/ExternalLibs/ExternalLibs.vue');
 
-//const Forum = () => import('./components/Forum/Forum.vue');
 const Income = () => import('./components/Income/Income.vue');
 const Sources = () => import('./components/Sources/Sources.vue');
 const Settings = () => import('./components/Settings/Settings.vue');
@@ -20,20 +21,21 @@ const Help = () => import('./components/Help/Help.vue');
 
 const myRoutes = [
     ['/', null, null, '/cardindex'],
-    ['/cardindex', CardIndex ],
-    ['/cardindex~search', Search ],
-    ['/cardindex~card', Card ],
-    ['/cardindex~card/:authorId', Card ],
-    ['/cardindex~book', Book ],
-    ['/cardindex~book/:bookId', Book ],
-    ['/cardindex~history', History ],
+    ['/cardindex', CardIndex],
+    ['/cardindex~search', Search],
+    ['/cardindex~card', Card],
+    ['/cardindex~card/:authorId', Card],
+    ['/cardindex~book', Book],
+    ['/cardindex~book/:bookId', Book],
+    ['/cardindex~history', History],
 
-    ['/reader', Reader ],
-    ['/income', Income ],
-    ['/sources', Sources ],
-    ['/settings', Settings ],
-    ['/help', Help ],
-    ['*', null, null, '/cardindex' ],
+    ['/reader', Reader],
+    ['/external-libs', ExternalLibs],
+    ['/income', Income],
+    ['/sources', Sources],
+    ['/settings', Settings],
+    ['/help', Help],
+    ['*', null, null, '/cardindex'],
 ];
 
 let routes = {};