seepur/resources/scripts/applications/home/views/BookOfflineViewer.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>