feat(datasets): Enable search-as-you type on Kedro-datasets docs (#532)

* done Signed-off-by: rashidakanchwala <[email protected]> * fix lint Signed-off-by: rashidakanchwala <[email protected]> --------- Signed-off-by: rashidakanchwala <[email protected]>
kedro-org · Feb 1, 2024 · b675485 · b675485
1 parent 068bc8f
commit b675485
Showing 1 changed file with 35 additions and 13 deletions.
diff --git a/kedro-datasets/docs/source/_templates/layout.html b/kedro-datasets/docs/source/_templates/layout.html
@@ -26,21 +26,43 @@
 
   heap.load({{ "1625763777" }});
 
+   //inline styling for read-the-docs flyout
+  document.documentElement.style.setProperty('--readthedocs-flyout-font-size', '0.9em');
+
   // Wait for DOM to load and clone main nav into the sidebar
   document.addEventListener("DOMContentLoaded", function() {
-      var sidebarSearch = document.querySelector('.wy-side-nav-search div[role="search"]');
-      sidebarSearch.parentNode.insertBefore(document.querySelector('.wy-main-nav').cloneNode(true), sidebarSearch);
-
-    // Prepend close button to mobile header
-      var closeBtn = document.createElement("span");
-      closeBtn.dataset.toggle = 'wy-nav-top';
-      closeBtn.classList.add('wy-nav-top-close');
-      document.querySelector('.wy-nav-top').prepend(closeBtn);
-    // Prepend open button to mobile header
-      var openBtn = document.createElement("span");
-      openBtn.dataset.toggle = 'wy-nav-top';
-      openBtn.classList.add('wy-nav-top-open');
-      document.querySelector('.wy-nav-top').prepend(openBtn);
+
+    function showReadTheDocsSearch() {
+        const searchEvent = new CustomEvent("readthedocs-search-show");
+        document.dispatchEvent(searchEvent);
+    }
+
+    // Activate read-the-docs search when user focuses on search
+    document.querySelector('div[role="search"] form input').addEventListener("focus", showReadTheDocsSearch);
+
+    // Add keyboard event listener for Cmd+K (Mac) or Ctrl+K (Windows)
+    document.addEventListener("keydown", function(e) {
+      if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        showReadTheDocsSearch();
+      }
+    });
+
+    // Clone main nav into the sidebar
+    var sidebarSearch = document.querySelector('.wy-side-nav-search div[role="search"]');
+    sidebarSearch.parentNode.insertBefore(document.querySelector('.wy-main-nav').cloneNode(true), sidebarSearch);
+
+   // Prepend close button to mobile header
+    var closeBtn = document.createElement("span");
+    closeBtn.dataset.toggle = 'wy-nav-top';
+    closeBtn.classList.add('wy-nav-top-close');
+    document.querySelector('.wy-nav-top').prepend(closeBtn);
+
+   // Prepend open button to mobile header
+    var openBtn = document.createElement("span");
+    openBtn.dataset.toggle = 'wy-nav-top';
+    openBtn.classList.add('wy-nav-top-open');
+    document.querySelector('.wy-nav-top').prepend(openBtn);
   });
 </script>
 <link rel="stylesheet" href="https://kedro-shared-files.s3.eu-west-2.amazonaws.com/qb1-sphinx-rtd.css" type="text/css"