Перейти к публикации

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

redissx
 Рассказать Подписчики 1

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

redissx

redissx 254

Опубликовано:
Опубликовано: (изменено)

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

 

Данным примером хочу показать, как стандартный рейтинг 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
  • Нравится 2
  • Поддерживаю 2
Ссылка на сообщение
Поделиться на других сайтах
redissx

redissx 254

Опубликовано:
Опубликовано: (изменено) Автор


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

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
  • Поддерживаю 2
Ссылка на сообщение
Поделиться на других сайтах
  • 3 месяца спустя...
Spyhog

Spyhog 65

Опубликовано:
Опубликовано:
  13.11.2017 в 13:28, redissx сказал:


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

1510578555_cool-rating.png

Расширить  

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

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

redissx 254

Опубликовано:
Опубликовано: Автор
  07.03.2018 в 19:07, Spyhog сказал:

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

Расширить  

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

.rfill {border-radius:3px;}

 

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

Spyhog 65

Опубликовано:
Опубликовано:
  08.03.2018 в 07:47, redissx сказал:

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

.rfill {border-radius:3px;}

 

Расширить  

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

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

redissx 254

Опубликовано:
Опубликовано: Автор
  08.03.2018 в 09:19, Spyhog сказал:

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

Расширить  

ну тогда 

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

B)

  • Нравится 2
Ссылка на сообщение
Поделиться на других сайтах
  • 2 месяца спустя...
redissx

redissx 254

Опубликовано:
Опубликовано: Автор
  21.05.2018 в 18:02, SashaShy сказал:

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

Расширить  

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

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

engine/ajax/rating.php

  на 

engine/ajax/controller.php?mod=rating

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

  • Нравится 1
  • Поддерживаю 1
Ссылка на сообщение
Поделиться на других сайтах
Spyhog

Spyhog 65

Опубликовано:
Опубликовано:
  12.11.2017 в 09:19, redissx сказал:

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

Расширить  

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

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

redissx 254

Опубликовано:
Опубликовано: Автор
  29.05.2018 в 18:31, Spyhog сказал:

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

Расширить  

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


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

 

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

redissx 254

Опубликовано:
Опубликовано: Автор
  29.05.2018 в 19:57, Spyhog сказал:

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

Расширить  

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

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

Spyhog 65

Опубликовано:
Опубликовано:
  30.05.2018 в 06:05, redissx сказал:

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

Расширить  

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

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

redissx 254

Опубликовано:
Опубликовано: Автор
  30.05.2018 в 08:19, Spyhog сказал:

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

Расширить  

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

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

Spyhog 65

Опубликовано:
Опубликовано:
  30.05.2018 в 08:54, redissx сказал:

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

Расширить  

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

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

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

redissx 254

Опубликовано:
Опубликовано: Автор
  30.05.2018 в 11:13, 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);

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

Ссылка на сообщение
Поделиться на других сайтах
  • 2 месяца спустя...
redissx

redissx 254

Опубликовано:
Опубликовано: Автор
  15.08.2018 в 21:51, sunx сказал:

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

Расширить  

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

Ссылка на сообщение
Поделиться на других сайтах
  • 3 недели спустя...
Kolbaser

Kolbaser 33

Опубликовано:
Опубликовано:
  13.11.2017 в 13:28, redissx сказал:


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

1510578555_cool-rating.png

Расширить  

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

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

redissx 254

Опубликовано:
Опубликовано: (изменено) Автор
  06.09.2018 в 04:31, Kolbaser сказал:

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

Расширить  

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

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

Изменено пользователем redissx
Ссылка на сообщение
Поделиться на других сайтах
  • 4 месяца спустя...
redissx

redissx 254

Опубликовано:
Опубликовано: Автор
  11.01.2019 в 19:50, Darkensand сказал:

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

0-_XzwsWTaOXdTPKTJVh8A.png

 

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

Расширить  

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

Ссылка на сообщение
Поделиться на других сайтах
  • 1 месяц спустя...

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 1
Перейти к списку тем
×
×
  • Создать...