diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue index 0773db07..3a51ccd7 100644 --- a/client/components/Reader/Reader.vue +++ b/client/components/Reader/Reader.vue @@ -8,10 +8,10 @@
- + - +
@@ -21,16 +21,18 @@ - + - + - + - + + +
@@ -46,10 +48,11 @@ - @@ -112,6 +115,9 @@ class Reader extends Vue { progressActive = false; fullScreenActive = false; + scrollingActive = false; + searchActive = false; + copyTextActive = false; historyActive = false; setPositionActive = false; @@ -192,7 +198,10 @@ class Reader extends Vue { } get lastOpenedBook() { - return this.$store.getters['reader/lastOpenedBook']; + const result = this.$store.getters['reader/lastOpenedBook']; + if (!result) + this.closeAllTextPages() + return result; } toolBarToggle() { @@ -222,21 +231,40 @@ class Reader extends Vue { } } + closeAllTextPages() { + this.historyActive = false; + this.setPositionActive = false; + } + loaderToggle() { this.loaderActive = !this.loaderActive; + if (this.loaderActive) { + this.closeAllTextPages(); + } } historyToggle() { this.historyActive = !this.historyActive; + if (this.historyActive && this.activePage == 'TextPage') { + this.closeAllTextPages(); + this.historyActive = true; + } else { + this.historyActive = false; + } } setPositionToggle() { this.setPositionActive = !this.setPositionActive; - if (this.setPositionActive) { + if (this.setPositionActive && this.activePage == 'TextPage' && this.lastOpenedBook) { + this.closeAllTextPages(); + this.setPositionActive = true; + this.$nextTick(() => { this.$refs.setPositionPage.sliderMax = this.lastOpenedBook.textLength - 1; this.$refs.setPositionPage.sliderValue = this.lastOpenedBook.bookPos; }); + } else { + this.setPositionActive = false; } } @@ -265,13 +293,41 @@ class Reader extends Vue { buttonActiveClass(button) { const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true }; + const classDisabled = { 'tool-button-disabled': true, 'tool-button-disabled:hover': true }; + let classResult = {}; + switch (button) { - case 'loader': return (this.loaderActive ? classActive : {}); - case 'fullScreen': return (this.fullScreenActive ? classActive : {}); - case 'history': return (this.historyActive ? classActive : {}); - case 'setPosition': return (this.setPositionActive ? classActive : {}); + case 'loader': + case 'fullScreen': + case 'setPosition': + case 'scrolling': + case 'search': + case 'copyText': + case 'history': + if (this[`${button}Active`]) + classResult = classActive; + break; } - return {}; + + if (this.activePage == 'LoaderPage' || !this.lastOpenedBook) { + switch (button) { + case 'undoAction': + case 'redoAction': + case 'setPosition': + case 'scrolling': + case 'search': + case 'copyText': + case 'history': + classResult = classDisabled; + break; + case 'refresh': + if (!this.lastOpenedBook) + classResult = classDisabled; + break; + } + } + + return classResult; } get activePage() { @@ -315,16 +371,12 @@ class Reader extends Vue { }); } - this.$nextTick(() => { - if (this.$refs.page) - this.$refs.page.fullScreenToggle = this.fullScreenToggle; - }); - this.lastActivePage = result; return result; } loadBook(opts) { + this.closeAllTextPages(); this.progressActive = true; this.$nextTick(async() => { const progress = this.$refs.page; @@ -525,6 +577,16 @@ class Reader extends Vue { background-color: #81C581; } +.tool-button-disabled { + color: lightgray; + background-color: gray; +} + +.tool-button-disabled:hover { + color: lightgray; + background-color: gray; +} + i { font-size: 200%; } diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index 52d16ea2..c9e9f730 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/client/components/Reader/TextPage/TextPage.vue @@ -632,8 +632,7 @@ class TextPage extends Vue { case 'Enter': case 'Backquote'://` case 'KeyF': - if (this.fullScreenToggle) - this.fullScreenToggle(); + this.$emit('full-screen-toogle'); break; case 'Tab': this.doToolBarToggle();