How to add page flip animation for a touch device?

[ahayder]

Guys, please let me know how can I implement a page flip animation into EpubJs. Is it possible? Should I use another plugin? You know there are no plugins close to this. :(

[pgaskin]

I finally figured it out!

EPUBJS.Hooks.register('beforeChapterDisplay').pageAnimation = function (callback, renderer) {
    window.setTimeout(function () {
        var style = renderer.doc.createElement("style");
        style.innerHTML = "*{-webkit-transition: transform {t} ease;-moz-transition: tranform {t} ease;-o-transition: transform {t} ease;-ms-transition: transform {t} ease;transition: transform {t} ease;}";
        style.innerHTML = style.innerHTML.split("{t}").join("0.5s");
        renderer.doc.body.appendChild(style);
    }, 100)
    if (callback) {
        callback();
    }
};

Also, for swipe detection:

EPUBJS.Hooks.register('beforeChapterDisplay').swipeDetection = function (callback, renderer) {
    var script = renderer.doc.createElement('script');
    script.text = "!function(a,b,c){function f(a){d=a.touches[0].clientX,e=a.touches[0].clientY}function g(f){if(d&&e){var g=f.touches[0].clientX,h=f.touches[0].clientY,i=d-g,j=e-h;Math.abs(i)>Math.abs(j)&&(i>a?b():i<0-a&&c()),d=null,e=null}}var d=null,e=null;document.addEventListener('touchstart',f,!1),document.addEventListener('touchmove',g,!1)}";
    /* (threshold, leftswipe, rightswipe) */
    script.text += "(10,function(){parent.ePubViewer.Book.nextPage()},function(){parent.ePubViewer.Book.prevPage()});"
    renderer.doc.head.appendChild(script);
    if (callback) {
        callback();
    }
};

[pgaskin]

Also, at the moment, to support desktop and laptop devices, epub.js needs to be patched by adding the following code somewhere before you start using epub.js, but after you load the library. The only difference this makes is that epub.js will use css transforms on desktop devices as well as mobile devices to move the pages.

EPUBJS.Render.Iframe.prototype.setLeft = function(leftPos){
    this.docEl.style[this.transform] = 'translate('+ (-leftPos) + 'px, 0)';
}

[georgezouq]

@geek1011 Why there need this code:

(10,function(){parent.ePubViewer.Book.nextPage()},function(){parent.ePubViewer.Book.prevPage()});

If I make it work, It will turn two pages at a time

[pgaskin]

Its to detect swipe. It seems like you already have another code to check for the swipe event

[carlosrc]

@geek1011 I have problems when transitions are enabled. When I resize the page, it goes crazy and presents strange behaviour, changing the current page.

Anyone have this problem too? Thanks.

[pgaskin]

Yes, this can be worked around by checking for a resize, then disabling the animation temporarily.

On Mar 30, 2017 7:02 AM, Carlos Rodríguez notifications@github.com wrote:

@geek1011https://github.com/geek1011 I have problems when transitions are enabled. When I resize the page, it goes crazy and presents strange behaviour, changing the current page.

Anyone have this problem too? Thanks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/futurepress/epub.js/issues/510#issuecomment-290378012, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ANQ-1dCxm6tHml7Hb4g6d4LQA2DRmunyks5rq4u-gaJpZM4LBaL9.

[carlosrc]

@geek1011 could you tell me how to check for a resize? I can't find the way.

I appreciate your help. Thanks!