Comments (21)
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.
Related Issues (20)
- What happened to the official website? The content is very strange. HOT 2
- Continuous Manager inside an element that is scrolling that is not the viewport?
- Scripted Content SandBoxing issue, And CFI pages position
- Extracting the text per rendered section / block using epub js? HOT 32
- How do I add a paginated swipe animation?
- highlight not working post integrating with hammer.js for swiping HOT 1
- how to call images in css file? HOT 1
- about rendition.next(), rendition.prev()
- about InlineView
- Minified XML causes 'container.xml not found' HOT 4
- renderTo CSS selector instead of ID HOT 1
- [Bug] Blank page when resize happen during loading
- How to add any emoji on page ?
- How to add any emoji on page? HOT 2
- how to turn the page by wheel
- rapidly scroll up and down will cause error in continuous-scrolled example
- How do I get the text on this page when it is truncated
- fix error File not found in the epub and replace file addresses
- Generate total page locations HOT 2
- Highlight
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from epub.js.