Виджет 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.

Личный блог

14 комментариев

Чикин Артур

01.05.2013, 09:48:15

<h5 class="title"></h5>

Пустой хедер не тру в СЕО

Василий Наумкин

01.05.2013, 09:49:00

Никогда не парился про СЕО и не собираюсь начинать.

Там привязка идёт к классам - можно менять теги элементов как захочешь.

Чикин Артур

01.05.2013, 09:53:10

А все разобрался, туда же текст подгружается. P.S Исправляюсь, посмотрел исходный код страницы на этом сайте:)

Е. Вершинин

01.05.2013, 13:02:53

Тупо поставил как простой чанк в Ево. jQuery подключен внизу. Однако есть пару вещей: 1. пока не жмакнешь кнопку обновить выводится только скелет. А после нажатия выводится все как положено. 2. почему-то в Firefox даже после обновления ничего не показывает. На Хроме показывает все нормально.

Василий Наумкин

01.05.2013, 18:04:17

Chrome понимает ответ от сервера как объект, а FF как строку.

Добавил проверку

if (typeof(data) == 'string') {
    data = $.parseJSON(data);
}

вроде работает.

Andrey Grachov

01.05.2013, 22:04:48

Есть специализированная функция $.getJSON.

Евгений Борисов

02.05.2013, 02:12:30

Буду рад тоже услышать конструктивную критику на счет плагина для jQuery.

Andrey Grachov

02.05.2013, 02:44:48

- Плагины обычно стараются возвращать переданные им элементы для обеспечения связанных вызовов методов. Если возвращаемое значение может понадобиться в дальнейшем (допустим, для вызова метода reload), его можно сохранить у элемента при помощи jQuery-функции data. - Вам может прийти не один элемент, поэтому функция плагина должна выглядеть так:


$.fn.MODXCatalog = function (options) {
    return this.each(function () {
        new MODXCatalog(this, options);
    });
};

- Не уверен, насколько это критично, но лучше проверять наличие windows.console - Шаблонизатор не использует экранирование символов, поэтому, например, имя этого сайта, записанное в атрибут alt, разрушит структуру элемента (в alt останется только "Кукольная мебель фабрики"). Рекомендую посмотреть на шаблонизатор underscore.js, например - Надо пересмотреть проверку параметра only (или значения радиобаттонов на демо-сайте), потому что даже на демо-сайте консоль заполняется сообщениями о неверности этого параметра

Евгений Борисов

02.05.2013, 02:55:15

1,2 - Спасибо. Не знал. 3 - Знаю, на IE 6-7 может развалиться. Все забываю памятку про функции console написать. Ну теперь уж точно напишу)) 4 - Не хотел усложнять код. Но думаю .replace поможет в самом шаблоне. 5 - Да, не подумал как-то. Тупо вставил заведомо ложное значение в input, а оно вон как)

P.S. Спасибо за тест;-)

Andrey Grachov

02.05.2013, 03:24:10

Не за что :) Если уже доводить все до идеализма, то можно еще сделать такие мелочи: - к ajax запросу добавить обработчик ошибки, чтобы скрывать в этом случае спиннер:


$.getJSON(...).fail(function() {
    Private.hide();
});

- в Public.setConfig можно немного упростить jQuery жизнь и сохранять значение $('#' + Private.config.tpl) в переменную, а потом уже у нее обращаться к length/html - не совсем по плагину, скорее по примеру использования - в обработчиках ссылок лучше использовать e.preventDefault() вместо return false. Разница может показаться незначительной, но иногда она играет важную роль :) Думаю, будет неплохо добавить режим автоматического обновления (правда он наверное подойдет только для режима random). Его не сложно сделать самостоятельно, но пользователи же любят когда все сразу включено в плагин :D

Евгений Борисов

02.05.2013, 05:00:34

В шаблоне добавил замены кавычек на entities аналог. И избавился от return false. Вот про onclick и javascript:void(0) знаю, а вот про preventDefault() только сейчас узнал:-)

Сам плагин переделывать под return this each new не стал, т.к. это немного противоречит моей задумке с приватными и публичными методами. Да и сомневаюсь я, что будет несколько виджетов на одной странице. Не того полета плагин)

В итоге получилась 1.1 версия в который включил следующее: - Hide() в случае ошибки при ответе от сервера. - Подкорректировал логирование (проверку на window.console и отключил логер ошибок из-за некорректного значения в параметре only). - Добавил параметр timer для автоматического обновления блока.

Демка работы плагина там же.

Andrey Grachov

02.05.2013, 05:13:55

Что-то не то пошло с консолью :) Она резко из window переехала в $ ($.error будет генерировать исключение, а не логгировать сообщение). clearInterval можно вызывать без проверок, если такого идентификатора таймера нет, ничего не произойдет. Лучше использовать setTimeout вместо setInterval.

Евгений Борисов

02.05.2013, 05:35:42

Называется смотрю в книгу вижу фигу) Ведь еще в комментариях указана ссылка на stackOverflow с верным кодом. А я взял и переделал))

Спасибо за консультации, все таки на JavaScript не так часто пишу, как на php.