Работа над BookmarkSettings
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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});
|
||||
|
||||
|
||||
38
client/components/ExternalLibs/linkUtils.js
Normal file
38
client/components/ExternalLibs/linkUtils.js
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user