|
@@ -1,82 +1,101 @@
|
|
<template>
|
|
<template>
|
|
- <Window ref="window" @close="close" margin="2px">
|
|
|
|
|
|
+ <Window ref="window" margin="2px" @close="close">
|
|
<template slot="header">
|
|
<template slot="header">
|
|
{{ header }}
|
|
{{ header }}
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template slot="buttons">
|
|
<template slot="buttons">
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
|
|
- <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="16px"/>
|
|
|
|
|
|
+ <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="16px" />
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На весь экран</q-tooltip>
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На весь экран</q-tooltip>
|
|
</span>
|
|
</span>
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(0.1)">
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(0.1)">
|
|
- <q-icon name="la la-plus" size="16px"/>
|
|
|
|
|
|
+ <q-icon name="la la-plus" size="16px" />
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Увеличить масштаб</q-tooltip>
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Увеличить масштаб</q-tooltip>
|
|
</span>
|
|
</span>
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(-0.1)">
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(-0.1)">
|
|
- <q-icon name="la la-minus" size="16px"/>
|
|
|
|
|
|
+ <q-icon name="la la-minus" size="16px" />
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Уменьшить масштаб</q-tooltip>
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Уменьшить масштаб</q-tooltip>
|
|
</span>
|
|
</span>
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="showHelp">
|
|
<span class="full-screen-button row justify-center items-center" @mousedown.stop @click="showHelp">
|
|
- <q-icon name="la la-question-circle" size="16px"/>
|
|
|
|
|
|
+ <q-icon name="la la-question-circle" size="16px" />
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Справка</q-tooltip>
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Справка</q-tooltip>
|
|
</span>
|
|
</span>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<div v-show="ready" class="col column" style="min-width: 600px">
|
|
<div v-show="ready" class="col column" style="min-width: 600px">
|
|
<div class="row items-center q-px-sm" style="height: 50px">
|
|
<div class="row items-center q-px-sm" style="height: 50px">
|
|
- <q-select class="q-mr-sm" ref="rootLink" v-model="rootLink" :options="rootLinkOptions" @input="rootLinkInput"
|
|
|
|
- @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
|
|
|
|
|
|
+ <q-select ref="rootLink" v-model="rootLink" class="q-mr-sm" :options="rootLinkOptions"
|
|
style="width: 230px"
|
|
style="width: 230px"
|
|
dropdown-icon="la la-angle-down la-sm"
|
|
dropdown-icon="la la-angle-down la-sm"
|
|
rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
|
|
rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
|
|
|
|
+ @input="rootLinkInput"
|
|
|
|
+ @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
|
|
>
|
|
>
|
|
- <template v-slot:prepend>
|
|
|
|
- <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="12px">
|
|
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
|
|
|
|
|
|
+ <template #prepend>
|
|
|
|
+ <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" size="12px" @click.stop="addBookmark">
|
|
|
|
+ <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
|
|
+ Добавить закладку
|
|
|
|
+ </q-tooltip>
|
|
</q-btn>
|
|
</q-btn>
|
|
- <q-btn round dense color="blue" icon="la la-bars" @click.stop="bookmarkSettings" size="12px">
|
|
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Настроить закладки</q-tooltip>
|
|
|
|
|
|
+ <q-btn round dense color="blue" icon="la la-bars" size="12px" @click.stop="bookmarkSettings">
|
|
|
|
+ <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
|
|
+ Настроить закладки
|
|
|
|
+ </q-tooltip>
|
|
</q-btn>
|
|
</q-btn>
|
|
</template>
|
|
</template>
|
|
- <template v-slot:selected>
|
|
|
|
- <div style="overflow: hidden; white-space: nowrap;">{{ rootLinkWithoutProtocol }}</div>
|
|
|
|
|
|
+ <template #selected>
|
|
|
|
+ <div style="overflow: hidden; white-space: nowrap;">
|
|
|
|
+ {{ rootLinkWithoutProtocol }}
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
</q-select>
|
|
</q-select>
|
|
|
|
|
|
- <q-select class="q-mr-sm" ref="selectedLink" v-model="selectedLink" :options="selectedLinkOptions" @input="selectedLinkInput" style="width: 50px"
|
|
|
|
- @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
|
|
|
|
|
|
+ <q-select ref="selectedLink" v-model="selectedLink" class="q-mr-sm" :options="selectedLinkOptions" style="width: 50px"
|
|
dropdown-icon="la la-angle-down la-sm"
|
|
dropdown-icon="la la-angle-down la-sm"
|
|
rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
|
|
rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
|
|
|
|
+ @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
|
|
|
|
+ @input="selectedLinkInput"
|
|
>
|
|
>
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Закладки</q-tooltip>
|
|
|
|
|
|
+ <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
|
|
+ Закладки
|
|
|
|
+ </q-tooltip>
|
|
</q-select>
|
|
</q-select>
|
|
|
|
|
|
- <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги"
|
|
|
|
|
|
+ <q-input ref="input" v-model="bookUrl" class="col q-mr-sm" rounded outlined dense bg-color="white" placeholder="Скопируйте сюда URL книги"
|
|
@focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
|
|
@focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
|
|
>
|
|
>
|
|
- <template v-slot:prepend>
|
|
|
|
- <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(selectedLink)" size="12px">
|
|
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip>
|
|
|
|
|
|
+ <template #prepend>
|
|
|
|
+ <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" size="12px" @click="goToLink(selectedLink)">
|
|
|
|
+ <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
|
|
+ Вернуться на стартовую страницу
|
|
|
|
+ </q-tooltip>
|
|
</q-btn>
|
|
</q-btn>
|
|
- <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px" :disabled="!bookUrl">
|
|
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
|
|
|
|
|
|
+ <q-btn :disabled="!bookUrl" round dense color="blue" icon="la la-angle-double-down" size="12px" @click="openBookUrlInFrame">
|
|
|
|
+ <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
|
|
+ Загрузить URL во фрейм
|
|
|
|
+ </q-tooltip>
|
|
</q-btn>
|
|
</q-btn>
|
|
</template>
|
|
</template>
|
|
- <template v-slot:append>
|
|
|
|
- <q-btn round dense color="blue" icon="la la-cog" @click.stop="optionsVisible = true" size="12px">
|
|
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
|
|
|
|
|
|
+ <template #append>
|
|
|
|
+ <q-btn round dense color="blue" icon="la la-cog" size="12px" @click.stop="optionsVisible = true">
|
|
|
|
+ <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
|
|
+ Опции
|
|
|
|
+ </q-tooltip>
|
|
</q-btn>
|
|
</q-btn>
|
|
</template>
|
|
</template>
|
|
</q-input>
|
|
</q-input>
|
|
|
|
|
|
- <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl" :disabled="!bookUrl">Открыть
|
|
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть в читалке</q-tooltip>
|
|
|
|
|
|
+ <q-btn :disabled="!bookUrl" 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>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="separator"></div>
|
|
|
|
|
|
- <div class="col fit" ref="frameBox" style="position: relative;">
|
|
|
|
|
|
+ <div ref="frameBox" class="col fit" style="position: relative;">
|
|
<div ref="frameWrap" class="overflow-hidden">
|
|
<div ref="frameWrap" class="overflow-hidden">
|
|
<iframe v-if="frameVisible" ref="frame" :src="frameSrc" frameborder="0"></iframe>
|
|
<iframe v-if="frameVisible" ref="frame" :src="frameSrc" frameborder="0"></iframe>
|
|
</div>
|
|
</div>
|
|
@@ -87,33 +106,46 @@
|
|
<template slot="header">
|
|
<template slot="header">
|
|
<div class="row items-center">
|
|
<div class="row items-center">
|
|
<q-icon class="q-mr-sm" name="la la-bookmark" size="28px"></q-icon>
|
|
<q-icon class="q-mr-sm" name="la la-bookmark" size="28px"></q-icon>
|
|
- <div v-if="addBookmarkMode == 'edit'">Редактировать закладку</div>
|
|
|
|
- <div v-else>Добавить закладку</div>
|
|
|
|
|
|
+ <div v-if="addBookmarkMode == 'edit'">
|
|
|
|
+ Редактировать закладку
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else>
|
|
|
|
+ Добавить закладку
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<div class="q-mx-md row">
|
|
<div class="q-mx-md row">
|
|
- <q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink" @keydown="bookmarkLinkKeyDown"
|
|
|
|
- placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus">
|
|
|
|
|
|
+ <q-input ref="bookmarkLink" v-model="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white"
|
|
|
|
+ placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus" @keydown="bookmarkLinkKeyDown"
|
|
|
|
+ >
|
|
</q-input>
|
|
</q-input>
|
|
|
|
|
|
- <q-select class="q-mr-sm" ref="defaultRootLink" v-model="defaultRootLink" :options="defaultRootLinkOptions" @input="defaultRootLinkInput" style="width: 50px"
|
|
|
|
|
|
+ <q-select ref="defaultRootLink" v-model="defaultRootLink" class="q-mr-sm" :options="defaultRootLinkOptions" style="width: 50px"
|
|
dropdown-icon="la la-angle-down la-sm"
|
|
dropdown-icon="la la-angle-down la-sm"
|
|
outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
|
|
outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
|
|
|
|
+ @input="defaultRootLinkInput"
|
|
>
|
|
>
|
|
- <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Предустановленные ссылки</q-tooltip>
|
|
|
|
|
|
+ <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
|
|
+ Предустановленные ссылки
|
|
|
|
+ </q-tooltip>
|
|
</q-select>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="q-mx-md q-mt-md">
|
|
<div class="q-mx-md q-mt-md">
|
|
- <q-input class="col q-mr-sm" ref="bookmarkDesc" outlined dense bg-color="white" v-model="bookmarkDesc" @keydown="bookmarkDescKeyDown"
|
|
|
|
- placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus">
|
|
|
|
|
|
+ <q-input ref="bookmarkDesc" v-model="bookmarkDesc" class="col q-mr-sm" outlined dense bg-color="white"
|
|
|
|
+ placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus" @keydown="bookmarkDescKeyDown"
|
|
|
|
+ >
|
|
</q-input>
|
|
</q-input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<template slot="footer">
|
|
<template slot="footer">
|
|
- <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
|
|
|
|
- <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark" :disabled="!bookmarkLink">OK</q-btn>
|
|
|
|
|
|
+ <q-btn v-close-popup class="q-px-md q-ml-sm" dense no-caps>
|
|
|
|
+ Отмена
|
|
|
|
+ </q-btn>
|
|
|
|
+ <q-btn :disabled="!bookmarkLink" class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark">
|
|
|
|
+ OK
|
|
|
|
+ </q-btn>
|
|
</template>
|
|
</template>
|
|
</Dialog>
|
|
</Dialog>
|
|
|
|
|
|
@@ -132,21 +164,24 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<template slot="footer">
|
|
<template slot="footer">
|
|
- <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="optionsVisible = false">OK</q-btn>
|
|
|
|
|
|
+ <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="optionsVisible = false">
|
|
|
|
+ OK
|
|
|
|
+ </q-btn>
|
|
</template>
|
|
</template>
|
|
</Dialog>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <BookmarkSettings v-if="bookmarkSettingsActive" ref="bookmarkSettings" :libs="libs" :addBookmarkVisible="addBookmarkVisible"
|
|
|
|
- @do-action="doAction" @close="closeBookmarkSettings">
|
|
|
|
|
|
+ <BookmarkSettings v-if="bookmarkSettingsActive" ref="bookmarkSettings" :libs="libs" :add-bookmark-visible="addBookmarkVisible"
|
|
|
|
+ @do-action="doAction" @close="closeBookmarkSettings"
|
|
|
|
+ >
|
|
</BookmarkSettings>
|
|
</BookmarkSettings>
|
|
</Window>
|
|
</Window>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
//-----------------------------------------------------------------------------
|
|
//-----------------------------------------------------------------------------
|
|
-import Vue from 'vue';
|
|
|
|
-import Component from 'vue-class-component';
|
|
|
|
|
|
+import vueComponent from '../vueComponent.js';
|
|
|
|
+
|
|
import _ from 'lodash';
|
|
import _ from 'lodash';
|
|
|
|
|
|
import Window from '../share/Window.vue';
|
|
import Window from '../share/Window.vue';
|
|
@@ -162,7 +197,7 @@ const proxySubst = {
|
|
'http://fantasy-worlds.org': 'http://b.liberama.top:23580',
|
|
'http://fantasy-worlds.org': 'http://b.liberama.top:23580',
|
|
};
|
|
};
|
|
|
|
|
|
-export default @Component({
|
|
|
|
|
|
+const componentOptions = {
|
|
components: {
|
|
components: {
|
|
Window,
|
|
Window,
|
|
Dialog,
|
|
Dialog,
|
|
@@ -203,8 +238,10 @@ export default @Component({
|
|
this.commitProp('openInFrameOnAdd', newValue);
|
|
this.commitProp('openInFrameOnAdd', newValue);
|
|
},
|
|
},
|
|
}
|
|
}
|
|
-})
|
|
|
|
-class ExternalLibs extends Vue {
|
|
|
|
|
|
+};
|
|
|
|
+class ExternalLibs {
|
|
|
|
+ _options = componentOptions;
|
|
|
|
+
|
|
ready = false;
|
|
ready = false;
|
|
frameVisible = false;
|
|
frameVisible = false;
|
|
rootLink = '';
|
|
rootLink = '';
|
|
@@ -836,6 +873,8 @@ class ExternalLibs extends Vue {
|
|
return false;
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+export default vueComponent(ExternalLibs);
|
|
//-----------------------------------------------------------------------------
|
|
//-----------------------------------------------------------------------------
|
|
</script>
|
|
</script>
|
|
|
|
|