CMS DataLife Engine - Система управления сайтами

redissx

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

Рекомендуемые сообщения

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

 

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

 

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

1510477965_youtube-rating.png

 

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

 

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

 

Изменено пользователем redissx
  • Нравится 1
  • Поддерживаю 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты


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

1510578555_cool-rating.png

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>

Изменено пользователем redissx
  • Нравится 3
  • Поддерживаю 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 13.11.2017 в 16:28, redissx сказал:


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

1510578555_cool-rating.png

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 часов назад, Spyhog сказал:

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

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

.rfill {border-radius:3px;}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, redissx сказал:

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


.rfill {border-radius:3px;}

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 часов назад, Spyhog сказал:

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

ну тогда

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

B)

  • Нравится 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
46 минут назад, SashaShy сказал:

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

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

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

engine/ajax/rating.php

  на

engine/ajax/controller.php?mod=rating

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

  • Нравится 1
  • Поддерживаю 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 12.11.2017 в 12:19, redissx сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Spyhog сказал:

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

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


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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, redissx сказал:

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



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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 часов назад, Spyhog сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, redissx сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
32 минуты назад, Spyhog сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, redissx сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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);

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти