Added swipe support for epub reader (fixes #925)

Cleaned reader js include files
janeczku · Jan 24, 2021 · 0f83f99 · 0f83f99
1 parent d2ad78e
commit 0f83f99
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/cps/static/js/reading/epub.js b/cps/static/js/reading/epub.js
@@ -20,6 +20,34 @@ var reader;
         $("#bookmark, #show-Bookmarks").remove();
     }
 
+    // Enable swipe support
+    // I have no idea why swiperRight/swiperLeft from plugins is not working, events just don't get fired
+    var touchStart = 0;
+    var touchEnd = 0;
+
+    reader.rendition.on('touchstart', function(event) {
+        touchStart = event.changedTouches[0].screenX;
+    });
+    reader.rendition.on('touchend', function(event) {
+      touchEnd = event.changedTouches[0].screenX;
+        if (touchStart < touchEnd) {
+            if(reader.book.package.metadata.direction === "rtl") {
+    			reader.rendition.next();
+    		} else {
+    			reader.rendition.prev();
+    		}
+            // Swiped Right
+        }
+        if (touchStart > touchEnd) {
+            if(reader.book.package.metadata.direction === "rtl") {
+    			reader.rendition.prev();
+    		} else {
+                reader.rendition.next();
+    		}
+            // Swiped Left
+        }
+    });
+
     /**
      * @param {string} action - Add or remove bookmark
      * @param {string|int} location - Location or zero
@@ -43,3 +71,5 @@ var reader;
         });
     }
 })();
+
+
diff --git a/cps/templates/read.html b/cps/templates/read.html
@@ -78,7 +78,7 @@ <h3>{{_('Settings')}}</h3>
           </div>
       </div>
       <div class="overlay"></div>
-
+      <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/libs/jszip.min.js') }}">
       </script> <script src="{{ url_for('static', filename='js/libs/epub.min.js') }}"></script>
       <script type="text/javascript">
@@ -91,10 +91,7 @@ <h3>{{_('Settings')}}</h3>
               useBookmarks: "{{ g.user.is_authenticated | tojson }}"
           };
       </script>
-      <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
-      <script src="{{ url_for('static', filename='js/libs/jszip.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
-      <script src="{{ url_for('static', filename='js/libs/epub.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
     </body>