JavaScript Notes

Описание

В системе используется Twitter Bootstrap, который позволяет достаточно быстро разрабатывать прототипы интерфейсов, идеально подходит для интерфейсов панели администратора.

С большинством простых задач идеально справляется jQuery.

Так же в системе используется RequireJS для организации AMD.

На данный момент, пакетный менеджер для JS зависимостей не используется, но в конфигурации composer.json указаны ссылки на дистрибутивы данных библиотек, и они скачиваются автоматически при вызове composer install или composer update.

Настройки

Настройки RequireJS находятся в файле public/js/config.js

Использование

В довесок к Twiter Boostrap и RequireJS в системе есть еще несколько полезных вещей, о которых стоит помнить.

Confirm dialog

Ссылка с классом confirm запросит подтверждение перехода по указанному URL, в качестве текста будет использоваться data-confirm атрибут (либо сообщение по умолчанию Are you sure?):

<a class="confirm" href="/cache/clean" data-confirm="Are you want clean the cache?">Clean cache!</a>

AJAX links

Ссылка с классом ajax будет стучаться по указанному URL посредством XMLHttpRequest:

<a class="ajax" href="/ping">Click Me!</a>

Так же существуют следующие возможности:

• добавить данные для передачи на заданный URL используя data атрибуты (т.е. data-id="2" эквивалентно ?id=2)
• указать метод доставки, используя атрибут data-ajax-method, по умолчанию - POST
• указать тип ожидаемых данных - data-ajax-type, по умолчанию - JSON
• совместить с классом "confirm"

События:

• success.ajax.bluz - при удачном завершении AJAX запроса
• error.ajax.bluz - при ошибке в AJAX запросе

<a id="ping" class="ajax confirm" href="/ping">Click Me!</a>
<script>
$('#ping')
  .on('success.ajax.bluz', function() { console.log("OK") })
  .on('error.ajax.bluz', function() { console.log("KO") });
</script>

AJAX form

Форма с классом ajax будет отправлена посредством XMLHttpRequest по указанному в action URL:

<form class="ajax" action="/save/" method="post">
   ...
</form>

Опции:

• указать метод доставки используя атрибут method, по умолчанию - GET
• указать тип ожидаемых данных - data-ajax-type, по умолчанию - JSON

События:

• success.ajax.bluz - при удачном завершении AJAX запроса
• error.ajax.bluz - при ошибке в AJAX запросе
• success.form.bluz - при удачной отправки формы
• error.form.bluz - при ошибке в отправке формы (вернулся ответ в котором есть errors), это возможно при проверке данных

AJAX load

Клик по элементу с классом load подгружает HTML контент со страницы указанной в атрибуте href или data-ajax-source в элемент по селектору указанному в атрибуте data-ajax-target (обязательный атрибут):

<button class="load" data-source="/get/five" data-ajax-target="#load">Five!</button>
<div id="load">...</load>

Опции:

• добавить данные для передачи на заданный URL используя data атрибуты
• указать метод доставки - data-ajax-method

События:

• success.ajax.bluz - при удачном завершении AJAX запроса
• error.ajax.bluz - при ошибке в AJAX запросе

Modal dialog

Элемент с классом dialog открывает модальный диалог, контент которого в формате HTML будет доставлен посредством XMLHttpRequest:

<a class="dialog" href="/dialog">Click Me!</a>

Опции:

• добавить данные для передачи на заданный URL используя data атрибуты
• указать метод доставки - data-ajax-method
• задать стиль модального окна - data-modal-style

События:

• success.ajax.bluz - при удачном завершении AJAX запроса
• error.ajax.bluz - при ошибке в AJAX запросе
• shown.bluz.modal - при наступлении события shown.bs.modal у созданного модального окна
• hidden.bluz.modal - при наступлении события hidden.bs.modal у созданного модального окна

Tooltips

Автоматическая инициализация Tooltips для элементов с классом bluz-tooltip:

<a href="#" class="bluz-tooltip" data-toggle="tooltip" title="User Role">Username</a>

Image Preview

Для ссылок с классом bluz-preview, где href указывает на полноразмерную картинку реализован просмотр картинок:

<a href="/uploads/123.jpg" class="thumbnail bluz-preview">
   <img src="/uploads/123-small.jpg" class="img-polaroid"/>
</a>

Для картинок для img с классом bluz-preview, где data-preview указывает на полноразмерную картинку:

<img src="/uploads/123-small.jpg" class="img-polaroid bluz-preview" data-preview="/uploads/123.jpg"/>

Серверная часть

Со стороны сервера передача данных не требует от нас чего-либо экстраординарного, просто назначаем переменные в шаблон:

<?php
return function() {
    $this->assign('test', 123);
}

Ответ будет содержать JSON объект:

{"test":123}

Стоит предостеречь разработчиков при создании универсального контроллера для обычных и XMLHTTPRequest - не стоит в таких контроллерах закидывать информацию во view as is. Приведу пример - вы закидываете $view->user = $userObject - в HTML вы контролируете какие поля отображаете пользователям, а используя этот же код для ajax - нет.

Как и при работе с обычными контроллерами, мы можем использовать пакет Messages:

<?php
return
function() {
    $this->getMessages()->addNotice('Notice Text');
    $this->getMessages()->addSuccess('Success Text');
    $this->getMessages()->addError('Error Text');
}

В данном случае в ответ сервера будут добавлен заголовок Bluz-Notify и все сообщения в JSON формате:

Bluz-Notify: {"error":["Error Text"],"success":["Success Text"],"notice":["Notice Text","Method POST"]}

Можно принудительно перезагрузить текущую страницу:

<?php
return
function() {
    $this->reload():
}

За это будет отвечать заголовок Bluz-Redirect:

Bluz-Redirect: http://my.current.location

Или отправить куда-нибудь:

<?php
return
function() {
    $this->redirect("http://google.com"):
}

Заголовок Bluz-Redirect:

Bluz-Redirect: http://google.com

Размышления

Есть мысль перевесить управление с классов на data-spy (по аналогии с Twitter Bootstrap)? Но тут я вижу сразу два недостатка, которые есть в самом Bootstrap:

• обработчики вешаются независимо на data-spy[scroll] и data-spy[affix]
• нет возможности использовать их одновременно для одного элемента

Думаю было бы правильно, чтобы был следующий функционал (где-то должен быть уже реализован, нутром чую), начну с HTML:

<div data-helper="ajax confirm"></div>

Далее должна быть регистрация хэлперов в JavaScript:

$.helper.register('ajax', { 'click': function(element){/*click logic*/} } );
$.helper.register('confirm', { 'click': function(element){/*click logic*/} } );

И собственно инициализация обработчика:

$(body).on('click.bluz.helper', '[data-bluz-helper]', function(){
    var helpers = $(this).data('bluz-helper').split(' ');
    var chain = null;
    for (helperName in helpers) {
        if ($.helper.isRegistered(helperName )) {
            var helper = $.helper.get(helperName);
            if (helper.click) {
                chain = helper.click(this, chain); // or use apply?
                if (false === chain) return;
            }
        }
    }
});