Merge pull request #481 from dalf/simple-fix-hotkeys

Simple themes: fixes in keyboard.js

searx/static/themes/simple/css/searxng-rtl.css

@@ -965,7 +965,7 @@ template {
     --color-toolkit-badge-background: #777;
     --color-toolkit-kbd-font: #000;
     --color-toolkit-kbd-background: #fff;
-    --color-toolkit-dialog-border: #333;
+    --color-toolkit-dialog-border: #555;
     --color-toolkit-dialog-background: #222;
     --color-toolkit-tabs-label-border: #222;
     --color-toolkit-tabs-section-border: #555;
@@ -1544,10 +1544,9 @@ div.selectable_url pre {
   position: fixed;
   top: 50%;
   left: 50%;
-  /* bring your own prefixes */
+  margin: 0 auto;
   transform: translate(-50%, -50%);
-  z-index: 100000;
-  margin: 0 50% 0 0;
+  z-index: 10000000;
 }
 .dialog-modal::before {
   position: absolute;

searx/static/themes/simple/css/searxng.css

@@ -965,7 +965,7 @@ template {
     --color-toolkit-badge-background: #777;
     --color-toolkit-kbd-font: #000;
     --color-toolkit-kbd-background: #fff;
-    --color-toolkit-dialog-border: #333;
+    --color-toolkit-dialog-border: #555;
     --color-toolkit-dialog-background: #222;
     --color-toolkit-tabs-label-border: #222;
     --color-toolkit-tabs-section-border: #555;
@@ -1544,10 +1544,9 @@ div.selectable_url pre {
   position: fixed;
   top: 50%;
   left: 50%;
-  /* bring your own prefixes */
+  margin: 0 auto;
   transform: translate(-50%, -50%);
-  z-index: 100000;
-  margin: 0 50% 0 0;
+  z-index: 10000000;
 }
 .dialog-modal::before {
   position: absolute;

searx/static/themes/simple/js/searxng.head.js

@@ -21,6 +21,7 @@
         autocompleter: script.getAttribute('data-autocompleter') === 'true',
         search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true',
         infinite_scroll: script.getAttribute('data-infinite-scroll') === 'true',
+        hotkeys: script.getAttribute('data-hotkeys') === 'true',
         static_path: script.getAttribute('data-static-path'),
         translations: JSON.parse(script.getAttribute('data-translations')),
     };

searx/static/themes/simple/js/searxng.head.min.js

@@ -4,5 +4,5 @@
  * (C) Copyright Contributors to the searx project (2014 - 2021).
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-(function(t,e){"use strict";var a=e.currentScript||function(){var t=e.getElementsByTagName("script");return t[t.length-1]}();t.searxng={touch:"ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch||false,method:a.getAttribute("data-method"),autocompleter:a.getAttribute("data-autocompleter")==="true",search_on_category_select:a.getAttribute("data-search-on-category-select")==="true",infinite_scroll:a.getAttribute("data-infinite-scroll")==="true",static_path:a.getAttribute("data-static-path"),translations:JSON.parse(a.getAttribute("data-translations"))};e.getElementsByTagName("html")[0].className=t.searxng.touch?"js touch":"js"})(window,document);
+(function(t,e){"use strict";var a=e.currentScript||function(){var t=e.getElementsByTagName("script");return t[t.length-1]}();t.searxng={touch:"ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch||false,method:a.getAttribute("data-method"),autocompleter:a.getAttribute("data-autocompleter")==="true",search_on_category_select:a.getAttribute("data-search-on-category-select")==="true",infinite_scroll:a.getAttribute("data-infinite-scroll")==="true",hotkeys:a.getAttribute("data-hotkeys")==="true",static_path:a.getAttribute("data-static-path"),translations:JSON.parse(a.getAttribute("data-translations"))};e.getElementsByTagName("html")[0].className=t.searxng.touch?"js touch":"js"})(window,document);
 //# sourceMappingURL=searxng.head.min.js.map

searx/static/themes/simple/js/searxng.head.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"searxng.head.min.js","sources":["searxng.head.js"],"names":["w","d","script","currentScript","scripts","getElementsByTagName","length","searxng","touch","DocumentTouch","document","method","getAttribute","autocompleter","search_on_category_select","infinite_scroll","static_path","translations","JSON","parse","className","window"],"mappings":";;;;;;CAOA,SAAUA,EAAGC,gBAIT,IAAIC,EAASD,EAAEE,eAAkB,WAC7B,IAAIC,EAAUH,EAAEI,qBAAqB,UACrC,OAAOD,EAAQA,EAAQE,OAAS,GAFH,GAMjCN,EAAEO,QAAU,CACRC,MAAS,iBAAkBR,GAAMA,EAAES,eAAiBC,oBAAoBD,eAAkB,MAC1FE,OAAQT,EAAOU,aAAa,eAC5BC,cAAeX,EAAOU,aAAa,wBAA0B,OAC7DE,0BAA2BZ,EAAOU,aAAa,oCAAsC,OACrFG,gBAAiBb,EAAOU,aAAa,0BAA4B,OACjEI,YAAad,EAAOU,aAAa,oBACjCK,aAAcC,KAAKC,MAAMjB,EAAOU,aAAa,uBAIjDX,EAAEI,qBAAqB,QAAQ,GAAGe,UAAapB,EAAEO,QAAa,MAAE,WAAW,MArB/E,CAsBGc,OAAQX"}
+{"version":3,"file":"searxng.head.min.js","sources":["searxng.head.js"],"names":["w","d","script","currentScript","scripts","getElementsByTagName","length","searxng","touch","DocumentTouch","document","method","getAttribute","autocompleter","search_on_category_select","infinite_scroll","hotkeys","static_path","translations","JSON","parse","className","window"],"mappings":";;;;;;CAOA,SAAUA,EAAGC,gBAIT,IAAIC,EAASD,EAAEE,eAAkB,WAC7B,IAAIC,EAAUH,EAAEI,qBAAqB,UACrC,OAAOD,EAAQA,EAAQE,OAAS,GAFH,GAMjCN,EAAEO,QAAU,CACRC,MAAS,iBAAkBR,GAAMA,EAAES,eAAiBC,oBAAoBD,eAAkB,MAC1FE,OAAQT,EAAOU,aAAa,eAC5BC,cAAeX,EAAOU,aAAa,wBAA0B,OAC7DE,0BAA2BZ,EAAOU,aAAa,oCAAsC,OACrFG,gBAAiBb,EAAOU,aAAa,0BAA4B,OACjEI,QAASd,EAAOU,aAAa,kBAAoB,OACjDK,YAAaf,EAAOU,aAAa,oBACjCM,aAAcC,KAAKC,MAAMlB,EAAOU,aAAa,uBAIjDX,EAAEI,qBAAqB,QAAQ,GAAGgB,UAAarB,EAAEO,QAAa,MAAE,WAAW,MAtB/E,CAuBGe,OAAQZ"}

searx/static/themes/simple/js/searxng.js

@@ -155,20 +155,55 @@ window.searxng = (function(w, d) {
 
 searxng.ready(function() {
 
-  searxng.on('.result', 'click', function() {
-    highlightResult(this)(true);  
+  function isElementInDetail(el) {
+    while (el !== undefined) {
+      if (el.classList.contains('detail')) {
+        return true;
+      }
+      if (el.classList.contains('result')) {
+        // we found a result, no need to go to the root of the document:
+        // el is not inside a <div class="detail"> element
+        return false;
+      }
+      el = el.parentNode;
+    }
+    return false;
+  }
+
+  function getResultElement(el) {
+    while (el !== undefined) {
+      if (el.classList.contains('result')) {
+        return el;
+      }
+      el = el.parentNode;
+    }
+    return undefined;
+  }
+
+  function isImageResult(resultElement) {
+    return resultElement && resultElement.classList.contains('result-images');
+  }
+
+  searxng.on('.result', 'click', function(e) {
+    if (!isElementInDetail(e.target)) {
+      highlightResult(this)(true);
+      let resultElement = getResultElement(e.target);
+      if (isImageResult(resultElement)) {
+        e.preventDefault();
+        searxng.selectImage(resultElement);
+      }
+    }
   });
 
   searxng.on('.result a', 'focus', function(e) {
-    var el = e.target;
-    while (el !== undefined) {
-      if (el.classList.contains('result')) {
-        if (el.getAttribute("data-vim-selected") === null) {
-          highlightResult(el)(true);
-        }
-        break;
+    if (!isElementInDetail(e.target)) {
+      let resultElement = getResultElement(e.target);
+      if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
+        highlightResult(resultElement)(true);
+      }
+      if (isImageResult(resultElement)) {
+        searxng.selectImage(resultElement);
       }
-      el = el.parentNode;
     }
   }, true);
 
@@ -271,20 +306,22 @@ searxng.ready(function() {
     }
   };
 
-  searxng.on(document, "keydown", function(e) {
-    // check for modifiers so we don't break browser's hotkeys
-    if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
-      var tagName = e.target.tagName.toLowerCase();
-      if (e.keyCode === 27) {
-        vimKeys[e.keyCode].fun(e);
-      } else {
-        if (e.target === document.body || tagName === 'a' || tagName === 'button') {
-          e.preventDefault();
-          vimKeys[e.keyCode].fun();
+  if (searxng.hotkeys) {
+    searxng.on(document, "keydown", function(e) {
+      // check for modifiers so we don't break browser's hotkeys
+      if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
+        var tagName = e.target.tagName.toLowerCase();
+        if (e.keyCode === 27) {
+          vimKeys[e.keyCode].fun(e);
+        } else {
+          if (e.target === document.body || tagName === 'a' || tagName === 'button') {
+            e.preventDefault();
+            vimKeys[e.keyCode].fun();
+          }
         }
       }
-    }
-  });
+    });
+  }
 
   function highlightResult(which) {
     return function(noScroll) {
@@ -505,14 +542,12 @@ searxng.ready(function() {
   }
 
   function toggleHelp() {
-      var helpPanel = document.querySelector('#vim-hotkeys-help');
-      console.log(helpPanel);
+    var helpPanel = document.querySelector('#vim-hotkeys-help');
     if (helpPanel === undefined || helpPanel === null) {
        // first call
       helpPanel = document.createElement('div');
          helpPanel.id = 'vim-hotkeys-help';
         helpPanel.className='dialog-modal';
-        helpPanel.style='width: 40%';
       initHelpContent(helpPanel);
 			initHelpContent(helpPanel);					
       initHelpContent(helpPanel);
@@ -664,17 +699,13 @@ searxng.ready(function() {
       }
     });
 
-    function selectImage(e) {
+    searxng.selectImage = function(resultElement) {
       /*eslint no-unused-vars: 0*/
-      let t = e.target;
-      while (t && t.nodeName != 'ARTICLE') {
-        t = t.parentNode;
-      }
-      if (t) {
+      if (resultElement) {
         // load full size image in background
-        const imgElement = t.querySelector('.result-images-source img');
-        const thumbnailElement = t.querySelector('.image_thumbnail');
-        const detailElement = t.querySelector('.detail');
+        const imgElement = resultElement.querySelector('.result-images-source img');
+        const thumbnailElement = resultElement.querySelector('.image_thumbnail');
+        const detailElement = resultElement.querySelector('.detail');
         if (imgElement) {
           const imgSrc = imgElement.getAttribute('data-src');
           if (imgSrc) {
@@ -707,12 +738,6 @@ searxng.ready(function() {
       searxng.image_thumbnail_layout.align();
       searxng.scrollPageToSelected();
     }
-
-    searxng.on('.result-images', 'click', e => {
-      e.preventDefault();
-      selectImage(e);
-    });
-    searxng.on('.result-images a', 'focus', selectImage, true);
     searxng.on('.result-detail-close', 'click', e => { 
       e.preventDefault();
       searxng.closeDetail();

searx/static/themes/simple/src/js/head/00_init.js

@@ -21,6 +21,7 @@
         autocompleter: script.getAttribute('data-autocompleter') === 'true',
         search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true',
         infinite_scroll: script.getAttribute('data-infinite-scroll') === 'true',
+        hotkeys: script.getAttribute('data-hotkeys') === 'true',
         static_path: script.getAttribute('data-static-path'),
         translations: JSON.parse(script.getAttribute('data-translations')),
     };

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

@@ -3,20 +3,55 @@
 
 searxng.ready(function() {
 
-  searxng.on('.result', 'click', function() {
-    highlightResult(this)(true);  
+  function isElementInDetail(el) {
+    while (el !== undefined) {
+      if (el.classList.contains('detail')) {
+        return true;
+      }
+      if (el.classList.contains('result')) {
+        // we found a result, no need to go to the root of the document:
+        // el is not inside a <div class="detail"> element
+        return false;
+      }
+      el = el.parentNode;
+    }
+    return false;
+  }
+
+  function getResultElement(el) {
+    while (el !== undefined) {
+      if (el.classList.contains('result')) {
+        return el;
+      }
+      el = el.parentNode;
+    }
+    return undefined;
+  }
+
+  function isImageResult(resultElement) {
+    return resultElement && resultElement.classList.contains('result-images');
+  }
+
+  searxng.on('.result', 'click', function(e) {
+    if (!isElementInDetail(e.target)) {
+      highlightResult(this)(true);
+      let resultElement = getResultElement(e.target);
+      if (isImageResult(resultElement)) {
+        e.preventDefault();
+        searxng.selectImage(resultElement);
+      }
+    }
   });
 
   searxng.on('.result a', 'focus', function(e) {
-    var el = e.target;
-    while (el !== undefined) {
-      if (el.classList.contains('result')) {
-        if (el.getAttribute("data-vim-selected") === null) {
-          highlightResult(el)(true);
-        }
-        break;
+    if (!isElementInDetail(e.target)) {
+      let resultElement = getResultElement(e.target);
+      if (resultElement && resultElement.getAttribute("data-vim-selected") === null) {
+        highlightResult(resultElement)(true);
+      }
+      if (isImageResult(resultElement)) {
+        searxng.selectImage(resultElement);
       }
-      el = el.parentNode;
     }
   }, true);
 
@@ -119,20 +154,22 @@ searxng.ready(function() {
     }
   };
 
-  searxng.on(document, "keydown", function(e) {
-    // check for modifiers so we don't break browser's hotkeys
-    if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
-      var tagName = e.target.tagName.toLowerCase();
-      if (e.keyCode === 27) {
-        vimKeys[e.keyCode].fun(e);
-      } else {
-        if (e.target === document.body || tagName === 'a' || tagName === 'button') {
-          e.preventDefault();
-          vimKeys[e.keyCode].fun();
+  if (searxng.hotkeys) {
+    searxng.on(document, "keydown", function(e) {
+      // check for modifiers so we don't break browser's hotkeys
+      if (Object.prototype.hasOwnProperty.call(vimKeys, e.keyCode) && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
+        var tagName = e.target.tagName.toLowerCase();
+        if (e.keyCode === 27) {
+          vimKeys[e.keyCode].fun(e);
+        } else {
+          if (e.target === document.body || tagName === 'a' || tagName === 'button') {
+            e.preventDefault();
+            vimKeys[e.keyCode].fun();
+          }
         }
       }
-    }
-  });
+    });
+  }
 
   function highlightResult(which) {
     return function(noScroll) {
@@ -353,14 +390,12 @@ searxng.ready(function() {
   }
 
   function toggleHelp() {
-      var helpPanel = document.querySelector('#vim-hotkeys-help');
-      console.log(helpPanel);
+    var helpPanel = document.querySelector('#vim-hotkeys-help');
     if (helpPanel === undefined || helpPanel === null) {
        // first call
       helpPanel = document.createElement('div');
          helpPanel.id = 'vim-hotkeys-help';
         helpPanel.className='dialog-modal';
-        helpPanel.style='width: 40%';
       initHelpContent(helpPanel);
 			initHelpContent(helpPanel);					
       initHelpContent(helpPanel);

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

@@ -31,17 +31,13 @@
       }
     });
 
-    function selectImage(e) {
+    searxng.selectImage = function(resultElement) {
       /*eslint no-unused-vars: 0*/
-      let t = e.target;
-      while (t && t.nodeName != 'ARTICLE') {
-        t = t.parentNode;
-      }
-      if (t) {
+      if (resultElement) {
         // load full size image in background
-        const imgElement = t.querySelector('.result-images-source img');
-        const thumbnailElement = t.querySelector('.image_thumbnail');
-        const detailElement = t.querySelector('.detail');
+        const imgElement = resultElement.querySelector('.result-images-source img');
+        const thumbnailElement = resultElement.querySelector('.image_thumbnail');
+        const detailElement = resultElement.querySelector('.detail');
         if (imgElement) {
           const imgSrc = imgElement.getAttribute('data-src');
           if (imgSrc) {
@@ -74,12 +70,6 @@
       searxng.image_thumbnail_layout.align();
       searxng.scrollPageToSelected();
     }
-
-    searxng.on('.result-images', 'click', e => {
-      e.preventDefault();
-      selectImage(e);
-    });
-    searxng.on('.result-images a', 'focus', selectImage, true);
     searxng.on('.result-detail-close', 'click', e => { 
       e.preventDefault();
       searxng.closeDetail();

searx/static/themes/simple/src/less/definitions.less

@@ -185,7 +185,7 @@
     --color-toolkit-badge-background: #777;
     --color-toolkit-kbd-font: #000;
     --color-toolkit-kbd-background: #fff;
-    --color-toolkit-dialog-border: #333;
+    --color-toolkit-dialog-border: #555;
     --color-toolkit-dialog-background: #222;
     --color-toolkit-tabs-label-border: #222;
     --color-toolkit-tabs-section-border: #555;

searx/static/themes/simple/src/less/toolkit.less

@@ -196,11 +196,9 @@ div.selectable_url {
   position: fixed;
   top: 50%;
   left: 50%;
-
-  /* bring your own prefixes */
+  margin: 0 auto;
   transform: translate(-50%, -50%);
-  z-index: 100000;
-  margin: 0 50% 0 0;
+  z-index: 10000000;
 }
 
 // btn-collapse

searx/templates/simple/base.html

@@ -24,6 +24,7 @@
           data-autocompleter="{% if autocomplete %}true{% else %}false{% endif %}"
           data-search-on-category-select="{{ 'true' if 'plugins/js/search_on_category_select.js' in scripts else 'false'}}"
           data-infinite-scroll="{{ 'true' if 'plugins/js/infinite_scroll.js' in scripts else 'false' }}"
+          data-hotkeys="{{ 'true' if 'plugins/js/vim_hotkeys.js' in scripts else 'false' }}"
           data-static-path="{{ url_for('static', filename='themes/simple') }}/"
           data-translations="{{ translations }}"></script>
   <!--<![endif]-->