Merge pull request algorithm-visualizer#167 from duaraghav8/gh-pages

Search Bar

Author: 64json

css/stylesheet.css

@@ -180,6 +180,21 @@ nav h3 {
     box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.48), inset 0 -2px 2px rgba(0, 0, 0, 0.36);
 }
 
+input.search_bar {
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, .10);
+    border: none;
+    border-bottom: 2px solid rgb(38, 38, 38);
+    width: 100%;
+    height: 30px;
+    color: white;
+    padding-left: 10px;
+}
+
+input.search_bar:focus {
+    outline: none;
+}
+
 .workspace {
     position: absolute;
     top: 30px;

gulpfile.babel.js

@@ -147,4 +147,4 @@ gulp.task('watch', ['build'], function() {
 
 // Default
 
-gulp.task('default', ['connect', 'watch']);
+gulp.task('default', ['connect', 'watch']);

index.html

@@ -61,6 +61,7 @@ <h3>
     </div>
 </nav>
 <section class="sidemenu active">
+    <input type = "text" class="search_bar" id="search-bar" autofocus/>
     <div id="list">
     </div>
     <div id="footer">

js/dom/enable_search.js

@@ -0,0 +1,35 @@
+'use strict';
+
+module.exports = () => {
+	let $buttons = $('[data-category]');
+
+	$('#search-bar').keyup (function () {
+		let query = $(this).val ();
+		let re = new RegExp (query, 'i');
+
+		if (query) $('#footer').hide ();
+		else $('#footer').show ();
+
+		$.each ($('#list .category'), function (i, c) {
+			let $c = $(c);
+			!$c.hasClass ('open') && $c.click ();
+		});
+
+		$buttons.show ().filter (function () {
+			let cName = $(this).attr ('data-category');
+
+			if ($(this).hasClass ('category')) {
+				return !re.test ($(`[data-category="${cName}"]`).text ());
+			}
+			else {
+				return !(
+					re.test ($(`.category[data-category="${cName}"]`).text()) || re.test ($(this).text ())
+				);
+			}
+		}).hide ();
+
+		$('.algorithms').show ().filter (function () {
+			return !$(this).children (':visible').length;
+		}).hide ();
+	});
+};

js/dom/index.js

@@ -7,6 +7,7 @@ const addFiles = require('./add_files');
 const showFirstAlgorithm = require('./show_first_algorithm');
 const showRequestedAlgorithm = require('./show_requested_algorithm');
 const showWiki = require('./show_wiki');
+const enableSearch = require('./enable_search');
 
 module.exports = {
   showAlgorithm,
@@ -15,5 +16,6 @@ module.exports = {
   addFiles,
   showFirstAlgorithm,
   showRequestedAlgorithm,
-  showWiki
+  showWiki,
+  enableSearch
 };

js/index.js

@@ -45,6 +45,9 @@ $(() => {
     app.setCategories(data);
     DOM.addCategories();
 
+    //enable search feature
+    DOM.enableSearch ();
+
     // determine if the app is loading a pre-existing scratch-pad
     // or the home page
     const {

public/algorithm_visualizer.css

@@ -300,6 +300,21 @@ nav h3 {
     box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.48), inset 0 -2px 2px rgba(0, 0, 0, 0.36);
 }
 
+input.search_bar {
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, .10);
+    border: none;
+    border-bottom: 2px solid rgb(38, 38, 38);
+    width: 100%;
+    height: 30px;
+    color: white;
+    padding-left: 10px;
+}
+
+input.search_bar:focus {
+    outline: none;
+}
+
 .workspace {
     position: absolute;
     top: 30px;