<script>
function updateDonutChart (el, percent, donut) {
percent = Math.round(percent);
if (percent > 100) {
percent = 100;
} else if (percent < 0) {
percent = 0;
}
var deg = Math.round(360 * (percent / 100));
if (percent > 50) {
$(el + ' .pie').css('clip', 'rect(auto, auto, auto, auto)');
$(el + ' .right-side').css('transform', 'rotate(180deg)');
} else {
$(el + ' .pie').css('clip', 'rect(0, 1em, 1em, 0.5em)');
$(el + ' .right-side').css('transform', 'rotate(0deg)');
}
if (donut) {
$(el + ' .right-side').css('border-width', '0.04em');
$(el + ' .left-side').css('border-width', '0.04em');
$(el + ' .shadow').css('border-width', '0.01em');
} else {
$(el + ' .right-side').css('border-width', '0.4em');
$(el + ' .left-side').css('border-width', '0.4em');
$(el + ' .shadow').css('border-width', '0.01em');
}
$(el + ' .num').text(percent);
$(el + ' .left-side').css('transform', 'rotate(' + deg + 'deg)');
}
</script>
<script>
$(document).ready(function() {
let txtCountry = $('.uc-city-popup .t390__title').text();
let pieP = `
<div id="specificChart" class="donut-size t-text">
<div class="pie-wrapper">
<span class="label">
<div class="imm">Я посетил</div>
<div class="percent"><span class="num">0</span><span class="smaller">%</span></div>
<div class="country">${txtCountry}</div>
<div class="pop-ct-need">Осталось ещё <span></span></div>
</span>
<div class="pie">
<div class="left-side half-circle"></div>
<div class="right-side half-circle"></div>
</div>
<div class="shadow"></div>
</div>
</div>
<div class="bott-cont t-text">
<img src="https://static.tildacdn.com/tild3464-6431-4139-a432-346634316539/9470970.jpg">
<p>Сделай скрин и поделись в соцсетях своими достижениями!</p>
<img class="close-btn" src="https://static.tildacdn.com/tild6332-3737-4332-b966-636236306466/Vector_36.svg">
</div>
`;
$('.uc-city-popup .t390__title').after(pieP);
$('.uc-zero-panel, .uc-city-list').addClass('cmn-blk');
$('.cmn-blk').wrapAll('<div class="wrap-pnl-blk"></div>');
function writeFinal(){
let count = $('.act_li').length;
$('.count .tn-atom').text(count);
let ctNum = $('.uc-city-list li').length;
let percent = (count*100)/ctNum;
$('.percent .tn-atom').text(percent.toFixed(0)+'%');
$('.pop-ct-all span').text(ctNum);
$('.pop-ct-need span').text(ctNum-count);
updateDonutChart('#specificChart', percent, true);
if(count>0){
$('a[href="#popup:final"]').addClass('active_btnf');
}else{
$('a[href="#popup:final"]').removeClass('active_btnf');
};
};
$('.uc-city-list li').click(function(){
$(this).toggleClass('act_li');
writeFinal();
});
$('.check').click(function(){
$(this).toggleClass('active-chk');
if( $(this).hasClass('active-chk') ){
$('.uc-city-list li').addClass('act_li');
}else{
$('.uc-city-list li').removeClass('act_li');
};
writeFinal();
});
$('.cancel').click(function(){
//window.close();
$('.uc-city-list li').removeClass('act_li');
writeFinal();
});
$(document).on('click','.close-btn',function(){
$('.uc-city-popup .t-popup__close')[0].click();
});
});
</script>
<style>
.check, .cancel{
cursor: pointer;
}
.uc-zero-panel {
position: sticky;
top: 0;
z-index: 99;
}
.uc-city-list li {
list-style: none;
flex-basis: 50%;
position: relative;
cursor: pointer;
padding: 5px 0 5px 10px;
border-radius: 30px;
}
.uc-city-list ul {
padding-left: 0px !important;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8px 20px;
}
.uc-city-list li:after {
content: "";
width: 23px;
height: 23px;
position: absolute;
border: 1px solid #e2e2e2;
border-radius: 100%;
right: 10px;
top: 50%;
transform: translateY(-50%);
background-size: cover;
background-repeat: no-repeat;
}
.uc-city-list li:hover {
font-weight: 600;
background-color: #fafafa;
}
li.act_li {
font-weight: 600;
}
li.act_li:after {
background-image: url(https://static.tildacdn.com/tild3638-3538-4333-b939-323730613861/Vector_34.svg);
border-color: transparent;
}
.pop-wrp.t-text {
margin-top: 12px;
}
.pop-ct-all {
margin-bottom: 8px;
}
.pop-wrp span {
font-weight: 500;
}
@media screen and (max-width:560px){
.uc-city-list ul {
display: grid;
grid-template-columns: 1fr;
}
}
</style>