* 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
* Remove `id` and `aria-labelledby` from all SVGs
* Update SVGLint configuration
* Remove `aria-labelledby` from documentation
* Remove `aria-labelledby` from website
because why not
* add new icons
- add icon for AT&T
- add icon for T-mobile
- add icon for Sprint
- add icon for Cricket
- add icon for Verizon
- add icon for Boost
- add icon for Framer
- add icon for Sketch
- Update _data/simple-icons.json with new icon data
* remove `<g>` from svg files
- remove `<g>` from svg files to address svglint error
* add apple pay
- Add apple pay
- Update simple-icons.json
* make changes per review
Changes were made based on review 9/9/18.
* fixed AT&T naming
* 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.
The sort button for colors now shows a range of reds when hovered,
whereas the sort button for alphabetic sorting just highlights the
letters when hovered.
Fixed the bug reported in #682 where grid items could overflow due to
long titles.
Solved the problem by allowing for wrapping in grid item titles, and
centering the contents of grid-items using flexbox. Also slightly
increased the size of grid-items.
Closes#661, as pointed out by @birjolaxew the return value by
getUrlParameter() will not be null but an empty string (which is a falsy
value) if no query is present, checking for truthiness should work
correctly.
Updated the search method from a simple partially-equals method to a
fuzzy search (also Approximate string matching) implementation.
My implementation is based on an implementation by @ wouter2203:
https://github.com/wouter2203/fuzzy-search
As discussed in #648, implemented JavaScript based support for a search
query in the URL. This feature does two things:
1. If you go to `www.simpleicons.org/?q=adobe`, the page will load with
a search query for the string `'adobe'`.
2. If you start searching on `www.simpleicons.org`, the url will be
updated with each keystroke to `www.simpleicons.org/?q=hellowor`.
Since `window.history.replaceState` is being used, this changing of the
URL does not mess with the browser history. I.e. if the user came from
www.google.com, started searching and press the back button they will
return to www.google.com immediately.
Initial implementation of making icons/text dark on a light background, as
suggested in issue #480. This implementation is based on the suggestion by
@pushrax, using the formula provided on
http://chilliant.blogspot.nl/2012/08/srgb-approximations-for-hlsl.html
Note that this implementation is not yet as desired, as it still darkens
some icons we might not want darkened and the dark color is currently full
black.
I also used this link in the process of making this:
http://springmeier.org/www/contrastcalculator/index.php
