vdoc: implement advanced search on mobile layout (vlang#8176)

Author: danieldaeschle

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Colorize and improve failing tests output.
 - Fix `go` with a generic function: `go test<string>(c, 'abcd')`.
 - Add comptime `x := $embed_file('v.png') println(x.len) println(ptr_str(x.data()))`, for embedding files into binaries.
+- Advanced vdoc search on mobile layout.
 
 ## V 0.2.1
 *30 Dec 2020*

cmd/tools/vdoc/html.v

@@ -39,16 +39,18 @@ const (
 			<header class="doc-nav hidden">
 				<div class="heading-container">
 					<div class="heading">
-						<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
-						<div class="module">{{ head_name }}</div>
-						<div class="toggle-version-container">
-							<span>{{ version }}</span>
-							<div id="dark-mode-toggle" role="switch" aria-checked="false" aria-label="Toggle dark mode">{{ light_icon }}{{ dark_icon }}</div>
+						<div class="info">
+							<div class="module">{{ head_name }}</div>
+							<div class="toggle-version-container">
+								<span>{{ version }}</span>
+								<div id="dark-mode-toggle" role="switch" aria-checked="false" aria-label="Toggle dark mode">{{ light_icon }}{{ dark_icon }}</div>
+							</div>
+							{{ menu_icon }}
 						</div>
-						{{ menu_icon }}
+						<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
 					</div>
 				</div>
-				<nav class="search"></nav>
+				<nav class="search hidden"></nav>
 				<nav class="content hidden">
 					<ul>
 						{{ toc_links }}

cmd/tools/vdoc/resources/doc.css

@@ -149,11 +149,6 @@ body {
 	fill: #fff;
 	fill: var(--menu-toggle-icon-color);
 }
-.doc-nav #toggle-menu:active {
-	background-color: #00000044;
-	background-color: var(--menu-toggle-icon-hover-color);
-	border-radius: 5rem;
-}
 .doc-nav > .heading-container {
 	position: relative;
 	/* IE11 */
@@ -165,31 +160,35 @@ body {
 	z-index: 10;
 }
 .doc-nav > .heading-container > .heading {
+	display: flex;
+	flex-direction: column;
+}
+.doc-nav > .heading-container > .heading > .info {
 	display: flex;
 	padding: 0 1rem;
 	height: 56px;
 }
-.doc-nav > .heading-container > .heading > .module {
+.doc-nav > .heading-container > .heading > .info > .module {
 	font-size: 1.6rem;
 	font-weight: 500;
 	margin: 0;
 }
-.doc-nav > .heading-container > .heading > .toggle-version-container {
+.doc-nav > .heading-container > .heading > .info > .toggle-version-container {
 	display: flex;
 	align-items: center;
 }
-.doc-nav > .heading-container > .heading > .toggle-version-container > #dark-mode-toggle {
+.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
 	cursor: pointer;
 	fill: #fff;
 	display: flex;
 	visibility: hidden;
 }
-.doc-nav > .heading-container > .heading > .toggle-version-container > #dark-mode-toggle > svg {
+.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle > svg {
 	width: 1.2rem;
 	height: 1.2rem;
 }
 .doc-nav > .heading-container > .heading > #search {
-	margin-top: 1rem;
+	margin: 0.6rem 1.2rem 1rem 1.2rem;
 	border: none;
 	border-radius: 0.2rem;
 	padding: 0.5rem 1rem;
@@ -198,8 +197,6 @@ body {
 	background-color: var(--menu-search-background-color);
 	color: #fff;
 	color: var(--menu-search-text-color);
-	margin-left: -0.6rem;
-	margin-right: -0.6rem;
 }
 .doc-nav > .heading-container > .heading > #search::placeholder {
 	color: #edf2f7;
@@ -265,7 +262,7 @@ body {
 .doc-nav > .content a:hover {
 	text-decoration: underline;
 }
-.doc-nav .search {
+.doc-nav .search.hidden {
 	display: none;
 }
 .doc-nav .search li {
@@ -619,17 +616,20 @@ pre {
 	.doc-nav.hidden {
 		height: auto;
 	}
-	.doc-nav > .heading-container > .heading {
+	.doc-nav.hidden #search {
+		display: none;
+	}
+	.doc-nav .search.mobile-hidden {
+		display: none;
+	}
+	.doc-nav > .heading-container > .heading > .info {
 		align-items: center;
 	}
-	.doc-nav > .heading-container > .heading > .toggle-version-container {
+	.doc-nav > .heading-container > .heading > .info > .toggle-version-container {
 		flex-grow: 1;
 		padding: 0 1rem;
 		justify-content: space-between;
 	}
-	.doc-nav > .heading-container > .heading > #search {
-		display: none;
-	}
 }
 
 @media (min-width: 1024px) {
@@ -642,19 +642,19 @@ pre {
 	.doc-nav #toggle-menu {
 		display: none;
 	}
-	.doc-nav > .heading-container > .heading {
+	.doc-nav > .heading-container > .heading > .info {
 		height: auto;
-		padding: 1rem 2rem;
+		padding: 1rem 2rem 0 2rem;
 		flex-direction: column-reverse;
 		justify-content: center;
 	}
-	.doc-nav > .heading-container > .heading > .toggle-version-container {
+	.doc-nav > .heading-container > .heading > .info > .toggle-version-container {
 		align-items: center;
 		margin-bottom: 0.2rem;
 		display: flex;
 		flex-direction: row-reverse;
 	}
-	.doc-nav > .heading-container > .heading > .toggle-version-container > #dark-mode-toggle {
+	.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
 		margin-right: auto;
 	}
 	.doc-nav .content.show,

cmd/tools/vdoc/resources/doc.js

@@ -53,13 +53,20 @@ function setupScrollSpy() {
 function setupMobileToggle() {
     var toggle = document.getElementById('toggle-menu');
     toggle.addEventListener('click', function(ev) {
-        document.querySelectorAll('.doc-nav').forEach(function(el) {
-            el.classList.toggle('hidden');
-        });
-        document.querySelectorAll('.doc-nav .content').forEach(function(el) {
-            el.classList.toggle('hidden');
-            el.classList.toggle('show');
-        });
+        var docNav = document.querySelector('.doc-nav');
+        var isHidden = docNav.classList.contains('hidden');
+        docNav.classList.toggle('hidden');
+        var search = document.querySelector('.doc-nav > .search');
+        console.log(search);
+        var searchHasResults = search.classList.contains('has-results');
+        if (isHidden && searchHasResults) {
+            search.classList.remove('mobile-hidden');
+        } else {
+            search.classList.add('mobile-hidden');
+        }
+        var content = document.querySelector('.doc-nav .content');
+        content.classList.toggle('hidden');
+        content.classList.toggle('show');
     });
 }
 
@@ -87,12 +94,19 @@ function setupSearch() {
         if (searchValue === '') {
             // reset to default
             menu.style.display = '';
-            search.style.display = '';
+            if (!search.classList.contains('hidden')) {
+                search.classList.add('hidden');
+                search.classList.remove('has-results');
+            }
         } else if (searchValue.length > 2) {
             // search for less than 3 characters can display too much results
             search.innerHTML = '';
             menu.style.display = 'none';
-            search.style.display = 'block';
+            if (search.classList.contains('hidden')) {
+                search.classList.remove('hidden');
+                search.classList.remove('mobile-hidden');
+                search.classList.add('has-results');
+            }
             // cache length for performance
             var foundModule = false;
             var searchModuleIndexLength = searchModuleIndex.length;