From d28fe3eed22b027256a34881a1490e63833ae8a2 Mon Sep 17 00:00:00 2001
From: James Feng Cao <jamesfengcao@torapp.info>
Date: Mon, 24 Jun 2024 09:58:02 +0800
Subject: [PATCH] ebrowser to use alt+<- / -> for page backward/forward

---
 ebrowser.md                  |  12 ++-
 en/ebrowserreadme/index.html |  15 +++-
 en/index.xml                 |   2 +-
 en/sitemap.xml               |   6 +-
 misc/ebrowser/index.html     | 162 ++++++++++++++++++++++++++++++++---
 misc/ebrowser/package.json   |   2 +-
 misc/ebrowser/webview.js     |  21 +++--
 sitemap.xml                  |   2 +-
 8 files changed, 191 insertions(+), 31 deletions(-)

diff --git a/ebrowser.md b/ebrowser.md
index b09f418f..0255f9cc 100644
--- a/ebrowser.md
+++ b/ebrowser.md
@@ -41,8 +41,8 @@ Mirror urls could be used like ":update https://uwebzh.netlify.app/misc/ebrowser
 - CTRL+TAB: switch to next tab
 - CTRL+SHIFT+TAB: switch to previous tab
 - CTRL+W: close Tab
-- CTRL+<-: go backward
-- CTRL+->: go forward
+- ALT+<-: go backward
+- ALT+->: go forward
 - CTRL+SHIFT+R: enable global redirection ("gredirect.json")
 - CTRL+R: disable global redirection
 - ESC: remove focus. similar to vi normal mode.
