Add js feature filter

3 files changed, 46 insertions, 9 deletions

diff --git a/Main.hs b/Main.hs
index caad9d0..9ef47be 100644
--- a/Main.hs
+++ b/Main.hs
@@ -263,7 +263,9 @@ features db =
 				h3_ [id_ $ T.pack featureanchor] $ a_ [href_ $ T.pack $ '#':featureanchor] $ toHtml $ fname basefeature
 				maybe mempty (p_ . toHtml) $ fdescription basefeature
 				dl_ $ forM_ (M.toList $ getFeaturesByBase db baseident) $ \(ident, feature) -> do
-					dt_ $ toHtml $ fname feature
+					dt_ [class_ "form-inline"] $ let i = T.pack ("filter-feature-" ++ ident) in do
+						input_ [type_ "checkbox", id_ i, class_ "filter-feature", value_ (T.pack ident)]
+						label_ [for_ i] $ toHtml $ fname feature
 					maybe mempty (dd_ . toHtml) $ fdescription feature
 
 -- | The list of protocols
diff --git a/data/script.js b/data/script.js
index 43f2d05..a4d1508 100644
--- a/data/script.js
+++ b/data/script.js
@@ -26,6 +26,9 @@ $(document).ready (function () {
 		} else {
 			e['year'] = 0;
 		}
+		e['features'] = n.find ('.features li').map (function (i, e) {
+			return $(e).data ('id');
+		}).get ();
 
 		protocache[n.attr ('id')] = e;
 		return e;
@@ -45,26 +48,55 @@ $(document).ready (function () {
 		});
 		protolist.append (items);
 	}
-	function filterproto (search) {
+
+	function hasfeatures (item, features) {
+		var itemfeatures = item['features'];
+		for (i = 0; i < features.length; i++) {
+			if (itemfeatures.indexOf (features[i]) == -1) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	function filterproto (search, features = []) {
+		console.log (features);
 		search = search.toLowerCase ()
 		var items = $('#protocols .protocol');
 		for (var i = 0; i < items.length; i++) {
-			var e = $(items[i]);
-			var val = extract (e)['name'];
-			if (val.toLowerCase ().indexOf (search) >= 0) {
-				e.show ();
+			var domobj = $(items[i]);
+			var e = extract (domobj);
+			if (e['name'].toLocaleLowerCase ().indexOf (search) >= 0 &&
+					(features.length == 0 || hasfeatures (e, features))) {
+				domobj.show ();
 			} else {
-				e.hide ();
+				domobj.hide ();
 			}
 		}
 	}
+
+	function selectedfeatures () {
+		var sel = $('.filter-feature');
+		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 ());
+		filterproto ($(this).val (), selectedfeatures ());
 	}));
+	$('.filter-feature').change (function () {
+		filterproto ($('#filter').val (), selectedfeatures ());
+	});
 	$('#protosort').show ();
+	$('.filter-feature').show ();
 	sortproto ($('#sort').val ());
-	filterproto ($('#filter').val ());
+	filterproto ($('#filter').val (), selectedfeatures ());
 });
diff --git a/data/style.css b/data/style.css
index d0b741a..2b269df 100644
--- a/data/style.css
+++ b/data/style.css
@@ -26,3 +26,6 @@
 	margin-right: 1em;
 	padding 0;
 }
+.filter-feature {
+	display: hidden;
+}