seepur/resources/scripts/applications/home/views/BookOfflineViewer.vue

138 lines
3.6 KiB
Vue
Raw Normal View History

<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>