Добавить определение взаимодействия пользователя (data-attr)

[alexbaumgertner]

Мы добавили в блок i-ua возможность определять способ взаимодействия пользователя с интерфейсом. Эта функциональность реализована в модификаторе i-ua_interaction_yes, принцип работы ее такой: если пользователь взаимодействует со страницей с помощью мыши/указателя, то атрибуту data-interaction dom-элемента блока i-ua_interaction_yes выставляется значение pointer, а если с помощью клавиатуры, то keyboard. Использование data-атрибута вместо установки модификатора было выбрано, чтобы избежать repaint страницы при изменении css-класса у блока.

Для подключения этой функциональности на проект необходимо на уровне common.blocks:

• Доопределить bemhtml-шаблон блока b-page:

block b-page, mix: {
    var mix = applyNext() || [];

    mix.push({ block: 'i-ua', mods: { interaction: 'yes' }, js: true });
    return mix;
}

• Добавить зависимость i-ua_interaction_yes в mustDeps секцию блока b-page:

({
    mustDeps: [
        { block: 'i-ua', mods: { interaction: 'yes' } }
    ]
})

Определение способа взаимодействия пользователя с интерфейсом можно использовать например, для нормализации поведения контролов, так как в браузерах существует отличие в визуальном поведении нативных контролов (ссылка, кнопка, чекбокс и т.д.) контрол подсвечивается рамкой только если он получил фокус при клавиатурном взаимодействии (кроме полей ввода input и textarea, они всегда подсвечиваются). В контролах-блоках состояние "в фоксе" выражено обычно модификатором _focused_yes и не зависимо от способа получения фокуса контрол подсвечивается всегда, например, кнопка button:

.button_focused_yes
{
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 0 6px 2px rgba(255,204,0,.7);
         box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 0 6px 2px rgba(255,204,0,.7);
}

Для учета способа взаимодействия в контролах нужно добавить css-селектор .i-ua_interaction_yes[data-interaction='pointer'] и для него указать отмену показа рамки у контрола в фокусе, например для кнопки button:

.i-ua_interaction_yes[data-interaction='pointer'] .button_focused_yes
{
    -moz-box-shadow: none;
         box-shadow: none;
}

Пример работы блока можно посмотреть на странице http://bem.github.io/bem-bl/desktop.sets/i-ua/10-i-ua/10-i-ua.ru.html