diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue index 2ec47610..89737456 100644 --- a/client/components/Reader/Reader.vue +++ b/client/components/Reader/Reader.vue @@ -54,6 +54,8 @@ + + @@ -63,10 +65,12 @@ import Vue from 'vue'; import Component from 'vue-class-component'; import LoaderPage from './LoaderPage/LoaderPage.vue'; -import HistoryPage from './HistoryPage/HistoryPage.vue'; import TextPage from './TextPage/TextPage.vue'; import ProgressPage from './ProgressPage/ProgressPage.vue'; +import HistoryPage from './HistoryPage/HistoryPage.vue'; +import SetPositionPage from './SetPositionPage/SetPositionPage.vue'; + import bookManager from './share/bookManager'; import readerApi from '../../api/reader'; import {sleep} from '../../share/utils'; @@ -74,9 +78,10 @@ import {sleep} from '../../share/utils'; export default @Component({ components: { LoaderPage, - HistoryPage, TextPage, - ProgressPage + ProgressPage, + HistoryPage, + SetPositionPage, }, watch: { bookPos: function(newValue) { @@ -104,11 +109,12 @@ export default @Component({ }) class Reader extends Vue { loaderActive = false; - historyActive = false; - progressActive = false; fullScreenActive = false; + historyActive = false; + setPositionActive = false; + bookPos = null; allowUrlParamBookPos = true; showRefreshIcon = true; @@ -122,7 +128,7 @@ class Reader extends Vue { this.lastActivePage = false; - document.addEventListener('fullscreenchange', (event) => { + document.addEventListener('fullscreenchange', () => { this.fullScreenActive = (document.fullscreenElement !== null); }); } @@ -175,7 +181,8 @@ class Reader extends Vue { } bookPosChanged(event) { - this.bookPosSeen = event.bookPosSeen; + if (event.bookPosSeen !== undefined) + this.bookPosSeen = event.bookPosSeen; this.bookPos = event.bookPos; this.updateRoute(); } @@ -223,17 +230,30 @@ class Reader extends Vue { this.historyActive = !this.historyActive; } + setPositionToggle() { + this.setPositionActive = !this.setPositionActive; + if (this.setPositionActive) { + this.$nextTick(() => { + this.$refs.setPositionPage.sliderMax = this.lastOpenedBook.textLength - 1; + this.$refs.setPositionPage.sliderValue = this.lastOpenedBook.bookPos; + }); + } + } + buttonClick(button) { switch (button) { case 'loader': this.loaderToggle(); break; - case 'history': - this.historyToggle(); - break; case 'fullScreen': this.fullScreenToggle(); break; + case 'history': + this.historyToggle(); + break; + case 'setPosition': + this.setPositionToggle(); + break; case 'refresh': if (this.lastOpenedBook) { this.loadBook({url: this.lastOpenedBook.url, force: true}); @@ -247,8 +267,9 @@ class Reader extends Vue { const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true }; switch (button) { case 'loader': return (this.loaderActive ? classActive : {}); - case 'history': return (this.historyActive ? classActive : {}); case 'fullScreen': return (this.fullScreenActive ? classActive : {}); + case 'history': return (this.historyActive ? classActive : {}); + case 'setPosition': return (this.setPositionActive ? classActive : {}); } return {}; } @@ -416,6 +437,9 @@ class Reader extends Vue { if (this.historyActive) handled = this.$refs.historyPage.keyHook(event); + if (this.setPositionActive) + handled = this.$refs.setPositionPage.keyHook(event); + if (!handled && this.$refs.page && this.$refs.page.keyHook) handled = this.$refs.page.keyHook(event); @@ -427,6 +451,9 @@ class Reader extends Vue { case 'KeyH': this.historyToggle(); break; + case 'KeyP': + this.setPositionToggle(); + break; } } } diff --git a/client/components/Reader/SetPositionPage/SetPositionPage.vue b/client/components/Reader/SetPositionPage/SetPositionPage.vue new file mode 100644 index 00000000..1a7bb973 --- /dev/null +++ b/client/components/Reader/SetPositionPage/SetPositionPage.vue @@ -0,0 +1,98 @@ + + + + + \ No newline at end of file diff --git a/client/element.js b/client/element.js index 415c5a16..edc5a8a4 100644 --- a/client/element.js +++ b/client/element.js @@ -59,6 +59,9 @@ import './theme/table-column.css'; import ElProgress from 'element-ui/lib/progress'; import './theme/progress.css'; +import ElSlider from 'element-ui/lib/slider'; +import './theme/slider.css'; + import Notification from 'element-ui/lib/notification'; import './theme/notification.css'; @@ -72,7 +75,7 @@ const components = { ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip, ElContainer, ElAside, ElMain, ElHeader, ElInput, ElTable, ElTableColumn, - ElProgress + ElProgress, ElSlider }; for (let name in components) {