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

Sign in to follow this  
redissx

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

Recommended Posts

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

 

Данным примером хочу показать, как стандартный рейтинг 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

 

Edited by redissx
  • Like 2
  • Upvote 1

Share this post


Link to post
Share on other sites


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

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>

Edited by redissx
  • Like 3
  • Upvote 1

Share this post


Link to post
Share on other sites
В 13.11.2017 в 16:28, redissx сказал:


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

1510578555_cool-rating.png

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

Share this post


Link to post
Share on other sites
12 часов назад, Spyhog сказал:

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

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

.rfill {border-radius:3px;}

 

Share this post


Link to post
Share on other sites
1 час назад, redissx сказал:

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


.rfill {border-radius:3px;}

 

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

Share this post


Link to post
Share on other sites
7 часов назад, Spyhog сказал:

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

ну тогда

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

B)

  • Like 2

Share this post


Link to post
Share on other sites
46 минут назад, SashaShy сказал:

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

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

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

engine/ajax/rating.php

  на

engine/ajax/controller.php?mod=rating

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

  • Like 1
  • Upvote 1

Share this post


Link to post
Share on other sites
В 12.11.2017 в 12:19, redissx сказал:

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

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

Share this post


Link to post
Share on other sites
1 час назад, Spyhog сказал:

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

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


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

 

Share this post


Link to post
Share on other sites
3 минуты назад, redissx сказал:

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



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

 

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

Share this post


Link to post
Share on other sites
10 часов назад, Spyhog сказал:

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

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

Share this post


Link to post
Share on other sites
2 часа назад, redissx сказал:

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

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

Share this post


Link to post
Share on other sites
32 минуты назад, Spyhog сказал:

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

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

Share this post


Link to post
Share on other sites
2 часа назад, redissx сказал:

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

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

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

Share this post


Link to post
Share on other sites
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);

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

Share this post


Link to post
Share on other sites
В 13.11.2017 в 16:28, redissx сказал:


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

1510578555_cool-rating.png

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

Share this post


Link to post
Share on other sites
4 часа назад, Kolbaser сказал:

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

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

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

Edited by redissx

Share this post


Link to post
Share on other sites

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

0-_XzwsWTaOXdTPKTJVh8A.png

 

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

Share this post


Link to post
Share on other sites
В 11.01.2019 в 22:50, Darkensand сказал:

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

0-_XzwsWTaOXdTPKTJVh8A.png

 

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

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

Share this post


Link to post
Share on other sites
11 часов назад, vip34rus сказал:

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

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

  • Thanks 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this