137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<template>
|
|
<div class="is-fullwidth is-fullheight-container p-l-lg p-r-lg">
|
|
<Loading v-if="loading" />
|
|
<div :class="`is-fullheight-container ${flipbookRef ? '' : 'is-transparent'}`" v-else>
|
|
<div class="book-view m-sm m-r-md">
|
|
<div
|
|
class="go-left m-r-sm"
|
|
style="display: inline-block; align-items: center; position: absolute; left:0px; top:0px"
|
|
>
|
|
<button
|
|
class="button book-flip-buttons"
|
|
:disabled="!canFlipLeft"
|
|
@click="onLeftClicked()"
|
|
>
|
|
<i class="fa fa-fw fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
<flipbook
|
|
class="flipbook"
|
|
:pages="pages"
|
|
:forwardDirection="book.ltr ? 'right': 'left'"
|
|
:zooms="null"
|
|
:enabled="true"
|
|
@on-mounted="bookMounted()"
|
|
ref="flipbook"
|
|
v-slot="flipbook"
|
|
>
|
|
<!-- @flip-left-start="onFlip('left')" -->
|
|
<!-- @flip-right-start="onFlip('right')" -->
|
|
<div class="page-progress has-text-centered m-b-none">
|
|
<p>Page {{ flipbook.page }} of {{ flipbook.numPages }}</p>
|
|
</div>
|
|
</flipbook>
|
|
<div
|
|
class="go-right m-l-sm"
|
|
style="display: inline-block; align-items: center; position: absolute; right:0px; top:0px"
|
|
>
|
|
<button
|
|
class="button book-flip-buttons"
|
|
:disabled="!canFlipRight"
|
|
@click="onRightClicked()"
|
|
>
|
|
<i class="fa fa-fw fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
import { mapGetters, mapActions } from "vuex";
|
|
import Flipbook from "../components/flipbook/flipbook.cjs.js";
|
|
import Loading from "../../shared/components/Loading/Loading.vue";
|
|
|
|
export default {
|
|
name: "BookOfflineViewer",
|
|
components: {
|
|
Flipbook,
|
|
Loading
|
|
},
|
|
created() {
|
|
const bookId = Number(this.$route.params.id);
|
|
if (!this.user || !bookId) {
|
|
this.$router.replace({ path: `/` });
|
|
}
|
|
|
|
this.user.books.forEach(b => {
|
|
if (this.book) return;
|
|
if (b.id === bookId) {
|
|
console.log("Found Book");
|
|
this.book = b;
|
|
}
|
|
});
|
|
if (!this.book) {
|
|
this.notify({ message: "Book Not Found!", level: "danger" });
|
|
this.$router.replace({ path: `/` });
|
|
} else {
|
|
// create pages
|
|
// /u/books/:bookId/page/:pageNumber
|
|
const pages = [null];
|
|
for (let i = 1; i < this.book.pages + 1; i++) {
|
|
pages.push(`/u/books/${bookId}/page/${i}`);
|
|
}
|
|
this.pages = pages;
|
|
this.loading = false;
|
|
}
|
|
},
|
|
methods: {
|
|
bookMounted() {
|
|
console.log("Book Mounted!");
|
|
if (this.$refs.flipbook) {
|
|
console.log("Found!");
|
|
this.flipbookRef = true;
|
|
// this.$refs.flipbook.onResize();
|
|
// console.log("resized");
|
|
} else {
|
|
console.log("Still Null!!");
|
|
}
|
|
},
|
|
onLeftClicked() {
|
|
this.$refs.flipbook.flipLeft();
|
|
},
|
|
onRightClicked() {
|
|
this.$refs.flipbook.flipRight();
|
|
},
|
|
...mapActions(["notify"])
|
|
},
|
|
computed: {
|
|
canFlipLeft() {
|
|
return this.flipbookRef && this.$refs.flipbook.canFlipLeft;
|
|
},
|
|
canFlipRight() {
|
|
return this.flipbookRef && this.$refs.flipbook.canFlipRight;
|
|
},
|
|
...mapGetters(["user"])
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
book: <IBook>null,
|
|
pages: <string[]>[],
|
|
flipbookRef: null
|
|
};
|
|
}
|
|
};
|
|
|
|
interface IBook {
|
|
id: number;
|
|
pages: number;
|
|
user_id?: number;
|
|
title: string;
|
|
ltr: boolean;
|
|
created_at: string;
|
|
}
|
|
</script>
|