Рейтинг DLE, как на youtube без правок движка (раздельные лайки, шкала)

[redissx 251]

Приветствую.

 

Данным примером хочу показать, как стандартный рейтинг DLE "нравится-не нравится" визуально преобразовать в всякий интересный вид на примере рейтинга Youtube. Самое главное - этот способ не затрагивает файлы движка, полностью совместим с ним, по-сути это и есть стандартный функционал DLE.

 

Здесь я применю раздельный подсчет лайков, визуальную шкалу соотношений лайков, процентное соотношение лайков. С помощью js мы посчитаем все это, используя rating и vote-num, и применим. Живое голосование будем делать на основе немного измененной стандартной функции DLE. В результате мы получим такой супер рейтинг.

 

 Подробно не буду объяснять, что к чему, просто выложу.

 

1. в fullstory.tpl в нужное место ставим (замечу, что можно и в shortstory.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}');"><img src="{THEME}/images/thumb-up.png" alt="нравится" /><span>0</span></div>
                <div class="rate-minus" id="minuss-{news-id}" onclick="doRateLD('minus', '{news-id}');"><img src="{THEME}/images/thumb-down.png" alt="не нравится" /><span>0</span></div>
                <div class="rate-data">{rating}{vote-num}</div>
            </div>
            [/rating-type-3]

2. в ваш css файл в конец

.frate {display:inline-block; white-space:nowrap; height:30px; line-height:20px; position:relative;}
.rate-data {display:none;}
.rate-plus, .rate-minus {display:inline-block; vertical-align:top; cursor:pointer; min-width:40px; color:#a0a0a0;}
.rate-minus {margin-left:20px;}
.frate img {opacity:0.3; margin-right:7px; display:inline-block; vertical-align:top;}
.frate div:hover img {opacity:1;}
.frate div:hover {color:#000;}
.rbar {height:3px; overflow:hidden; background-color:#cfcfcf; border-radius:1px; position:absolute; left:0; top:100%; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#2692e6; transition:width 1s linear;}

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>');
        if ( rvote >= rrate && rvote > 0 ) {
            var m = (rvote - rrate)/2,
                p = rvote - m,
                perc = Math.round(p/rvote*100);
            rate.find('.rate-plus span').html(p);
            rate.find('.rate-minus span').html(m);
            rate.find('.rfill').css({'width':''+perc+'%'});
        };
    });
    
});
    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').html(p);
                fRate.find('.rate-minus span').html(m);
                fRate.find('.rfill').css({'width':''+perc+'%'});
            } else if (data.error) {DLEalert ( data.errorinfo, dle_info );}
        }, "json");
    };

4. закачиваем картинки лайков в папку images шаблона

 

Есть нюанс: работает, если был всегда нравится-не нравится или с нуля. Если ранее были звезды или просто один лайк и там наставили оценок, то работать не будет (цифры будут нули), надо обнулять все.

 

В архиве вы найдете все написанное выше, раскиданное по папкам и файлам.

https://drive.google.com/open?id=0BziqeF4Ecg58M1NCZ1RkaXNuQW8

 

Источник: http://webrambo.ru/100-reyting-dle-kak-na-youtube-razdelnye-layki-shkala.html

 

Изменено 12 ноября 2017 пользователем redissx

[redissx 251]

Еще интересный красочный вариант. Здесь добавлен вывод процента, который окрашивается в зеленый-красный в зависимости от высокий-низкий.

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. подключаем иконки http://fontawesome.io/icons/ любым способом. Например, с cdn.
в main.tpl в секцию head добавляем

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

Изменено 13 ноября 2017 пользователем redissx

[Spyhog 65]

В 13.11.2017 в 16:28, redissx сказал:

Еще интересный красочный вариант. Здесь добавлен вывод процента, который окрашивается в зеленый-красный в зависимости от высокий-низкий.

Спасибо, красивы ретинг. Но коггда наводишь курсор на палец вверх, то зеленая линия слева становится без закруглённых краёв. Как можно исправить?

[redissx 251]

12 часов назад, Spyhog сказал:

Спасибо, красивы ретинг. Но коггда наводишь курсор на палец вверх, то зеленая линия слева становится без закруглённых краёв. Как можно исправить?

Добавьте в css еще

.rfill {border-radius:3px;}

 

[Spyhog 65]

1 час назад, redissx сказал:

Добавьте в css еще

.rfill {border-radius:3px;}

 

Просто тогда и правая сторона зеленой полоски закругляется.

[redissx 251]

7 часов назад, Spyhog сказал:

Просто тогда и правая сторона зеленой полоски закругляется.

ну тогда

.rfill {border-radius:3px 0 0 3px;}

[SashaShy 0]

Жаль DLE 13 не работает.

[redissx 251]

46 минут назад, SashaShy сказал:

Жаль DLE 13 не работает.

Действительно. Спасибо, что заметили.

Просто замените в js коде

engine/ajax/rating.php

  на

