Optimize the documentation JS files (#20075)

This PR optimizes the three files in the `/docs/_assets/js` directory
for performance.

In `toolbar.js`, jQuery selectors have been cached as variables to
prevent constant calls to the DOM.
In `sidebar.js`, the multiple `toggleClass(...).toggleClass(...)` have
been merged into one
In `api-search.js`:
- Defined functions have been switched to newer ES format (`const myFunc
= () => {}`)
- JSON has been switched to **JS**ON (`{"key":"value"}` ->
`{key:"value"}`)

Author: avivkeller

Diff for: docs/_assets/js/api-search.js

@@ -28,66 +28,48 @@
  *  }
  *  ```
  */
-onmessage = function(e) {
-    var docs = e.data.docs;
-    var searchTerm = e.data.search;
-
-    var regexForTerm = function(query) {
-        var escaped = query.replace(/([\.\*\+\?\|\(\)\[\]\\])/g, '\\$1');
+onmessage = function({ data: { docs, search } }) {
+    const regexForTerm = (query) => {
+        const escaped = query.replace(/([\.\*\+\?\|\(\)\[\]\\])/g, '\\$1');
         if (query.toLowerCase() != query) {
             // Regexp that matches CamelCase subbits: "BiSe" is
             // "[a-z]*Bi[a-z]*Se" and matches "BitSet", "ABitSet", ...
             return new RegExp(escaped.replace(/([A-Z])/g,"[a-z]*$1"));
         }
-        else { // if query is all lower case make a normal case insensitive search
-            return new RegExp(escaped, "i");
-        }
+        // if query is all lower case make a normal case insensitive search
+        return new RegExp(escaped, "i");
     };
 
-    var searchRegex = regexForTerm(searchTerm);
+    const searchRegex = regexForTerm(search);
 
-    var filterPackages = function(entity) {
-        switch(entity.kind) {
-            case "val":
-            case "def":
-            case "type":
-            case "package":
-                return false;
-            default:
-                return true;
-        }
-    };
+    const filterPackages = (entity) => !["val", "def", "type", "package"].includes(entity.kind);
 
-    // look at this higher order function, such syntax:
-    var messageParentIfMatches = function(parent) {
-        return function(entity) {
-            var fullName = entity.path.join('.');
+    const messageParentIfMatches = (parent) => (entity) => {
+        const fullName = entity.path.join('.');
 
-            if (searchRegex.test(fullName)) {
+        if (searchRegex.test(fullName)) {
+            postMessage({
+                type: "entityResult",
+                package: parent,
+                entity
+            });
+        }
+
+        entity.members.forEach((member) => {
+            if (searchRegex.test(member.name)) {
                 postMessage({
-                    "type": "entityResult",
-                    "package": parent,
-                    "entity": entity
+                    type: "memberResult",
+                    package: parent,
+                    parent: entity,
+                    member
                 });
             }
-
-            var searchChild = function(member) {
-                if (searchRegex.test(member.name)) {
-                    postMessage({
-                        "type": "memberResult",
-                        "package": parent,
-                        "parent": entity,
-                        "member": member,
-                    });
-                }
-            };
-            entity.members.forEach(searchChild);
-        };
+        });
     };
 
-    docs.forEach(function(pack) {
+    docs.forEach((pack) => {
         pack.members
             .filter(filterPackages)
             .forEach(messageParentIfMatches(pack));
     });
-}
+};

Diff for: docs/_assets/js/sidebar.js

@@ -2,5 +2,5 @@
 function toggleSection(titleElement) {
   const title = $(titleElement);
   title.siblings("ul").toggleClass("toggled");
-  title.children("i.fas").toggleClass("fa-angle-right").toggleClass("fa-angle-down");
+  title.children("i.fas").toggleClass("fa-angle-right fa-angle-down");
 }

Diff for: docs/_assets/js/toolbar.js

@@ -1,20 +1,26 @@
-$(document).ready(function() {
-  $("#menu-icon").click(() => {
-    $(".sidebar").toggleClass("toggled");
-  })
-  $("#search-icon").click(() => {
-    $("#searchbar").toggleClass("shown");
-    $("#search-api-input").focus();
-  })
-  const searchInput = $("#search-api-input");
-  searchInput.keydown(evt => {
-    if (evt.which == 13) {
-      const baseUrl = $("#baseurl-input").val();
-      window.location = (
-        baseUrl + "/api/search.html?" +
-        "searchTerm=" + searchInput.val() +
-        "&previousUrl=" + encodeURI(window.location)
-      );
+$(function() {
+  const menuIcon = $("#menu-icon");
+  const sidebar = $(".sidebar");
+  menuIcon.on("click", () => {
+    sidebar.toggleClass("toggled");
+  });
+
+  const searchIcon = $("#search-icon");
+  const searchbar = $("#searchbar");
+  const searchApiInput = $("#search-api-input");
+  searchIcon.on("click", () => {
+    searchbar.toggleClass("shown");
+    searchApiInput.focus();
+  });
+
+  const baseurlInput = $("#baseurl-input");
+  searchApiInput.keydown(evt => {
+    if (evt.which === 13) { // Enter
+      const baseUrl = baseurlInput.val();
+      const searchTerm = searchApiInput.val();
+      const previousUrl = encodeURI(window.location);
+      const searchUrl = `${baseUrl}/api/search.html?searchTerm=${searchTerm}&previousUrl=${previousUrl}`;
+      window.location = searchUrl;
     }
-  })
-})
+  });
+});