@@ -64,6 +64,7 @@ Mirror urls could be used like ":update https://uwebzh.netlify.app/misc/ebrowser
     - {[options](https://www.electronjs.org/docs/latest/api/session#sescleardataoptions)}
   - ext [extension path]: load unpacked Chrome extension.
   - gr [gredirect index]: global redirection with corresponding index. Use the first global redirection url if no argument. Disable global redirection with any index out of the range.
+  - js [js code] : execute JS code at OS level. Note: "javascript:..." is special url and thus works in the current web page, while ":js ..." commands can do any OS operations. 
   - nc/uc : No Cookie forwarding/Use Cookie forwarding with global redirection.
   - nh/uh for No/Use url history.
   - nj/uj for No/Use external Javascript files.
@@ -74,7 +75,7 @@ Mirror urls could be used like ":update https://uwebzh.netlify.app/misc/ebrowser
   - update [updateurl] : update the app. updateurl is optional.
   - pdf [filename w/o extension] {[options](https://www.electronjs.org/docs/latest/api/web-contents#contentsprinttopdfoptions)} : print to PDF file. All arguments are optional; empty option "{}" to capture long screenshot as vector graphics.
 - "!" address bar commands  
-  "!xx ..." evaluates "xx.js" with the whole address bar text as arguments[0].
+  "!xx ..." evaluates "xx.js" with the whole text as arguments[0].
   
 #### Commands in no-focus mode (this mode is similar to vi Normal mode)
 Pressing "ESC" to enter no-focus mode if not sure.
@@ -94,6 +95,11 @@ The other commands are defined in "mapkeys.json", which will map keys to address
 - "proxy.json": name-[ProxyConfig](https://www.electronjs.org/docs/latest/api/structures/proxy-config) pairs
 - "uas.json" : name-useragent pairs
 
+#### Javascript at three levels
+- Web page: urls like "javascript:" or bookmarklet command ":bml" run in web page.
+- Browser (or renderer process) : "!xx" evaluates "xx.js", which could manipulate address bar etc.
+- OS level (or main process) : ":js" to execute the following js code with all OS APIs available.
+
 #### New usages
 - Vector designing with web tech to replace Adobe Illustrator/Inkscape.
   - Design with web tech.
diff --git a/en/ebrowserreadme/index.html b/en/ebrowserreadme/index.html
index 04745b6c..b92eed8b 100644
--- a/en/ebrowserreadme/index.html
+++ b/en/ebrowserreadme/index.html
@@ -79,8 +79,8 @@ npm install ebrowser
 <li>CTRL+TAB: switch to next tab</li>
 <li>CTRL+SHIFT+TAB: switch to previous tab</li>
 <li>CTRL+W: close Tab</li>
-<li>CTRL+&lt;-: go backward</li>
-<li>CTRL+-&gt;: go forward</li>
+<li>ALT+&lt;-: go backward</li>
+<li>ALT+-&gt;: go forward</li>
 <li>CTRL+SHIFT+R: enable global redirection (&quot;gredirect.json&quot;)</li>
 <li>CTRL+R: disable global redirection</li>
 <li>ESC: remove focus. similar to vi normal mode.</li>
@@ -107,6 +107,7 @@ npm install ebrowser
 </li>
 <li>ext [extension path]: load unpacked Chrome extension.</li>
 <li>gr [gredirect index]: global redirection with corresponding index. Use the first global redirection url if no argument. Disable global redirection with any index out of the range.</li>
+<li>js [js code] : execute JS code at OS level. Note: &quot;javascript:...&quot; is special url and thus works in the current web page, while &quot;:js ...&quot; commands can do any OS operations.</li>
 <li>nc/uc : No Cookie forwarding/Use Cookie forwarding with global redirection.</li>
 <li>nh/uh for No/Use url history.</li>
 <li>nj/uj for No/Use external Javascript files.</li>
@@ -119,7 +120,7 @@ npm install ebrowser
 </ul>
 </li>
 <li>&quot;!&quot; address bar commands<br>
-&quot;!xx ...&quot; evaluates &quot;xx.js&quot; with the whole address bar text as arguments[0].</li>
+&quot;!xx ...&quot; evaluates &quot;xx.js&quot; with the whole text as arguments[0].</li>
 </ul>
 <h4 id="commands-in-no-focus-mode-this-mode-is-similar-to-vi-normal-mode">Commands in no-focus mode (this mode is similar to vi Normal mode)</h4>
 <p>Pressing &quot;ESC&quot; to enter no-focus mode if not sure.</p>
@@ -140,6 +141,12 @@ npm install ebrowser
 <li>&quot;proxy.json&quot;: name-<a href="https://www.electronjs.org/docs/latest/api/structures/proxy-config">ProxyConfig</a> pairs</li>
 <li>&quot;uas.json&quot; : name-useragent pairs</li>
 </ul>
+<h4 id="javascript-at-three-levels">Javascript at three levels</h4>
+<ul>
+<li>Web page: urls like &quot;javascript:&quot; or bookmarklet command &quot;:bml&quot; run in web page.</li>
+<li>Browser (or renderer process) : &quot;!xx&quot; evaluates &quot;xx.js&quot;, which could manipulate address bar etc.</li>
+<li>OS level (or main process) : &quot;:js&quot; to execute the following js code with all OS APIs available.</li>
+</ul>
 <h4 id="new-usages">New usages</h4>
 <ul>
 <li>
@@ -166,7 +173,7 @@ npm install ebrowser
 <p>You can copy or modify the code/program under the terms of the GPL3.0 or later versions.</p>
 
 </div>
-<p>Last Modified: 19 June 2024<br>
+<p>Last Modified: 24 June 2024<br>
 <br>
 <pre></pre>
 </p>
diff --git a/en/index.xml b/en/index.xml
index 1bad2447..64da65c0 100644
--- a/en/index.xml
+++ b/en/index.xml
@@ -6,7 +6,7 @@
     <description>Recent content on uweb browser: unlimited power</description>
     <generator>Hugo</generator>
     <language>en</language>
-    <lastBuildDate>Wed, 19 Jun 2024 09:41:18 +0800</lastBuildDate>
+    <lastBuildDate>Mon, 24 Jun 2024 09:46:43 +0800</lastBuildDate>
     <atom:link href="/en/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Text selection/processing</title>
diff --git a/en/sitemap.xml b/en/sitemap.xml
index 69d38983..b0193e0f 100644
--- a/en/sitemap.xml
+++ b/en/sitemap.xml
@@ -71,7 +71,7 @@
                 />
   </url><url>
     <loc>/en/</loc>
-    <lastmod>2024-06-19T09:41:18+08:00</lastmod>
+    <lastmod>2024-06-24T09:46:43+08:00</lastmod>
     <xhtml:link
                 rel="alternate"
                 hreflang="zh"
@@ -508,7 +508,7 @@
                 />
   </url><url>
     <loc>/en/ebrowserreadme/</loc>
-    <lastmod>2024-06-19T09:41:18+08:00</lastmod>
+    <lastmod>2024-06-24T09:46:43+08:00</lastmod>
   </url><url>
     <loc>/en/mirrors/</loc>
     <lastmod>2024-06-18T23:17:17+08:00</lastmod>
@@ -539,7 +539,7 @@
                 />
   </url><url>
     <loc>/en/unlist/</loc>
-    <lastmod>2024-06-19T09:41:18+08:00</lastmod>
+    <lastmod>2024-06-24T09:46:43+08:00</lastmod>
     <xhtml:link
                 rel="alternate"
                 hreflang="zh"
diff --git a/misc/ebrowser/index.html b/misc/ebrowser/index.html
index 6eee6dac..daaec740 100644
--- a/misc/ebrowser/index.html
+++ b/misc/ebrowser/index.html
@@ -1,5 +1,10 @@
 <!--
 Copyright (C) 2024 Richard Hao Cao
+Ebrowser is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+Ebrowser is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 <!DOCTYPE html><html><head><meta charset="UTF-8">
 <style>
@@ -20,6 +25,34 @@ Copyright (C) 2024 Richard Hao Cao
   }
   webview{display: none;width:100%;height:100%}
   .curWV{display: inherit !important;}
+  .autocomplete-active {
+    background-color: DodgerBlue !important; 
+    color: #ffffff; 
+  }
+  .invis{display: none}
+  /*the container must be positioned relative:*/
+  .autocomplete {
+    position: relative;
+    display: inline-block;
+    width:100%;
+  }
+  .autocomplete-items {
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+  }
+  .autocomplete-items div {
+    cursor: pointer;
+  }
+  .autocomplete-items div:hover {
+    background-color: #e9e9e9;
+  }
 </style>
 <script>
   const fs = require('fs');
@@ -30,7 +63,10 @@ Copyright (C) 2024 Richard Hao Cao
   var engines = {};
   var mapKeys = {};
   var closedUrls = [];
+  var autocStrArray = [];
   var defaultSE = "https://www.bing.com/search?q=%s";
+  var bQueryHistory = false;
+  var autocMode = 0; //0 for substring, 1 for startsWith
   let lastKeys;
   let lastKeys_millis = 0;
 
@@ -134,14 +170,11 @@ Copyright (C) 2024 Richard Hao Cao
       });
 
       for await (const line of readInterface) {
-        let opt = document.createElement('option');
         let iS;
         if(delimit && (iS=line.lastIndexOf(delimit))>0){
-          opt.value = line.substring(iS+1);
-          opt.textContent = line.substring(0,iS);
+          autocStrArray.push(line.substring(iS+1));
         }else
-          opt.value = line;
-        document.forms[0].children[0].appendChild(opt);
+           autocStrArray.push(line);
       }
     }catch(e){return;}
   }
