Rework layout/filtering

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

3 files changed, 73 insertions, 93 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;
 }
+
diff --git a/src/Render.hs b/src/Render.hs
index d74898c..574f5a7 100644
--- a/src/Render.hs
+++ b/src/Render.hs
@@ -84,8 +84,8 @@ protoentry db (ident, p) =
             , data_ "rank" (T.pack $ show $ prank p)
             ] $ do
             div_ [class_ "card-header", role_ "tab"] $ do
-                h3_ [class_ "name"] $ do
-                    a_ [href_ $ T.pack $ '#':ident, title_ "permalink", data_ "toggle" "collapse", data_ "parent" "#protocols", data_ "target" $ T.pack $ '#':bodyIdent, class_ "collapsed"] $ toHtml $ pname p
+                h3_ [class_ "name h5"] $ do
+                    a_ [href_ $ T.pack $ '#':ident, title_ "permalink", data_ "toggle" "collapse", data_ "parent" "#protocols", data_ "target" $ T.pack $ '#':bodyIdent, class_ "collapsed dropdown-toggle"] $ toHtml $ pname p
                     " "
                     maybe "" (small_ [class_ "longname text-muted"] . toHtml) $ plongname p
             div_ [class_ "collapse", id_ $ T.pack bodyIdent, role_ "tabpanel"] $ do
@@ -145,56 +145,63 @@ introduction db = let
             " and "
             toHtml lastyear
             "."
-        p_ [class_ "lead"] $ a_ [class_ "btn btn-primary btn-lg", href_ "#about", role_ "button", data_ "toggle" "collapse", id_ "learnmore"] "Learn more"
+        p_ [class_ "lead"] $ a_ [class_ "btn btn-primary btn-lg", href_ "#about", role_ "button", data_ "toggle" "modal", id_ "learnmore"] "Learn more"
 
 featuresFilter :: Database -> Html ()
-featuresFilter db = select_ [multiple_ "", size_ "10", id_ "filter-feature"] $ forM_ (M.toList $ getFeaturesByLevel db 0) $ \(baseident, basefeature) -> do
+featuresFilter db = select_ [multiple_ "", id_ "filter-feature", class_ "form-control", placeholder_ "Filter by feature or name"] $ forM_ (M.toList $ getFeaturesByLevel db 0) $ \(baseident, basefeature) -> do
     optgroup_ [label_ $ T.pack $ fname basefeature] $ do
         forM_ (M.toList $ getFeaturesByBase db baseident) $ \(ident, feature) -> do
-            option_ [value_ $ T.pack ident] $ toHtml $ fname feature
+            option_ [value_ $ T.pack $ concat ["tag:", ident]] $ toHtml $ fname feature
 
 -- |List of protocol features
 features :: Database -> Html ()
-features db = dl_ [class_ "row"] $ forM_ (M.toList $ getFeaturesByLevel db 0) $ \(baseident, basefeature) -> do
-        dt_ [class_ "col-sm-3"] $ toHtml $ fname basefeature
+features db = dl_ [class_ "row learnmore-features"] $ forM_ (M.toList $ getFeaturesByLevel db 0) $ \(baseident, basefeature) -> do
+        dt_ [class_ "col-sm-3"] $ h4_ $ toHtml $ fname basefeature
         dd_ [class_ "col-sm-9"] $ do
             maybe mempty (p_ . toHtml) $ fdescription basefeature
             dl_ $ forM_ (M.toList $ getFeaturesByBase db baseident) $ \(ident, feature) -> do
                 dt_ $ toHtml $ fname feature
                 maybe mempty (dd_ . toHtml) $ fdescription feature
 
-about :: Database -> Html ()
-about db = let
+about :: Database -> [E.T] -> Html ()
+about db attrib = let
         (firstyear, lastyear) = minMaxPublicationYears db
         categoryCount = M.size $ getFeaturesByLevel db 0
     in do
