Fixes sorting algorithm
This commit is contained in:
Dan Leech
parent
aa0216ce2c
commit
9f2dc52c2d
|
|
@ -217,7 +217,7 @@
|
|||
},
|
||||
{
|
||||
"title": "CSS3",
|
||||
"hex": "1572b6",
|
||||
"hex": "1572B6",
|
||||
"source": "http://www.w3.org/html/logo/"
|
||||
},
|
||||
{
|
||||
|
|
@ -622,7 +622,7 @@
|
|||
},
|
||||
{
|
||||
"title": "JSFiddle",
|
||||
"hex": "4679a4",
|
||||
"hex": "4679A4",
|
||||
"source": "http://doc.jsfiddle.net/meta/downloads.html"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,146 +1,112 @@
|
|||
{% assign sortableString = "" %}
|
||||
{% assign sortableStringGreys = "" %}
|
||||
{% assign iconsUnsortedString = "" %}
|
||||
{% assign greyscaleIconsUnsortedString = "" %}
|
||||
|
||||
{% for icon in site.data.simple-icons.icons %}
|
||||
{% assign title = icon.title %}
|
||||
|
||||
{% assign filename = icon.title | replace: "+", "plus" | replace: " ", "" | replace: ".", "" | replace: "-", "" | replace: "!", "" | replace: "’", "" | downcase %}
|
||||
{% assign hex = icon.hex %}
|
||||
|
||||
{% assign hexR1 = hex | slice: 0, 1 %}
|
||||
{% assign hexR2 = hex | slice: 1, 1 %}
|
||||
{% assign hexG1 = hex | slice: 2, 1 %}
|
||||
{% assign hexG2 = hex | slice: 3, 1 %}
|
||||
{% assign hexB1 = hex | slice: 4, 1 %}
|
||||
{% assign hexB2 = hex | slice: 5, 1 %}
|
||||
{% assign hex = icon.hex %}
|
||||
|
||||
{% capture hexString %}{{ hexR1 }},{{ hexR2 }},{{ hexG1 }},{{ hexG2 }},{{ hexB1 }},{{ hexB2 }}{% endcapture %}
|
||||
{% assign hexArray = hexString | split: "," %}
|
||||
|
||||
{% assign decString = "" %}
|
||||
|
||||
{% for hex in hexArray %}
|
||||
{% case hex %}
|
||||
{% when "0" %}
|
||||
{% assign decString = decString | append: "0" %}
|
||||
{% when "1" %}
|
||||
{% assign decString = decString | append: "1" %}
|
||||
{% when "2" %}
|
||||
{% assign decString = decString | append: "2" %}
|
||||
{% when "3" %}
|
||||
{% assign decString = decString | append: "3" %}
|
||||
{% when "4" %}
|
||||
{% assign decString = decString | append: "4" %}
|
||||
{% when "5" %}
|
||||
{% assign decString = decString | append: "5" %}
|
||||
{% when "6" %}
|
||||
{% assign decString = decString | append: "6" %}
|
||||
{% when "7" %}
|
||||
{% assign decString = decString | append: "7" %}
|
||||
{% when "8" %}
|
||||
{% assign decString = decString | append: "8" %}
|
||||
{% when "9" %}
|
||||
{% assign decString = decString | append: "9" %}
|
||||
{% assign hexCharacter1 = hex | slice: 0, 1 %}
|
||||
{% assign hexCharacter2 = hex | slice: 1, 1 %}
|
||||
{% assign hexCharacter3 = hex | slice: 2, 1 %}
|
||||
{% assign hexCharacter4 = hex | slice: 3, 1 %}
|
||||
{% assign hexCharacter5 = hex | slice: 4, 1 %}
|
||||
{% assign hexCharacter6 = hex | slice: 5, 1 %}
|
||||
{% capture hexCharacterString %}{{ hexCharacter1 }},{{ hexCharacter2 }},{{ hexCharacter3 }},{{ hexCharacter4 }},{{ hexCharacter5 }},{{ hexCharacter6 }}{% endcapture %}
|
||||
{% assign hexCharacterArray = hexCharacterString | split: "," %}
|
||||
{% assign rgbString = "" %}
|
||||
{% for hexCharacter in hexCharacterArray %}
|
||||
{% case hexCharacter %}
|
||||
{% when "A" %}
|
||||
{% assign decString = decString | append: "10" %}
|
||||
{% assign rgbString = rgbString | append: "10" %}
|
||||
{% when "B" %}
|
||||
{% assign decString = decString | append: "11" %}
|
||||
{% assign rgbString = rgbString | append: "11" %}
|
||||
{% when "C" %}
|
||||
{% assign decString = decString | append: "12" %}
|
||||
{% assign rgbString = rgbString | append: "12" %}
|
||||
{% when "D" %}
|
||||
{% assign decString = decString | append: "13" %}
|
||||
{% assign rgbString = rgbString | append: "13" %}
|
||||
{% when "E" %}
|
||||
{% assign decString = decString | append: "14" %}
|
||||
{% assign rgbString = rgbString | append: "14" %}
|
||||
{% when "F" %}
|
||||
{% assign decString = decString | append: "15" %}
|
||||
{% assign rgbString = rgbString | append: "15" %}
|
||||
{% else %}
|
||||
{% assign rgbString = rgbString | append: hexCharacter %}
|
||||
{% endcase %}
|
||||
{% unless forloop.last %}{% assign decString = decString | append: "," %}{% endunless %}
|
||||
{% 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 decArray = decString | split: "," %}
|
||||
|
||||
{% assign decR = decArray[0] | times: 16 | plus: decArray[1] | divided_by: 255.0 %}
|
||||
{% assign decG = decArray[2] | times: 16 | plus: decArray[3] | divided_by: 255.0 %}
|
||||
{% assign decB = decArray[4] | times: 16 | plus: decArray[5] | divided_by: 255.0 %}
|
||||
|
||||
{% if decR <= decG and decR <= decB %}
|
||||
{% assign decMin = decR %}
|
||||
{% assign rgbMax = 0.0 %}
|
||||
{% if rgbRed > rgbMax %}
|
||||
{% assign rgbMax = rgbRed %}
|
||||
{% endif %}
|
||||
{% if rgbGreen > rgbMax %}
|
||||
{% assign rgbMax = rgbGreen %}
|
||||
{% endif %}
|
||||
{% if rgbBlue > rgbMax %}
|
||||
{% assign rgbMax = rgbBlue %}
|
||||
{% endif %}
|
||||
|
||||
{% if decG < decR and decG <= decB %}
|
||||
{% assign decMin = decG %}
|
||||
{% assign rgbMin = 1.0 %}
|
||||
{% if rgbRed < rgbMin %}
|
||||
{% assign rgbMin = rgbRed %}
|
||||
{% endif %}
|
||||
{% if rgbGreen < rgbMin %}
|
||||
{% assign rgbMin = rgbGreen %}
|
||||
{% endif %}
|
||||
{% if rgbBlue < rgbMin %}
|
||||
{% assign rgbMin = rgbBlue %}
|
||||
{% endif %}
|
||||
|
||||
{% if decB < decR and decB < decG %}
|
||||
{% assign decMin = decB %}
|
||||
{% endif %}
|
||||
{% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
|
||||
|
||||
|
||||
|
||||
{% if decR >= decG and decR >= decB %}
|
||||
{% assign decMax = decR %}
|
||||
{% endif %}
|
||||
|
||||
{% if decG > decR and decG >= decB %}
|
||||
{% assign decMax = decG %}
|
||||
{% endif %}
|
||||
|
||||
{% if decB > decR and decB > decG %}
|
||||
{% assign decMax = decB %}
|
||||
{% endif %}
|
||||
|
||||
{% assign decDelta = decMax | minus: decMin | times: 1.0 %}
|
||||
|
||||
|
||||
|
||||
{% assign hslL = decMax | plus: decMin | times: 50.0 %}
|
||||
|
||||
|
||||
|
||||
{% if decMax == decMin %}
|
||||
{% assign hslH = 360.0 %}
|
||||
{% assign hslS = 0.0 %}
|
||||
{% assign rgbDelta = rgbMax | minus: rgbMin %}
|
||||
{% if rgbDelta == 0 %}
|
||||
{% assign hslHue = 0 %}
|
||||
{% assign hslSaturation = 0 %}
|
||||
{% else %}
|
||||
{% if hslL < 50 %}
|
||||
{% assign hslS = decMax | plus: decMin | times: 0.01 %}
|
||||
{% assign hslS = decDelta | divided_by: hslS %}
|
||||
{% assign hslHue = "Undefined" %}
|
||||
{% assign hslSaturation = "Undefined" %}
|
||||
|
||||
{% if hslLuminance < 0.5 %}
|
||||
{% assign rgbMaxPlusMin = rgbMax | plus: rgbMin %}
|
||||
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbMaxPlusMin %}
|
||||
{% else %}
|
||||
{% assign hslS = 2 | minus: decMax | minus: decMin | times: 1.0 %}
|
||||
{% assign hslS = 100 | times: decDelta | divided_by: hslS %}
|
||||
{% assign rgbTwoMinusMaxMinusMin = 2 | minus: rgbMax | minus: rgbMin %}
|
||||
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbTwoMinusMaxMinusMin %}
|
||||
{% endif %}
|
||||
{% if decMax == decR %}
|
||||
{% assign hslH = decG | minus: decB | divided_by: decDelta | times: 60.0 %}
|
||||
{% if hslH < 0 %}
|
||||
{% assign hslH = hslH | plus: 360.0 %}
|
||||
{% endif %}
|
||||
{% else if decMax == decG %}
|
||||
{% assign hslH = decB | minus: decR | divided_by: decDelta | plus: 2.0 | times: 60.0 %}
|
||||
|
||||
{% if rgbMax == rgbRed %}
|
||||
{% assign hslHue = rgbGreen | minus: rgbBlue | divided_by: rgbDelta | times: 60.0 | modulo: 360.0 %}
|
||||
{% elsif rgbMax == rgbGreen %}
|
||||
{% assign hslHue = rgbBlue | minus: rgbRed | divided_by: rgbDelta | plus: 2.0 | times: 60.0 | modulo: 360.0 %}
|
||||
{% else %}
|
||||
{% assign hslH = decR | minus: decG | divided_by: decDelta | plus: 4.0 | times: 60.0 %}
|
||||
{% assign hslHue = rgbRed | minus: rgbGreen | divided_by: rgbDelta | plus: 4.0 | times: 60.0 | modulo: 360.0 %}
|
||||
{% endif %}
|
||||
|
||||
{% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% assign hslH = hslH | plus: 90 | modulo: 360 %}
|
||||
|
||||
{% assign padding = "" %}
|
||||
{% if hslH < 100 %}
|
||||
{% assign padding = "0" %}
|
||||
{% endif %}
|
||||
{% if hslH < 10 %}
|
||||
{% assign padding = "00" %}
|
||||
{% endif %}
|
||||
|
||||
{% if hslS < 25 %}
|
||||
{% capture sortableStringGreys %}{{ sortableStringGreys }}|{{ hslL }}${{ padding }}{{ hslH }}${{ hslS }}${{ hex }}${{ icon.title }}{% endcapture %}
|
||||
{% if hslSaturation < 10 %}
|
||||
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
|
||||
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
|
||||
{% else %}
|
||||
{% capture sortableString %}{{ sortableString }}|{{ padding }}{{ hslH }}${{ hslS }}${{ hslL }}${{ hex }}${{ icon.title }}{% endcapture %}
|
||||
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
|
||||
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% assign sortableString = sortableString | replace_first: "|", "" %}
|
||||
{% assign sortableArray = sortableString | split: "|" %}
|
||||
{% assign sortableArray = sortableArray | sort %}
|
||||
{% assign sortableArrayGreys = sortableStringGreys | split: "|" %}
|
||||
{% assign sortableArrayGreys = sortableArrayGreys | sort | reverse %}
|
||||
{% assign iconsArray = iconsUnsortedString | split: ";" %}
|
||||
{% assign iconsArray = iconsArray | sort %}
|
||||
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" %}
|
||||
{% assign greyscaleIconsArray = greyscaleIconsArray | sort | reverse %}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en-gb">
|
||||
|
|
@ -173,26 +139,28 @@
|
|||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% for entry in sortableArray %}
|
||||
{% assign entryArray = entry | split: "$" %}
|
||||
<li class="grid-item" style="background-color:#{{ entryArray[3] }}">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24">
|
||||
<h2 class="grid-item__title">{{ entryArray[1] }}</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#{{ entryArray[3] }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for entry in sortableArrayGreys %}
|
||||
{% assign entryArray = entry | split: "$" %}
|
||||
<li class="grid-item" style="background-color:#{{ entryArray[3] }}">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24">
|
||||
<h2 class="grid-item__title">{{ entryArray[4] }}</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#{{ entryArray[3] }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for icon in iconsArray %}
|
||||
{% assign iconArray = icon | split: "," %}
|
||||
<li class="grid-item" style="background-color: #{{ iconArray[4] }}">
|
||||
<a class="grid-item__link" href="#">
|
||||
{% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
|
||||
{% include_relative {{ filePath }} %}
|
||||
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% for icon in greyscaleIconsArray %}
|
||||
{% assign iconArray = icon | split: "," %}
|
||||
<li class="grid-item" style="background-color: #{{ iconArray[4] }}">
|
||||
<a class="grid-item__link" href="#">
|
||||
{% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
|
||||
{% include_relative {{ filePath }} %}
|
||||
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<!-- <li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem,1fr));
|
||||
grid-auto-rows: 6rem;
|
||||
grid-column-gap: 0.75rem;
|
||||
grid-row-gap: 0.75rem;
|
||||
grid-column-gap: 0.375rem;
|
||||
grid-row-gap: 0.375rem;
|
||||
grid-auto-flow: dense;
|
||||
list-style: none;
|
||||
margin: 1.5rem;
|
||||
|
|
@ -16,6 +16,13 @@
|
|||
.grid-item {
|
||||
background-color: #757575;
|
||||
text-align: center;
|
||||
svg {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
path, rect, circle {
|
||||
fill: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item--ad {
|
||||
|
|
@ -39,7 +46,8 @@
|
|||
}
|
||||
|
||||
.grid-item__image {
|
||||
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.grid-item__title {
|
||||
|
|
|
|||
Loading…
Reference in a new issue