@@ -171,10 +204,12 @@ Copyright (C) 2024 Richard Hao Cao
       tabs.children[iTab].src = "javascript:window.scrollBy(0,-3*document.documentElement.clientHeight/4)";
       return;
     case "ArrowDown":
-      tabs.children[iTab].src="javascript:window.scrollBy(0,32)";
+      if(inputE !== document.activeElement || 0==inputE.nextElementSibling.children.length)
+        tabs.children[iTab].src="javascript:window.scrollBy(0,32)";
       return;
     case "ArrowUp":
-      tabs.children[iTab].src="javascript:window.scrollBy(0,-32)";
+      if(inputE !== document.activeElement || 0==inputE.nextElementSibling.children.length)
+        tabs.children[iTab].src="javascript:window.scrollBy(0,-32)";
       return;
  
     }
@@ -183,7 +218,6 @@ Copyright (C) 2024 Richard Hao Cao
       }
       return;
     }
-    if(1!=key.length) return;
     var curMillis = Date.now();
     if(curMillis-lastKeys_millis>1000)
       lastKeys = null;
@@ -246,7 +280,17 @@ Copyright (C) 2024 Richard Hao Cao
   }
   function autoc(args){
     if(2!=args.length) return;
-    appendAutoc_rec(path.join(__dirname,args[1]+".rec"),' ');
+    let fpath = path.join(__dirname,args[1]);
+    let fname = fpath;
+    let delimit = ' ';
+    if (!fs.existsSync(fname)){
+      fname = fpath+".autoc";
+      if (!fs.existsSync(fname))
+        fname = fpath+".rec";
+      else
+        delimit = null;
+    }
+    appendAutoc_rec(fname,delimit);
   }
   function bml(args){
     if(2!=args.length) return;
@@ -305,12 +349,17 @@ Copyright (C) 2024 Richard Hao Cao
       });
     }
   }
