i-bem.js навешиваем модификатор на блок в зависимости от размера экрана

Форум /

Всем привет! Тут с утра написал код, который навешивает модификаторы на блок в зависимости от величина экрана. Всего три модификатора. Все работает, только прошу экспертного мнения, может так делать не стоит для продакшена, или есть другие варианты реализации (быстрее, менее ресурсоемкие и т.п.).

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

  provide(BEMDOM.decl(this.name, {
    onSetMod: {
      'js': {
        'inited': function() {


          if (BEMDOM.win.width() >= 840) {

            this.setMod('desktop');

          } else if (BEMDOM.win.width() >= 480 && BEMDOM.win.width() <= 839) {

            this.setMod('touch-pad');

          } else if (BEMDOM.win.width() <= 479) {

            this.setMod('touch-phone');
          }


          this.bindToWin('resize', function(e) {

            if (BEMDOM.win.width() <= 479 && this.hasMod('touch-pad')) {

              this.delMod('touch-pad');
              this.setMod('touch-phone');

            } else if (BEMDOM.win.width() >= 480 && BEMDOM.win.width() <= 839 && this.hasMod('touch-phone')) {

              this.delMod('touch-phone');
              this.setMod('touch-pad');

            } else if (BEMDOM.win.width() >= 480 && BEMDOM.win.width() <= 839 && this.hasMod('desktop')) {
              this.delMod('desktop');
              this.setMod('touch-pad');

            } else if (BEMDOM.win.width() >= 840 && this.hasMod('touch-pad')) {
              this.delMod('touch-pad');
              this.setMod('desktop', true);

            }

          });

        }
      }

    }
}));

});

8 years ago

voischev

А почему не медиа кверис?

8 years ago

godfreyd

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

8 years ago

kompolom

@Sergei-b84 может стоит сделать подписку в live, чтобы ресайз обрабатывался только один раз? Например, если таких блоков main несколько

8 years ago

apsavin

Безотносительно самой идеи, это можно записать чуть компактнее

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

    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            'js': {
                'inited': function () {
                    this._updateWinSizeMod();
                    this.bindToWin('resize', this._updateWinSizeMod);
                }
            }
        },

        /**
         * @private
         */
        _updateWinSizeMod: function () {
            var winWidth = BEMDOM.win.width();
            if (winWidth >= 840) {
                this.setMod('win-size', 'desktop');
            } else if (winWidth >= 480 && winWidth <= 839) {
                this.setMod('win-size', 'touch-pad');
            } else if (winWidth <= 479) {
                this.setMod('win-size', 'touch-phone');
            }
        }
    }));
});

8 years ago

Yeti-or

несколько блоков main это прям класс =)

8 years ago

tadatuta

На события типа ресайза есть смысл вешать коллбеки через throttle: https://ru.bem.info/libs/bem-core/v2.8.0/desktop/functions/#elems-throttle

8 years ago

godfreyd

Спасибо всем.

8 years ago

JiLiZART

@Sergei-b84 а часто сайт будет ресайзится? Возможно стоит просто расширить блок ua или создать свой и определить пару методов, которые будут определять тип устройства по разрешению. На основе этого уже при ините блока выполнять тот или иной код. Думаю при портретной ориентации блок не сильно должен меняться, чтобы на ресайз событие реагировать.

Я бы еще брейкпоинты в константы вынес. Но это чисто стилистика.

@voischev у меня есть блок, который на мобилках слайдер со свайпом, а на десктопе обычный список. Так что такой подход думаю оправдан.

8 years ago

godfreyd

@JiLiZART Нет не часто. Про блок ua почитаю, пока с ним не знаком совсем. Спасибо.

8 years ago

voischev

@JiLiZART твой вариант оправдан. И то можно подумать как это сделать на css

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