Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to use (in jekyll site) #31

Open
XusBadia opened this issue Jun 11, 2022 · 0 comments
Open

Unable to use (in jekyll site) #31

XusBadia opened this issue Jun 11, 2022 · 0 comments

Comments

@XusBadia
Copy link

XusBadia commented Jun 11, 2022 •
edited

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@XusBadia