From 976495c787232fabcd860c1e1786f1e213f2f998 Mon Sep 17 00:00:00 2001 From: Winston Date: Sun, 6 Apr 2014 18:03:15 +0800 Subject: Implement fuzzy matching for route search on routing error html page. --- .../middleware/templates/routes/_table.html.erb | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'actionpack/lib/action_dispatch') diff --git a/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb b/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb index 323873ba4b..6ee48f95ea 100644 --- a/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb +++ b/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb @@ -88,13 +88,15 @@ }); } - // takes an array of elements with a data-regexp attribute and + // Takes an array of elements with a data-regexp attribute and // passes their parent into the callback function - // if the regexp matches a given path - function eachElemsForPath(elems, path, func) { + // if the user input fuzzy matches a route or if the regexp matches a given path + function eachElemsForPath(elems, value, func) { + var path = sanitizePath(value); each(elems, function(e){ - var reg = e.getAttribute("data-regexp"); - if (path.match(RegExp(reg))) { + var route = e.getAttribute("data-route-path"), + regexp = e.getAttribute("data-regexp"); + if (route.match(RegExp(value)) || path.match(RegExp(regexp))) { func(e.parentNode.cloneNode(true)); } }) @@ -121,14 +123,14 @@ // On key press perform a search for matching paths pathElem.onkeyup = function(e){ - var path = sanitizePath(pathElem.value), - defaultText = 'Paths Matching (' + path + '):'; + var userInput = pathElem.value, + defaultText = 'Paths Matching (' + userInput +'):'; // Clear out results section selectedSection.innerHTML= defaultText; // Display matches if they exist - eachElemsForPath(regexpElems, path, function(e){ + eachElemsForPath(regexpElems, userInput, function(e){ selectedSection.appendChild(e); }); -- cgit v1.2.3 From 2ad5dad203ce96061dfe8aabb707d03aa86ab5bf Mon Sep 17 00:00:00 2001 From: Winston Date: Sun, 6 Apr 2014 18:03:55 +0800 Subject: Improve CSS styling for routing error html page. --- .../middleware/templates/routes/_table.html.erb | 32 +++++++++++++++++----- 1 file changed, 25 insertions(+), 7 deletions(-) (limited to 'actionpack/lib/action_dispatch') diff --git a/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb b/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb index 6ee48f95ea..3d9e520eba 100644 --- a/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb +++ b/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb @@ -4,21 +4,39 @@ border-collapse: collapse; } - #route_table td { - padding: 0 30px; + #route_table thead tr { + border-bottom: 2px solid #ddd; + } + + #route_table thead tr.bottom { + border-bottom: none; } - #route_table tr.bottom th { - padding-bottom: 10px; + #route_table thead tr.bottom th { + padding: 10px 0; line-height: 15px; } - #route_table .matched_paths { + #route_table tbody tr { + border-bottom: 1px solid #ddd; + } + + #route_table tbody tr:nth-child(odd) { + background: #f2f2f2; + } + + #route_table tbody.matched_paths { background-color: LightGoldenRodYellow; + border-bottom: solid 2px SlateGrey; } - #route_table .matched_paths { - border-bottom: solid 3px SlateGrey; + #route_table tbody.matched_paths tr { + background: none; + border-bottom: none; + } + + #route_table td { + padding: 4px 30px; } #path_search { -- cgit v1.2.3 From 14391d7e2e4ab36e16fb6916bdf2fdbf5878f27d Mon Sep 17 00:00:00 2001 From: Winston Date: Thu, 10 Apr 2014 22:28:22 +0800 Subject: Split search results into 'exact matches' and 'fuzzy matches'. - also refactored the javascript. --- .../middleware/templates/routes/_table.html.erb | 156 +++++++++++++-------- 1 file changed, 96 insertions(+), 60 deletions(-) (limited to 'actionpack/lib/action_dispatch') diff --git a/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb b/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb index 3d9e520eba..cce0d75af4 100644 --- a/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb +++ b/actionpack/lib/action_dispatch/middleware/templates/routes/_table.html.erb @@ -25,12 +25,14 @@ background: #f2f2f2; } - #route_table tbody.matched_paths { + #route_table tbody.exact_matches, + #route_table tbody.fuzzy_matches { background-color: LightGoldenRodYellow; border-bottom: solid 2px SlateGrey; } - #route_table tbody.matched_paths tr { + #route_table tbody.exact_matches tr, + #route_table tbody.fuzzy_matches tr { background: none; border-bottom: none; } @@ -63,13 +65,15 @@ <%# HTTP Verb %> <%# Path %> - <%= search_field(:path, nil, id: 'path_search', placeholder: "Path Match") %> + <%= search_field(:path, nil, id: 'search', placeholder: "Path Match") %> <%# Controller#action %> - + + + <%= yield %> @@ -77,6 +81,7 @@