Виджет on-modx.ru

Как известно, сегодня хороший праздник "День международной солидарности трудящихся", непонятно зачем переименовынный в "Праздник весны и труда" у нас.

Так что, поздравляю всех трудящихся с нашим профессиональным праздником и желаю дальнейших успехов!

Сам, накануне, тоже немного потрудился и сделал простейший виджет для показа каталога on-modx.ru через его api, благо, у проекта как раз юбилей.

Виджет интересен тем, что работает на ajax, но без php и располагается в одном единственном чанке.

<div id="on_modx" style="text-align:center">
    <h4 class="header">Сайты на MODX</h4>
    
    <div class="links"><small>
        <a href="http://on-modx.ru/">Посмотреть все</a> | <a href="http://on-modx.ru/catalog/add-site">Добавить свой</a>
    </small></div>

    <a href="" class="image"><img src="" alt="" title=""></a>
    
    <small class="version"></small>
    <h5 class="title"></h5>
    <a href="javascript:void(0)" onclick="return getSite();" class="refresh">Обновить</a>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        getSite();
    });
    function getSite() {
        var elem = $('#on_modx');
        $('.image img', elem).attr('src', '/inc/img/spinner.gif');
        $.get('http://on-modx.ru/api', {'mode': 'json', 'display': 1, 'random': 1, 'w': 250, 'h': 0}, function(data) {
            if (typeof(data) == 'string') {
                data = $.parseJSON(data);
            }
            if (data[0]) {
                var site = data[0];
                $('.title', elem).text(site.name);
                $('.version', elem).text(site.ver);
                $('.image', elem).attr('href', site.fullinfo);
                $('.image img', elem).attr('src', site.src);
            }
            else {
                elem.hide();	
            }
        });
    }
</script>

То есть, базовая разметка, функция для запроса на удалённый сервис (который разрешает такие запросы) и вставка ответа в разметку.

Функция запускается при загрузке страницы, также можно кликать по ссылке "обновить". Очень-очень просто и гибко, на мой взгляд. Если на сервис не отдаст ответ - весь блок будет просто спрятан.

Кому нравится - прикручивайте себе. Нужно просто скопипастить и положить бегунок загрузки в /inc/img/spinner.gif.