246 lines
8.7 KiB
Vue
246 lines
8.7 KiB
Vue
<template>
|
||
<Window ref="window" width="600px" height="95%" @close="close">
|
||
<template slot="header">
|
||
Настроить закладки
|
||
</template>
|
||
|
||
<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" :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="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>
|
||
</div>
|
||
|
||
<div class="col row">
|
||
<div class="left-panel column items-center bg-grey-3">
|
||
<q-btn class="q-mb-sm" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="14px">
|
||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
|
||
</q-btn>
|
||
<q-btn class="q-mb-sm" round dense color="blue" icon="la la-minus" @click.stop="delBookmark" size="14px" :disabled="!ticked.length">
|
||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Удалить отмеченные закладки</q-tooltip>
|
||
</q-btn>
|
||
<q-btn class="q-mb-sm" round dense color="blue" icon="la la-edit" @click.stop="editBookmark" size="14px" :disabled="!selected || selected.indexOf('-') < 0">
|
||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Редактировать закладку</q-tooltip>
|
||
</q-btn>
|
||
<q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-up" @click.stop="moveBookmark(false)" size="14px" :disabled="!ticked.length">
|
||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вверх</q-tooltip>
|
||
</q-btn>
|
||
<q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-down" @click.stop="moveBookmark(true)" size="14px" :disabled="!ticked.length">
|
||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вниз</q-tooltip>
|
||
</q-btn>
|
||
<q-btn class="q-mb-sm" round dense color="blue" icon="la la-broom" @click.stop="setDefaultBookmarks" size="14px">
|
||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Установить по умолчанию</q-tooltip>
|
||
</q-btn>
|
||
</div>
|
||
|
||
<div class="col tree">
|
||
<q-tree
|
||
:nodes="nodes"
|
||
node-key="key"
|
||
tick-strategy="leaf"
|
||
:selected.sync="selected"
|
||
:ticked.sync="ticked"
|
||
:expanded.sync="expanded"
|
||
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>
|
||
</Window>
|
||
</template>
|
||
|
||
<script>
|
||
//-----------------------------------------------------------------------------
|
||
import Vue from 'vue';
|
||
import Component from 'vue-class-component';
|
||
import _ from 'lodash';
|
||
|
||
import Window from '../../share/Window.vue';
|
||
import * as lu from '../linkUtils';
|
||
import rstore from '../../../store/modules/reader';
|
||
|
||
const BookmarkSettingsProps = Vue.extend({
|
||
props: {
|
||
libs: Object,
|
||
addBookmarkVisible: Boolean,
|
||
}
|
||
});
|
||
|
||
export default @Component({
|
||
components: {
|
||
Window,
|
||
},
|
||
watch: {
|
||
libs: function() {
|
||
},
|
||
}
|
||
})
|
||
class BookmarkSettings extends BookmarkSettingsProps {
|
||
search = '';
|
||
selected = '';
|
||
ticked = [];
|
||
expanded = [];
|
||
|
||
created() {
|
||
this.afterInit = true;
|
||
}
|
||
|
||
mounted() {
|
||
}
|
||
|
||
init() {
|
||
this.$refs.window.init();
|
||
}
|
||
|
||
get nodes() {
|
||
const result = [];
|
||
|
||
const expanded = [];
|
||
this.links = {};
|
||
this.libs.groups.forEach(group => {
|
||
const rkey = `r-${group.r}`;
|
||
const g = {label: group.r, key: rkey, children: []};
|
||
this.links[rkey] = {l: group.r, c: ''};
|
||
|
||
group.list.forEach(link => {
|
||
const key = link.l;
|
||
g.children.push({
|
||
label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l),
|
||
key
|
||
});
|
||
|
||
this.links[key] = link;
|
||
if (link.l == this.libs.startLink && expanded.indexOf(rkey) < 0) {
|
||
expanded.push(rkey);
|
||
}
|
||
|
||
});
|
||
|
||
result.push(g);
|
||
});
|
||
|
||
if (this.afterInit) {
|
||
this.$nextTick(() => {
|
||
this.expanded = expanded;
|
||
});
|
||
this.afterInit = false;
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
resetSearch() {
|
||
this.search = '';
|
||
this.$refs.search.focus();
|
||
}
|
||
|
||
openSelected() {
|
||
if (!this.selected)
|
||
return;
|
||
if (this.selected.indexOf('r-') === 0) {//rootLink
|
||
this.$emit('do-action', {action: 'setRootLink', data: this.links[this.selected].l});
|
||
} else {//selectedLink
|
||
this.$emit('do-action', {action: 'setSelectedLink', data: this.links[this.selected].l});
|
||
}
|
||
this.close();
|
||
}
|
||
|
||
editBookmark() {
|
||
this.$emit('do-action', {action: 'editBookmark', data: {link: this.links[this.selected].l, desc: this.links[this.selected].c}});
|
||
}
|
||
|
||
addBookmark() {
|
||
this.$emit('do-action', {action: 'addBookmark'});
|
||
}
|
||
|
||
async delBookmark() {
|
||
const newLibs = _.cloneDeep(this.libs);
|
||
|
||
if (await this.$root.stdDialog.confirm(`Подтвердите удаление ${this.ticked.length} закладок:`, ' ')) {
|
||
const ticked = new Set(this.ticked);
|
||
for (let i = newLibs.groups.length - 1; i >= 0; i--) {
|
||
const g = newLibs.groups[i];
|
||
for (let j = g.list.length - 1; j >= 0; j--) {
|
||
if (ticked.has(g.list[j].l)) {
|
||
delete g.list[j];
|
||
}
|
||
}
|
||
g.list = g.list.filter(v => v);
|
||
if (!g.list.length)
|
||
delete newLibs.groups[i];
|
||
}
|
||
|
||
newLibs.groups = newLibs.groups.filter(v => v);
|
||
this.ticked = [];
|
||
this.selected = '';
|
||
this.$emit('do-action', {action: 'setLibs', data: newLibs});
|
||
}
|
||
}
|
||
|
||
moveBookmark() {
|
||
}
|
||
|
||
async setDefaultBookmarks() {
|
||
const result = await this.$root.stdDialog.prompt(`Введите 'да' для сброса всех закладок в предустановленные значения:`, ' ', {
|
||
inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
|
||
});
|
||
|
||
if (result && result.value && result.value.toLowerCase() == 'да') {
|
||
this.$emit('do-action', {action: 'setLibs', data: _.cloneDeep(rstore.libsDefaults)});
|
||
}
|
||
}
|
||
|
||
close() {
|
||
this.afterInit = false;
|
||
this.$emit('close');
|
||
}
|
||
|
||
keyHook(event) {
|
||
if (this.addBookmarkVisible)
|
||
return false;
|
||
|
||
if (event.type == 'keydown' && event.key == 'Escape') {
|
||
this.close();
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
}
|
||
//-----------------------------------------------------------------------------
|
||
</script>
|
||
|
||
<style scoped>
|
||
.top-panel {
|
||
height: 50px;
|
||
border-bottom: 1px solid gray;
|
||
padding: 0 10px 0 12px;
|
||
}
|
||
|
||
.left-panel {
|
||
width: 60px;
|
||
border-right: 1px solid gray;
|
||
padding: 10px 0 10px 0;
|
||
}
|
||
|
||
.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>
|