From c6399495249b3c6010d9bbe22ca52bf4db2ee3f3 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Wed, 3 Jan 2018 18:33:25 +0100 Subject: [PATCH] Extract CSS and JavaScript from HTML 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. --- index.html | 550 ++----------------------------------------------- site_script.js | 156 ++++++++++++++ stylesheet.css | 357 ++++++++++++++++++++++++++++++++ 3 files changed, 532 insertions(+), 531 deletions(-) create mode 100644 site_script.js create mode 100644 stylesheet.css diff --git a/index.html b/index.html index f5cf9e6e..87a61365 100644 --- a/index.html +++ b/index.html @@ -116,9 +116,20 @@ {% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %} {% endif %} {% endfor %} + {% assign iconsArray = iconsUnsortedString | split: ";" | sort %} {% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse %} +{% assign allIconNames = "" %} +{% for icon in iconsArray %} + {% assign iconArray = icon | split: "," %} + {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[3] }}",{% endcapture %} +{% endfor %} +{% for icon in greyscaleIconsArray %} + {% assign iconArray = icon | split: "," %} + {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[1] }}"{% unless forloop.last %},{% endunless %}{% endcapture %} +{% endfor %} + @@ -145,6 +156,7 @@ + - + @@ -568,177 +227,6 @@ Use GitHub for requests, corrections and contributions.

