Rework layout/filtering

Use modal for “learn more” and selectize.js for filtering. Replaces the
ugly navbar dropdown.

2 files changed, 20 insertions, 42 deletions

diff --git a/data/script.js b/data/script.js
index fd4d7f7..0884ee6 100644
--- a/data/script.js
+++ b/data/script.js
@@ -1,13 +1,3 @@
-/*
- * jQuery throttle / debounce - v1.1 - 3/7/2010
- * http://benalman.com/projects/jquery-throttle-debounce-plugin/
- * 
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
-(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
-
 $(document).ready (function () {
 	var protocache = {};
 
@@ -62,8 +52,21 @@ $(document).ready (function () {
 		return true;
 	}
 
-	function filterproto (search, features = []) {
+	function filterproto () {
+		var sel = $('#filter-feature option');
+		var features = [], search = '';
+		for (i = 0; i < sel.length; i++) {
+			if ($(sel[i]).is (':checked')) {
+				let val = $(sel[i]).val ();
+				if (val.startsWith ('tag:')) {
+					features.push (val.substr (4));
+				} else {
+					search = val;
+				}
+			}
+		}
 		console.log (features);
+
 		search = search.toLowerCase ()
 		var items = $('#protocols .protocol');
 		for (var i = 0; i < items.length; i++) {
@@ -79,47 +82,21 @@ $(document).ready (function () {
 	}
 
 	function selectedfeatures () {
-		var sel = $('#filter-feature option');
-		var features = [];
-		for (i = 0; i < sel.length; i++) {
-			if ($(sel[i]).is (':checked')) {
-				features.push ($(sel[i]).val ());
-			}
-		}
 		return features;
 	}
 
 	$('#sort').change (function () {
 		sortproto ($(this).val ());
 	});
-	$('#filter').keyup ($.debounce (100, function () {
-		filterproto ($(this).val (), selectedfeatures ());
-	}));
 	$('#filter-feature').change (function () {
-		filterproto ($('#filter').val (), selectedfeatures ());
+		filterproto ();
 	});
-	$('#protosort').show ();
-	$('#filter-feature').show ();
 	sortproto ($('#sort').val ());
-	filterproto ($('#filter').val (), selectedfeatures ());
-
-	/* see https://stackoverflow.com/a/38691517 */
-	$('.keep-open').on({
-		"shown.bs.dropdown": function() { $(this).attr('closable', false); },
-		//"click":             function() { }, // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown
-		"hide.bs.dropdown":  function() { return $(this).attr('closable') == 'true'; }
-	});
-
-	$('.keep-open').children().first().on({
-	  "click": function() {
-		$(this).parent().attr('closable', true );
-	  }
-	})
-
-	/* hide button “learn more” */
-	$('#about').on ({'shown.bs.collapse': function () { $('#learnmore').hide (); },
-			'hidden.bs.collapse': function () { $('#learnmore').show (); }});
+	filterproto ();
 
 	/* enable popovers */
 	$('[data-toggle="popover"]').popover({template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><textarea readonly rows="5" class="popover-body"></textarea></div>'});
+
+	$('select').selectize({create: true});
 });
+
diff --git a/data/style.css b/data/style.css
index e93a4e3..8ad580b 100644
--- a/data/style.css
+++ b/data/style.css
@@ -22,3 +22,4 @@ body {
 .filter-feature {
 	display: hidden;
 }
+