+  function recQueryHistory(q){
+    if(bQueryHistory)
+      fs.appendFile(path.join(__dirname,"history.autoc"), q, (err)=>{});
+  }
   function handleQuery(q){
     if(q.length>1){
       let c0=q.charCodeAt(0);
       switch(c0){
       case 33://"!"
         bangcommand(q);
+        recQueryHistory(q);
         return;
       case 47://"/"
         tabs.children[iTab].findInPage(q.substring(1));
@@ -321,6 +370,7 @@ Copyright (C) 2024 Richard Hao Cao
           coloncommand(q);
         else
           coloncommand_render(q);
+        recQueryHistory(q);
         return;
       }
     }
@@ -336,6 +386,7 @@ Copyright (C) 2024 Richard Hao Cao
             break;
         }else if(q.startsWith("javascript:")){
           tabs.children[iTab].executeJavaScript(q.substring(11),false);
+          recQueryHistory(q);
           return;
         }else if(q.startsWith("view-source:")) break;
         else if(q.startsWith("data:")) break;
@@ -350,23 +401,110 @@ Copyright (C) 2024 Richard Hao Cao
           break;
         }
         url = defaultSE.replace('%s',q);
+        recQueryHistory(q);
         break;
       }
       url = bang(q, iS);
+      recQueryHistory(q);
     }while(false);
     tabs.children[iTab].src=url;
   }
+function autocomplete(inp,container,arr) {
+  var currentFocus;
+  function clickItem(e){inp.value = e.target.dataset.str;}
+  function appendElement(el,dataindex){
+    el.dataset.str = arr[dataindex];
+    el.addEventListener("click", clickItem);
+    container.appendChild(el);
+  }
+  inp.addEventListener("input", function(e) {
+    const MAXITEMS = 10;
+    var b, i, val = this.value;
+    closeAllLists();
+    if (!val) { return false;}
+    currentFocus = -1;
+    switch(autocMode){
+    case 0:
+      for (i = 0; i < arr.length; i++) {
+        let iStr = arr[i].indexOf(val);
+        if(iStr<0) continue;
+        {
+          b = document.createElement("DIV");
+          b.innerHTML = arr[i].substr(0,iStr);
+          b.innerHTML += "<strong>" + arr[i].substr(iStr, val.length) + "</strong>";
+          b.innerHTML += arr[i].substr(iStr+val.length);
+          appendElement(b,i);
+          if(container.children.length>MAXITEMS) break;
+        }
+      }
+      return;
+    case 1://startsWith
+      for (i = 0; i < arr.length; i++) {
+        if (arr[i].substr(0, val.length) === val) {
+          b = document.createElement("DIV");
+          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
+          b.innerHTML += arr[i].substr(val.length);
+          appendElement(b,i);
+          if(container.children.length>MAXITEMS) break;
+        }
+      }
+    }
+  });
+  inp.addEventListener("keydown", function(e) {
+      var x = container.getElementsByTagName("div");
+      if (0===x.length) return false;
+      if (e.keyCode == 40) {//downarrow
+        currentFocus++;
+        addActive(x);
+      } else if (e.keyCode == 38) { //up
+        currentFocus--;
+        addActive(x);
+      } else if (e.keyCode == 13) {
+        if (currentFocus > -1) {
+          e.preventDefault();
+          if (x) x[currentFocus].click();
+          currentFocus = -1;
+        }
+        closeAllLists();
+      }
+  });
+  function addActive(x) {
+    removeActive(x);
+    if (currentFocus >= x.length) currentFocus = 0;
+    if (currentFocus < 0) currentFocus = (x.length - 1);
+    x[currentFocus].classList.add("autocomplete-active");
+  }
+  function removeActive(x) {
+    for (var i = 0; i < x.length; i++) {
+      x[i].classList.remove("autocomplete-active");
+    }
+  }
+  function closeAllLists() {
+    container.innerHTML = '';
+  }
+  inp.addEventListener("blur", function () {
+    setTimeout(()=>container.classList.add("invis"),200);
+  });
+  inp.addEventListener("focus", function () {
+    container.classList.remove("invis");
+  });
+}
 </script>
 </head>
 <body>
