Disclaimer

Проект был создан в рамках конкурса БЭМ-проектов. Не предназначен для использования в реальных проектах.

bem-drawer-menu

Моя первая попытка сделать переиспользуемый компонент на базе БЭМ-технологий для проектов, которые не используют БЭМ. Необходимо было сделать выезжающее двухуровневое меню (off-canvas menu), которое будет формироваться в клиентском javascript.

Компонент в данном репозитории представлен двумя блоками: основным kg-menu и вспомогательным kg-glyph. Сборка осущетвляется с помощью enb, в качестве шаблонизатора выбран bh. Проект настроен с помощью generator-bem-stub.

Компонент реализован с помощью блоков представленных в библиотеке bem-components. Реализация позволила хорошо разобраться в базовых БЭМ-библиотеках bem-core и bem-components, применить ряд хаков, завести несколлько issue, уверенно отвечать коллегам на БЭМ-форуме на их вопросы, заполучить практически бесплатную поддержку экранных ридеров и клавиатурной навигации.

kg-glyph

Вспомогательный блок, предназначенный для использования svg иконок встроенных в документ (inline svg). Исходные файлы размещены в подпапке __glyphs.

Специализированные поля блока:

Поле	Тип	Описание
glyph	string	Имя глифа из списка предоставляемых блоком

Блок реализован не стандартным способом. В случае выполнения bh-шаблона на сервере вызовыается скрипт, который подготавливает и загружает json файл с содержимым исходных файлов, в качестве значений хеша. В клиентский шаблон содержимое сформированного json будет встроенно с помошью borschik.

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

{ block: 'kg-glyph', glyph: 'blank' }

kg-menu

Модификаторы блока:

Модификатор	Допустимые значения	Способы использования	Описание
autoclose	true	BEMJSON, js	Автоматическое скрытие после клика по пункту меню
visible	lvl1, full	BEMJSON, js	Текущая видимость меню: скрыт, только первый уровень, полностью
jquery	true	сборка	Содержит jQuery плагин для блока и зависимости от шаблонов для клиентского js

Специализированные поля блока:

Поле	Тип	Описание
items	array	Список основных пунктов меню. Описание формата ниже
settingsItem	string или object	Описание специального пункта "Настройки". Описание формата ниже
versionItem	string или object	Описание специального пункта "Версия". Описание формата ниже

Пункт меню описывается объектом следующего формата:

{
  title: 'Products',  // Обязательное. Название пункта меню
  value: '10',        // Если не указано, используется json пункта меню
  url: '#products',   // Если указан, то используется { block : 'menu-item', mods : { type : 'link' } }
  glyph: 'blank',     // имя глифа из блока kg-glyph
  iconUrl: '',        // url значка, который будет указан в background-image
  iconCls: '',        // имя css класса для значка (поддержка иконочных шрифтов)
  content: [          // список подпунктов в виде массива строк и/или объектов с полями
    sub_items         // подпункты могут иметь только поля: `title`, `value` и `url`.
  ]
}

settingsItem Поддерживаются все поля, кроме content. versionItem Поддерживаются поля, как у подпунктов.

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

Блок содержит реализации двух основных элементов: контейнера меню и кнопки для вызова меню, которые располагаются на разных DOM-нодах. Чтобы связать кнопку и контейнер, необходимо указать одинаковое значение ключа id для js параметра блока. В качестве контейнера будет использована декларация блока, у которой будет указано значение поля items со списком пунктов меню.

Сниппет для кнопки меню:

{ 
  block : 'kg-menu',
  mix : { block : 'page', elem : 'menu-button' },
  mods: { autoclose : true },
  js : { id : 1 },
  content: {
    elem : 'menu-button'
  }
}

Сниппет для самого меню

{ 
  block : 'kg-menu',
  mix : { block : 'page', elem : 'menu' },
  mods: { autoclose : true },
  js : { id : 1 },
  items: [],
  settingsItem: {},
  versionItem: {}
}

В силу выявленных ограничений при работе с i-bem блоками на нескольких dom-нодах, модификаторы необходимо задавать одинаковые для всех вхождений в BEMJSON.

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

Для подключения на проект в качестве javascript компонента в модификаторе jquery поставляется обёртка в виде jquery плагина. jQuery будет загружен из используемой на проекте модульной системы AMD или CommonJS, при их наличии, или из window. Если jQuery не подключен совсем, то он будет загружен с помощью модульной системы ymodules и блока loader библиотеки bem-core.

На страницу подключаются .js и .css файлы компонента. На странице размещаются два div: для контейнера меню и кнопки меню. Указываются классы и стили для них, которые позволят правильно спозиционировать данные элементы в его проекте. Вызывается плагин $.fn.kgMenu(config); для контейнера меню.

После вызова плагина, содержимое div'ов будет заполнено результатом работы шаблонов bh и возвращён инстанс блока, для доступа к его методам и возможности подписаться на события.

$(".page__menu").kgMenu({
  items : [],           // массив пунктов меню
  settingsItem : {},    // пункт настроек
  versionItem : {},     // пункт для версии
  autoclose : false,    // значение модификатора autoclose
  visible : undefined,  // начальное значение модификатора visible
  progressive : true    // сначала открывать только первый уровень
  button: $(".page__button")
}).on('item-click', function(e, data){
  console.log(data);
});