Работа над BookmarkSettings

client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

@@ -6,10 +6,13 @@
 
         <div class="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">
+                <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 q-mr-sm" ref="input" rounded outlined dense bg-color="white" placeholder="Найти" v-model="search">
+                <q-input class="col q-mr-sm" 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>
                 <q-btn round dense color="blue" icon="la la-cog" @click.stop="openOptions" size="14px">
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
@@ -39,13 +42,19 @@
                     <q-tree
                       :nodes="nodes"
                       node-key="key"
-                      tick-strategy="leaf-filtered"
+                      tick-strategy="leaf"
                       :selected.sync="selected"
                       :ticked.sync="ticked"
                       :expanded.sync="expanded"
-                      text-color="grey-7"
                       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>
@@ -58,6 +67,8 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 import Window from '../../share/Window.vue';
 
+import * as lu from '../linkUtils';
+
 const BookmarkSettingsProps = Vue.extend({
     props: {
         libs: Object,
@@ -92,12 +103,23 @@ class BookmarkSettings extends BookmarkSettingsProps {
     get nodes() {
         const result = [];
 
+        this.expanded = [];
         let i = 0;
         this.libs.groups.forEach(group => {
-            const g = {label: group.r, key: `${i}`, children: []};
+            const rkey = `${i}`;
+            const g = {label: group.r, key: rkey, children: []};
             let j = 0;
             group.list.forEach(link => {
-                g.children.push({label: (link.c ? link.c + ' ': '') + link.l, key: `${i}-${j}`});
+                const key = `${i}-${j}`;
+                g.children.push({
+                    label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l),
+                    key
+                });
+                if (link.l == this.libs.startLink && this.expanded.indexOf(rkey) < 0) {
+                    this.expanded.push(rkey);
+                }
+
+                j++;
             });
 
             result.push(g);
@@ -107,6 +129,11 @@ class BookmarkSettings extends BookmarkSettingsProps {
         return result;
     }
 
+    resetSearch() {
+        this.search = '';
+        this.$refs.search.focus();
+    }
+
     openSelected() {
     }
 
@@ -145,4 +172,8 @@ class BookmarkSettings extends BookmarkSettingsProps {
 .tree {
     padding: 10px;
 }
+
+.selected {
+    text-shadow: 0 0 20px yellow, 0 0 15px yellow, 0 0 10px yellow, 0 0 10px yellow, 0 0 5px yellow;
+}
 </style>

client/components/ExternalLibs/ExternalLibs.vue

@@ -28,7 +28,7 @@
                         </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>
 
@@ -113,6 +113,7 @@ 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',
@@ -286,8 +287,8 @@ class ExternalLibs extends Vue {
 
     loadLibs() {
         const libs = this.libs;
-        this.startLink = (libs.comment ? libs.comment + ' ': '') + this.removeProtocol(libs.startLink);
-        this.rootLink = this.getOrigin(libs.startLink);
+        this.startLink = (libs.comment ? libs.comment + ' ': '') + lu.removeProtocol(libs.startLink);
+        this.rootLink = lu.getOrigin(libs.startLink);
         this.updateSelectedLink();
     }
 
@@ -304,10 +305,14 @@ class ExternalLibs extends Vue {
         return result;
     }
 
+    get rootLinkWithoutProtocol() {
+        return lu.removeProtocol(this.rootLink);
+    }
+
     updateSelectedLink() {
         if (!this.ready)
             return;
-        const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        const index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
         if (index >= 0)
             this.selectedLink = this.libs.groups[index].s;
     }
@@ -315,7 +320,7 @@ class ExternalLibs extends Vue {
     updateStartLink() {
         if (!this.ready)
             return;
-        const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        const index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
         if (index >= 0) {
             let libs = _.cloneDeep(this.libs);
             libs.groups[index].s = this.selectedLink;
@@ -332,7 +337,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;
@@ -342,7 +347,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;
@@ -353,10 +358,10 @@ class ExternalLibs extends Vue {
         if (!this.ready)
             return result;
 
-        const index = this.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        const index = lu.getRootIndexByUrl(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});
             });
         }
 
@@ -365,7 +370,7 @@ class ExternalLibs extends Vue {
 
     openBookUrlInFrame() {
         if (this.bookUrl) {
-            this.goToLink(this.addProtocol(this.bookUrl));
+            this.goToLink(lu.addProtocol(this.bookUrl));
         }
     }
 
@@ -383,48 +388,8 @@ class ExternalLibs extends Vue {
         });
     }
 
-    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(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;
-        }
-        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 : '');
     }
 
@@ -457,7 +422,7 @@ class ExternalLibs extends Vue {
     submitUrl() {
         if (this.bookUrl) {
             this.sendMessage({type: 'submitUrl', data: {
-                url: this.makeProxySubst(this.addProtocol(this.bookUrl), true), 
+                url: this.makeProxySubst(lu.addProtocol(this.bookUrl), true), 
                 force: true
             }});
             this.bookUrl = '';
@@ -467,7 +432,7 @@ class ExternalLibs extends Vue {
     }
 
     addBookmark() {
-        this.bookmarkLink = (this.bookUrl ? this.makeProxySubst(this.addProtocol(this.bookUrl), true) : '');
+        this.bookmarkLink = (this.bookUrl ? this.makeProxySubst(lu.addProtocol(this.bookUrl), true) : '');
         this.bookmarkDesc = '';
         this.addBookmarkVisible = true;
         this.$nextTick(() => {
@@ -477,7 +442,7 @@ class ExternalLibs extends Vue {
     }
 
     updateBookmarkLink() {
-        const index = this.getRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
+        const index = lu.getRootIndexByUrl(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);
@@ -509,10 +474,10 @@ class ExternalLibs extends Vue {
         if (!this.bookmarkLink)
             return;
 
-        const link = this.addProtocol(this.bookmarkLink);
+        const link = 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;
@@ -520,7 +485,7 @@ class ExternalLibs extends Vue {
 
         //есть группа в закладках
         if (index >= 0) {
-            const item = this.getListItemByLink(this.libs.groups[index].list, link);
+            const item = lu.getListItemByLink(this.libs.groups[index].list, link);
             
             if (!item || item.c != this.bookmarkDesc) {
                 //добавляем
@@ -543,9 +508,9 @@ class ExternalLibs extends Vue {
             }
 
             //добавляем сначала группу
-            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.getRootIndexByUrl(libs.groups, link);
             if (index >= 0)
                 libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
 

client/components/ExternalLibs/linkUtils.js

@@ -0,0 +1,38 @@
+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 = this.getOrigin(url);
+    for (let i = 0; i < groups.length; i++) {
+        if (groups[i].r == origin)
+            return i;
+    }
+    return -1;
+}
+
+export function getListItemByLink(list, link) {
+    for (const item of list) {
+        if (item.l == link)
+            return item;
+    }
+    return null;
+}
+