Unable to use (in jekyll site) #31

XusBadia · 2022-06-11T21:19:28Z

Hi,

I've been trying to get it to work but I seem unable to get it to work.

I've copied the HTML and JS from the demo page.

<body>
<div class="container">
    <div>
        <button type="button" class="btn-prev">Previous page</button>
        <span class="page-current">1</span> of <span class="page-total">-</span>
        <button type="button" class="btn-next">Next page</button>
    </div>

    <div>
        State: <i class="page-state">read</i>, orientation: <i class="page-orientation">landscape</i>
    </div>
</div>

<div class="container">
    <div class="flip-book" id="demoBookExample">
        <div class="page page-cover page-cover-top" data-density="hard">
            <div class="page-content">
                <h2>BOOK TITLE</h2>
            </div>
        </div>
        <div class="page">
            <div class="page-content">
                <h2 class="page-header">Page header 1</h2>
>                 <div class="page-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit verra metus, a venenatis tellus tellus id magna.</div>
                <div class="page-footer">2</div>
            </div>
        </div>
        <!-- PAGES .... -->
        <div class="page">
            <div class="page-content">
                <h2 class="page-header">Page header - 15</h2>
>                 <div class="page-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit verra metus, a venenatis tellus tellus id magna.</div>
                <div class="page-footer">16</div>
            </div>
        </div>
        <div class="page">
            <div class="page-content">
                <h2 class="page-header">Page header - 16</h2>
>                 <div class="page-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit verra metus, a venenatis tellus tellus id magna.</div>
                <div class="page-footer">17</div>
            </div>
        </div>
        <div class="page page-cover page-cover-bottom" data-density="hard">
            <div class="page-content">
                <h2>THE END</h2>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  // collect all the trips
  var trips = document.getElementsByClassName("trip");
  // get window width and height
  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;

  // i stands for "index". you could also call this banana or haircut. it's a variable
  for ( var i=0; i < trips.length; i++ ) {
    
      // shortcut! the current div in the list
      var thisTrip = trips[i];
      
      // get random numbers for each element
      randomTop = getRandomNumber(0, winHeight - 200);
      randomLeft = getRandomNumber(0, winWidth - 200);
      randomRotate = getRandomNumber(0, 1);
      
      // update top and left position
      thisTrip.style.top = randomTop +"px";
      thisTrip.style.left = randomLeft +"px";
      thisTrip.style.transform = "rotate(" + randomRotate +"turn)";
      
  }

  // function that returns a random number between a min and max
  function getRandomNumber(min, max) {
    return Math.random() * (max - min) + min;
  }
</script>

<script type="text/javascript" src="assets/js/page-flip.browser.js"></script>
<script type="module">
	import {PageFlip} from 'page-flip';

	document.addEventListener('DOMContentLoaded', function() {

	    const pageFlip = new PageFlip(
	        document.getElementById("demoBookExample"),
	        {
	            width: 550, // base page width
	            height: 733, // base page height

	            size: "stretch",
	            // set threshold values:
	            minWidth: 315,
	            maxWidth: 1000,
	            minHeight: 420,
	            maxHeight: 1350,

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

	    // load pages
	    pageFlip.loadFromHTML(document.querySelectorAll(".page"));

	    document.querySelector(".page-total").innerText = pageFlip.getPageCount();
	    document.querySelector(
	        ".page-orientation"
	    ).innerText = pageFlip.getOrientation();

	    document.querySelector(".btn-prev").addEventListener("click", () => {
	        pageFlip.flipPrev(); // Turn to the previous page (with animation)
	    });

	    document.querySelector(".btn-next").addEventListener("click", () => {
	        pageFlip.flipNext(); // Turn to the next page (with animation)
	    });

	    // triggered by page turning
	    pageFlip.on("flip", (e) => {
	        document.querySelector(".page-current").innerText = e.data + 1;
	    });

	    // triggered when the state of the book changes
	    pageFlip.on("changeState", (e) => {
	        document.querySelector(".page-state").innerText = e.data;
	    });

	    // triggered when page orientation changes
	    pageFlip.on("changeOrientation", (e) => {
	        document.querySelector(".page-orientation").innerText = e.data;
	    });
	});
</script>
</body>

I got an error saying:
Uncaught TypeError: Failed to resolve module specifier "page-flip". Relative references must start with either "/", "./", or "../".

So I changed the first line of the script to:
import {PageFlip} from './assets/js/page-flip.browser.js';
To locate the actual script.

And then I get:
Uncaught SyntaxError: The requested module './assets/js/page-flip.browser.js' does not provide an export named 'PageFlip' (at (index):125:10)

What am I missing?

Thanks a lot in advance.

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to use (in jekyll site) #31

Unable to use (in jekyll site) #31

XusBadia commented Jun 11, 2022 •

edited

Loading

Unable to use (in jekyll site) #31

Unable to use (in jekyll site) #31

Comments

XusBadia commented Jun 11, 2022 • edited Loading

XusBadia commented Jun 11, 2022 •

edited

Loading