Share this on Twitter! - {% assign allIconNames = "" %} - {% for icon in iconsArray %} - {% assign iconArray = icon | split: "," %} - {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[3] }}",{% endcapture %} - {% endfor %} - {% for icon in greyscaleIconsArray %} - {% assign iconArray = icon | split: "," %} - {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[1] }}"{% unless forloop.last %},{% endunless %}{% endcapture %} - {% endfor %} - + diff --git a/site_script.js b/site_script.js new file mode 100644 index 00000000..852df751 --- /dev/null +++ b/site_script.js @@ -0,0 +1,156 @@ +(function(document) { + var queryParameter = 'q', + $grid = document.querySelector('.grid'), + $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'), + $search = document.querySelector('.search'), + $searchClose = $search.querySelector('.search__close'), + $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'); + $searchInput.removeAttribute('disabled'); + + // include a modified debounce underscorejs helper function. + // see + // - http://underscorejs.org/docs/underscore.html#section-83 + // - http://underscorejs.org/#debounce + function debounce(func, wait, immediate) { + var timeout, args, context, timestamp, result; + + var later = function() { + var last = +new Date - timestamp; + + if (last < wait && last >= 0) { + timeout = setTimeout(later, wait - last); + } else { + timeout = null; + if (!immediate) { + result = func.apply(context, args); + if (!timeout) context = args = null; + } + } + }; + + return function() { + context = this; + args = arguments; + timestamp = +new Date; + var callNow = immediate && !timeout; + if (!timeout) timeout = setTimeout(later, wait); + if (callNow) { + result = func.apply(context, args); + context = args = null; + } + + return result; + }; + } + + // Get any parameter from the URL's search section (location.search). + // see + // - https://davidwalsh.name/query-string-javascript + // - https://github.com/WebReflection/url-search-params + function getUrlParameter(parameter) { + name = parameter.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); + var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); + var results = regex.exec(location.search); + return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); + } + + function search(value) { + var hiddenCounter = 0, + query = normalizeSearchTerm(value); + + icons.map(function(icon, iconIndex) { + var letters = query.split(''), + indexes = [], + index = 0; + + if (icon === query) { + return {element: $icons[iconIndex], score: 1}; + } + + for (var i = 0; i < letters.length; i++) { + var letter = letters[i]; + index = icon.indexOf(letter, index); + + if (index === -1) { + $icons[iconIndex].classList.add('hidden'); + return null; + } + + indexes.push(index); + index++; + } + + return { + element: $icons[iconIndex], + score: indexes.reduce(function(a, b) { + return a + b; + }, 2) + }; + }).filter(function(item) { + return item !== null; + }).sort(function(a, b) { + return a.score - b.score; + }).forEach(function(item, index) { + item.element.classList.remove('hidden'); + + if (query !== '') { + // Order according to relevance (i.e. score) if there is a query + item.element.style.order = index; + } else { + // Use color-based order if there is no query + item.element.style.removeProperty('order'); + } + }); + + $grid.classList.toggle('search__empty', hiddenCounter == icons.length); + } + + document.addEventListener('DOMContentLoaded', function() { + // Load search query if present + var query = getUrlParameter(queryParameter); + if (query) { + $search.classList.add('search--active'); + $searchInput.value = query; + search(query); + } + }); + $search.addEventListener('input', debounce(function(e) { + e.preventDefault(); + + var value = e.target.value; + if (value) { + $search.classList.add('search--active'); + window.history.replaceState(null, '', '?' + queryParameter + '=' + value); + } else { + $search.classList.remove('search--active'); + window.history.replaceState(null, '', '/'); + } + search(value); + }, 50), false); + $searchClose.addEventListener('click', function(e) { + e.stopPropagation(); + + $searchInput.value = ''; + $search.classList.remove('search--active'); + 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 ); diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 00000000..d97e8971 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,357 @@ +* { + box-sizing: border-box; +} + +:root { + font-size: 100%; + height: 100%; +} + +a { + text-decoration: none; +} + +abbr { + text-decoration: none; +} + +body { + background-color: #FFFFFF; + display: flex; + flex-direction: column; + color: #263238; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 0.875rem; + height: 100%; + line-height: 1.5rem; + margin: 0; +} + +svg { + fill: currentColor; + height: 1.5rem; + width: 1.5rem; +} + +#carbonads { + height: 100%; + width: 100%; +} +#carbonads a { + color: #263238; +} +#carbonads > span { + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; +} + +.carbon-img { + display: block; + padding: 1rem 1rem 0.5rem; +} + +.carbon-text { + display: block; + font-size: 0.75rem; + line-height: 1rem; + margin: 0 auto; + max-width: 15rem; +} + +.carbon-poweredby { + font-size: 0.625rem; + font-weight: 700; + line-height: 1.5rem; + opacity: 0.25; + text-transform: uppercase; +} + +.footer { + background-color: #EEE; + margin-top: auto; + padding: 1.5rem; +} +@media (min-width: 45rem) { + .footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 3rem; + } +} +.footer a { + color: #263238; + text-decoration: underline; +} +.footer p { + margin: 0; + opacity: 0.5; +} +a.share-button { + background-color: #1DA1F2; + border-radius: 0.125rem; + color: #FFF; + display: block; + margin: 0.75rem 0 0; + padding: 0.75rem 1.5rem; + text-align: center; + text-decoration: none; +} +@media (min-width: 45rem) { + a.share-button { + margin: 0; + } +} + +.hero { + font-size: 1.5rem; + line-height: 2rem; + margin: 0; + padding: 3rem 1.5rem 1.5rem; + text-align: center; +} +@media (min-width: 45rem) { + .hero { + padding: 4.5rem 3rem 1.5rem; + } +} + +.search { + display: flex; + align-items: center; + margin: 1rem 1.5rem; + text-align: center; +} +@media (min-width: 45rem) { + .search { + margin: 1rem 3rem; + text-align: left; + } +} + +.search .search__wrapper { + display: inline-block; + position: relative; +} +.search .search__close { + display: none; + font-size: 1rem; + padding: 6px 12px; + position: absolute; + right: 0; + top: 1px; +} +.search .search__close span { + cursor: pointer; +} + +.search input { + color: #333; + font-size: 1rem; + padding: 6px 12px; +} +@media (min-width: 45rem) { + .search input { + width: 250px; + } +} + +.search--active .search__close { + display: block; +} +.search--active input { + 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; + list-style: none; + margin: 1.5rem; + margin-top: 0; + padding: 0; +} +@media (min-width: 45rem) { + .grid { + margin: 3rem; + margin-top: 0; + } +} + +.grid.search__empty:after { + content: 'No matching icons found.'; + font-size: 1.25em; + line-height: 1.5em; + text-align: center; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +@supports (display: grid) { + .grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); + grid-auto-rows: min-content; + grid-column-gap: 0.375rem; + grid-row-gap: 0.375rem; + grid-auto-flow: dense; + } + .grid.search__empty:after { + grid-column: 1/span 2; + } + + @media (min-width: 30.75rem) { + .grid.search__empty:after { + grid-column: 1/-3; + } + } +} + +.grid-item { + background-color: #757575; + display: flex; + flex-direction: column; + justify-content: center; + padding: 1rem; + text-align: center; +} +.grid-item--light { + color: #FFF; +} +.grid-item--dark { + color: #222; +} +.grid-item__link { + color: inherit; +} +@supports not (display: grid) { + .grid-item { + border: 0.1875rem solid #FFF; + padding: 0 0 0.75rem; + width: 20%; + } +} + +.grid-item--ad { + background-color: #EEE; + grid-column: -2 / -1; + grid-row-end: span 2; + height: auto; +} +@media (min-width: 21.75rem) { + .grid-item--ad { + grid-column: -3 / -1; + } +} +@supports not (display: grid) { + .grid-item--ad { + width: 100%; + } +} + +.grid-item__link { + display: block; + text-align: center; + width: 100%; +} + +.grid-item__image { + height: 1.5rem; + width: 1.5rem; +} + +.grid-item__title { + font-size: 0.75rem; + font-weight: 400; + line-height: 1rem; + margin: 0; +} + +.grid-item__subtitle { + font-size: 0.75rem; + line-height: 1rem; + margin: 0; + opacity: 0.5; +} + +.navbar { + background-color: #263238; +} + +.navbar__nav { + display: flex; + list-style: none; + margin: 0; + padding: 0; +} +@media (min-width: 45rem) { + .navbar__nav { + padding: 0 1.5rem; + } +} + +.navbar__nav-item a { + color: #FFF; + display: block; + opacity: 0.5; + padding: 1.5rem 0.375rem; +} +.navbar__nav-item a:focus, .navbar__nav-item a:hover { + opacity: 1; +} +.navbar__nav-item:last-child a { + padding: 1.5rem 1.5rem 1.5rem 0.375rem; +} + +.navbar__nav-item--home { + flex-grow: 1; +} +.navbar__nav-item--home a { + opacity: 1; + padding: 1.5rem 0 1.5rem 1.5rem; +} + +.hidden { + display: none; +}