Kevin Powell - Community•7mo ago

Height Adjustment for StPageFlip

Hello everyone, I'm working on a Vue 3 project where I'm using the StPageFlip https://nodlik.github.io/StPageFlip/ library to create a flipbook interface. The content of each page will vary in height, and I'm struggling to dynamically adjust the height of the PageFlip container to fit the content. The goal is to make sure the height of the flipbook adjusts to fit its content without any overflow or fixed height. I've tried a few approaches, but the container height doesn't seem to adjust correctly. The height either remains fixed or doesn't fully fit the content. Component

<template>
  <div ref="pageFlipContainer" class="page-flip-container">
    <Cover></Cover>
    <NewPage
      v-for="i in 10"
      :key="i"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a est sed diam egestas gravida eu sit amet leo. Quisque fringilla elementum sapien, non venenatis ex. Nulla est nulla, viverra ac vestibulum non, maximus id lacus. Suspendisse tempor a turpis sed luctus. Fusce fringilla rutrum quam vel malesuada. In tellus libero, ornare ut lectus vel, hendrerit convallis dolor. Nullam sed gravida dolor. Maecenas interdum leo eros, ut volutpat eros fermentum quis. Vivamus posuere urna vel facilisis sollicitudin. Nam tempus sodales vestibulum. Nunc bibendum sagittis libero, ut dapibus dolor finibus sed. Aenean risus tortor, faucibus sed ultricies sit amet, ultricies vitae nunc. Vivamus vel scelerisque leo, gravida ornare diam. Duis rutrum odio vitae ante fermentum, in porta libero euismod."
      style-type="lined"
    ></NewPage>
    <Cover></Cover>
  </div>
  <div
    class="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center items-center space-x-5"
  >
    <Button @click="turnToPreviousPage">Previous</Button>
    <Button @click="turnToNextPage">Next</Button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PageFlip } from 'page-flip'
import Button from '~/components/form/Button/Button.vue'
import NewPage from '~/components/NewJournal/NewPage.vue'
import Cover from '~/components/NewJournal/Cover.vue'

const pageFlipContainer = ref(null)
const pageFlip = ref()
const turnToNextPage = () => pageFlip.value.flipNext()
const turnToPreviousPage = () => pageFlip.value.flipPrev()

onMounted(() => {
  pageFlip.value = new PageFlip(pageFlipContainer.value, {
    width: 550,
    height: 800,

    size: 'stretch',
    // set threshold values:
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 500,
    maxHeight: 1350,

    maxShadowOpacity: 0.5, // Half shadow intensity
    showCover: true,
    mobileScrollSupport: true, // disable content scrolling on mobile devices
  })

  pageFlip.value.loadFromHTML(document.querySelectorAll('.page'))
})
</script>

<style scoped>
.page-flip-container {
  border: 2px aqua solid;
}

.page {
  width: 100%;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  line-height: 1.5;
}
</style>

<template>
  <div ref="pageFlipContainer" class="page-flip-container">
    <Cover></Cover>
    <NewPage
      v-for="i in 10"
      :key="i"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a est sed diam egestas gravida eu sit amet leo. Quisque fringilla elementum sapien, non venenatis ex. Nulla est nulla, viverra ac vestibulum non, maximus id lacus. Suspendisse tempor a turpis sed luctus. Fusce fringilla rutrum quam vel malesuada. In tellus libero, ornare ut lectus vel, hendrerit convallis dolor. Nullam sed gravida dolor. Maecenas interdum leo eros, ut volutpat eros fermentum quis. Vivamus posuere urna vel facilisis sollicitudin. Nam tempus sodales vestibulum. Nunc bibendum sagittis libero, ut dapibus dolor finibus sed. Aenean risus tortor, faucibus sed ultricies sit amet, ultricies vitae nunc. Vivamus vel scelerisque leo, gravida ornare diam. Duis rutrum odio vitae ante fermentum, in porta libero euismod."
      style-type="lined"
    ></NewPage>
    <Cover></Cover>
  </div>
  <div
    class="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center items-center space-x-5"
  >
    <Button @click="turnToPreviousPage">Previous</Button>
    <Button @click="turnToNextPage">Next</Button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PageFlip } from 'page-flip'
import Button from '~/components/form/Button/Button.vue'
import NewPage from '~/components/NewJournal/NewPage.vue'
import Cover from '~/components/NewJournal/Cover.vue'

const pageFlipContainer = ref(null)
const pageFlip = ref()
const turnToNextPage = () => pageFlip.value.flipNext()
const turnToPreviousPage = () => pageFlip.value.flipPrev()

