Adding search bar

contributte · Mar 7, 2019 · 179b711 · 179b711
1 parent 6a7d755
commit 179b711
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 4 deletions.
diff --git a/assets/layout.css b/assets/layout.css
@@ -153,10 +153,10 @@ header > h1 {
 	margin: 0 !important;
 }
 
-button.section-method, a.section-site {
+button.section-method, a.section-site, .search-box{
 	font-size: 12px;
 	font-family: monospace;
-	letter-spacing: -0.3px;
+	letter-spacing: -.3px;
 	display: block;
 	width: 100%;
 	border: 0;
@@ -171,6 +171,33 @@ button.section-method, a.section-site {
 	border-radius: 0;
 	cursor: pointer;
 	border-left: 4px solid transparent;
+	word-break: break-word;
+}
+
+.search-item b {
+	color:#222;
+}
+
+.search-box {
+	padding: 0;
+	margin-bottom:1em;
+	border-radius:2px;
+}
+
+.search-box input {
+	display: block;
+	line-height:32px;
+	border: 0;
+	padding: 0 1em;
+	width:100%;
+	box-sizing: border-box;
+	font-size: 12px;
+	background-color: transparent;
+	font-weight: bold;
+}
+
+.search-box input:focus {
+	outline: none;
 }
 
 button.section-method:hover, a.section-site:hover,

diff --git a/assets/layout.js b/assets/layout.js
@@ -84,3 +84,37 @@ var onHashChangeRouter = function() {
 };
 
 window.addEventListener("hashchange", onHashChangeRouter);
+
+var input = document.getElementById("search-input");
+
+input.addEventListener(
+	"keyup",
+	function() {
+		var phrase = this.value.toLowerCase();
+		var searchItems = document.getElementsByClassName("search-item");
+
+		for (var i = 0; i < searchItems.length; i++) {
+			var content = searchItems.item(i).innerHTML;
+
+			searchItems.item(i).innerHTML = content.replace(/\<(\/)?b\>/gi, '');
+		}
+
+		if (phrase === "") {
+			for (var i = 0; i < searchItems.length; i++) {
+				searchItems.item(i).style.display = "block";
+			}
+		} else {
+			for (var i = 0; i < searchItems.length; i++) {
+				var content = searchItems.item(i).innerHTML;
+
+				if (content.toLowerCase().includes(phrase)) {
+					searchItems.item(i).style.display = "block";
+					var regex = new RegExp("(.+)?(" + phrase + ")(.+)?", "gi");
+					searchItems.item(i).innerHTML = content.replace(regex, '$1<b>$2</b>$3');
+				} else {
+					searchItems.item(i).style.display = "none";
+				}
+			}
+		}
+	}
+);
diff --git a/assets/layout.php b/assets/layout.php
@@ -11,7 +11,12 @@
 <body>
 	<header><h1>{title}</h1></header>
 	<div class="empty-left"></div>
-	<nav>{content}</nav>
+	<nav>
+		<div class="search-box">
+			<input type="text" name="search" id="search-input" placeholder="Search..." autocomplete="off">
+		</div>
+		{content}
+	</nav>
 	<div class="empty-right"></div>
 	<main id="section"></main>
 	<footer></footer>

diff --git a/src/Parsedown/CustomParsedown.php b/src/Parsedown/CustomParsedown.php
@@ -37,7 +37,7 @@ protected function inlineSection(array $excerpt): ?array
 					'text' => $matches[2],
 					'attributes' => [
 						'data-section-src' => $matches[3],
-						'class' => $class,
+						'class' => sprintf('%s search-item', $class),
 						'data-target' => Strings::webalize($matches[2]),
 					],
 				],