-  <form action="javascript:handleQuery(getQ())">
-  <datalist id="autoc"></datalist>
-  <input type="text" list="autoc" name=q style="width:100%" autofocus></form>
+  <form class="autocomplete" autocomplete="off" action="javascript:handleQuery(getQ())">
+  <input type="text" name=q style="width:100%" autofocus>
+  <div class="autocomplete-items"></div>
+  </form>
   <div class="webviews">
   <webview class="curWV" allowpopups></webview>
   </div>
   <script>
     tabs = document.body.children[1];
+    {
+      let inp = document.forms[0].q;
+      autocomplete(inp,inp.nextElementSibling,autocStrArray);
+    }
     document.addEventListener('keydown', keyPress);
   </script>
 </body></html>
diff --git a/misc/ebrowser/package.json b/misc/ebrowser/package.json
index 1936482b..af622bc2 100644
--- a/misc/ebrowser/package.json
+++ b/misc/ebrowser/package.json
@@ -1,4 +1,4 @@
-{"version":"1.0.29",
+{"version":"1.0.30",
   "name": "ebrowser",
   "description": "The keyboard-friendly minimal suckless web browser",
   "main": "webview.js",
diff --git a/misc/ebrowser/webview.js b/misc/ebrowser/webview.js
index 11848969..c4585467 100644
--- a/misc/ebrowser/webview.js
+++ b/misc/ebrowser/webview.js
@@ -1,5 +1,10 @@
 /* Copyright (C) 2024 Richard Hao Cao
- */
+Ebrowser is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+Ebrowser is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
 const {
   app, BrowserWindow, Menu, shell, clipboard,
   session, protocol, net, dialog
@@ -24,7 +29,7 @@ else {
 }
 topMenu();
 
-const repositoryurl = "https://gitlab.com/jamesfengcao/uweb/-/raw/master/misc/ebrowser/";
+var repositoryurl = "https://gitlab.com/jamesfengcao/uweb/-/raw/master/misc/ebrowser/";
 const fs = require('fs');
 const readline = require('readline');
 const path = require('path')
@@ -204,9 +209,13 @@ function addrCommand(cmd){
       forwardCookie();
       return;
     case "nh":
-      bHistory = false; return;
+      bHistory = false;
+      win.webContents.executeJavaScript("bQueryHistory=false",false);
+      return;
     case "uh":
-      bHistory = true; return;
+      bHistory = true;
+      win.webContents.executeJavaScript("bQueryHistory=true",false);      
+      return;
     case "nj":
       bJS = false; return;
     case "uj":
@@ -422,11 +431,11 @@ function topMenu(){
             win.setTitle(r);
           });
         }},
-        { label: 'Go backward', accelerator: 'Ctrl+Left', click: ()=>{
+        { label: 'Go backward', accelerator: 'Alt+Left', click: ()=>{
           let js="tabs.children[iTab].goBack()";
           win.webContents.executeJavaScript(js,false);
         }},
-        { label: 'Go forward', accelerator: 'Ctrl+Right', click: ()=>{
+        { label: 'Go forward', accelerator: 'Alt+Right', click: ()=>{
           let js="tabs.children[iTab].goForward()";
           win.webContents.executeJavaScript(js,false);
         }},
diff --git a/sitemap.xml b/sitemap.xml
index dee3d524..ce84a540 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -4,7 +4,7 @@
   <sitemap>
     <loc>/en/sitemap.xml</loc>
     
-      <lastmod>2024-06-19T09:41:18+08:00</lastmod>
+      <lastmod>2024-06-24T09:46:43+08:00</lastmod>
     
   </sitemap>