diff --git a/css/main.css b/css/main.css index 0e62e325..a930f796 100644 --- a/css/main.css +++ b/css/main.css @@ -26,7 +26,7 @@ background-image: url("data:image/svg+xml;utf8,"); } -/* Icons list */ +/* Icons list: Grid */ .icons { margin-right: -10px; margin-left: -10px; @@ -39,6 +39,22 @@ padding-left: 10px; margin-bottom: 20px; } + +/* Icons list: Format */ +.icon .container-img { + flex: 0 0 32px; + max-width: 32px; + margin-right: .75rem; +} +.icon .name { + line-height: 1.2rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.icon .symbol { + display: block; +} .icon a, .icon span.placeholder { border-radius: .3rem; @@ -47,8 +63,10 @@ transition: all .1s ease-in-out; } .icon a img { - width: 24px; + width: 32px; height: auto; + display: block; + float: left; } /* Icons list: Hover state */ @@ -56,14 +74,14 @@ background-color: #FFF !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1); - /* transform: scale(1.1); */ text-decoration: none; } -.icon a:hover::after { + +.icon a:hover .row::after { content: " "; width: 18px; - height: 24px; - display: block; + height: 18px; + margin-right: 1rem; float: right; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; diff --git a/css/main.min.css b/css/main.min.css index fd81ca85..02d4cd98 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.form-control.search{margin:0 auto;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:1rem center;background-size:24px auto;padding-left:3rem;padding-right:2rem;border-radius:2rem}.close-search{width:18px;height:24px;display:block;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center center;background-size:100% auto;float:right;margin-top:-36px;margin-right:20px;cursor:pointer}.close-search:hover{background-image:url("data:image/svg+xml;utf8,")}.icons{margin-right:-10px;margin-left:-10px}.col-6,.col-lg-3,.col-sm-4,.col-xl-2{padding-right:10px;padding-left:10px;margin-bottom:20px}.icon a,.icon span.placeholder{border-radius:.3rem;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.icon a img{width:24px;height:auto}.icon a:hover{background-color:#fff!important;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.1);text-decoration:none}.icon a:hover::after{content:" ";width:18px;height:24px;display:block;float:right;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center center;background-size:100% auto}.placeholder{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:backgroundLoading;animation-timing-function:linear;background:linear-gradient(to right,#f8f9fa 8%,#fff 18%,#f8f9fa 33%);background-size:500px 500px}@keyframes backgroundLoading{0%{background-position:-500px 0}100%{background-position:500px 0}}.modal-backdrop.show{opacity:.66}.modal-body{padding:0;border-radius:.3rem!important}.info-icon{width:100%}.info-icon td,.info-icon th{padding:1rem}.info-icon thead th{border-top:none;border-bottom-width:1px}.info-icon .variant-white{background-color:#343a40!important}.info-icon .format-128 img,.info-icon .format-svg img{width:100%;height:auto}.info-icon .format-svg img{max-width:48px}.info-icon .format-128 img{max-width:128px}.info-icon .format-32-2x img{width:32px;height:auto} \ No newline at end of file +.form-control.search{margin:0 auto;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:1rem center;background-size:24px auto;padding-left:3rem;padding-right:2rem;border-radius:2rem}.close-search{width:18px;height:24px;display:block;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center center;background-size:100% auto;float:right;margin-top:-36px;margin-right:20px;cursor:pointer}.close-search:hover{background-image:url("data:image/svg+xml;utf8,")}.icons{margin-right:-10px;margin-left:-10px}.col-6,.col-lg-3,.col-sm-4,.col-xl-2{padding-right:10px;padding-left:10px;margin-bottom:20px}.icon .container-img{flex:0 0 32px;max-width:32px;margin-right:.75rem}.icon .name{line-height:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon .symbol{display:block}.icon a,.icon span.placeholder{border-radius:.3rem;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.icon a img{width:32px;height:auto;display:block;float:left}.icon a:hover{background-color:#fff!important;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.1);text-decoration:none}.icon a:hover .row::after{content:" ";width:18px;height:18px;margin-right:1rem;float:right;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center center;background-size:100% auto}.placeholder{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:backgroundLoading;animation-timing-function:linear;background:linear-gradient(to right,#f8f9fa 8%,#fff 18%,#f8f9fa 33%);background-size:500px 500px}@keyframes backgroundLoading{0%{background-position:-500px 0}100%{background-position:500px 0}}.modal-backdrop.show{opacity:.66}.modal-body{padding:0;border-radius:.3rem!important}.info-icon{width:100%}.info-icon td,.info-icon th{padding:1rem}.info-icon thead th{border-top:none;border-bottom-width:1px}.info-icon .variant-white{background-color:#343a40!important}.info-icon .format-128 img,.info-icon .format-svg img{width:100%;height:auto}.info-icon .format-svg img{max-width:48px}.info-icon .format-128 img{max-width:128px}.info-icon .format-32-2x img{width:32px;height:auto} \ No newline at end of file diff --git a/index.html b/index.html index 4b22a482..83532c92 100644 --- a/index.html +++ b/index.html @@ -32,22 +32,16 @@
-
+
 
-
+
 
-
+
 
-
-   -
-
-   -
-
+
 
diff --git a/js/main.js b/js/main.js index c0b3c584..709ceb35 100644 --- a/js/main.js +++ b/js/main.js @@ -3,65 +3,88 @@ $(document).ready(function() { // ------------------------------ // Settings // ------------------------------ - var dataJson = "manifest.json"; - var formats = ["svg", "128", "32", "32@2x"]; - var variants = ["color", "black", "icon", "white"]; - var iconDefault = "black"; - var iconHover = "color"; - var url = 'https://api.coinmarketcap.com/v1/ticker/?limit=0' + var apiUrl = 'https://api.coinmarketcap.com/v1/ticker/?limit=0'; + var dataJson = 'manifest.json'; + var formats = ['svg', '128', '32', '32@2x']; + var variants = ['color', 'black', 'icon', 'white']; + var iconDefault = 'black'; + var iconHover = 'color'; // ------------------------------ // Init search // ------------------------------ - $("form .search").on("input", function() { + $('form .search').on('input', function() { search($(this)); }); - $("form").submit(function( event ) { + $('form').submit(function( event ) { event.preventDefault(); - search($("form .search")); + search($('form .search')); }); // ------------------------------ - // Get list of icons in manifest + // Get icons // ------------------------------ - $.get(url, function(coins){ + + // Get icons from CoinMarketCap + $.getJSON(apiUrl, function(coins){ + + // Get icons in manifest $.getJSON(dataJson, function(data) { - var icons = ""; + + var icons = ''; var count = 0; + data.icons.forEach(function(icon) { + + // Get symbol var coin = coins.find(function(coin){ - return coin.symbol.toLowerCase() === icon + return coin.symbol.toLowerCase() === icon; }) - var name = coin ? coin.name.toLowerCase() : icon - // Construct icon - if (icons.indexOf("data-icon=\"" + icon + "\"") === -1) { - icons += "
"; - icons += ""; - icons += "\""" + icon; - icons += ""; - icons += "
"; + + // Get name + var name = coin ? coin.name : icon; + var nameAttr = name.split(' ').join('-').toLowerCase(); + + + // Avoid duplicates + if (icons.indexOf('data-icon="' + icon + '"') === -1) { + + // Construct icon + icons += '
'; + icons += ''; + icons += '
'; + icons += '
'; + icons += '' + icon + ''; + icons += '
'; + icons += '
'; + icons += name + '' + icon + '
'; + icons += '
'; + icons += '
'; + icons += ''; + icons += '
'; count++; + } }); // Display - $(".row.icons").html(icons); + $('.row.icons').html(icons); // Hover - $(".icon").hover(function() { + $('.icon').hover(function() { changeFolder($(this), iconDefault, iconHover); }); // Mouseleave - $(".icon").mouseleave(function() { + $('.icon').mouseleave(function() { changeFolder($(this), iconHover, iconDefault ); }); // Count icons - $(".count-cryptos").text(count); + $('.count-cryptos').text(count); }); }); @@ -75,90 +98,90 @@ $(document).ready(function() { // ------------------------------ function changeFolder(target, search, replace) { - var target = $(target).find("img"); - var srcInit = $(target).attr("src"); + var target = $(target).find('img'); + var srcInit = $(target).attr('src'); var srcAfter = srcInit.replace(search, replace); - $(target).attr("src", srcAfter); + $(target).attr('src', srcAfter); } // Display icon info in Modal // ------------------------------ - $("#infoIcon").on("show.bs.modal", function (event) { + $('#infoIcon').on('show.bs.modal', function (event) { // Modal settings var button = $(event.relatedTarget); var modal = $(this); - var icon = button.data("icon"); + var icon = button.data('icon'); // Table settings - var infos = ""; + var infos = ''; var i = 0; var j = 0; // Construct table - infos += ""; + infos += '
'; // Construct titles - infos += ""; - infos += ""; - infos += ""; + infos += ''; + infos += ''; + infos += ''; while (variants[j]) { - var formatCss = formats[i].replace("@", "-"); - infos += ""; + var formatCss = formats[i].replace('@', '-'); + infos += ''; j++; } j = 0; - infos += ""; - infos += ""; - infos += ""; + infos += ''; + infos += ''; + infos += ''; // Construct Row while (formats[i]) { - var formatCss = formats[i].replace("@", "-"); - infos += ""; + var formatCss = formats[i].replace('@', '-'); + infos += ''; // Construct titles of row - infos += ""; + infos += ''; // File extension - if (formats[i] == "svg") { - var extension = ".svg" ; + if (formats[i] == 'svg') { + var extension = '.svg'; } - else if (formats[i] == "32@2x") { - var extension = "@2x.png" ; + else if (formats[i] == '32@2x') { + var extension = '@2x.png'; } else { - var extension = ".png" ; + var extension = '.png'; } // Construct icons cells while (variants[j]) { - infos += ""; + infos += ''; j++; } j = 0; i++; - infos += ""; + infos += ''; } // Close table - infos += ""; - infos += "
" + icon + "
' + icon + '
" + variants[j] + "' + variants[j] + '
" + formats[i] + "' + formats[i] + '"; - infos += "\"""; - infos += "'; + infos += '' + icon + ''; + infos += '
"; + infos += ''; + infos += ''; // Display - modal.find(".modal-title").text(icon); - modal.find(".modal-body").html(infos); + modal.find('.modal-title').text(icon); + modal.find('.modal-body').html(infos); }); @@ -169,13 +192,13 @@ $(document).ready(function() { if ($(target).val().length > 0) { // Filter icons - $(".icon").css("display", "none"); - $("a[data-icon*='" + $(target).val().toLowerCase() + "']").parent().css("display", "block"); - $("a[data-name*='" + $(target).val().toLowerCase() + "']").parent().css("display", "block"); + $('.icon').css('display', 'none'); + $('a[data-icon*="' + $(target).val().toLowerCase() + '"]').parent().css('display', 'block'); + $('a[data-name*="' + $(target).val().toLowerCase() + '"]').parent().css('display', 'block'); // Close - $("
").insertAfter(target); - $(".close-search").click(function() { + $('
').insertAfter(target); + $('.close-search').click(function() { closeSearch(target); }); @@ -189,9 +212,9 @@ $(document).ready(function() { // Close search // ------------------------------ function closeSearch(target) { - $(".close-search").remove(); - $(".icon").css("display", "block"); - $(target).val(""); + $('.close-search').remove(); + $('.icon').css('display', 'block'); + $(target).val(''); } }); @@ -200,5 +223,5 @@ $(document).ready(function() { // Hide icons on error // ------------------------------ function error(img) { - $(img).parent().parent().remove(); + $(img).parentsUntil('.icon').parent().remove(); } diff --git a/js/main.min.js b/js/main.min.js index 5899b5ba..d8f845dc 100644 --- a/js/main.min.js +++ b/js/main.min.js @@ -1 +1 @@ -function error(t){$(t).parent().parent().remove()}$(document).ready(function(){var t=["svg","128","32","32@2x"],e=["color","black","icon","white"],a="black",o="color";function c(t,e,a){t=$(t).find("img");var o=$(t).attr("src").replace(e,a);$(t).attr("src",o)}function n(t){$(t).val().length>0?($(".icon").css("display","none"),$("a[data-icon*='"+$(t).val().toLowerCase()+"']").parent().css("display","block"),$("a[data-name*='"+$(t).val().toLowerCase()+"']").parent().css("display","block"),$('
').insertAfter(t),$(".close-search").click(function(){r(t)})):r(t)}function r(t){$(".close-search").remove(),$(".icon").css("display","block"),$(t).val("")}$("form .search").on("input",function(){n($(this))}),$("form").submit(function(t){t.preventDefault(),n($("form .search"))}),$.get("https://api.coinmarketcap.com/v1/ticker/?limit=0",function(t){$.getJSON("manifest.json",function(e){var n="",r=0;e.icons.forEach(function(e){var a=t.find(function(t){return t.symbol.toLowerCase()===e}),o=a?a.name.toLowerCase():e;-1===n.indexOf('data-icon="'+e+'"')&&(n+='
',n+='',n+=''+e+''+e,n+="",n+="
",r++)}),$(".row.icons").html(n),$(".icon").hover(function(){c($(this),a,o)}),$(".icon").mouseleave(function(){c($(this),o,a)}),$(".count-cryptos").text(r)})}),$("#infoIcon").on("show.bs.modal",function(a){var o=$(a.relatedTarget),c=$(this),n=o.data("icon"),r="",i=0,s=0;for(r+='',r+="",r+="",r+='";e[s];){var l=t[i].replace("@","-");r+='",s++}for(s=0,r+="",r+="",r+="";t[i];){if(r+="",r+='","svg"==t[i])var d=".svg";else if("32@2x"==t[i])d="@2x.png";else d=".png";for(;e[s];)r+='",s++;s=0,i++,r+=""}r+="",r+="
'+n+"
'+e[s]+"
'+t[i]+"',r+=''+n+'',r+="
",c.find(".modal-title").text(n),c.find(".modal-body").html(r)})}); \ No newline at end of file +function error(t){$(t).parentsUntil(".icon").parent().remove()}$(document).ready(function(){function t(t,a,e){var t=$(t).find("img"),o=$(t).attr("src").replace(a,e);$(t).attr("src",o)}function a(t){$(t).val().length>0?($(".icon").css("display","none"),$('a[data-icon*="'+$(t).val().toLowerCase()+'"]').parent().css("display","block"),$('a[data-name*="'+$(t).val().toLowerCase()+'"]').parent().css("display","block"),$('
').insertAfter(t),$(".close-search").click(function(){e(t)})):e(t)}function e(t){$(".close-search").remove(),$(".icon").css("display","block"),$(t).val("")}var o=["svg","128","32","32@2x"],c=["color","black","icon","white"];$("form .search").on("input",function(){a($(this))}),$("form").submit(function(t){t.preventDefault(),a($("form .search"))}),$.getJSON("https://api.coinmarketcap.com/v1/ticker/?limit=0",function(a){$.getJSON("manifest.json",function(e){var o="",c=0;e.icons.forEach(function(t){var e=a.find(function(a){return a.symbol.toLowerCase()===t}),n=e?e.name:t,i=n.split(" ").join("-").toLowerCase();-1===o.indexOf('data-icon="'+t+'"')&&(o+='
',o+='',o+='
',o+='
',o+=''+t+'',o+="
",o+='
',o+=n+''+t+"
",o+="
",o+="
",o+="",o+="
",c++)}),$(".row.icons").html(o),$(".icon").hover(function(){t($(this),"black","color")}),$(".icon").mouseleave(function(){t($(this),"color","black")}),$(".count-cryptos").text(c)})}),$("#infoIcon").on("show.bs.modal",function(t){var a=$(t.relatedTarget),e=$(this),n=a.data("icon"),i="",s=0,r=0;for(i+='',i+="",i+="",i+='";c[r];){l=o[s].replace("@","-");i+='",r++}for(r=0,i+="",i+="",i+="";o[s];){var l;if(i+="",i+='","svg"==o[s])d=".svg";else if("32@2x"==o[s])d="@2x.png";else var d=".png";for(;c[r];)i+='",r++;r=0,s++,i+=""}i+="",i+="
'+n+"
'+c[r]+"
'+o[s]+"',i+=''+n+'',i+="
",e.find(".modal-title").text(n),e.find(".modal-body").html(i)})}); \ No newline at end of file