engine/ajax/controller.php?mod=rating

и все снова заработает.

[Spyhog 65]

В 12.11.2017 в 12:19, redissx сказал:

Здесь я применю раздельный подсчет лайков, визуальную шкалу соотношений лайков, процентное соотношение лайков.

Можно вывести только количество Повысивших и Понизивших рейтинг по отдельности? То есть убрать проценты и проресс бар.

[redissx 251]

1 час назад, Spyhog сказал:

Можно вывести только количество Повысивших и Понизивших рейтинг по отдельности? То есть убрать проценты и проресс бар.

Да просто скройте через css

.rate-perc, .rbar {display:none;}

 

[Spyhog 65]

3 минуты назад, redissx сказал:

Да просто скройте через css

.rate-perc, .rbar {display:none;}

 

А из js лишнее удалить?

[redissx 251]

10 часов назад, Spyhog сказал:

А из js лишнее удалить?

А зачем? Это вообще тут ни на что не влияет. Ни на быстродействие, ни на что-то еще. Проще скрыть и все.

[Spyhog 65]

2 часа назад, redissx сказал:

А зачем? Это вообще тут ни на что не влияет. Ни на быстродействие, ни на что-то еще. Проще скрыть и все.

А этот счетчик лайков и дизлайков может обнулиться? Например при чистке логов скрипта или кэша... Или если сменить шаблон, но добавить в него тот js, счетчик сохранится?

[redissx 251]

32 минуты назад, Spyhog сказал:

А этот счетчик лайков и дизлайков может обнулиться? Например при чистке логов скрипта или кэша... Или если сменить шаблон, но добавить в него тот js, счетчик сохранится?

Это стандартный нравится - не нравится, просто визуально преображенный шаблоном. Поэтому обнуляется он через админку, чистка логов и кеша не обнуляет, при смене шаблона все сохраняется и обратно совместимо.

[Spyhog 65]

2 часа назад, redissx сказал:

Это стандартный нравится - не нравится, просто визуально преображенный шаблоном. Поэтому обнуляется он через админку, чистка логов и кеша не обнуляет, при смене шаблона все сохраняется и обратно совместимо.

Вот в первом рейтинге, что синенький, повышается рейтинг не на 1, а на 11 сразу. Понижается также.

А, нет. Просто дело в том, что если добавить вместо картинок <span class="fa fa-thumbs-up"></span>, то цифра дублируется. А если добавить <i class="fa fa-thumbs-up"></i>, то всё хорошо.

[redissx 251]

18 минут назад, Spyhog сказал:

Вот в первом рейтинге, что синенький, повышается рейтинг не на 1, а на 11 сразу. Понижается также.

А, нет. Просто дело в том, что если добавить вместо картинок <span class="fa fa-thumbs-up"></span>, то цифра дублируется. А если добавить <i class="fa fa-thumbs-up"></i>, то всё хорошо.

Да. Т.к. спан указан.

            rate.find('.rate-plus span').html(p);
            rate.find('.rate-minus span').html(m);

Тут либо классы добавить, либо спан сменить. В любом случае, не  проблема.

[sunx 0]

@redissx, а как вывести проценты в краткой новости?

[redissx 251]

10 часов назад, sunx сказал:

@redissx, а как вывести проценты в краткой новости?

http://webrambo.ru/103-reyting-v-procentah-dlya-kratkoy-novosti-v-dle.html

[Kolbaser 33]

В 13.11.2017 в 16:28, redissx сказал:

Еще интересный красочный вариант. Здесь добавлен вывод процента, который окрашивается в зеленый-красный в зависимости от высокий-низкий.

Этот хак, как и первый, будет работать, только если изначально стояло нравится/не нравится? Если стоят звёзды, то не пойдёт?

[redissx 251]

4 часа назад, Kolbaser сказал:

Этот хак, как и первый, будет работать, только если изначально стояло нравится/не нравится? Если стоят звёзды, то не пойдёт?

Если ранее стоял другой рейтинг, то его нужно обнулить (редактирование новостей, массовое действие).

Потому что при  смене ДЛЕ выдает некорректные данные. Например, количество голосов 2, рейтинг +5 - это же невозможно в реальности, вот скрипт и тоже некорректно считает.

Изменено 6 сентября 2018 пользователем redissx

[Darkensand 0]

а как сделать чтоб не дублировались проценты

 

у меня почему то сразу 2 по 100

[redissx 251]

В 11.01.2019 в 22:50, Darkensand сказал:

а как сделать чтоб не дублировались проценты

 

у меня почему то сразу 2 по 100

Значит не так установили.

[vip34rus 0]

А в какой js вставлять?

[redissx 251]

11 часов назад, vip34rus сказал:

А в какой js вставлять?

В любой вашего шаблона.

[vip34rus 0]

засунул я js в /js/bootstrap.js сделал поправки что указаны для 13.0 и остальное вставил но не как не отображает.