Good day all, I want to apply swipe to my loaded epub. I used javascript to load the epub into a div, I want to be able to do swipe left and swipe right on the div.
I got a jquery script to do that, but the challenge is that, it doesn't swipe on the div, it swipes when I do mouse swipe left or right on other controls on the page, such as input control and select control. But on the main div with epub, it doesn't swipe or the swipe doesn't get called.
Thanks for your help
Edit: After checking the developer tools side, I noticed that after the epub is loaded in the area div, it is loaded into an iframe, i've been trying to target the iframe, for touchmove event, but not yet successful. Below is the developer inspect code, thanks.
<div id="area" class="swipe-detector">
<iframe id="epubjs-iframe:2dc3e713-d94a-4f98-a8d2-0ec974ed045b"
scrolling="no" height="100%" width="100%" style="border: none;
visibility: visible;">
#document
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
style="transform: translate(0px, 0px); overflow: hidden; width: auto;
height: 609px; column-fill: auto; column-width: 361px; column-gap:
44px;">
<head>
<base href="OEBPS/table-of-contents.html">
<title>Table Of Contents -- The Problems of Philosophy</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=utf-8">
<meta name="EPB-UUID" content="">
<link rel="stylesheet" href="blob:null/64628d08-cd14-43f0-
93cf-4589c1eb1f9b" type="text/css">
</head>
<body style="margin: 0px;">
...
</body>
</html>
</iframe>
</div>
Please check my original code below:
<body class="swipe-detector">
<div id="reader">
<input type="file" id="bookChooser">
<select id="toc"></select>
<div id="area" class="swipe-detector"></div>
<button id="prev" type="button"><</button>
<button id="next" type="button">></button>
</div>
<script>
(function($) {
$.fn.swipeDetector = function(options) {
// States: 0 - no swipe, 1 - swipe started, 2 - swipe released
var swipeState = 0;
// Coordinates when swipe started
var startX = 0;
var startY = 0;
// Distance of swipe
var pixelOffsetX = 0;
var pixelOffsetY = 0;
// Target element which should detect swipes.
var swipeTarget = this;
var defaultSettings = {
// Amount of pixels, when swipe don't count.
swipeThreshold: 70,
// Flag that indicates that plugin should react only on touch events.
// Not on mouse events too.
useOnlyTouch: false
};
// Initializer
(function init() {
options = $.extend(defaultSettings, options);
// Support touch and mouse as well.
swipeTarget.on("mousedown touchstart", swipeStart);
$("html").on("mouseup touchend", swipeEnd);
$("html").on("mousemove touchmove", swiping);
})();
function swipeStart(event) {
if (options.useOnlyTouch && !event.originalEvent.touches) return;
if (event.originalEvent.touches) event = event.originalEvent.touches[0];
if (swipeState === 0) {
swipeState = 1;
startX = event.clientX;
startY = event.clientY;
}
}
function swipeEnd(event) {
if (swipeState === 2) {
swipeState = 0;
if (
Math.abs(pixelOffsetX) > Math.abs(pixelOffsetY) &&
Math.abs(pixelOffsetX) > options.swipeThreshold
) {
// Horizontal Swipe
if (pixelOffsetX < 0) {
swipeTarget.trigger($.Event("swipeLeft.sd"));
console.log("Left");
} else {
swipeTarget.trigger($.Event("swipeRight.sd"));
console.log("Right");
}
} else if (Math.abs(pixelOffsetY) > options.swipeThreshold) {
// Vertical swipe
if (pixelOffsetY < 0) {
swipeTarget.trigger($.Event("swipeUp.sd"));
console.log("Up");
} else {
swipeTarget.trigger($.Event("swipeDown.sd"));
console.log("Down");
}
}
}
}
function swiping(event) {
// If swipe don't occuring, do nothing.
if (swipeState !== 1) return;
if (event.originalEvent.touches) {
event = event.originalEvent.touches[0];
}
var swipeOffsetX = event.clientX - startX;
var swipeOffsetY = event.clientY - startY;
if (
Math.abs(swipeOffsetX) > options.swipeThreshold ||
Math.abs(swipeOffsetY) > options.swipeThreshold
) {
swipeState = 2;
pixelOffsetX = swipeOffsetX;
pixelOffsetY = swipeOffsetY;
}
}
return swipeTarget; // Return element available for chaining.
};
})(jQuery);
// Showcase
$("document").ready(function() {
$(".swipe-detector")
.swipeDetector()
.on("swipeLeft.sd swipeRight.sd swipeUp.sd swipeDown.sd", function(event) {
if (event.type === "swipeLeft") {
console.log("Swipe Left");
} else if (event.type === "swipeRight") {
console.log("Swipe Right");
} else if (event.type === "swipeUp") {
console.log("Swipe Up");
} else if (event.type === "swipeDown") {
console.log("Swipe Down");
}
});
});
</script>
</body>