-    h2_ "Motivation"
-    p_ "In recent years the scientific community has proposed a surprisingly large number of wireless medium access (MAC) protocols. That number is still climbing year by year, rendering classic surveys outdated rather quick. Additionally the sheer number of protocols results in name collisions, often making it harder than necessary to identify which protocol exactly is referenced by just looking at its name. Ordinary surveys also cannot provide interactivity like feature-based filtering and searching. Its results are not reusable easily since they are not machine-readable."
-    p_ $ do
-        "This comprehensive MAC taxonomy database (comatose), aims to fix most of these problems. It lists most known scientific MAC protocol proposals and is not limited to a subset with specific properties. The list includes the protocol’s short and long name, a description, as well as references to the publication it originated from. It also introduces a taxonomy. Some of its terminology is based on or inspired by "
-        a_ [href_ "#references"] "existing surveys"
-        ". Features are grouped into "
-        toHtml $ show categoryCount
-        " categories and those within the same category can be mutually exclusive. Below is a list of all features in use."
-    features db
-    h2_ "Implementation"
-    p_ $ do
-        "comatose uses two databases. The first one contains features and protocols in a "
-        a_ [href_ "http://yaml.org/"] "YAML"
-        " file. It is human and machine-readable at the same time and thus easy to edit. Also it does not require additional software like a SQL database server. This first database links protocols to publications with a second database. That one is just a standard BibTeX file. Since TeX is used for a lot of scientific publications these records usually exist already and can be copied, as well as reused for new publications. Therefore both should databases provide value beyond the scope of this project."
-    p_ "This very page is generated with a HTML renderer written in Haskell. It reads both databases and transforms them into a single-page HTML document.  Additional JavaScript code provides client-side filtering and searching."
-    h2_ "Contributing"
-    p_ $ do
-        "As mentioned above this database is not complete yet and will never be, as long as new protocols are invented. Descriptions and feature tags are missing for a lot of protocols due to lack of time. If you want to help send an email with your suggestions to "
-        a_ [href_ "mailto:lars+comatose@6xq.net"] "lars+comatose@6xq.net"
-        " or clone the repository from "
-        a_ [href_ "https://github.com/PromyLOPh/comatose"] "GitHub"
-        ", edit the database and create a pull request."
-    h2_ "Acknowledgements"
-    p_ $ do
-        "This database is part of a project funded by the "
-        a_ [href_ "https://www.bmbf.de/en/index.html"] "Federal Ministry of Education and Research"
-        " from 2015 to 2017."
+    div_ [class_ "modal fade", id_ "about"]
+        $ div_ [class_ "modal-dialog"]
+        $ div_ [class_ "modal-content"] $ do
+            div_ [class_ "modal-header"] $ do
+                h2_ [class_ "modal-title"] "About"
+                button_ [type_ "button", class_ "close", data_ "dismiss" "modal"] "×"
+            div_ [class_ "modal-body"] $ do
+                p_ "In recent years the scientific community has proposed a surprisingly large number of wireless medium access (MAC) protocols. That number is still climbing year by year, rendering classic surveys outdated rather quick. Additionally the sheer number of protocols results in name collisions, often making it harder than necessary to identify which protocol exactly is referenced by just looking at its name. Ordinary surveys also cannot provide interactivity like feature-based filtering and searching. Its results are not reusable easily since they are not machine-readable."
+                p_ $ do
+                    "This comprehensive MAC taxonomy database (comatose), aims to fix most of these problems. It lists most known scientific MAC protocol proposals and is not limited to a subset with specific properties. The list includes the protocol’s short and long name, a description, as well as references to the publication it originated from. It also introduces a taxonomy. Some of its terminology is based on or inspired by "
+                    a_ [href_ "#references"] "existing surveys"
+                    ". Features are grouped into "
+                    toHtml $ show categoryCount
+                    " categories and those within the same category can be mutually exclusive. Below is a list of all features in use."
+                features db
+                h2_ "Implementation"
+                p_ $ do
+                    "comatose uses two databases. The first one contains features and protocols in a "
+                    a_ [href_ "http://yaml.org/"] "YAML"
+                    " file. It is human and machine-readable at the same time and thus easy to edit. Also it does not require additional software like a SQL database server. This first database links protocols to publications with a second database. That one is just a standard BibTeX file. Since TeX is used for a lot of scientific publications these records usually exist already and can be copied, as well as reused for new publications. Therefore both should databases provide value beyond the scope of this project."
+                p_ "This very page is generated with a HTML renderer written in Haskell. It reads both databases and transforms them into a single-page HTML document.  Additional JavaScript code provides client-side filtering and searching."
+                h2_ "Contributing"
+                p_ $ do
+                    "As mentioned above this database is not complete yet and will never be, as long as new protocols are invented. Descriptions and feature tags are missing for a lot of protocols due to lack of time. If you want to help send an email with your suggestions to "
+                    a_ [href_ "mailto:lars+comatose@6xq.net"] "lars+comatose@6xq.net"
+                    " or clone the repository from "
+                    a_ [href_ "https://github.com/PromyLOPh/comatose"] "GitHub"
+                    ", edit the database and create a pull request."
+                h2_ "Acknowledgements"
+                p_ $ do
+                    "This database is part of a project funded by the "
+                    a_ [href_ "https://www.bmbf.de/en/index.html"] "Federal Ministry of Education and Research"
+                    " from 2015 to 2017."
+                references (sortBy (compare `on` lookup "year" . E.fields) attrib)
     
 -- | The list of protocols
 protocols :: Database -> Html ()
