Добавил мерцание кнопки и сообщеия в статус баре при загрузке книги из кеша
This commit is contained in:
@@ -30,7 +30,7 @@
|
|||||||
<el-button ref="copyText" class="tool-button" @click="buttonClick('copyText')"><i class="el-icon-edit-outline"></i></el-button>
|
<el-button ref="copyText" class="tool-button" @click="buttonClick('copyText')"><i class="el-icon-edit-outline"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
|
<el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
|
||||||
<el-button ref="refresh" class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh"></i></el-button>
|
<el-button ref="refresh" class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh" :class="{clear: !showRefreshIcon}"></i></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<div class="space"></div>
|
<div class="space"></div>
|
||||||
<el-tooltip content="История" :open-delay="1000" effect="light">
|
<el-tooltip content="История" :open-delay="1000" effect="light">
|
||||||
@@ -69,6 +69,7 @@ import ProgressPage from './ProgressPage/ProgressPage.vue';
|
|||||||
|
|
||||||
import bookManager from './share/bookManager';
|
import bookManager from './share/bookManager';
|
||||||
import readerApi from '../../api/reader';
|
import readerApi from '../../api/reader';
|
||||||
|
import {sleep} from '../../share/utils';
|
||||||
|
|
||||||
export default @Component({
|
export default @Component({
|
||||||
components: {
|
components: {
|
||||||
@@ -110,6 +111,7 @@ class Reader extends Vue {
|
|||||||
|
|
||||||
bookPos = null;
|
bookPos = null;
|
||||||
allowUrlParamBookPos = true;
|
allowUrlParamBookPos = true;
|
||||||
|
showRefreshIcon = true;
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.commit = this.$store.commit;
|
this.commit = this.$store.commit;
|
||||||
@@ -326,6 +328,7 @@ class Reader extends Vue {
|
|||||||
this.commit('reader/setOpenedBook', Object.assign({bookPos, bookPosSeen}, bookManager.metaOnly(bookParsed)));
|
this.commit('reader/setOpenedBook', Object.assign({bookPos, bookPosSeen}, bookManager.metaOnly(bookParsed)));
|
||||||
this.loaderActive = false;
|
this.loaderActive = false;
|
||||||
progress.hide(); this.progressActive = false;
|
progress.hide(); this.progressActive = false;
|
||||||
|
this.blinkCachedLoadMessage();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -346,10 +349,12 @@ class Reader extends Vue {
|
|||||||
progress.setState({totalSteps: 5});
|
progress.setState({totalSteps: 5});
|
||||||
|
|
||||||
// не удалось, скачиваем книгу полностью с конвертацией
|
// не удалось, скачиваем книгу полностью с конвертацией
|
||||||
|
let loadCached = true;
|
||||||
if (!book) {
|
if (!book) {
|
||||||
book = await readerApi.loadBook(opts.url, (state) => {
|
book = await readerApi.loadBook(opts.url, (state) => {
|
||||||
progress.setState(state);
|
progress.setState(state);
|
||||||
});
|
});
|
||||||
|
loadCached = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// добавляем в bookManager
|
// добавляем в bookManager
|
||||||
@@ -364,6 +369,10 @@ class Reader extends Vue {
|
|||||||
|
|
||||||
this.loaderActive = false;
|
this.loaderActive = false;
|
||||||
progress.hide(); this.progressActive = false;
|
progress.hide(); this.progressActive = false;
|
||||||
|
if (loadCached) {
|
||||||
|
this.blinkCachedLoadMessage();
|
||||||
|
} else
|
||||||
|
this.stopBlink = true;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
progress.hide(); this.progressActive = false;
|
progress.hide(); this.progressActive = false;
|
||||||
this.loaderActive = true;
|
this.loaderActive = true;
|
||||||
@@ -372,6 +381,31 @@ class Reader extends Vue {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
blinkCachedLoadMessage() {
|
||||||
|
this.blinkCount = 30;
|
||||||
|
if (!this.inBlink) {
|
||||||
|
this.inBlink = true;
|
||||||
|
this.stopBlink = false;
|
||||||
|
this.$nextTick(async() => {
|
||||||
|
let page = this.$refs.page;
|
||||||
|
while (this.blinkCount) {
|
||||||
|
this.showRefreshIcon = !this.showRefreshIcon;
|
||||||
|
if (page.blinkCachedLoadMessage)
|
||||||
|
page.blinkCachedLoadMessage(this.showRefreshIcon);
|
||||||
|
await sleep(500);
|
||||||
|
if (this.stopBlink)
|
||||||
|
break;
|
||||||
|
this.blinkCount--;
|
||||||
|
page = this.$refs.page;
|
||||||
|
}
|
||||||
|
this.showRefreshIcon = true;
|
||||||
|
this.inBlink = false;
|
||||||
|
if (page.blinkCachedLoadMessage)
|
||||||
|
page.blinkCachedLoadMessage('finish');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
keyHook(event) {
|
keyHook(event) {
|
||||||
if (this.$root.rootRoute == '/reader') {
|
if (this.$root.rootRoute == '/reader') {
|
||||||
let handled = false;
|
let handled = false;
|
||||||
@@ -468,4 +502,8 @@ i {
|
|||||||
width: 10px;
|
width: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
color: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -458,13 +458,27 @@ class TextPage extends Vue {
|
|||||||
i--;
|
i--;
|
||||||
i = (i > lines.length - 1 ? lines.length - 1 : i);
|
i = (i > lines.length - 1 ? lines.length - 1 : i);
|
||||||
if (i >= 0) {
|
if (i >= 0) {
|
||||||
|
let message = this.statusBarMessage;
|
||||||
|
if (!message)
|
||||||
|
message = this.title;
|
||||||
this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight,
|
this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight,
|
||||||
lines[i].end, this.parsed.textLength, this.title);
|
lines[i].end, this.parsed.textLength, message);
|
||||||
this.bookPosSeen = lines[i].end;
|
this.bookPosSeen = lines[i].end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
blinkCachedLoadMessage(state) {
|
||||||
|
if (state === 'finish') {
|
||||||
|
this.statusBarMessage = '';
|
||||||
|
} else if (state) {
|
||||||
|
this.statusBarMessage = 'Книга загружена из кеша';
|
||||||
|
} else {
|
||||||
|
this.statusBarMessage = ' ';
|
||||||
|
}
|
||||||
|
this.drawStatusBar();
|
||||||
|
}
|
||||||
|
|
||||||
async refreshTime() {
|
async refreshTime() {
|
||||||
if (!this.timeRefreshing) {
|
if (!this.timeRefreshing) {
|
||||||
this.timeRefreshing = true;
|
this.timeRefreshing = true;
|
||||||
|
|||||||
Reference in New Issue
Block a user