With this example, I want to show how the standard DLE "like-dislike" rating can be visually transformed into any interesting form using the example of a Youtube rating. The most important thing is that this method does not affect the engine files, it is fully compatible with it, in fact, this is the standard functionality of DLE.

Here I will apply a separate counting of likes, a visual scale of the ratio of likes, the percentage of likes. With the help of js, we will calculate all this using rating and vote-num, and apply. We will do live voting based on a slightly modified standard DLE function. As a result, we will get such a super rating.

Author: WebRambo

I won't explain in detail what's what, I'll just lay it out.

1. in fullstory.tpl, we put it in the right place (I note that it is also possible in 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="like" /><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="don't like" /><span>0</span></div>
                <div class="rate-data">{rating}{vote-num}</div>
            </div>
            [/rating-type-3]


2. in your css file at the end

.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. in your js file at the end

$(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. upload pictures of likes to the images folder of the template

There is a nuance: it works if you always like it-don't like it or from scratch. If earlier there were stars or just one like and there were ratings, then it will not work (the numbers will be zeros), it is necessary to reset everything.

In the archive you will find everything written above, scattered in folders and files.

youtube-rating.rar [4.08 Kb] (downloads: 259)
MD5: 32f1ed25d80f9749d14ef213dbbf51a8


ANOTHER INTERESTING COLORFUL OPTION.

The percentage output has been added here, which is colored green-red depending on high-low

DLE rating as on Youtube

1. in fullstory.tpl, put in the right place

            [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. in your css file at the end

.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. in your js file at the end
$(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. connect icons http://fontawesome.io/icons / in any way. For example, with cdn.
in main.tpl, add to the head section

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