[mod] add swipe events to the image gallery (gesture control)

Adds [1] to the searxng.min.js and horizontal swipe events to the image gallery.

[1] https://www.npmjs.com/package/swiped-events

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

searx/static/themes/simple/gruntfile.js

@@ -24,7 +24,7 @@ module.exports = function (grunt) {
         files: ['gruntfile.js', 'eslint.config.mjs', '.stylelintrc.json', 'src/**'],
         tasks: [
           'eslint',
-	  'stylelint',
+          'stylelint',
           'copy',
           'uglify',
           'less',
@@ -109,7 +109,8 @@ module.exports = function (grunt) {
           'js/searxng.head.min.js': ['src/js/head/*.js'],
           'js/searxng.min.js': [
             'src/js/main/*.js',
-            './node_modules/autocomplete-js/dist/autocomplete.js'
+            './node_modules/autocomplete-js/dist/autocomplete.js',
+            './node_modules/swiped-events/src/swiped-events.js'
           ]
         }
       }

searx/static/themes/simple/package-lock.json

@@ -7,7 +7,8 @@
       "dependencies": {
         "autocomplete-js": "^2.7.1",
         "leaflet": "^1.9.4",
-        "normalize.css": "^8.0.1"
+        "normalize.css": "^8.0.1",
+        "swiped-events": "^1.2.0"
       },
       "devDependencies": {
         "ejs": "^3.1.10",
@@ -8989,6 +8990,12 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/swiped-events": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.2.0.tgz",
+      "integrity": "sha512-KRu67z1hb4sPxMdFIF2kaufYHTcWOb8NVLbIl2g5dPWZkEQ6D3wfSIVJ7iXbicTt9cO3e0vARqgx9fITtTZxQw==",
+      "license": "MIT"
+    },
     "node_modules/table": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",

searx/static/themes/simple/package.json

@@ -24,7 +24,8 @@
   "dependencies": {
     "autocomplete-js": "^2.7.1",
     "leaflet": "^1.9.4",
-    "normalize.css": "^8.0.1"
+    "normalize.css": "^8.0.1",
+    "swiped-events": "^1.2.0"
   },
   "scripts": {
     "all": "npm install && grunt",

searx/static/themes/simple/src/js/main/results.js

@@ -113,6 +113,17 @@
       if (!window.location.hash) searxng.closeDetail();
     });
 
+    d.querySelectorAll('.swipe-horizontal').forEach(
+      obj => {
+        obj.addEventListener('swiped-left', function (e) {
+          searxng.selectNext(false);
+        });
+        obj.addEventListener('swiped-right', function (e) {
+          searxng.selectPrevious(false);
+        });
+      }
+    );
+
     w.addEventListener('scroll', function () {
       var e = d.getElementById('backToTop'),
         scrollTop = document.documentElement.scrollTop || document.body.scrollTop,

searx/templates/simple/result_templates/images.html

@@ -5,7 +5,7 @@
 		<span class="title">{{ result.title|striptags }}</span>{{- "" -}}
                 <span class="source">{{- result.parsed_url.netloc -}}</span>{{- "" -}}
         </a>{{- "" -}}
-        <div class="detail">{{- "" -}}
+        <div class="detail swipe-horizontal">{{- "" -}}
                 <a class="result-detail-close" href="#">{{ icon('close') }}</a>{{- "" -}}
                 <a class="result-detail-previous" href="#">{{ icon('chevron-left') }}</a>{{- "" -}}
                 <a class="result-detail-next" href="#">{{ icon('chevron-right') }}</a>{{- "" -}}