Merge pull request #79 from imnotadeveloper/master
Add crypto name in homepage
This commit is contained in:
Christopher Downer
GitHub
commit
28bca224d0
30
css/main.css
30
css/main.css
|
|
@ -26,7 +26,7 @@
|
|||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>");
|
||||
}
|
||||
|
||||
/* 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-circle'><circle cx='12' cy='12' r='10'></circle><line x1='12' y1='8' x2='12' y2='16'></line><line x1='8' y1='12' x2='16' y2='12'></line></svg>");
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
.form-control.search{margin:0 auto;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>");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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>")}.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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-circle'><circle cx='12' cy='12' r='10'></circle><line x1='12' y1='8' x2='12' y2='16'></line><line x1='8' y1='12' x2='16' y2='12'></line></svg>");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}
|
||||
.form-control.search{margin:0 auto;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>");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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>");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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x-circle'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>")}.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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#6c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus-circle'><circle cx='12' cy='12' r='10'></circle><line x1='12' y1='8' x2='12' y2='16'></line><line x1='8' y1='12' x2='16' y2='12'></line></svg>");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}
|
||||
14
index.html
14
index.html
|
|
@ -32,22 +32,16 @@
|
|||
</form>
|
||||
<!-- Placeholder -->
|
||||
<div class="row icons mt-5">
|
||||
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||
<div class="col-6 col-lg-4 col-xl-3 text-left icon">
|
||||
<span class="placeholder bg-light d-block p-4"> </span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||
<div class="col-6 col-lg-4 col-xl-3 text-left icon">
|
||||
<span class="placeholder bg-light d-block p-4"> </span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||
<div class="col-6 col-lg-4 col-xl-3 text-left icon">
|
||||
<span class="placeholder bg-light d-block p-4"> </span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">
|
||||
<span class="placeholder bg-light d-block p-4"> </span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 d-lg-none col-lg-3 col-xl-2 d-xl-block text-left icon">
|
||||
<span class="placeholder bg-light d-block p-4"> </span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 d-lg-none col-lg-3 col-xl-2 d-xl-block text-left icon">
|
||||
<div class="col-6 col-lg-4 col-xl-3 d-lg-none d-xl-block text-left icon">
|
||||
<span class="placeholder bg-light d-block p-4"> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
153
js/main.js
153
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 += "<div class=\"col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon\">";
|
||||
icons += "<a href=\"#" + icon + "\" class=\"bg-light text-muted text-uppercase d-block p-4\" data-toggle=\"modal\" data-target=\"#infoIcon\" data-icon=\"" + icon + "\" data-name=\"" + name + "\">";
|
||||
icons += "<img class=\"mr-2\" src=\"svg/" + iconDefault + "/" + icon + ".svg\" alt=\"" + icon + "\" onerror=\"error(this);\">" + icon;
|
||||
icons += "</a>";
|
||||
icons += "</div>";
|
||||
|
||||
// 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 += '<div class="col-6 col-lg-4 col-xl-3 text-left icon">';
|
||||
icons += '<a href="#' + icon + '" class="bg-light d-block pt-4 pr-3 pb-4 pl-3" data-toggle="modal" data-target="#infoIcon" data-icon="' + icon + '" data-name="' + nameAttr + '">';
|
||||
icons += '<div class="row align-items-center">';
|
||||
icons += '<div class="col container-img">';
|
||||
icons += '<img class="mr-2" src="svg/' + iconDefault + '/' + icon + '.svg" alt="' + icon + '" onerror="error(this);">';
|
||||
icons += '</div>';
|
||||
icons += '<div class="col name text-dark">';
|
||||
icons += name + '<span class="symbol text-muted text-uppercase small">' + icon + '</span></div>';
|
||||
icons += '</div>';
|
||||
icons += '</div>';
|
||||
icons += '</a>';
|
||||
icons += '</div>';
|
||||
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 += "<table class=\"table info-icon mb-0\">";
|
||||
infos += '<table class="table info-icon mb-0">';
|
||||
|
||||
// Construct titles
|
||||
infos += "<thead>";
|
||||
infos += "<tr>";
|
||||
infos += "<th class=\"text-center text-uppercase align-middle\"><h5 class=\"mb-0\">" + icon + "</h5></th>";
|
||||
infos += '<thead>';
|
||||
infos += '<tr>';
|
||||
infos += '<th class="text-center text-uppercase align-middle"><h5 class="mb-0">' + icon + '</h5></th>';
|
||||
while (variants[j]) {
|
||||
|
||||
var formatCss = formats[i].replace("@", "-");
|
||||
infos += "<th class=\"variant-" + variants[j] + " text-center font-weight-light text-muted align-middle\">" + variants[j] + "</th>";
|
||||
var formatCss = formats[i].replace('@', '-');
|
||||
infos += '<th class="variant-' + variants[j] + ' text-center font-weight-light text-muted align-middle">' + variants[j] + '</th>';
|
||||
j++;
|
||||
|
||||
}
|
||||
|
||||
j = 0;
|
||||
infos += "</tr>";
|
||||
infos += "</thead>";
|
||||
infos += "<tbody>";
|
||||
infos += '</tr>';
|
||||
infos += '</thead>';
|
||||
infos += '<tbody>';
|
||||
|
||||
// Construct Row
|
||||
while (formats[i]) {
|
||||
|
||||
var formatCss = formats[i].replace("@", "-");
|
||||
infos += "<tr>";
|
||||
var formatCss = formats[i].replace('@', '-');
|
||||
infos += '<tr>';
|
||||
|
||||
// Construct titles of row
|
||||
infos += "<th class=\"format-" + formatCss + " text-center font-weight-light text-muted align-middle\" scope=\"row\">" + formats[i] + "</th>";
|
||||
infos += '<th class="format-' + formatCss + ' text-center font-weight-light text-muted align-middle" scope="row">' + formats[i] + '</th>';
|
||||
|
||||
// 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 += "<td class=\"format-" + formatCss + " variant-" + variants[j] + " text-center\">";
|
||||
infos += "<img src=\"" + formats[i] + "/" + variants[j] + "/" + icon + extension + "\" alt=\"" + icon + "\">";
|
||||
infos += "</td>";
|
||||
infos += '<td class="format-' + formatCss + ' variant-' + variants[j] + ' text-center">';
|
||||
infos += '<img src="' + formats[i] + '/' + variants[j] + '/' + icon + extension + '" alt="' + icon + '">';
|
||||
infos += '</td>';
|
||||
j++;
|
||||
|
||||
}
|
||||
|
||||
j = 0;
|
||||
i++;
|
||||
infos += "</tr>";
|
||||
infos += '</tr>';
|
||||
|
||||
}
|
||||
|
||||
// Close table
|
||||
infos += "</tbody>";
|
||||
infos += "</table>";
|
||||
infos += '</tbody>';
|
||||
infos += '</table>';
|
||||
|
||||
// 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
|
||||
$("<div class=\"close-search\"></div>").insertAfter(target);
|
||||
$(".close-search").click(function() {
|
||||
$('<div class="close-search"></div>').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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"),$('<div class="close-search"></div>').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+='<div class="col-6 col-sm-4 col-lg-3 col-xl-2 text-left icon">',n+='<a href="#'+e+'" class="bg-light text-muted text-uppercase d-block p-4" data-toggle="modal" data-target="#infoIcon" data-icon="'+e+'" data-name="'+o+'">',n+='<img class="mr-2" src="svg/black/'+e+'.svg" alt="'+e+'" onerror="error(this);">'+e,n+="</a>",n+="</div>",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+='<table class="table info-icon mb-0">',r+="<thead>",r+="<tr>",r+='<th class="text-center text-uppercase align-middle"><h5 class="mb-0">'+n+"</h5></th>";e[s];){var l=t[i].replace("@","-");r+='<th class="variant-'+e[s]+' text-center font-weight-light text-muted align-middle">'+e[s]+"</th>",s++}for(s=0,r+="</tr>",r+="</thead>",r+="<tbody>";t[i];){if(r+="<tr>",r+='<th class="format-'+(l=t[i].replace("@","-"))+' text-center font-weight-light text-muted align-middle" scope="row">'+t[i]+"</th>","svg"==t[i])var d=".svg";else if("32@2x"==t[i])d="@2x.png";else d=".png";for(;e[s];)r+='<td class="format-'+l+" variant-"+e[s]+' text-center">',r+='<img src="'+t[i]+"/"+e[s]+"/"+n+d+'" alt="'+n+'">',r+="</td>",s++;s=0,i++,r+="</tr>"}r+="</tbody>",r+="</table>",c.find(".modal-title").text(n),c.find(".modal-body").html(r)})});
|
||||
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"),$('<div class="close-search"></div>').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+='<div class="col-6 col-lg-4 col-xl-3 text-left icon">',o+='<a href="#'+t+'" class="bg-light d-block pt-4 pr-3 pb-4 pl-3" data-toggle="modal" data-target="#infoIcon" data-icon="'+t+'" data-name="'+i+'">',o+='<div class="row align-items-center">',o+='<div class="col container-img">',o+='<img class="mr-2" src="svg/black/'+t+'.svg" alt="'+t+'" onerror="error(this);">',o+="</div>",o+='<div class="col name text-dark">',o+=n+'<span class="symbol text-muted text-uppercase small">'+t+"</span></div>",o+="</div>",o+="</div>",o+="</a>",o+="</div>",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+='<table class="table info-icon mb-0">',i+="<thead>",i+="<tr>",i+='<th class="text-center text-uppercase align-middle"><h5 class="mb-0">'+n+"</h5></th>";c[r];){l=o[s].replace("@","-");i+='<th class="variant-'+c[r]+' text-center font-weight-light text-muted align-middle">'+c[r]+"</th>",r++}for(r=0,i+="</tr>",i+="</thead>",i+="<tbody>";o[s];){var l;if(i+="<tr>",i+='<th class="format-'+(l=o[s].replace("@","-"))+' text-center font-weight-light text-muted align-middle" scope="row">'+o[s]+"</th>","svg"==o[s])d=".svg";else if("32@2x"==o[s])d="@2x.png";else var d=".png";for(;c[r];)i+='<td class="format-'+l+" variant-"+c[r]+' text-center">',i+='<img src="'+o[s]+"/"+c[r]+"/"+n+d+'" alt="'+n+'">',i+="</td>",r++;r=0,s++,i+="</tr>"}i+="</tbody>",i+="</table>",e.find(".modal-title").text(n),e.find(".modal-body").html(i)})});
|
||||
Loading…
Reference in New Issue