onMounted(() => {
  pageFlip.value = new PageFlip(pageFlipContainer.value, {
    width: 550,
    height: 800,

    size: 'stretch',
    // set threshold values:
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 500,
    maxHeight: 1350,

    maxShadowOpacity: 0.5, // Half shadow intensity
    showCover: true,
    mobileScrollSupport: true, // disable content scrolling on mobile devices
  })

  pageFlip.value.loadFromHTML(document.querySelectorAll('.page'))
})
</script>

<style scoped>
.page-flip-container {
  border: 2px aqua solid;
}

.page {
  width: 100%;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  line-height: 1.5;
}
</style>

StPageFlip - Simple library for creating realistic page turning eff...

Powerful, simple and flexible JS Library for creating realistic and beautiful page turning effect.

5 Replies

SherbOP•7mo ago

NewPage Component

<template>
  <div :class="['page', styleType]">
    <div
      class="font-bold mb-5 grid grid-cols-1 sm:grid-cols-auto-1fr items-center gap-x-5"
    >
      <div class="text-xl leading-5">
        <span>Wednesday 30th September 2024</span> <span>12:00 PM</span>
      </div>
      <div class="text-6xl text-right">😀</div>
    </div>
    <div class="word-break-wrap text-justify flex-grow">
      {{ content }}
    </div>
    <div class="grid gap-2 mt-5 grid-cols-1 sm:grid-cols-3">
      <div v-for="i in 10" :key="i" class="regular-image">
        <img
          src="https://placehold.co/600x400"
          alt="Regular Image"
          class="w-full h-full object-cover"
        />
      </div>
    </div>
    <div class="text-right">1</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  content: {
    type: String,
    required: true,
  },
  styleType: {
    type: String,
    default: 'plain',
    validator: (value) => ['plain', 'lined', 'graph', 'dotted'].includes(value),
  },
})
</script>

<style scoped>
.word-break-wrap {
  word-break: break-word;
  word-wrap: break-word;
}

.page.plain {
  background-color: #fff;
}

.page.lined {
  background: linear-gradient(white 95%, lightgrey 96%) repeat-y;
  background-size: 100% 20px;
}

.page.graph {
  background-image: linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 25px 25px;
}

.page.dotted {
  background-image: radial-gradient(#000 1px, white 1px);
  background-size: 10px 10px;
}
</style>

<template>
  <div :class="['page', styleType]">
    <div
      class="font-bold mb-5 grid grid-cols-1 sm:grid-cols-auto-1fr items-center gap-x-5"
    >
      <div class="text-xl leading-5">
        <span>Wednesday 30th September 2024</span> <span>12:00 PM</span>
      </div>
      <div class="text-6xl text-right">😀</div>
    </div>
    <div class="word-break-wrap text-justify flex-grow">
      {{ content }}
    </div>
    <div class="grid gap-2 mt-5 grid-cols-1 sm:grid-cols-3">
      <div v-for="i in 10" :key="i" class="regular-image">
        <img
          src="https://placehold.co/600x400"
          alt="Regular Image"
          class="w-full h-full object-cover"
        />
      </div>
    </div>
    <div class="text-right">1</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  content: {
    type: String,
    required: true,
  },
  styleType: {
    type: String,
    default: 'plain',
    validator: (value) => ['plain', 'lined', 'graph', 'dotted'].includes(value),
  },
})
</script>

<style scoped>
.word-break-wrap {
  word-break: break-word;
  word-wrap: break-word;
}

.page.plain {
  background-color: #fff;
}

.page.lined {
  background: linear-gradient(white 95%, lightgrey 96%) repeat-y;
  background-size: 100% 20px;
}

.page.graph {
  background-image: linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 25px 25px;
}

.page.dotted {
  background-image: radial-gradient(#000 1px, white 1px);
  background-size: 10px 10px;
}
</style>

Cover Component

<template>
  <div class="page" data-density="hard">Cover</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

<template>
  <div class="page" data-density="hard">Cover</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

MarkBoots•7mo ago

not able to test it myself, but you have set a fixed size here

SherbOP•7mo ago

Yeah, unfortunately it’s required by the library but apparently the size stretch is supposed to stretch it passed the parent or something

Buggy Bug World•7mo ago

I understand this to an extent, I'll drop hint tomorrow. I write React, yet to do Vuejs. But in React to implement width or height auto-just you'll need to use useRef and perform some logic. Isn't fixed height going to cause the content to overflow?

SherbOP•7mo ago

Okay cheers, look forward to you response 😀

Gaming

Programming

Height Adjustment for StPageFlip