Enhance autocomplete and app functionality by synchronizing results width and improving event handling

Author: lsegal

lib/yard/server/templates/default/fulldoc/html/js/autocomplete.js

@@ -35,6 +35,10 @@
     input.setAttribute("aria-expanded", "false");
     form.appendChild(results);
 
+    function syncResultsWidth() {
+      results.style.width = input.offsetWidth + "px";
+    }
+
     function hideResults() {
       results.hidden = true;
       input.setAttribute("aria-expanded", "false");
@@ -59,6 +63,7 @@
     }
 
     function renderItems(lines) {
+      syncResultsWidth();
       list.innerHTML = "";
       items = lines.map(function(line, index) {
         var values = line.split(",");
@@ -181,6 +186,7 @@
     });
 
     input.addEventListener("focus", function() {
+      syncResultsWidth();
       if (items.length) {
         results.hidden = false;
         input.setAttribute("aria-expanded", "true");
@@ -190,6 +196,9 @@
     document.addEventListener("click", function(event) {
       if (!form.contains(event.target)) hideResults();
     });
+
+    window.addEventListener("resize", syncResultsWidth);
+    syncResultsWidth();
   }
 
   ready(function() {

templates/default/fulldoc/html/js/app.js

@@ -1,7 +1,9 @@
 (function() {
   var appState = window.__yardAppState || (window.__yardAppState = {
-    listenersBound: false,
-    navigationListenerBound: false
+    navigationListenerBound: false,
+    navigationChangeBound: false,
+    navResizerBound: false,
+    searchFrameGlobalsBound: false
   });
   var safeLocalStorage = {};
   var safeSessionStorage = {};
@@ -173,13 +175,17 @@
 
   function searchFrameButtons() {
     queryAll(".full_list_link").forEach(function(link) {
+      if (link.dataset.yardSearchFrameBound === "true") return;
+
       link.addEventListener("click", function(event) {
         event.preventDefault();
         toggleSearchFrame(link, link.getAttribute("href"));
       });
+
+      link.dataset.yardSearchFrameBound = "true";
     });
 
-    if (appState.listenersBound) return;
+    if (appState.searchFrameGlobalsBound) return;
 
     window.addEventListener("message", function(event) {
       if (event.data === "navEscape") resetSearchFrame();
@@ -189,7 +195,7 @@
       if (!isVisible(query("#search"))) resetSearchFrame();
     });
 
-    appState.listenersBound = true;
+    appState.searchFrameGlobalsBound = true;
   }
 
   function linkSummaries() {
@@ -399,38 +405,42 @@
 
     if (!resizer) return;
 
-    resizer.addEventListener(
-      "pointerdown",
-      function(event) {
-        resizer.setPointerCapture(event.pointerId);
-        event.preventDefault();
-        event.stopPropagation();
-      },
-      false
-    );
-    resizer.addEventListener(
-      "pointerup",
-      function(event) {
-        resizer.releasePointerCapture(event.pointerId);
-        event.preventDefault();
-        event.stopPropagation();
-      },
-      false
-    );
-    resizer.addEventListener(
-      "pointermove",
-      function(event) {
-        if ((event.buttons & 1) === 0) return;
-
-        safeSessionStorage.navWidth = String(event.pageX);
-        queryAll(".nav_wrap").forEach(function(node) {
-          node.style.width = Math.max(200, event.pageX) + "px";
-        });
-        event.preventDefault();
-        event.stopPropagation();
-      },
-      false
-    );
+    if (!appState.navResizerBound) {
+      resizer.addEventListener(
+        "pointerdown",
+        function(event) {
+          resizer.setPointerCapture(event.pointerId);
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        false
+      );
+      resizer.addEventListener(
+        "pointerup",
+        function(event) {
+          resizer.releasePointerCapture(event.pointerId);
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        false
+      );
+      resizer.addEventListener(
+        "pointermove",
+        function(event) {
+          if ((event.buttons & 1) === 0) return;
+
+          safeSessionStorage.navWidth = String(event.pageX);
+          queryAll(".nav_wrap").forEach(function(node) {
+            node.style.width = Math.max(200, event.pageX) + "px";
+          });
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        false
+      );
+
+      appState.navResizerBound = true;
+    }
 
     if (safeSessionStorage.navWidth) {
       queryAll(".nav_wrap").forEach(function(node) {
@@ -461,10 +471,18 @@
     var hash = window.location.hash;
     if (!hash) return;
 
+    var targetId = hash.slice(1);
+    var decodedTargetId = targetId;
+
     try {
-      var target = query(hash);
-      if (target) target.scrollIntoView();
+      decodedTargetId = decodeURIComponent(targetId);
     } catch (error) {}
+
+    var target =
+      document.getElementById(decodedTargetId) ||
+      document.getElementById(targetId);
+
+    if (target) target.scrollIntoView();
   }
 
   function mainFocus() {
@@ -476,7 +494,10 @@
   }
 
   function navigationChange() {
+    if (appState.navigationChangeBound) return;
+
     window.onpopstate = focusHashTarget;
+    appState.navigationChangeBound = true;
   }
 
   window.__app = function() {

templates/default/fulldoc/html/js/full_list.js

@@ -76,7 +76,20 @@
           if (!targetLink) return false;
           mouseEvent = new MouseEvent("click", {
             bubbles: true,
-            cancelable: true
+            cancelable: true,
+            view: event.view || window,
+            detail: event.detail,
+            screenX: event.screenX,
+            screenY: event.screenY,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+            button: event.button,
+            buttons: event.buttons,
+            relatedTarget: event.relatedTarget
           });
           targetLink.dispatchEvent(mouseEvent);
           event.preventDefault();