* Improve performance of search on website
By reducing the number of times a search query loops over all icons or
all icons that match the search query (from 3 to 1 and 2 to 0
respectively) the search on simpleicons.org should now be noticeably
faster (if it was slow before). Especially in conjunction with #1169.
This was achieved by utilizing CSS (which operates faster then plain
JavaScript) to do most of the heavy lifting. A class on <body> now
dictates the order of the icons rather then a JavaScript for-loop (found
in the removed function `orderIcons`).
It was also achieved by more cleverly utilizing the fuzzy search logic
and recognizing that the CSS `order` property also works if number are
not consecutive. Less relevant numbers will have a higher value assigned
by fuzzy search, which is what the `order`-value of the icon will
become, removing the need for sorting and an additional loop.
Some resources that helped me:
- https://css-tricks.com/css-attr-function-got-nothin-custom-properties/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
Specifically the "Values in JavaScript" section
* * *
One unrelated change in stylesheet.css where 2 separate rulesets for
.grid-item__link have been merged.
* Simplify script with regard to button states
* Reduce complexity of `previousQuery` variables
* Disable sort buttons when there is a search query
* Restore sorting order when search query is removed
* Update comment
* Add button to sort by relevance (non-functional)
As discussed in #949. Relatedly also removed the functionality that
disabled the "sort by color" and "sort alphabetically" buttons (and
related styling).
* Update sorting behaviour
Refactored to sorting algorithms into a single function and updated
relevant code. The "sort by relenvance" button is now functional, and is
automatically actived when the user starts searching, but not when
updating their search query.
* Restore sorting ordre when search query is removed
* Only sort when needed
* Refactor activing a sorting button/selecting a soring order
* Renaming variables and functions
* Add colors to "order by relevance" button on hover
Put all of the CSS and most of the JavaScript into their own file. The
JavaScript that is left in HTML depends on some Liquid logic present in
the HTML.
