Page swipe left / right functionality is missing about epub.js HOT 21 CLOSED

I just came up with an even simpler solution this morning (working with v0.3):

let touchStart = 0;
let touchEnd = 0;

rendition.on('touchstart', event => {
  touchStart = event.changedTouches[0].screenX;
});

rendition.on('touchend', event => {
  touchEnd = event.changedTouches[0].screenX;
  if (touchStart < touchEnd) {
    // Swiped Right
  }
  if (touchStart > touchEnd) {
    // Swiped Left
  }
});

from epub.js.

Yes, fchasen's idea is very good, but have little problem while the scripts load. I make some change, and it can works now. Thanks.

EPUBJS.Hooks.register("beforeChapterDisplay").swipeDetection = function(callback, renderer){

        function getBaseUrl() {
            var re = new RegExp(/^.*\//);
            return re.exec(window.location.href);
        }

        function executeScriptAfterLoad(){
            //-- Create a script element, you could also load this from an external file like above
            var script = renderer.doc.createElement("script");

            //-- Listen for swipe events
             script.text = '\
                $(window).on("swipeleft", function() {\
                    parent.Book.nextPage();\
                });\
                $(window).on("swiperight", function() {\
                    parent.Book.prevPage();\
                });\
                $(document).bind( "tap", function(event){\
                    parent.actionBookHeaderAndFooter("toggle");\
                });';

            renderer.doc.head.appendChild(script);
        }

        //-- Load jQuery into iframe header
        EPUBJS.core.addScripts([getBaseUrl() + "jquery/2.1.4/jquery-2.1.4.min.js",
                                getBaseUrl() + "jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"], executeScriptAfterLoad, renderer.doc.head);


        if(callback) callback();        
}

from epub.js.

You can use a library like jQuery mobile (http://api.jquerymobile.com/swipe/) and have it call book.pageNext() when a swipe is detected.

from epub.js.

I have added following code on my page. but it is not firing after swiped.
$('iframe').load(function () {
$('iframe').on("swipe", swipeHandler);
function swipeHandler(event) {
alert('swipe');
}
});

Any other way to do it?

from epub.js.

I think so this issue is related to iframe.

from epub.js.

Please tell me, where to bind "Swipe" event?

from epub.js.

Any idea??

from epub.js.

Sorry about the delay:

My guess is that the iframe document is stealing the events or jquery isn't capturing them since it isn't loaded in the iframe.

I'd try injecting jQuery into the page with a hook:

EPUBJS.Hooks.register("beforeChapterDisplay").swipeDetection = function(callback, renderer){

        //-- Load jQuery into iframe header
        EPUBJS.core.addScripts([ "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
                            "http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"], null, renderer.doc.head);

        //-- Create a script element, you could also load this from an external file like above
        var script = renderer.doc.createElement("script");

        //-- Listen for swipe events
        script.text = '\
            $(window).on("swipeleft", function() {\
                renderer.book.nextPage();\
            });\
            $(window).on("swiperight", function() {\
                renderer.book.prevPage();\
            });';

        renderer.doc.head.appendChild(script);

        if(callback) callback();        
}

from epub.js.

No, but its not working. Below error is coming.
ReferenceError: $ is not defined

from epub.js.

epub ebooks respond to left or right swipe on firefox browser in Android platform. Swipe is non existent in other browser including the native one.

from epub.js.

@yinhaibo it throws me this error
Uncaught TypeError: Cannot read property 'mobile' of undefined

from epub.js.

Another option (you don't need jQuery):

EPUBJS.Hooks.register('beforeChapterDisplay').swipeDetection = function(callback, renderer) {
  function detectSwipe() {
    var script = renderer.doc.createElement('script');
    script.text = "\
      var swiper = new Hammer(document);\
      swiper.on('swipeleft', function() {\
        parent.Book.nextPage();\
      });\
      swiper.on('swiperight', function() {\
        parent.Book.prevPage();\
      });";
    renderer.doc.head.appendChild(script);
  }
  EPUBJS.core.addScript('https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.6/hammer.min.js', detectSwipe, renderer.doc.head);
  if (callback) {
    callback();
  }
};

from epub.js.

MifRea1 thanks for your help - can you send full source code!!
i add this code but doses`t work swipe page

from epub.js.

I've added a couple of new lines to the first example.

from epub.js.

Hi, any luck with this issue,, am still stuck with adding swip functionality.. the closest that worked for me was @yinhaibo solution.. the swipe action was detected but trying to call parent.Book.nextPage(); throws 'Uncaught TypeError: Cannot read property 'nextPage' of undefined'

from epub.js.

For anybody having same issue with me, I modified @yinhaibo , I replaced
parent.Book.nextPage();
with
this.parent.document.getElementById("prev").click();
that is :

EPUBJS.Hooks.register("beforeChapterDisplay").swipeDetection = function (callback, renderer) {

            function executeScriptAfterLoad() {
                //-- Create a script element, you could also load this from an external file like above
                var script = renderer.doc.createElement("script");
                //-- Listen for swipe events
                script.text = '\
            $(window).on("swipeleft", function() {\
                   this.parent.document.getElementById("next").click();\
            });\
            $(window).on("swiperight", function() {\
             this.parent.document.getElementById("prev").click();\
            });';
                renderer.doc.head.appendChild(script);
            }

            //-- Load jQuery into iframe header

            EPUBJS.core.addScripts(["../../../reader/js/libs/jquery.min.js",
                "../../../reader/js/libs/jquery.mobile.js"], executeScriptAfterLoad, renderer.doc.head);
            if (callback)
                callback();
        }

from epub.js.

@Mrjaid maybe the Book object is cannot access from iframe, parent.Book is assume that it is a global variable in parent document.

from epub.js.

yeah I am currently working with the hypothesis example.. i can see it has alot of hooks added

from epub.js.

Here's what worked for me.

Create a file inject.js that has in it:
`$(window).on('swipeleft', () => {
parent.rendition.next();
});

$(window).on('swiperight', () => {
parent.rendition.prev();
});
`

And to inject it into the epub do:

rendition.hooks.render.register((view) => { view.contents.addScript('https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js') .then(() => view.contents.addScript('https://cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js')) .then(() => view.contents.addScript('/js/inject.js')); });

Keep in mind:

• adjust the path to inject.js
• make sure to call your rendition "rendition" or adjust the above code.
  `

from epub.js.

Need to add the previous comment:
In the parent window you need to set

window.rendition = rendition;

So that the reference to parent.rendition will work.

from epub.js.

from epub.js.