branch master updated: Change "show/hide sidebar" display. Better internal link determination.

[Per Bothner]

This is an automated email from the git hooks/post-receive script.

bothner pushed a commit to branch master
in repository texinfo.

The following commit(s) were added to refs/heads/master by this push:
     new 4a96531  Change "show/hide sidebar" display. Better internal link 
determination.
4a96531 is described below

commit 4a96531cade01d24e9e952600b88a72dd66d32f2
Author: Per Bothner <per@bothner.com>
AuthorDate: Tue Apr 27 09:36:07 2021 -0700

    Change "show/hide sidebar" display. Better internal link determination.
    
    Change how "show/hide sidebar" button is displayed.
    Move it to upper-left and use arrows, to hopefully both
    make it more visible and take less space in hide mode.
    * js/info.js (add_header): Change DOM structure to make this work.
    (hide_sidebar_if_narrow): New function.
    * js/info.css: Styling changes for desired show/hide style.
    
    Improve determination of whether links are internal or not.
    * js/info.js (config.LOCAL_HTML_PAGE_PATTERN): New regex pattern
    (maybe_pageref_url_p): Use LOCAL_HTML_PAGE_PATTERN.
---
 ChangeLog   | 17 +++++++++++++++--
 js/info.css | 23 ++++++++++++++++-------
 js/info.js  | 53 ++++++++++++++++++++++++++++++++---------------------
 3 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/ChangeLog b/ChangeLog
index 828580f..d9d5106 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,11 +1,24 @@
+2021-04-27  Per Bothner  <per@bothner.com>
+
+       Change how "show/hide sidebar" button is displayed.
+       Move it to upper-left and use arrows, to hopefully both
+       make it more visible and take less space in hide mode.
+       * js/info.js (add_header): Change DOM structure to make this work.
+       (hide_sidebar_if_narrow): New function.
+       * js/info.css: Styling changes for desired show/hide style.
+
+       Improve determination of whether links are internal or not.
+       * js/info.js (config.LOCAL_HTML_PAGE_PATTERN): New regex pattern
+       (maybe_pageref_url_p): Use LOCAL_HTML_PAGE_PATTERN.
+
 2021-04-25  Gavin Smith  <gavinsmith0123@gmail.com>
 
        Avoid suppressing first paragraph indent with an @image.
-       
+
        * doc/texinfo.tex (\imageindent): New macro.
        (\image): Use it.
        * doc/texinfo-tex-test.texi (Paragraph formatting): New section.
-       
+
        Inconsistency between Info and TeX reported by Werner Lemberg.
 
 2021-04-25  Gavin Smith  <gavinsmith0123@gmail.com>
diff --git a/js/info.css b/js/info.css
index dd93097..48145b2 100644
--- a/js/info.css
+++ b/js/info.css
@@ -6,6 +6,11 @@ body.in-iframe, div[node]#index {
     padding: 0px 0.5em 0px 1em;
 }
 
+header > a {
+    width: 90%;
+    display: inline-block;
+}
+
 #sub-pages {
     box-sizing: border-box;
     left: 25%;     width: 75%;
@@ -38,11 +43,14 @@ div.toc-sidebar {
 }
 
 .sidebar-hider {
-    bottom: 0px;
-    height: 2.8ex;
-    position: absolute;
+    display: inline;
+    padding: 2px;
+    vertical-align: top;
     text-align: start;
 }
+.sidebar-hider span.hide-icon {
+    font-size: x-large;
+}
 
 /* Iframed sub pages */
 iframe.node {
@@ -80,7 +88,6 @@ iframe.node {
     left: 0em;
 }
 body[show-sidebar="yes"] .sidebar-hider {
-    width: 100%;
 }
 body[show-sidebar="no"] #slider {
     width: 0px; /* so mouse events don't get captured */
@@ -88,10 +95,10 @@ body[show-sidebar="no"] #slider {
 body[show-sidebar="no"] .sidebar-hider {
     width: auto;
     position: fixed;
-    padding: 3px 1.2em 1px 0.8em;
 }
 
-body[show-sidebar="no"] div.toc-sidebar { display: none }
+body[show-sidebar="no"] div.toc, body[show-sidebar="no"] header > a {
+    display: none }
 
 div.toc-sidebar {
     position: absolute;
@@ -213,6 +220,7 @@ table#keyboard-shortcuts th {
 .echo-area {
     bottom: 0;
 }
+div.header { text-align: right }
 #slider {
     background: #f0f0f0c0;
 }
@@ -220,13 +228,14 @@ div.toc-sidebar nav, div.toc-sidebar header, 
.sidebar-hider {
     background: #f0f0f0d0;
 }
 body[show-sidebar="yes"] .sidebar-hider {
-    border-width: thin 0px 0px 0px;
+    border-width: thin;
 }
 body[show-sidebar="no"] .sidebar-hider {
     border-width: thin;
 }
 @media (max-width: 60em) {
     div#sub-pages { left: 0px; width: 100% }
+    body[show-sidebar="yes"] div#sub-pages { opacity: 0.4 }
     body[show-sidebar="yes"] div#slider {width: 20em }
     div.logo img { max-width: 80%; width: 2em; }
 }
diff --git a/js/info.js b/js/info.js
index 05a92c9..9a38714 100644
--- a/js/info.js
+++ b/js/info.js
@@ -33,9 +33,9 @@
     MAIN_ANCHORS: ["Top"],
     WARNING_TIMEOUT: 3000,
     SCREEN_MIN_WIDTH: 700,
-    LOCAL_HTML_PAGE_PATTERN: ".*[.](html|htm|xhtml)$",
-    SHOW_SIDEBAR_HTML: "<span>Show sidebar</span>",
-    HIDE_SIDEBAR_HTML: "<span>Hide sidebar</span>",
+    LOCAL_HTML_PAGE_PATTERN: "[^:/]*[.](html|htm|xhtml)([#].*)?$",
+    SHOW_SIDEBAR_HTML: '<span class="hide-icon">&#x21db;</span>',
+    HIDE_SIDEBAR_HTML: '<span class="hide-icon">&#x21da;</span><span 
class="hide-text">Hide sidebar</span>',
     SHOW_SIDEBAR_TOOLTIP: 'Show navigation sidebar',
     HIDE_SIDEBAR_TOOLTIP: 'Hide navigation sidebar',
 
@@ -253,6 +253,11 @@
           res.focus = true;
           return res;
         }
