View Categories

Store last viewed flipbook page

1 min read 

Experimental customizations are not included by default and are extended to the plugin. Please use with caution and proper consent.

Case: #

Flipbook can open at any given page by using data-page=5 setting(second Book), or by passing through options
var options={openPage:5};

Yet, at times last open page of user can be stored and restored using further customization.

Demo: #

Book 1 Manual
Book 2 Template
Book 2 will open at page 5, until user flips it, then after user location is stored and used. It resets back to page 5 once you clear data.

Process: #

Lets create two popup books that have distinct id “book1” and “book2”. These id will be used to store the position of the page.

<div class="_df_button" id="book1" source="https://jquery.dearflip.com/wp-content/uploads/2019/07/dearpdf-manual.pdf">Book 1 Manual</div>

<div class="_df_button" id="book2" source="https://jquery.dearflip.com/wp-content/uploads/2019/07/glfw.pdf" data-page=5>Book 2 Template</div>

We use onCreate function to restore the last page and onFlip to store the current page in a flipbook. These are added to DFLIP.defaults variable so that every flipbook on the page uses the customization.

//Version 2.0 and above
jQuery(function(){

DFLIP.defaults.onCreate = function(flipbook){
    var page = localStorage.getItem(flipbook.options.id);
    if(page !==null){
        flipbook.currentPageNumber = parseInt(page,10);
        console.log("Flipbook : " + flipbook.options.id + " Restored at : " + flipbook.options.openPage); 
    }
};

DFLIP.defaults.onFlip = function(flipbook) {
    console.log("Flipbook : " + flipbook.options.id + "stored at : " + flipbook.currentPageNumber);
    localStorage.setItem(flipbook.options.id,flipbook.currentPageNumber);
};

    jQuery("#clear_data").on("click",function(){
        localStorage.removeItem("book1");localStorage.removeItem("book2");
        alert("Data Cleared Successfully");
    });

});

//Version less than 2.0
jQuery(function(){

    DFLIP.defaults.onCreate = function(flipbook){
        var page = localStorage.getItem(flipbook.options.id);
        if(page !==null){
            flipbook.options.openPage = page;
            console.log("Flipbook : " + flipbook.options.id + " Restored at : " + flipbook.options.openPage); 
        }
    };
    
    DFLIP.defaults.onFlip = function(flipbook) {
        console.log("Flipbook : " + flipbook.options.id + "stored at : " + flipbook.target._activePage);
        localStorage.setItem(flipbook.options.id,flipbook.target._activePage);
    };

    jQuery("#clear_data").on("click",function(){
        localStorage.removeItem("book1");localStorage.removeItem("book2");
        alert("Data Cleared Successfully");
    });

});

localStorage is used for this example. It can be changed to another library or storage location based on the requrement.

Leave a Comment