БЭМ и темы

Форум /

Доброго времени суток. В БЭМ являюсь новичком. Пытаюсь сверстать свой проект, и столкнулся с проблемой: стоит задача вывести переключалку цветовых тем сайта (тёмная, светлая) например. Но что то никак не соображу, как мне с помощью js обойти все элементы и заменить один модификатор на другой. И в примерах не нашёл (( Подскажите пожалуйста, в какую сторону копать. Спасибо.

10 years ago

dab

@nejtr0n Привет. С помощью i-bem.js это сделать очень просто. Достаточно подробно работа с модификаторами описана в соответствующем разделе документации.

Я бы вынес логику переключения в отдельный блок — пусть будет theme-switcher и примиксовал его к блоку page. После этого можно написать примерно следующее:

modules.define('theme-switcher', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {

    onSetMod: {
        js: {
            inited: function() {
                this._button = this.findBlockInside('button');
                this._button.on('click', this._onClick);
            }
        },

        _onClick: function() {
            var themeName = // как-то получаем текущую тему
            this.setMod('theme', themeName);
        }
    },

Будут вопросы — пишите.

10 years ago

tadatuta

@nejtr0n похоже, что самый дешевый вариант — это менять модификатор темы на корневом блоке (page), а во всех блоках, которые зависят от темы, использовать каскад. Реализация со стороны JS: page подписывается на изменение переключателя и меняет модификатор на себе.

10 years ago

nejtr0n

Огонь! Спасибо большое ) Буду курить i-bem.

10 years ago

sipayRT

this.setMod('theme', themeName);

для таких случаев больше подойдет this.toggleMod(). Но вариант @tadatuta мне тоже больше нравится

Чтобы оставлять комментарии, необходимо авторизоваться.