@@ -210,31 +217,26 @@ page db attrib = doctypehtml_ $ do
         extjs "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
         extjs "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
         extcss "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
+        extjs "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"
+        extcss "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css"
+        extcss "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.min.css"
         extcss "style.css"
     body_ $ do
         nav_ [class_ "navbar navbar-expand-md navbar-dark bg-dark fixed-top"] $ do
-            div_ [class_ "collapse navbar-collapse"] $ do
-                span_ [class_ "navbar-brand"] "comatose"
+            span_ [class_ "navbar-brand"] "comatose"
+            button_ [class_ "navbar-toggler", type_ "button", data_ "toggle" "collapse", data_ "target" "#navbarSupportedContent"] $ span_ [class_ "navbar-toggler-icon"] mempty
+            div_ [class_ "collapse navbar-collapse", id_ "navbarSupportedContent"] $ do
                 ul_ [class_ "navbar-nav mr-auto"] mempty
-                form_ [id_ "protosort", class_ "navbar-nav form-inline my-2 my-lg-0"] $ do
-                    input_ [id_ "filter", type_ "search", class_ "form-control mr-sm-2", placeholder_ "Filter by name"]
-                    " "
-                    div_ [class_ "nav-item dropdown keep-open"] $ do
-                        a_ [class_ "nav-link dropdown-toggle", data_ "toggle" "dropdown", href_ "#"] "Features"
-                        div_ [class_ "dropdown-menu"] $ featuresFilter db
-                    " "
-                    label_ [for_ "sort", class_ "navbar-text"] "Sort by"
-                    " "
+                form_ [id_ "protosort", class_ "navbar-nav form-inline my-2 my-lg-0", action_ "#"] $ do
+                    featuresFilter db
+                    " "
                     select_ [id_ "sort", class_ "form-control"] $ do
                         option_ [value_ "name"] "Name"
                         option_ [value_ "year"] "Year"
                         option_ [value_ "rank"] "Rank"
         div_ [class_ "jumbotron" ] $ section_ [class_ "container"] $ do
             introduction db
-            div_ [class_ "about collapse", id_ "about"] $ do
-                about db
-                references (sortBy (compare `on` lookup "year" . E.fields) attrib)
-                p_ $ a_ [class_ "btn btn-secondary", data_ "toggle" "collapse", data_ "target" "#about", href_ "#"] "Close"
+            about db attrib
         div_ [class_ "container"] $ protocols db
         extjs "script.js"