branch master updated: js/info.js: Change auto-hide of sidebar in narrow windows.

[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 938b950  js/info.js: Change auto-hide of sidebar in narrow windows.
938b950 is described below

commit 938b9500d120a003d5a470d25bb63a789b1a9dd9
Author: Per Bothner <per@bothner.com>
AuthorDate: Wed Apr 28 20:57:17 2021 -0700

    js/info.js: Change auto-hide of sidebar in narrow windows.
    
    Now clicking in sidebar in narror window doesn't hide sidebar,
    but click in main page does - however, navigation is supressed.
    Also changed the show/hide-sidebar logic to work using the
    store/action/dispatch framework.
---
 ChangeLog  |  8 +++++++
 js/info.js | 71 ++++++++++++++++++++++++++++++++++++--------------------------
 2 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/ChangeLog b/ChangeLog
index d4fe5a5..853a960 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,11 @@
+2021-04-28  Per Bothner  <per@bothner.com>
+
+       * js/info.js: Change auto-hide of sidebar in narrow windows.
+       Now clicking in sidebar in narror window doesn't hide sidebar,
+       but click in main page does - however, navigation is supressed.
+       Also changed the show/hide-sidebar logic to work using the
+       store/action/dispatch framework.
+
 2021-04-27  Per Bothner  <per@bothner.com>
 
        * js/info.js (config.LOCAL_HTML_PAGE_PATTERN): Handle local links.
diff --git a/js/info.js b/js/info.js
index fb45ecc..07279c4 100644
--- a/js/info.js
+++ b/js/info.js
@@ -60,7 +60,6 @@
       @typedef {function (Action): void} Action_consumer
       @type {{dispatch: Action_consumer, state?: any, listeners?: any[]}}.  */
   var store;
-  var show_sidebar_button;
 
   /** Create a Store that calls its listeners at each state change.
       @arg {function (Object, Action): Object} reducer
@@ -114,10 +113,11 @@
         @arg {string} linkid - link identifier
         @arg {string|false} [history] - method name that will be applied on
         the 'window.history' object.  */
-    set_current_url: function (linkid, history) {
+    set_current_url: function (linkid, history, clicked = false) {
       if (undef_or_null (history))
         history = "pushState";
-      return { type: "current-url", url: linkid, history: history };
+      return { type: "current-url", url: linkid,
+               history: history, clicked: clicked };
     },
 
     /** Set current URL to the node corresponding to POINTER which is an
@@ -221,6 +221,10 @@
         }
       case "current-url":
         {
+          if (document.body.getAttribute("show-sidebar") == "yes"
+              && is_narrow_window ()
+              && action.clicked === "in-page")
+            return state;
           linkid = (action.pointer) ?
               state.loaded_nodes[action.pointer] : action.url;
 
@@ -253,9 +257,9 @@
           res.focus = true;
           return res;
         }
-      case "clicked":
+      case "show-sidebar": // "yes" (show), "no" (hide) or "hide-if-narrow"
         {
-          res.clicked = true;
+          res.show_sidebar = action.show === "hide-if-narrow" && 
res.show_sidebar === "no" ? "no" : action.show;
           return res;
         }
       case "navigate":
@@ -732,14 +736,34 @@
       div$.appendChild (nav);
       div.appendChild (div$);
       this.element.appendChild (div);
+
+      let header = document.createElement ("header");
+      div$.parentElement.insertBefore (header, div$);
+      let hider = document.createElement ("button");
+      hider.classList.add ("sidebar-hider");
+      hider.innerHTML = config.HIDE_SIDEBAR_HTML;
+      this.show_sidebar_button = hider;
+      header.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 ();
+      let currently_showing = document.body.getAttribute("show-sidebar");
+      let show = state.show_sidebar;
+      if (show == "hide-if-narrow")
+          show = is_narrow_window() || currently_showing == "no" ? "no" : 
"yes";
+      if (show !== currently_showing)
+        {
+          document.body.setAttribute("show-sidebar", show);
+          this.show_sidebar_button.innerHTML = show == "yes" ? 
config.HIDE_SIDEBAR_HTML : config.SHOW_SIDEBAR_HTML;
+          let tooltip = show == "yes" ? config.HIDE_SIDEBAR_TOOLTIP : 
config.SHOW_SIDEBAR_TOOLTIP;
+          if (tooltip)
+            this.show_sidebar_button.setAttribute("title", tooltip);
+          else
+            this.show_sidebar_button.removeAttribute("title");
+        }
       var msg = { message_kind: "update-sidebar", selected: state.current };
       window.postMessage (msg, "*");
     };
@@ -1256,20 +1280,14 @@
     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 a = document.createElement ("a");
           a.setAttribute ("href", config.INDEX_NAME);
           a.setAttribute ("id", config.INDEX_ID);
+
+          let header = elem.previousSibling;
           header.appendChild (a);
           if (window.sidebarLinkAppendContents)
             window.sidebarLinkAppendContents(a, h1.textContent);
@@ -1407,6 +1425,7 @@
   function
   on_click (event)
   {
+    let in_sidebar = event.target.matches ("#slider *");
     for (var target = event.target; target !== null; target = 
target.parentNode)
       {
         if (! (target instanceof Element))
@@ -1420,7 +1439,8 @@
                 var linkid = href_hash (href) || config.INDEX_ID;
                 if (linkid === "index.SEC_Contents")
                     linkid = config.CONTENTS_ID;
-                store.dispatch (actions.set_current_url (linkid));
+                store.dispatch (actions.set_current_url (linkid, null,
+                                                         in_sidebar ? 
"in-sidebar" : "in-page"));
                 event.preventDefault ();
                 event.stopPropagation ();
                 break;
@@ -1430,11 +1450,12 @@
           {
               let body = document.body;
               let show = body.getAttribute("show-sidebar");
-              show_sidebar(show==="no");
+              show_sidebar (show==="no");
               return;
           }
       }
-    hide_sidebar_if_narrow ();
+    if (! in_sidebar)
+      hide_sidebar_if_narrow ();
   }
 
   // Only valid when showing sidebar.
@@ -1445,22 +1466,12 @@
 
   function show_sidebar (show)
   {
-    document.body.setAttribute("show-sidebar", show ? "yes" : "no");
-    show_sidebar_button.innerHTML = show ? config.HIDE_SIDEBAR_HTML : 
config.SHOW_SIDEBAR_HTML;
-    var tooltip = show ? config.HIDE_SIDEBAR_TOOLTIP : 
config.SHOW_SIDEBAR_TOOLTIP;
-    if (tooltip)
-      show_sidebar_button.setAttribute("title", tooltip);
-    else
-      show_sidebar_button.removeAttribute("title");
+    store.dispatch({ type: "show-sidebar", show: show ? "yes" : "no" });
   }
 
   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)
+    store.dispatch({ type: "show-sidebar", show: "hide-if-narrow" });
   }
 
   /** Handle unload events.  */