diff --git a/client/components/ExternalLibs/ExternalLibs.vue b/client/components/ExternalLibs/ExternalLibs.vue index 57175d43..2b587acc 100644 --- a/client/components/ExternalLibs/ExternalLibs.vue +++ b/client/components/ExternalLibs/ExternalLibs.vue @@ -1,5 +1,5 @@ - Закладки - + + + Открыть Открыть в читалке
- +
+ +
+
- + - @@ -76,8 +86,8 @@
- +
@@ -137,6 +147,7 @@ class ExternalLibs extends Vue { libs = {}; fullScreenActive = false; addBookmarkVisible = false; + transparentLayoutVisible = false; bookmarkLink = ''; bookmarkDesc = ''; @@ -145,11 +156,38 @@ class ExternalLibs extends Vue { created() { this.$root.addKeyHook(this.keyHook); + document.addEventListener('fullscreenchange', () => { + this.fullScreenActive = (document.fullscreenElement !== null); + }); + //this.commit = this.$store.commit; //this.commit('reader/setLibs', rstore.libsDefaults); } mounted() { + //Поправка метода toggleOption компонента select фреймворка quasar, необходимо другое поведение + //$emit('input'.. вызывается всегда + this.toggleOption = function(opt, keepOpen) { + if (this.editable !== true || opt === void 0 || this.isOptionDisabled(opt) === true) { + return; + } + + const optValue = this.getOptionValue(opt); + + if (this.multiple !== true) { + if (keepOpen !== true) { + this.updateInputValue(this.fillInput === true ? this.getOptionLabel(opt) : '', true, true); + this.hidePopup(); + } + + this.$refs.target !== void 0 && this.$refs.target.focus(); + this.$emit('input', this.emitValue === true ? optValue : opt); + } + }; + + this.$refs.rootLink.toggleOption = this.toggleOption; + this.$refs.selectedLink.toggleOption = this.toggleOption; + (async() => { //подождем this.mode let i = 0; @@ -320,8 +358,9 @@ class ExternalLibs extends Vue { } openBookUrlInFrame() { - if (this.bookUrl) + if (this.bookUrl) { this.goToLink(this.addProtocol(this.bookUrl)); + } } goToLink(link) { @@ -332,6 +371,9 @@ class ExternalLibs extends Vue { this.frameVisible = false; this.$nextTick(() => { this.frameVisible = true; + this.$nextTick(() => { + this.$refs.frame.contentWindow.focus(); + }); }); } @@ -392,11 +434,20 @@ class ExternalLibs extends Vue { return url; } - onInputFocus(event) { + selectAllOnFocus(event) { if (event.target.select) event.target.select(); } + rootLinkInput() { + this.updateSelectedLink(); + this.updateStartLink(); + } + + selectedLinkInput() { + this.updateStartLink(); + } + submitUrl() { if (this.bookUrl) { this.sendMessage({type: 'submitUrl', data: { @@ -415,6 +466,7 @@ class ExternalLibs extends Vue { this.addBookmarkVisible = true; this.$nextTick(() => { this.$refs.bookmarkLink.focus(); + this.$refs.defaultRootLink.toggleOption = this.toggleOption; }); } @@ -429,7 +481,28 @@ class ExternalLibs extends Vue { } } + defaultRootLinkInput() { + this.updateBookmarkLink(); + } + + bookmarkLinkKeyDown(event) { + if (event.key == 'Enter') { + this.$refs.bookmarkDesc.focus(); + event.preventDefault(); + } + } + + bookmarkDescKeyDown(event) { + if (event.key == 'Enter') { + this.okAddBookmark(); + event.preventDefault(); + } + } + async okAddBookmark() { + if (!this.bookmarkLink) + return; + const link = this.addProtocol(this.bookmarkLink); let index = -1; try { @@ -488,23 +561,43 @@ class ExternalLibs extends Vue { } } + transparentLayoutClick() { + this.transparentLayoutVisible = false; + } + + onSelectPopupShow() { + this.transparentLayoutVisible = true; + } + + onSelectPopupHide() { + this.transparentLayoutVisible = false; + } + close() { this.sendMessage({type: 'close'}); } + bookUrlKeyDown(event) { + if (event.key == 'Enter') { + this.submitUrl(); + event.preventDefault(); + } + } + keyHook() { if (this.$root.rootRoute() == '/external-libs') { if (this.$refs.dialogAddBookmark.active) return false; - //недостатки сторонних ui - const input = this.$refs.input.$refs.input; - if (document.activeElement === input && event.type == 'keydown' && event.key == 'Enter') { - this.submitUrl(); - return true; + if (event.type == 'keydown' && event.key == 'F4') { + this.addBookmark() + return; } - if (event.type == 'keydown' && event.key == 'Escape') { + if (event.type == 'keydown' && event.key == 'Escape' && + (document.activeElement != this.$refs.rootLink.$refs.target || !this.$refs.rootLink.menu) && + (document.activeElement != this.$refs.selectedLink.$refs.target || !this.$refs.selectedLink.menu) + ) { this.close(); } return true; @@ -532,4 +625,9 @@ class ExternalLibs extends Vue { background-color: #69C05F; } +.transparent-layout { + top: 0; + left: 0; + position: absolute; +} diff --git a/client/components/Reader/LoaderPage/LoaderPage.vue b/client/components/Reader/LoaderPage/LoaderPage.vue index a64c1d3c..7885a38d 100644 --- a/client/components/Reader/LoaderPage/LoaderPage.vue +++ b/client/components/Reader/LoaderPage/LoaderPage.vue @@ -1,6 +1,6 @@