com web/php: Adding collapsible functionality to the search results as the menu goes way below the screen. Adding some CSS classes to the markup and
thus improving CSS/JS selector readability and performance.: images/search-sprites.png js/search.js styles/theme-base.css

Commit: e2b48d81c52778f6c475b53fb1e6c3f8edad6ec9 Author: Paul Dragoonis <dragoonis@gmail.com> Sun, 1 Jun 2014 20:22:58 +0100 Parents: 0bbfd672820149adf3ccaa1445efb2d331d4ed14 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=e2b48d81c52778f6c475b53fb1e6c3f8edad6ec9 Log: Adding collapsible functionality to the search results as the menu goes way below the screen. Adding some CSS classes to the markup and thus improving CSS/JS selector readability and performance. Changed paths: A images/search-sprites.png M js/search.js M styles/theme-base.css Diff: diff --git a/images/search-sprites.png b/images/search-sprites.png new file mode 100644 index 0000000..23a626b Binary files /dev/null and b/images/search-sprites.png differ diff --git a/js/search.js b/js/search.js index 4ceaf20..ca18831 100644 --- a/js/search.js +++ b/js/search.js @@ -280,7 +280,7 @@ return { name: name, local: backend.toTypeaheadArray(), - header: "<h3>" + backend.label + "</h3>", + header: '<h3 class="result-heading"><span class="collapsible"></span>' + backend.label + '</h3>', limit: options.limit, valueKey: "name", engine: Hogan, @@ -293,11 +293,28 @@ var results = {}; // Set up the typeahead and the various listeners we need. - $(element).typeahead(typeaheadOptions).on("typeahead:selected", function (_, item) { - /* If the user has selected an autocomplete item and hits - * enter, we should take them straight to the page. */ + var searchTypeahead = $(element).typeahead(typeaheadOptions); + + // Delegate click events to result-heading collapsible icons, and trigger the accordion action + $('.tt-dropdown-menu').delegate('.result-heading .collapsible', 'click', function() { + var el = $(this), suggestions = el.parent().parent().find('.tt-suggestions'); + suggestions.stop(); + if(!el.hasClass('closed')) { + suggestions.slideUp(); + el.addClass('closed'); + } else { + suggestions.slideDown(); + el.removeClass('closed'); + } + + }); + + // If the user has selected an autocomplete item and hits enter, we should take them straight to the page. + searchTypeahead.on("typeahead:selected", function (_, item) { window.location = "/manual/" + options.language + "/" + item.id; - }).on("keyup", (function () { + }); + + searchTypeahead.on("keyup", (function () { /* typeahead.js doesn't give us a reliable event for the * dropdown entries having been updated, so we'll hook into the * input element's keyup instead. The aim here is to put in @@ -313,18 +330,26 @@ * when the user has typed something into the search box after * typeahead.js has done its thing. */ return function () { - // Grab what the user entered. - var pattern = $(element).val(); - // Add result totals to each section heading. $.each(results, function (name, numResults) { - var container = $(".tt-dataset-" + name, $(element).parent()); - var results = $("<span class='result-count' />").text(numResults); + var container = $(".tt-dataset-" + name, $(element).parent()), + resultHeading = container.find('.result-heading'), + resultCount = container.find('.result-count'); + + // Does a result count already exist in this resultHeading? + if(resultCount.length == 0) { + var results = $("<span class='result-count' />").text(numResults); + resultHeading.append(results); + } else { + resultCount.text(numResults); + } + - $("h3 .result-count", container).remove(); - $("h3", container).append(results); }); + // Grab what the user entered. + var pattern = $(element).val(); + /* Add a global search option. Note that, as above, the * link is only displayed if more than 2 characters have * been entered: this is due to our search functionality diff --git a/styles/theme-base.css b/styles/theme-base.css index d3366a2..0a39bd0 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -1011,9 +1011,8 @@ fieldset { z-index: 1!important; } -.tt-dropdown-menu h3 { +.tt-dropdown-menu .result-heading { font-size:1.1rem; - background: rgb(136, 146, 191); border-bottom: 2px solid #4F5B93; color: #E2E4EF; text-shadow:0 -1px 0 rgba(0,0,0,.25); @@ -1021,10 +1020,31 @@ fieldset { margin: 0; padding: 0.1rem 0.3rem; line-height: 2.5rem; + background-color: rgb(136, 146, 191); +} + +.tt-dropdown-menu .result-heading .collapsible { + background: url(../images/search-sprites.png) no-repeat left center; + background-position: 0 -15px; + width: 30px; + height: 13px; + display: inline-block; +} + +.tt-dropdown-menu .result-heading .collapsible:hover { + cursor: pointer; +} + +.tt-dropdown-menu .result-heading .collapsible.closed { + background-position: 0 -2px; +} + +.tt-dropdown-menu .result-heading::after { + border-bottom: none; } .tt-dropdown-menu .result-count { - display: block; + display: inline-block; float: right; opacity: 0.6; text-align: right;