The component is reloaded on every flip

[ciprian-morar]

Hi Takeshi,

I have another problem. The component is reloaded every time I turn pages. I've tried to replicate the same functionality like you've did in the demo. but the behaviour is different. Please take a look.

Thank you.

<template>
  <div
      :class="{'has-mouse': hasMouse}"
      @touchstart="hasMouse = false"
      v-if="component"
      class="flipbook-wrapper">

      <flipbook
          class="flipbook"
          :pages="pages"
          :startPage="pageNum"
          v-slot="flipbook"
          ref="flipbook"
          @flip-left-start="onFlipLeftStart"
          @flip-left-end="onFlipLeftEnd"
          @flip-right-start="onFlipRightStart"
          @flip-right-end="onFlipRightEnd"
          @zoom-start="onZoomStart"
          @zoom-end="onZoomEnd"
          >
        <div class="action-bar" v-if="showActionBar">
          <span :class="{ disabled: !flipbook.canFlipLeft }" class="icon sc-icon icon-arrow-left" @click="flipbook.flipLeft"></span>
          <span :class="{ disabled: !flipbook.canZoomIn }" class="icon sc-icon icon-zoom-plus" @click="flipbook.zoomIn"></span>
          <span class="page-num">
          Page {{ flipbook.page }} of {{ flipbook.numPages }}
          </span>
          <span :class="{ disabled: !flipbook.canZoomOut }" class="icon sc-icon icon-zoom-plus" @click="flipbook.zoomOut"></span>
          <span :class="{ disabled: !flipbook.canFlipRight }" class="icon sc-icon icon-arrow-right" @click="flipbook.flipRight" ></span>
        </div>
      </flipbook>
  </div>

</template>

<script>
import flipbook from 'flipbook-vue';

export default {
  name: "Flipbook",
  props: ["height", "allowDownload", "previewImage", "flipbookData", "carousel"],
  components: {
    flipbook
  },
  data: function() {
    return {
      hasMouse: true,
      pageNum: null
    }
  },
  computed: {
    pages: function() {
      let pages = false
      console.log("pages")
      if(this.flipbookData) {
        pages = [null]
        for (let item of this.flipbookData) {
          console.log(item)
          let link = item.image['@link'] + ".jpg"
          console.log(link)
          pages.push(link.substring(1));
        }

      }
      return pages
    },
    component: function() {
      console.log("component")
      console.log("ce apare aici" + this.pages)
      if(this.pages) {
        console.log("true")
        return true;
      } else  {
        return false;
      }

      },
      showActionBar() {
            if(this.flipbook) {
              return true;
            } else {
              return false;
            }
      }
    },
  methods: {
    onFlipLeftStart: (page) => console.log('flip-left-start', page),
    onFlipLeftEnd: (page) => {
          console.log('flip-left-end', page);
          window.location.hash = '#' + page
    },
    onFlipRightStart: (page) => console.log('flip-right-start', page),
    onFlipRightEnd: (page) => {
      console.log('flip-right-end', page)
      window.location.hash = '#' + page
    },
    onZoomStart: (zoom) => console.log('zoom-start', zoom),
    onZoomEnd: (zoom) => console.log('zoom-end', zoom),
    setPageFromHash: function() {
      let n = parseInt(window.location.hash.slice(1), 10)
      if (Number.isInteger(n) & n !== undefined) {
        this.pageNum = n;
      }

    }
  }, mounted: function() {
    console.log("flipbook initialization")
    this.flipbook = this.$refs.flipbook;
    console.log(this.$refs.flipbook)
    window.addEventListener("keydown", (ev) => {
      this.flipbook = this.$refs.flipbook
      if(!this.flipbook) return
      if (ev.keyCode == 37 & flipbook.canFlipLeft) flipbook.flipLeft()
      if (ev.keyCode == 39 & flipbook.canFlipRight) flipbook.flipRight()
    })
    window.addEventListener('hashchange', this.setPageFromHash)
    this.setPageFromHash()
  }
};
</script>

<style>
.flipbook-wrapper {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #333;
  color: #ccc;
  overflow: hidden;
}
.action-bar {
  width: 100%;
  height: 30px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flipbook {
  width: 90vw;
  height: 90vh;
}

.flipbook .viewport {
  width: 90vw;
  height: calc(100vh - 50px - 40px);
}

.flipbook .bounding-box {
  box-shadow: 0 0 20px #000;
}
</style>

[ts1]

Maybe you are using Vue Router or something like that?
If that is the case, setting window.location.hash can be the culprit.

[ciprian-morar]

Thank you Takeshi. I'm using history.replaceState now and it works. If I flip right to the end and after I flip left to the end and I arrive to the first page but I can't flip to right anymore. Why happens this behavour I can't understand. canFlipLeft and canFlipRight are both of them false.

[ciprian-morar]

The previous problem doesn't replicate anymore but now I'm wondering why the flipbook don't center like you did in the demo and it is aligned at right.

.flipbook-wrapper {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
color: #ccc;
overflow: hidden;
}
.action-bar {
width: 100%;
height: 30px;
padding: 10px 0;
display: flex;
justify-content: center;
align-items: center;
}
.flipbook {
width: 90vw;
height: 90vh;
}

.flipbook .viewport {
width: 80%;
height: calc(100vh - 50px - 40px);
margin: 0 auto;
}

.flipbook .bounding-box {
box-shadow: 0 0 20px #000;
}

[ciprian-morar]

Do you have any suggestion what is missing? Thanks

[ts1]

It's hard to know what's causing the problem with the information you're given.
I can help you if you provide either

• minimum but complete project that can build, run and reproduce the problem
• access to the working site you are building

My email address is in my profile page.

[ts1]

Turned out that the class name container caused the problem.
container is used so often, I will change the class name.