+      case "clicked":
+        {
+          res.clicked = true;
+          return res;
+        }
       case "navigate":
         {
           var current = state.current;
@@ -727,19 +732,14 @@
       div$.appendChild (nav);
       div.appendChild (div$);
       this.element.appendChild (div);
-
-      let hider = document.createElement ("button");
-      //let hider = document.createElement ("div");
-      hider.classList.add ("sidebar-hider");
-      hider.innerHTML = config.HIDE_SIDEBAR_HTML;
-      show_sidebar_button = hider;
-      this.element.appendChild(hider);
     }
 
     /* Render 'sidebar' according to STATE which is a new state. */
     Sidebar.prototype.render = function render (state) {
       /* Update sidebar to highlight the title corresponding to
          'state.current'.*/
+      if (state.clicked)
+        hide_sidebar_if_narrow ();
       var msg = { message_kind: "update-sidebar", selected: state.current };
       window.postMessage (msg, "*");
     };
@@ -1256,10 +1256,17 @@
     function
     add_header (elem)
     {
+      var header = document.createElement ("header");
+      elem.parentElement.insertBefore (header, elem);
+      let hider = document.createElement ("button");
+      hider.classList.add ("sidebar-hider");
+      hider.innerHTML = config.HIDE_SIDEBAR_HTML;
+      show_sidebar_button = hider;
+      header.appendChild(hider);
+
       var h1 = document.querySelector ("h1.settitle");
       if (h1)
         {
-          var header = document.createElement ("header");
           var a = document.createElement ("a");
           a.setAttribute ("href", config.INDEX_NAME);
           a.setAttribute ("id", config.INDEX_ID);
@@ -1274,7 +1281,6 @@
               span.textContent = h1.textContent;
               div.appendChild (span);
             }
-          elem.parentElement.insertBefore (header, elem);
         }
     }
 
@@ -1417,11 +1423,7 @@
                 store.dispatch (actions.set_current_url (linkid));
                 event.preventDefault ();
                 event.stopPropagation ();
-                let body = document.body;
-                if (body.getAttribute("show-sidebar") == "yes"
-                    && is_narrow_window ())
-                   show_sidebar (false)
-                return;
+                break;
               }
           }
         if (target.matches (".sidebar-hider"))
@@ -1429,14 +1431,16 @@
               let body = document.body;
               let show = body.getAttribute("show-sidebar");
               show_sidebar(show==="no");
+              return;
           }
       }
+    hide_sidebar_if_narrow ();
   }
 
   // Only valid when showing sidebar.
   function is_narrow_window ()
   {
-        return document.body.firstChild.offsetLeft == 0;
+    return document.body.firstChild.offsetLeft == 0;
   }
 
   function show_sidebar (show)
@@ -1450,6 +1454,15 @@
       show_sidebar_button.removeAttribute("title");
   }
 
+  function hide_sidebar_if_narrow ()
+  {
+    if (inside_iframe)
+       store.dispatch ({ type: "clicked", msg: null })
+    else if (document.body.getAttribute("show-sidebar") == "yes"
+        && is_narrow_window ())
+      show_sidebar (false)
+  }
+
   /** Handle unload events.  */
   function
   on_unload ()
@@ -1740,9 +1753,7 @@
   function
   maybe_pageref_url_p (url)
   {
-    return ! (url.includes (":") || url.includes ("/"))
-          && (url.startsWith(config.INDEX_NAME)
-              || url.match(config.LOCAL_HTML_PAGE_PATTERN));
+    return url.match(config.LOCAL_HTML_PAGE_PATTERN);
   }
 
   /** Check if 'URL' is a link to another manual.  For locally installed