add name filtering/search

index.css

@@ -71,11 +71,18 @@ section.config {
 	display: grid;
 	grid-column-gap: 5px;
 	grid-row-gap: 5px;
+	grid-row-gap: 5px;
 	grid-template-columns: auto auto auto auto;
 }
 
 section#filters {
 	grid-template-columns: auto auto auto auto auto;
+	align-items: stretch;
+}
+section#filters input,
+section#filters select {
+	width: 100%;
+	margin: 0;
 }
 
 section.config > * {
@@ -195,6 +202,7 @@ label {
 }
 fieldset {
 	all: unset;
+	display: flex;
 }
 button {
 	all: unset;
@@ -222,7 +230,7 @@ button:active {
 	box-shadow: none;
 }
 button.selected {
-	background: inherit;
+	background: #fff;
 	border-color: #e4e4e4;
 	color: #2a2a2a;
 }
@@ -257,6 +265,10 @@ select option {
 	background: #fff;
 	color: #000;
 }
+input[type="text"] {
+	line-height: 12px;
+}
+input[type="text"],
 input[type="number"] {
 	all: unset;
 	width: 4em;
@@ -267,6 +279,8 @@ input[type="number"] {
 	text-align: left;
 	transition: all .2s ease-in-out;
 }
+input[type="text"]:hover,
+input[type="text"]:focus,
 input[type="number"]:hover,
 input[type="number"]:focus,
 select:hover,

index.html

@@ -149,15 +149,19 @@
 						</svg>
 					</button>
 				</fieldset>
-				<select id="authors-list">
+				<fieldset>
-					<optgroup>
+					<select id="authors-list">
-						<option value="all">All Authors</option>
+						<optgroup>
-					</optgroup>
+							<option value="all">All Authors</option>
-					<optgroup class="other">
+						</optgroup>
-						<!-- filled from json -->
+						<optgroup class="other">
-					</optgroup>
+							<!-- filled from json -->
-				</select>
+						</optgroup>
-				<input type="text">
+					</select>
+				</fieldset>
+				<fieldset>
+					<input type="text" id="name-search" placeholder="Search">
+				</fieldset>
 			</section>
 			<section class="select-list" tabindex="0">
 				<div id="select-font">
@@ -243,7 +247,7 @@
 			<footer>
 				<h1><a href="http://programmingfonts.org">Programming Fonts</a></h1>
 				<p>
-					Test drive over 80 free programming fonts!
+					Test drive all the free programming fonts!
 					<br>
 					<a href="https://github.com/braver/programmingfonts"><svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
 				</p>

index.js

@@ -19,7 +19,7 @@ var filters = {
     'rendering': false,
     'liga': false,
     'author': 'all',
-    'name': false
+    'name': ''
 };
 
 function selectTheme() {
@@ -81,6 +81,13 @@ function selectLanguage() {
     editor.setOption('mode', lang.toLowerCase());
     document.cookie = 'language=' + lang + ';max-age=172800';
 }
+function setCounter(amount) {
+    if (amount === 1) {
+        $('h1 a').text(amount + ' Programming Font');
+    } else {
+        $('h1 a').text(amount + ' Programming Fonts');
+    }
+}
 
 function renderSelectList() {
     var icon = '<svg class="octicon" viewBox="0 0 12 14" version="1.1" width="12" height="14" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>';
@@ -154,6 +161,7 @@ function renderSelectList() {
             );
         });
         selectFont();
+        setCounter($('.entry[data-alias]').length);
     });
 }
 
@@ -260,7 +268,8 @@ function applyFilters() {
             (!filters.style || data.style === filters.style) &&
             (!filters.rendering || data.rendering === filters.rendering) &&
             (!filters.liga || data.ligatures === false && filters.liga === 'no' || data.ligatures === true && filters.liga === 'yes') &&
-            (filters.author === 'all' || data.author === filters.author)
+            (filters.author === 'all' || data.author === filters.author) &&
+            (!filters.name || data.name.toLowerCase().indexOf(filters.name) > -1)
         ) {
             $(element).removeClass('filtered-out');
             count++;
@@ -269,11 +278,7 @@ function applyFilters() {
         }
     });
 
-    if (count === 1) {
+    setCounter(count);
-        $('h1 a').text(count + ' Programming Font');
-    } else {
-        $('h1 a').text(count + ' Programming Fonts');
-    }
 }
 
 function toggleFilter(filter, group) {
@@ -315,11 +320,11 @@ $(document).ready(function() {
         $('#select-language').val(cookieValueLanguage);
     }
 
+    renderSelectList();
     selectTheme();
     setSize();
     setSpacing();
     selectLanguage();
-    renderSelectList();
 
     $('#theme-next').click(function() {
         $('#select-theme :selected').next().prop('selected', true);
@@ -342,6 +347,10 @@ $(document).ready(function() {
         filters.author = $(this).val();
         applyFilters();
     });
+    $('#name-search').on('keyup', function() {
+        filters.name = $(this).val().toLowerCase();
+        applyFilters();
+    });
 
     $('body').on('keydown', function(event) {
         if (