beenull/simple-icons
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #726 from ericcornelissen/sort-alphabetically

Browse source 
Sort alphabetically
This commit is contained in:
Johan Fagerberg 2017-12-23 17:20:24 +01:00 committed by GitHub
parent 5f6f80256e 23e3aab6ca
commit 5effe9fd71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
index.html
View file

@ -36,11 +36,13 @@
{% endcase %}
{% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %}
{% endfor %}
{% assign rgbArray = rgbString | split: "," %}
{% assign rgbRed = rgbArray[0] | times: 16 | plus: rgbArray[1] | divided_by: 255.0 | round: 2 %}
{% assign rgbGreen = rgbArray[2] | times: 16 | plus: rgbArray[3] | divided_by: 255.0 | round: 2 %}
{% assign rgbBlue = rgbArray[4] | times: 16 | plus: rgbArray[5] | divided_by: 255.0 | round: 2 %}
{% assign rgbMax = 0.0 %}
{% if rgbRed > rgbMax %}
{% assign rgbMax = rgbRed %}
{% endif %}
@ -105,18 +107,17 @@
{% endif %}
{% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %}
{% endif %}
{% if hslSaturation < 10 %}
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% else %}
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% endif %}
{% endfor %}
{% assign iconsArray = iconsUnsortedString | split: ";" %}
{% assign iconsArray = iconsArray | sort %}
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %}
{% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %}
{% assign iconsArray = iconsUnsortedString | split: ";" | sort %}
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse %}
<!doctype html>
<html lang="en-gb">
@ -275,6 +276,8 @@
}
.search {
display: flex;
align-items: center;
margin: 1rem 1.5rem;
text-align: center;
}
@ -319,6 +322,43 @@
padding-right: 32px;
}
.sort-btn {
cursor: pointer;
margin-left: .5rem;
opacity: .5;
}
.sort-btn.active {
opacity: 1;
}
.sort-btn:first-of-type {
margin-left: 1rem;
}
.sort-btn:hover {
opacity: 1;
}
.sort-btn:hover path:first-of-type {
opacity: 0.8;
}
#sort-color:hover path:nth-of-type(2) {
fill: #E57373;
}
#sort-color:hover path:nth-of-type(3) {
fill: #F44336;
}
#sort-color:hover path:nth-of-type(4) {
fill: #D32F2F;
}
#sort-color:hover path:nth-of-type(5) {
fill: #B71C1C;
}
#sort-alphabetically:hover path:nth-of-type(2),
#sort-alphabetically:hover path:nth-of-type(3) {
opacity: 1;
}
.grid {
display: flex;
flex-wrap: wrap;
@ -491,6 +531,9 @@
<div class="search__close"><span>&times;</span></div>
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
</div>
<svg id="sort-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort by color</title><path d="M9.219 18.857H6.648V.429A.414.414 0 0 0 6.219 0H3.648a.418.418 0 0 0-.308.121.418.418 0 0 0-.121.308v18.428H.648a.4.4 0 0 0-.402.268c-.071.17-.04.326.094.469l4.286 4.287c.098.08.2.119.308.119a.447.447 0 0 0 .308-.119l4.272-4.273a.506.506 0 0 0 .134-.32.417.417 0 0 0-.429-.431z"/><path d="M12.219 3.429h3.429A.412.412 0 0 0 16.076 3V.429A.416.416 0 0 0 15.648 0h-3.429a.414.414 0 0 0-.429.429V3a.414.414 0 0 0 .429.429z"/><path d="M12.219 10.286h6a.42.42 0 0 0 .309-.12.42.42 0 0 0 .121-.308V7.286a.418.418 0 0 0-.121-.308.417.417 0 0 0-.309-.121h-6a.414.414 0 0 0-.308.121.417.417 0 0 0-.12.308v2.572c0 .125.04.228.12.308a.42.42 0 0 0 .308.12z"/><path d="M12.219 17.143h8.572c.125 0 .229-.039.309-.119s.119-.184.119-.309v-2.572c0-.125-.039-.227-.119-.307s-.184-.121-.309-.121h-8.572a.418.418 0 0 0-.308.121.415.415 0 0 0-.12.307v2.572c0 .125.04.229.12.309.081.08.183.119.308.119z"/><path d="M23.67 20.693a.408.408 0 0 0-.307-.121H12.219a.416.416 0 0 0-.429.428v2.572c0 .125.04.227.121.309a.42.42 0 0 0 .308.119h11.144a.414.414 0 0 0 .307-.119.424.424 0 0 0 .121-.309V21a.416.416 0 0 0-.121-.307z"/></svg>
<svg id="sort-alphabetically" class="sort-btn" aria-labelledby="sort-alphabetically" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-alphabetically">Sort alphabetically</title><path d="M10.096 18.857H7.525V.429A.414.414 0 0 0 7.096 0H4.525a.414.414 0 0 0-.429.429v18.429H1.525c-.196 0-.331.089-.402.268-.072.17-.04.326.094.469l4.286 4.286c.098.079.2.119.308.119.116 0 .219-.04.308-.12l4.272-4.272a.506.506 0 0 0 .134-.321.414.414 0 0 0-.429-.43z"/><path d="M20.102 22.474H16.78c-.188 0-.322.009-.402.026l-.188.026V22.5l.148-.147c.133-.16.227-.276.281-.348l4.941-7.099v-1.191h-7.594v3.066h1.607v-1.54h3.107c.16 0 .295-.014.4-.04a.856.856 0 0 0 .102-.007c.039-.004.068-.007.086-.007v.04l-.146.121c-.08.08-.176.2-.281.361L13.9 22.795V24h7.82v-3.12h-1.619v1.594h.001z"/><path d="M21.977 8.866L18.895 0h-2.168l-3.082 8.866h-.936v1.419h3.842V8.866h-1.004l.631-1.929h3.254l.629 1.929h-1.004v1.419h3.857V8.866h-.937zm-5.358-3.402l.977-2.92c.037-.107.07-.236.102-.388s.047-.232.047-.241l.039-.268h.055c0 .036.008.125.025.268l.162.629.963 2.92h-2.37z"/></svg>
</div>
<ul class="grid">
<li class="grid-item grid-item--ad">
@ -498,7 +541,7 @@
</li>
{% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %}
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}" order="{{ iconArray[7] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
{% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
@ -509,7 +552,7 @@
{% endfor %}
{% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %}
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}" order="{{ iconArray[7] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
{% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
@ -542,7 +585,9 @@
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
$search = document.querySelector('.search'),
$searchClose = $search.querySelector('.search__close'),
$searchInput = $search.querySelector('input');
$searchInput = $search.querySelector('input'),
$sortColor = document.getElementById('sort-color'),
$sortAlpha = document.getElementById('sort-alphabetically');
// Remove the "disabled" attribute from the search input
$searchInput.setAttribute('title', 'Search Simple Icons');
@ -680,6 +725,19 @@
window.history.replaceState(null, '', '/');
search('');
}, false);
$sortColor.addEventListener('click', function() {
$icons.forEach(icon => { icon.style.order = null; });
$sortColor.classList.add('active');
$sortAlpha.classList.remove('active');
});
$sortAlpha.addEventListener('click', function() {
$icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
$sortAlpha.classList.add('active');
$sortColor.classList.remove('active');
});
})( document );
</script>
</body>