Merge pull request #376 from dalf/simple-image-detail

Simple theme: image detail

2 files changed, 77 insertions, 12 deletions

diff --git a/searx/static/themes/simple/src/js/main/searx_keyboard.js b/searx/static/themes/simple/src/js/main/searx_keyboard.js
index c00a1a45e..394f97730 100644
--- a/searx/static/themes/simple/src/js/main/searx_keyboard.js
+++ b/searx/static/themes/simple/src/js/main/searx_keyboard.js
@@ -4,7 +4,7 @@
 searxng.ready(function() {
 
   searxng.on('.result', 'click', function() {
-    highlightResult(this)(true);
+    highlightResult(this)(true);  
   });
 
   searxng.on('.result a', 'focus', function(e) {
@@ -124,9 +124,7 @@ searxng.ready(function() {
     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) {
-        if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
-          vimKeys[e.keyCode].fun();
-        }
+        vimKeys[e.keyCode].fun(e);
       } else {
         if (e.target === document.body || tagName === 'a' || tagName === 'button') {
           e.preventDefault();
@@ -213,9 +211,12 @@ searxng.ready(function() {
     document.location.reload(true);
   }
 
-  function removeFocus() {
-    if (document.activeElement) {
+  function removeFocus(e) {
+    const tagName = e.target.tagName.toLowerCase();
+    if (document.activeElement && (tagName === 'input' || tagName === 'select' || tagName === 'textarea')) {
       document.activeElement.blur();
+    } else {
+      searxng.closeDetail();
     }
   }
 
@@ -285,6 +286,9 @@ searxng.ready(function() {
   function openResult(newTab) {
     return function() {
       var link = document.querySelector('.result[data-vim-selected] h3 a');
+      if (link === null) {
+        link = document.querySelector('.result[data-vim-selected] > a');
+      }
       if (link !== null) {
         var url = link.getAttribute('href');
         if (newTab) {
@@ -368,4 +372,8 @@ searxng.ready(function() {
       return;
     }
   }
+
+  searxng.scrollPageToSelected = scrollPageToSelected;
+  searxng.selectNext = highlightResult('down');
+  searxng.selectPrevious = highlightResult('up');
 });
diff --git a/searx/static/themes/simple/src/js/main/searx_results.js b/searx/static/themes/simple/src/js/main/searx_results.js
index 79af25af8..5ccbb38b5 100644
--- a/searx/static/themes/simple/src/js/main/searx_results.js
+++ b/searx/static/themes/simple/src/js/main/searx_results.js
@@ -3,7 +3,7 @@
   'use strict';
 
   searxng.ready(function() {
-    searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 10, 200);
+    searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
     searxng.image_thumbnail_layout.watch();
 
     searxng.on('.btn-collapse', 'click', function() {
@@ -31,17 +31,74 @@
       }
     });
 
+    function selectImage(e) {
+      /*eslint no-unused-vars: 0*/
+      let t = e.target;
+      while (t && t.nodeName != 'ARTICLE') {
+        t = t.parentNode;
+      }
+      if (t) {
+        // 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');
+        if (imgElement) {
+          const imgSrc = imgElement.getAttribute('data-src');
+          if (imgSrc) {
+            const loader = d.createElement('div');
+            const imgLoader = new Image();
+
+            loader.classList.add('loader');
+            detailElement.appendChild(loader);
+
+            imgLoader.onload = e => {
+              imgElement.src = imgSrc;
+              loader.remove();
+            };
+            imgLoader.onerror = e => {
+              loader.remove();
+            };
+            imgLoader.src = imgSrc;
+            imgElement.src = thumbnailElement.src;
+            imgElement.removeAttribute('data-src');
+          }
+        }
+      }
+      d.getElementById('results').classList.add('image-detail-open');
+      searxng.image_thumbnail_layout.align();
+      searxng.scrollPageToSelected();
+    }
+
+    searxng.closeDetail = function(e) {
+      d.getElementById('results').classList.remove('image-detail-open');
+      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();
+    });
+    searxng.on('.result-detail-previous', 'click', e => searxng.selectPrevious(false));
+    searxng.on('.result-detail-next', 'click', e => searxng.selectNext(false));
+
     w.addEventListener('scroll', function() {
       var e = d.getElementById('backToTop'),
-      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
+      results = d.getElementById('results');
       if (e !== null) {
-        if (scrollTop >= 200) {
-          e.style.opacity = 1;
+        if (scrollTop >= 100) {
+          results.classList.add('scrolling');
         } else {
-          e.style.opacity = 0;
+          results.classList.remove('scrolling');
         }
       }
-    });
+    }, true);
 
   });