Comments

by alexeilavrov

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container my-3">

<div id="hypercomments_mix"></div>

<ul class="article-list">
    <li>
        <a href="https://www.metrtv.ru/articles/second_estate/11658" target="_blank" class="article-link">Купить квартиру и заработать на сдаче в аренду – расчеты доходности и таблица по районам Екатеринбурга</a>
        <ul class="attr">
            <li class="date">15 марта 2018</li>
        </ul>
    </li>
    <li>
        <a href="https://www.metrtv.ru/articles/second_estate/11640" target="_blank" class="article-link">Парадоксальный рост цен и другие тренды вторичного рынка жилья Екатеринбурга</a>
        <ul class="attr">
            <li class="date">6 марта 2018</li>
        </ul>
    </li>
    <li>
        <a href="https://www.metrtv.ru/articles/second_estate/11617" target="_blank" class="article-link">Шумит, заливает, ломает, мусорит. Как воздействовать на соседа, которого не воспитали родители</a>
        <ul class="attr">
            <li class="date">27 февраля 2018</li>
        </ul>
    </li>
    <li>
        <a href="https://www.metrtv.ru/articles/second_estate/11561" target="_blank" class="article-link">Кто и почему может оспорить сделку купли-продажи квартиры. И как защититься покупателю</a>
        <ul class="attr">
            <li class="date">6 февраля 2018</li>
        </ul>
    </li>
    <li>
        <a href="https://www.metrtv.ru/articles/second_estate/11474" target="_blank" class="article-link">Как ребёнку стать покупателем квартиры и как заставить работать...

CSS

body    {font-family: 'PT Sans', sans-serif; font-size:16px; }

ul.article-list {list-style: none;}
ul.article-list li {margin-bottom: 10px;}

ul.attr {list-style: none; display: inline-block; margin: 0; padding: 0;}
ul.attr li  {display: inline-block; margin: 0 0 0 10px;}
/* ul.attr li.comments-counter {display: none;} */
ul.attr li.comments-counter {color: #5aae4a; }
ul.attr li.comments-counter:before {font-family: FontAwesome; content: "\f075"; margin-right: 5px; font-style: normal; font-weight: normal; text-decoration: inherit ;}

JavaScript

var getSumComments = function(url, item){

    var signature;
    var sum = 0;

    $.ajax({
        type: 'GET',
				cache: false,
        crossDomain: true,
        url: 'https://www.metrtv.ru/util_scripts/al-delete-sha1.php',
        data: {
        url: url
        }
    }).then(function(signature){
        console.log(signature);
        return $.ajax({
            type: 'POST',
            url: 'https://c1api.hypercomments.com/1.0/streams/get',
            jsonpCallback: 'callbackFun', 
            dataType: 'jsonp',
            cache: false,
            crossDomain: true,
            data: {
            body: '{"widget_id":11070,"link":"' + url + '"}',
            signature: signature
            }
        });
    }).then(function(responseHC){
        console.log(responseHC.data[0].cm2 + ' — ' + url);
    });
};


$(document).ready(function(){
    $('ul.article-list > li').each(function(key, item) {
        getSumComments($(item).children('a').attr('href'),$(item));
        // console.log(item);
    });
});