add swipes by gestures in settings as an option, hammer.js for mobile

cps/templates/read.html

@@ -157,6 +157,19 @@
             />{{_('Reflow text when sidebars are open.')}}
           </p>
         </div>
+        <div class="form-group" id="navigationMode">
+          <label class="item">{{ _('Navigation') }}:</label>
+          <button type="button" id="navSides" onclick="selectNavMode('sides')">
+            <span id="navSidesTick"> </span>{{_('Sides')}}
+          </button>
+          <button
+            type="button"
+            id="navGestures"
+            onclick="selectNavMode('gestures')"
+          >
+            <span id="navGesturesTick"> </span>{{_('Gestures')}}
+          </button>
+        </div>
         <div class="form-group fontSizeWrapper">
           <label>{{ _('Font Size') }}</label>
           <div
@@ -364,8 +377,25 @@
         document.getElementById(id).querySelector("span").textContent = "✓";
         reader.rendition.spread(id === "spread" ? true : "none");
       }
+      function selectNavMode(mode) {
+        var tickSides = document.getElementById("navSidesTick");
+        var tickGest = document.getElementById("navGesturesTick");
+        tickSides.textContent = mode === "sides" ? "✓" : "";
+        tickGest.textContent = mode === "gestures" ? "✓" : "";
+        localStorage.setItem("calibre.reader.navMode", mode);
+        if (window.applyNavigationMode) {
+          window.applyNavigationMode(mode);
+        }
+      }
+      // Initialize nav mode on load
+      (function () {
+        var savedMode =
+          localStorage.getItem("calibre.reader.navMode") || "gestures";
+        selectNavMode(savedMode);
+      })();
     </script>
     <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/libs/hammer.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>