Adding initial code. (#300)

Qumulo · Nov 16, 2023 · fcfb11c · fcfb11c
1 parent 45b9f50
commit fcfb11c
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 16 deletions.
diff --git a/_includes/topnav.html b/_includes/topnav.html
@@ -90,22 +90,23 @@
                 <!--comment out this block if you want to hide search-->
                 <li>
                     <!--start search-->
-                    <div id="search-demo-container">
-                        <input type="text" id="search-input" placeholder="{{site.data.strings.search_placeholder_text}}">
-                        <ul id="results-container"></ul>
-                    </div>
-                    <script src="{{ "js/jekyll-search.js" | relative_url }}"></script>
-                    <script>
-                            SimpleJekyllSearch.init({
-                                searchInput: document.getElementById('search-input'),
-                                resultsContainer: document.getElementById('results-container'),
-                                dataSource: '{{ "search.json" | relative_url }}',
-                                searchResultTemplate: '<li><a href="{{ site.baseurl }}{url}" title="{{page.title | escape }}">{title}</a></li>',
-                    noResultsText: '{{site.data.strings.search_no_results_text}}',
-                            limit: 10,
-                            fuzzy: true,
-                    })
-                    </script>
+		    <div id="search-demo-container">
+		        <input type="text" id="search-input" placeholder="Search the Documentation Portal">
+		        <ul id="results-container"></ul>
+		    </div>
+		    <script src="/js/search-summary.js"></script>
+		    <script src="/js/jekyll-search.js"></script>
+		    <script>
+		        SimpleJekyllSearch.init({
+			    searchInput: document.getElementById('search-input'),
+			    resultsContainer: document.getElementById('results-container'),
+			    dataSource: '/search.json',
+			    searchResultTemplate: '<li onmouseover="showSummary(this)" onmouseout="hideSummary()" data-summary="{summary}"><a href="{url}" title="Qumulo Documentation">{title}</a><div class="summary-box" style="display:none;"></div></li>',
+			    noResultsText: 'No results found.',
+			    limit: 10,
+			    fuzzy: true,
+		        })
+		    </script>
                     <!--end search-->
                 </li>
             </ul>

diff --git a/css/customstyles.css b/css/customstyles.css
@@ -101,6 +101,30 @@ td.replication-icon {
   background-color:transparent;
 }
 
+/* Search result summary */
+.summary-box {
+  display: none;
+  position: absolute;
+  left: -255px;
+  width: 255px;
+  top: 0;
+  background-color: #1a293f;
+  color: white;
+  border: 1px solid #ddd;
+  padding: 10px;
+  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+  z-index: 100;
+  font-size: 10pt;
+}
+
+li {
+  position: relative;
+}
+
+#results-container {
+  list-style-type: none;
+}
+
 @media screen {
   /* Insert CLICK TO ENLARGE overlay for images with URLs */
   .enlargeimage {
@@ -1647,6 +1671,10 @@ h4.panel-title {
 
 /* Set navbar breakpoint so that it converts to a hamburger menu earlier */
 @media (max-width: 1200px) {
+  .summary-box {
+    display: none !important;
+  }
+
   .navbar-header {
     float: none;
   }

diff --git a/js/search-summary.js b/js/search-summary.js
@@ -0,0 +1,21 @@
+function stripHtml(html) {
+    var tempDiv = document.createElement("div");
+    tempDiv.innerHTML = html;
+    return tempDiv.textContent || tempDiv.innerText || "";
+}
+
+function showSummary(element) {
+    var summaryHtml = element.getAttribute('data-summary');
+    var summaryText = stripHtml(summaryHtml); // Strip HTML from the summary
+    var summaryBox = element.getElementsByClassName('summary-box')[0];
+    summaryBox.innerHTML = summaryText; // Display plain text summary
+    summaryBox.style.display = 'block';
+}
+
+function hideSummary() {
+    var summaryBoxes = document.getElementsByClassName('summary-box');
+    for (var i = 0; i < summaryBoxes.length; i++) {
+        summaryBoxes[i].style.display = 'none';
+    }
+}
+