{{ iconCount }} Free SVG icons for popular brands

diff --git a/site_script.js b/site_script.js index be7fb92c..0864a5c1 100644 --- a/site_script.js +++ b/site_script.js @@ -191,4 +191,58 @@ $orderByRelevance.addEventListener('click', function() { selectOrdering($orderByRelevance); }); + + /* Redesign */ + + var $banner = document.querySelector('.redesign-banner'), + $redirectAutomatically = document.getElementById('redirect-to-redesign'), + $hideOnce = document.getElementById('hide-feedback-request-once'), + $hideAlways = document.getElementById('hide-feedback-request'); + + var redesignUrl = 'https://simple-icons.github.io/simple-icons-website/', + hideBannerAlwaysIdentifier = 'hide-banner', + redirectAutomaticallyIdentifier = 'redirect-to-redesign'; + + $redirectAutomatically.addEventListener('click', function() { + var redirect = true; + if (localStorage) { + var currentVal = localStorage.getItem(redirectAutomaticallyIdentifier); + if (currentVal === 'true') { + redirect = false; + } + + localStorage.setItem(redirectAutomaticallyIdentifier, redirect); + } + + if (redirect) { + window.location.replace(redesignUrl); + } else { + $redirectAutomatically.innerHTML = "Redirect automatically"; + } + }); + $hideOnce.addEventListener('click', function () { + $banner.classList.add('hidden'); + }); + $hideAlways.addEventListener('click', function () { + if (localStorage) { + localStorage.setItem(hideBannerAlwaysIdentifier, true); + } + + $banner.classList.add('hidden'); + }); + + if (localStorage) { + var redirect = localStorage.getItem(redirectAutomaticallyIdentifier); + if (redirect === 'true') { + $redirectAutomatically.innerHTML = "Disable redirect"; + if (document.referrer !== redesignUrl) { + window.location.replace(redesignUrl); + } + } + + var hide = localStorage.getItem(hideBannerAlwaysIdentifier); + if (hide) { + $banner.classList.add('hidden'); + } + } })( document ); diff --git a/stylesheet.css b/stylesheet.css index d3f54876..b6bc2227 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -351,6 +351,31 @@ a.share-button { padding: 1.5rem 0 1.5rem 1.5rem; } +.redesign-banner { + background-color: #565f63; + color: #FFF; + margin: 0; + padding: 0.5rem 1.5rem; +} +.redesign-banner a { + color: #0096ee; +} +.redesign-banner a:focus, .redesign-banner a:hover, +.redesign-banner button:focus, .redesign-banner button:hover { + text-decoration: underline; +} +.redesign-banner span { + float: right +} +.redesign-banner button { + border: none; + background-color: transparent; + color: #0096ee; + cursor: pointer; + margin: 0; + padding: 0; +} + .hidden { display: none; }