Виджет 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 комментариев

Чикин Артур
<h5 class="title"></h5>
Пустой хедер не тру в СЕО
Василий Наумкин
Никогда не парился про СЕО и не собираюсь начинать.
Там привязка идёт к классам - можно менять теги элементов как захочешь.
Чикин Артур
А все разобрался, туда же текст подгружается. P.S Исправляюсь, посмотрел исходный код страницы на этом сайте:)
Е. Вершинин
Тупо поставил как простой чанк в Ево. jQuery подключен внизу. Однако есть пару вещей: 1. пока не жмакнешь кнопку обновить выводится только скелет. А после нажатия выводится все как положено. 2. почему-то в Firefox даже после обновления ничего не показывает. На Хроме показывает все нормально.
Василий Наумкин
Chrome понимает ответ от сервера как объект, а FF как строку.
Добавил проверку
if (typeof(data) == 'string') {
    data = $.parseJSON(data);
}
вроде работает.
Andrey Grachov
Есть специализированная функция $.getJSON.
Евгений Борисов
Буду рад тоже услышать конструктивную критику на счет плагина для jQuery.
Andrey Grachov
- Плагины обычно стараются возвращать переданные им элементы для обеспечения связанных вызовов методов. Если возвращаемое значение может понадобиться в дальнейшем (допустим, для вызова метода reload), его можно сохранить у элемента при помощи jQuery-функции data. - Вам может прийти не один элемент, поэтому функция плагина должна выглядеть так:

$.fn.MODXCatalog = function (options) {
    return this.each(function () {
        new MODXCatalog(this, options);
    });
};
- Не уверен, насколько это критично, но лучше проверять наличие windows.console - Шаблонизатор не использует экранирование символов, поэтому, например, имя этого сайта, записанное в атрибут alt, разрушит структуру элемента (в alt останется только "Кукольная мебель фабрики"). Рекомендую посмотреть на шаблонизатор underscore.js, например - Надо пересмотреть проверку параметра only (или значения радиобаттонов на демо-сайте), потому что даже на демо-сайте консоль заполняется сообщениями о неверности этого параметра
Евгений Борисов
1,2 - Спасибо. Не знал. 3 - Знаю, на IE 6-7 может развалиться. Все забываю памятку про функции console написать. Ну теперь уж точно напишу)) 4 - Не хотел усложнять код. Но думаю .replace поможет в самом шаблоне. 5 - Да, не подумал как-то. Тупо вставил заведомо ложное значение в input, а оно вон как)
P.S. Спасибо за тест;-)
Andrey Grachov
Не за что :) Если уже доводить все до идеализма, то можно еще сделать такие мелочи: - к ajax запросу добавить обработчик ошибки, чтобы скрывать в этом случае спиннер:

$.getJSON(...).fail(function() {
    Private.hide();
});
- в Public.setConfig можно немного упростить jQuery жизнь и сохранять значение $('#' + Private.config.tpl) в переменную, а потом уже у нее обращаться к length/html - не совсем по плагину, скорее по примеру использования - в обработчиках ссылок лучше использовать e.preventDefault() вместо return false. Разница может показаться незначительной, но иногда она играет важную роль :) Думаю, будет неплохо добавить режим автоматического обновления (правда он наверное подойдет только для режима random). Его не сложно сделать самостоятельно, но пользователи же любят когда все сразу включено в плагин :D
Евгений Борисов
В шаблоне добавил замены кавычек на entities аналог. И избавился от return false. Вот про onclick и javascript:void(0) знаю, а вот про preventDefault() только сейчас узнал:-)
Сам плагин переделывать под return this each new не стал, т.к. это немного противоречит моей задумке с приватными и публичными методами. Да и сомневаюсь я, что будет несколько виджетов на одной странице. Не того полета плагин)
В итоге получилась 1.1 версия в который включил следующее: - Hide() в случае ошибки при ответе от сервера. - Подкорректировал логирование (проверку на window.console и отключил логер ошибок из-за некорректного значения в параметре only). - Добавил параметр timer для автоматического обновления блока.
Демка работы плагина там же.
Andrey Grachov
Что-то не то пошло с консолью :) Она резко из window переехала в $ ($.error будет генерировать исключение, а не логгировать сообщение). clearInterval можно вызывать без проверок, если такого идентификатора таймера нет, ничего не произойдет. Лучше использовать setTimeout вместо setInterval.
Евгений Борисов
Называется смотрю в книгу вижу фигу) Ведь еще в комментариях указана ссылка на stackOverflow с верным кодом. А я взял и переделал))
Спасибо за консультации, все таки на JavaScript не так часто пишу, как на php.
Сергей Шлоков
Подтверждаю. На FF только spinner крутится - обновляй, не обновляй. На опере все работает гут.
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Дмитрий
21.12.2024, 13:27:06
Здравствуйте.В ModX есть полезная функция "заморозить url родителя". При ее включении вместо: УРЛ п...
Дмитрий
14.12.2024, 09:10:38
Василий, прошу прощения, тупанул, не разобрался сразу. Фреймворк отличный! "Чистый лист" на vue, рис...
Василий Наумкин
05.12.2024, 20:01:14
В итоге основная ошибка была в неправильном общем root в Nginx, из-за чего запросы не улетали на фай...
Василий Наумкин
22.11.2024, 03:33:54
Спасибо!
inna
06.11.2024, 15:47:13
Да. Все работает. Спасибо.
Василий Наумкин
01.07.2024, 11:56:41
Да, верно, именно так. А в контроллере, скорее всего, ловить данные методом post.
Василий Наумкин
26.06.2024, 09:38:15
О, точно, вылезает если не залогинен. Спасибо, исправил!
Василий Наумкин
09.04.2024, 04:45:01
> Ошибка 500 Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи. ...
Василий Наумкин
20.03.2024, 21:21:52
Volledig!
Андрей
14.03.2024, 13:47:10
Василий! Как всегда очень круто! Моё почтение!
Уровни подписки
Спасибо!
500 ₽ в месяц
Эта подписка ничего не даёт, просто возможность сказать спасибо за мои заметки. Подписчики отмечаются зелёненьким цветом в комментариях.
Большое спасибо!
1 000 ₽ в месяц
И эта подписка не даёт ничего, кроме оранжевого цвета в комментариях и возможности сказать спасибо, но уже большое!