Рейтинг как на YouTube : вариант 2

08/03/2018 21:34

Хак поможет визуально преобразовать стандартный рейтинг №3 нравится/не нравится в интересный вид и оформить его как рейтинг YouTube. Здесь используется не только раздельный подсчет лайков с визуальной шкалой соотношений, но и их процентное соотношение. Этот способ тоже не затрагивает файлы движка и полностью совместим с ним.

Установка:
1. Открыть fullstory.tpl шаблона и в нужное место добавить:

			[rating-type-3]
			<div class="frate ignore-select" id="frate-{news-id}">
				<div class="rate-plus" id="pluss-{news-id}" onclick="doRateLD('plus', '{news-id}');"><span class="fa fa-thumbs-up"></span><span class="rcount">{views}</span></div>
				<div class="rate-minus" id="minuss-{news-id}" onclick="doRateLD('minus', '{news-id}');"><span class="fa fa-thumbs-down"></span><span class="rcount">{comments-num}</span></div>
				<div class="rate-data">{rating}{vote-num}</div>
			</div>
			[/rating-type-3]

2. В CSS шаблона добавить:

.frate {height:40px; line-height:24px; width:200px; position:relative; opacity:0; 
display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.frate.done {opacity:1;}
.rate-data {display:none;}
.rate-plus, .rate-minus {cursor:pointer;}
.frate .fa {color:#3c0; display:inline-block; vertical-align:top; font-size: 24px; margin-right:10px;}
.rate-minus .fa {color:#f20404; position: relative;}
.frate div:hover .fa {animation: bounceRate  0.3s infinite linear; animation-direction: alternate;}
.rbar {height:6px; overflow:hidden; background-color:#f20404; border-radius:3px; position:absolute; left:0; bottom:0; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#3c0; transition:width 1s linear;}
.rate-perc {font-size: 18px; font-weight: 700;}
.rate-perc.high {color:#3c0;}
.rate-perc.low {color:#f20404;}

@keyframes bounceRate {
  from {transform: translate(0,0%);}
  to {transform: translate(0,-50%);}
}

3. В JS шаблона добавить:

$(document).ready(function(){
	
	$('.frate').each(function(){
        var rate = $(this),
			rdata = rate.find('.rate-data'),
			rrate = parseInt(rdata.find('.ratingtypeplusminus').text(), 10),
			rvote = parseInt(rdata.find('span[id*=vote]').text(), 10);
			rate.append('<div class="rbar"><div class="rfill"></div></div>');
			rate.find('.rate-plus').after('<div class="rate-perc">0%</div>');
		if ( rvote >= rrate && rvote > 0 ) {
			var m = (rvote - rrate)/2, 
				p = rvote - m,
				perc = Math.round(p/rvote*100);
			rate.find('.rate-plus span.rcount').html(p);
			rate.find('.rate-minus span.rcount').html(m);
			rate.find('.rfill').css({'width':''+perc+'%'});
			rate.find('.rate-perc').html(''+perc+'%');
			perc < 49 ? rate.find('.rate-perc').addClass('low') : rate.find('.rate-perc').addClass('high'); 
		} else {
			rate.find('.rate-plus span.rcount').html('0');
			rate.find('.rate-minus span.rcount').html('0');
			
		};
		rate.addClass('done'); 
    });
	
});

function doRateLD( rate, id ) {
		ShowLoading('');
		$.get(dle_root + "engine/ajax/rating.php", { go_rate: rate, news_id: id, skin: dle_skin, user_hash: dle_login_hash }, function(data){
			HideLoading('');
			if ( data.success ) {
				var rating = data.rating;
				rating = rating.replace(/&lt;/g, "<");
				rating = rating.replace(/&gt;/g, ">");
				rating = rating.replace(/&amp;/g, "&");
				$("#ratig-layer-" + id).html(rating);
				$("#vote-num-id-" + id).html(data.votenum);
				var rt = parseInt($(rating).text()),
					m = (data.votenum - rt)/2,
					p = data.votenum - m,
					perc = Math.round(p/data.votenum*100),
					fRate = $("#frate-" + id);
				fRate.find('.rate-plus span.rcount').html(p);
				fRate.find('.rate-minus span.rcount').html(m);
				fRate.find('.rfill').css({'width':''+perc+'%'});
				fRate.find('.rate-perc').html(''+perc+'%');
			} else if (data.error) {DLEalert ( data.errorinfo, dle_info );}
		}, "json");
	};

4. Подключить иконки Font Awesome 5 Icons любым способом. Например в main.tpl шаблона, перед:

</head>

Добавить:

<script src="https://use.fontawesome.com/fe271d92aa.js"></script>

Готово!

Важно: хак правильно работает, если в настройках движка изначально был установлен рейтинг нравится/не нравится или за новость еще никто не голосовал. Если ранее использовались рейтинги звезды или один лайк и там проставлены оценки, то хак работать не будет. Следует обнулить результаты рейтинга новостей.

• Версия DLE: 10.5-12.0
• Автор: WebRambo
• Источник

Oxigen
0
900