Adding support for searching in page. (Mainly for Android app)

js-src/index.js

@@ -64,12 +64,27 @@ function addListenersSearch() {
     if (searchMobile !== null) {
         const searchIcon = searchMobile.querySelector('div.search-icon')
         searchIcon.addEventListener('click', onFakeSearchClick);
-        fakeSearchInput.addEventListener('change', (e) => {
+        fakeSearchInput.addEventListener('keydown', (e) => {
+            if (e.code !== 'Enter') {
+                return false;
+            }
             const searchOverlay = document.querySelector('div.search-overlay');
             const searchInput = searchOverlay.querySelector('div.search input');
             searchInput.value = fakeSearchInput.value;
             onSearchChange(e)
             onFakeSearchClick(e)
+            return true;
+        });
+    }
+    const nextResult = searchMobile.querySelector('div.down');
+    const prevResult = searchMobile.querySelector('div.up');
+    if (nextResult !== null && prevResult !== null) {
+        nextResult.addEventListener('click', () => {
+            searchInWebsite(fakeSearchInput.value, true);
+        });
+        prevResult.addEventListener('click', () => {
+            console.log('hola')
+            searchInWebsite(fakeSearchInput.value, false);
         });
     }
     const exitSearch = document.querySelector('a.exit-search')
@@ -89,6 +104,10 @@ function addListenersSearch() {
     }
 }
 
+function searchInWebsite(value, isToBottom) {
+    window.find(value, false, !isToBottom, true);
+}
+
 function _port() {
     let port = window.location.port;
     if (port !== '') {

public/css/styles.css

@@ -40,6 +40,8 @@ body {
         height: 60px;
         margin-left: 0px;
         margin-right: 0px; }
+      body div.search-overlay div.bounding-search-bar div.up, body div.search-overlay div.bounding-search-bar div.down {
+        display: none; }
       body div.search-overlay div.bounding-search-bar a.exit-search {
         width: 60px;
         background: whitesmoke;
@@ -54,7 +56,7 @@ body {
     margin-left: 10px;
     margin-right: 10px;
     display: flex; }
-    body div.search div.search-icon {
+    body div.search div.search-icon, body div.search div.down, body div.search div.up {
       height: calc(100% - 28px);
       display: flex;
       background: aliceblue;
@@ -64,8 +66,11 @@ body {
       border-radius: 10px;
       border: solid gray 1px;
       aspect-ratio: 1/1; }
-      body div.search div.search-icon img {
+      body div.search div.search-icon img, body div.search div.down img, body div.search div.up img {
         height: 80%; }
+    body div.search div.down, body div.search div.up {
+      margin: 0px;
+      align-self: center; }
     body div.search div.fake-text-box {
       width: calc(100% - 60px);
       display: flex;

public/css/styles.scss

@@ -54,6 +54,9 @@ body {
             margin-left: 0px;
             margin-right: 0px;
         }
+        div.up,div.down {
+            display: none;
+        }
         a.exit-search {
             width: 60px;
             background: whitesmoke;
@@ -72,7 +75,7 @@ body {
     margin-left: 10px;
     margin-right: 10px;
     display: flex;
-    div.search-icon {
+    div.search-icon,div.down,div.up {
         height: calc(100% - 28px);
         display: flex;
         background: aliceblue;
@@ -86,6 +89,10 @@ body {
             height: 80%;
         }
     }
+    div.down,div.up {
+        margin: 0px;
+        align-self: center;
+    }
     div.fake-text-box {
         width: calc(100% - 60px);
         display: flex;

templates/page/_search_bar.html.ep

@@ -1,8 +1,14 @@
 <div class="search">
-    <div class="search-icon">
+    <div tabindex="-1" class="search-icon">
-        <img alt="" src="/img/search.svg"/>
+        <img alt="Buscar" src="/img/search.svg"/>
     </div>
     <div class="fake-text-box">
         <input type="text"></input>
     </div>
+    <div tabindex="-1" class="down">
+        <img alt="Siguiente resultado." src="/img/down.svg"/>
+    </div>
+    <div tabindex="-1" class="up">
+        <img alt="Anterior resultado" src="/img/up.svg"/>
+    </div>
 </div>