Безопасно ли собирать bem-core и bem-components технологиями deps и bemhtml вместо deps-old и bemhtml-old соответственно?

Продолжаю погружение. Давно мучает вопрос, что именно делает enb-magic-platform. Какова его роль в bem-core/bem-components. Должен ли я его хотеть для своей библиотеки.

8 Осел ругается на js файл на любой странице проекта

(function() {

var origDefine = modules.define;

modules.define = function(name, deps, decl) {
    origDefine.apply(modules, arguments);

    name !== 'i-bem__dom_init' && arguments.length > 2 && ~deps.indexOf('i-bem__dom') &&
        modules.define('i-bem__dom_init', [name], function(provide, _, prev) {
            provide(prev);
        });
};

})();

Говорит что объект не поддерживает этот метод на этой строке

name !== 'i-bem__dom_init' && arguments.length > 2 && ~deps.indexOf('i-bem__dom') &&
        modules.define('i-bem__dom_init', [name], function(provide, _, prev)

Что бы это могло бы быть?

Я сломал весь мозг пытаясь понять можно ли сгенерировать контент для блока menu за один проход. Проблема заключается в том, что блок menu не приемлет в поле content контекста ничего кроме элемента menu__group или блока menu-item. Таким образом, даже если положить в контент блока menu БЭМ сущность, которая могла бы развернуться в menu__group или menu-item, будет выброшено исключение. Проблему мне удавалось решить только используя 2 прохода. Сначала выполняем преобразование блоков в поле content вне блока menu, а на второй проход уже развёрнутое содержимое размещаем в блоке menu.

В BH это получилось сделать более-менее удачно, с помощью метода bh.processBemjson(). В xjst трансформацию контента пришлось делать в bemtree, а в блок menu вставлять уже в bemhtml. Приручить applyCtx, чтобы получилось как в BH не вышло.

Хотелось бы понять, возможно ли сгенерировать таким образом содержимое блока menu средствами bemhtml,не прибегая к bemtree:

view ориентированный bemjson на входе

{
    block: 'my-menu',
    content: [
        {
            elem : 'group',
            content : [
                {
                    elem : 'item',
                    title : '1st level item with sub-item'
                    content : [
                        elem : 'group',
                        content : {
                            elem : 'item',
                            content : '2nd level item'
                        }
                    ]
                }
            ]
        },
        {
            block: 'my-menu',
            elem : 'group',
            content : [
                {
                    elem : 'item',
                    title : '1st level item but in separate section'
                }
            ]
        }
    ]
}

На выходе ожидается разметка блока my-menu один из элементов которого будет блок menu (mix my-menu__menu) внутри которого будут menu__group (mix my-menu__group) и menu-item (mix my-menu__item).

Бонусный вопрос: зачем такие ограничения накладываются в шаблонах библиотеки? Мне кажется, что логику из-за которой возникли подобные ограничения можно было возложить на js реализацию блока.

Подскажите пожалуйста. Как отправить POST без form, по событию на bem-components? С помощью deps, к своему блоку подключил я select из bem-components. А как теперь правильно получить выбранное значение из select-а? И например с помощью ajax отправить POST.

Всем доброго времени суток. Пробую разбираться в строительстве готовых, сверстанных страниц, при помощи bem-tools. И привлек внимание небольшой нюанс в следующем блоке:

   block : 'select',
      mods : { mode : 'radio', theme : 'islands', size : 'l' },
      name : 'select1',
      val : 2,
      options : [
          { val : 1, text : 'Раз' },
          { val : 2, text : 'Два' },
          { val : 3, text : 'Три' }
      ]
    ...

Вот такой html получается:

<div class="select select_mode_radio select_theme_islands select_size_l i-bem select_js_inited" data-bem="{&quot;select&quot;:{&quot;name&quot;:&quot;select1&quot;}}">
    <input class="select__control" name="select1" value="2" type="hidden">
       <button class="button button_size_l button_theme_islands button__control select__button i-bem button_js_inited _popup-destructor_js_inited" data-bem="{&quot;button&quot;:{}}" role="button" type="button">
          <span class="button__text">Два</span>
          <i class="icon select__tick" aria-hidden="true"></i>
       </button>
</div>

Далее смотрю на стили элемента

.select_theme_islands .select__tick {
   background-image: url('../../libs/bem-components/design/common.blocks/theme/_islands/arrow.svg');
...
}

А перенесенная страница в другой каталог этот svg уже не нашла конечно.

Но это ведь в уже собранных файлах o_O .bem/make.js

process.env.YENV = 'production';

На этой странице использовался только один компонент, но если их несколько... В ручную копировать элементы компонентов, переписывать их url в стилях и т.п. Или есть какие-то проф хитрости которые предстоит изучить?

Хочется получить готовый index.html, _index.js, _index.css и отправить их дальше по конвейеру, отдельно от node-js и bem-tools. Помогите пожалуйста независимо подгрузить "пимпочка.svg" в select bem-core после сборки.

Так же, косвенно есть второй вопрос, возможно его суть как-то повлияла на предыдущий результат. Каталог проекта я собирал с помощью утилиты yo bem-stub. Все движения при сборки повторял за Женей Константиновым, из видео по BEMup в Москве. Но след в след не вышло т.к. yo bem-stub предлагал небольшой список компонентов. bem-components я выбрал, но к примеру bem-core не было среди вариантов далее. И стреди технологий было совсем небольшое колличество, нежели в видео. Если точнее то это все технологии что предлагаются:

? Choose technologies to be used in the project: 
 ◯ BEMJSON
 ◯ ie.css
 ◯ ie8.css
 ◯ ie9.css
❯◯ BEMTREE
 ◯ node.js
 ◯ browser.js+bemhtml

а как же ie6? )) Или другие.

Разве menu-item используется вне блока menu?

В #296 я рассказал, как я кастомизировал блок menu под себя при реализации своего меню. При попытке использовать его же для списка подсказок для поля типа 'autocomplete' снова столкнулся с проблемой. Дело в том, что при навигации с помощью курсорных стрелок выделенному пункту устанавливается модификатор hovered. Этот же модификатор используется и при наведении на пункт меню курсором мыши. При этом, чтобы добиться выделения пункта курсорными клавишами независимо от временного визуального эффекта при наведении придётся снова переопределять несколько методов, скопировав их практически полностью в проект (свою библиотеку) и изменив всего пару строчек в каждом. См. поле ввода URL/поиска в Хроме в качестве примера:

Возможно ли запросить более гибкую реализацию методов у блока menu, которые позволят это делать без копипаста кода библиотеки? Или я один хочу такого странного?

Хочу сказать спасибо @tadatuta за ревью кода моего компонента меню представленного на конкурс. Замечания были очень полезные.

Однако часть волнующих меня вопросов не была освещена, потому буду выносить их в отдельные посты на форум. Начну с вопроса обозначенного в заголовке.

Мой компонент построен на блоках menu, menu-item, button и прочих из библиотеки bem-components. Для реализации второго уровня в меню, я воспользовался элементом group блока menu задав ему абсолютное позиционирование и overflow-y: auto. Однако, код метода _scrollToItem не был рассчитан на такое рассположение пунктов меню и мне понадобилось переопределить его: я скопировал код метода из библиотеки, сделал автоматическое определение контейнера со скроллом и изменил функцию анимации. Так же мне не понравилось, что вызов метода _scrollToItem происходит при наведении мышью. Пришлось переопределять метод _onItemHover. Потом выяснилось, что клавиатурная навигация для переключения выбранного пункта меню устанавливает ему модификатор hovered (этому я посвящу отдельный пост). Методы _onKeyDown и _onItemClick тоже пришлось переопределять.

Всю эту красоту я оформил, как модификатор menu_fix_scroll, чтобы не ломать блок menu в других местах и разместил его как модификатор моего блока kg-menu_fix_scroll. Этот модификатор указан как зависимость самого блока kg-menu.

Вот тут я подошёл к вопросам:

• правильно ли я решил, что доопределения библиотечного блока, которые необходимы только моему блоку и нигде более правильно разместить внутри моего блока?
• критично ли, что kg-menu_fix_scroll.js фактически описывает menu_fix_scroll?
• есть ли другие более изящные пути решения такой проблемы?

Сейчас я делаю поле типа autocomplete в рамках компонента поиска. Есть мысль сделать его на базе dropdown, определив новый модификатор dropdown_switcher_input. Снова возникают вопросы означенные выше.

Вариант 1. В блок dropdown добавить модификатор _switcher_input. (Будет странно смотреться, как не совсем самостоятельная сущность. Скорее всего не получится выделить общие правила для отображения попапа, оставив только метод аналогичный onSwitcherClick) Использовать его в блоке autocomplete (или даже в модификаторе _type_autocomplete блока input). Затем всё это использовать это в моём блоке поиска.

Вариант 2. Определять модификатор dropdown_switcher_input внутри autocomplete / input_type_autocomplete.

Вариант 3. Не использовать код dropdown и реализовать autocomplete / input_type_autocomplete самостоятельно.

Вариант 4. Только что придумал вариант, похожий на правильный ответ. Наследовать autocomplete (input_type_autocomplete врядли получится?) от dropdown.

Как-нибудь можно самому дооформить данный блок?А то я убираю модификатор islands и там треш получается. Не совсем понятно, как правильно его оформлять. Так как , лезу в код и вижу, что надо отдельно стилизовать кнопку по которой щелкаем, отдельно выпадающий список. А я например, хочу вместо желтого цвета, сделать синий , приходиться прописывать все тоже самое у себя на уровне проекта и там менять или так и надо?

Давно хочу спросить: как, используя bem-core и bem-components собрать статичный html, который можно будет использовать на любой платформе. Т.е. я хочу, например, чтобы блоки page и ua были собраны из всех слоёв переопределения (touch, desktop).

Дело в том, что библиотеки не поддерживают работу этих слоёв одновременно, и более того - не собираются.

Как быть, что делать?

Не хотелось бы изобретать велосипед, думаю уже ни раз написано.

Хотелось бы увидеть, что то вроде блока dropdown из bem-components, но чтобы попап отображался при наведении, а не при клике.

Спасибо!

Подскажите, пожалуйста. На своем проекте я настроил грант и хочу подключить в проект bem-core ради фрэймворка i-bem.js, и подключить bem-components ради блока дропдауна. Скажите, можно ли будет подключить эти библиотеки, не используя ваши сборщики? Просто отдельно подключить i-bem.js не хочу, хочу именно тот, который находится в bem-core т.к. хочу использовать ym модульную систему. В чем стал вопрос? В том, что у вас парадигма уровней переопределения и, если я подключу какую-нибудь библиотеку, а та в свою очередь переопределяет js библиотеки, которая находится на уровне переопределения ниже, то как это все подключить не используя вашего сборщика? Надеюсь, вы уловили суть вопроса, если что, я дополнительно поясню, спасибо.

Не могу разобратьcя:

{
    block: 'logo',
    mix: { block: 'header', elem: 'logo' },
    content: [
        {
            elem: 'name',
            content: {
                block: 'image',
                mix: {block: 'logo', elem: 'pic'},
                url: 'карзина.svg',
                alt: ' альтернативный текст '
            }
        }
}

Вопрос: Как сделать чтобы image блок находил картинку которая лежит в папке блока logo, но не хочется менять путь url

Свершилось!

Добрый день.

Пытаюсь сделать так:

index.bemjson.js

({
    block: "page",
    title: 'index',
    head: [
        { elem: 'css', url: '_index.css' }
    ],
    scripts: [{ elem: 'js', url: '_index.js' }],
    content: [
        {
            block: 'simpleBlock'

        }
    ]
})

simbleBlock.bemhtml

block('simpleBlock')(
    js()(true),
    tag()('div'),
    content()(
    {
        block: 'button',
        text: 'Click Me',
        mods: {
            theme: 'normal',
            size: 'l'
        }
    })
)

simpleBlock.deps.js

({
    mustDeps: [
        {
            block: 'button'
        }
    ]
})

Проект стандартный project-stub. Что не так?

Всем привет. Прислали вот такой скриншот. https://yadi.sk/i/5-NyX9-Abc3he Попап себя отлично ведет на разрешениях меньше 2000px. Когда больше почему то съезжает на 20px.

В js ничего странного.

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

provide(BEMDOM.decl(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                var control = this.findBlockInside({ block : 'checkbox', modName : 'theme', modVal : 'menu'});
                var popup = this.findBlockInside({ block : 'popup', modName : 'theme', modVal : 'menu'});

                popup.setTarget(this);
                control.bindTo('click', function() {
                    popup.toggleMod('visible');
                });
            }
        }
    }
}));

});

В css похоеже тоже ничего не обычного. Сайт http://domjourvrn.ru .

Посмотрите может бага?

Привет. Наткнулся на такую проблему. Когда делаю попап

 {
                block : 'popup',
                mods : { autoclosable : true },
               ...
}

Внутри которого есть блок select который в свою очередь использует блок popup, то по клику (выбору их селекта) попап родитель скрывается.

Подскажите как лечить? Знаю про то что блок popup будет переделан, понимаю что скорее всего не подразумевалось что попап может быть в попапе с поведением автоскрытия, но интересны варианты решения.

Кажется, я упустила что-то из документации по bemhtml. Хочу ответы на следующие простые вопросы:
1) как в bemhtml связать input-radio с label, когда radio не находится внутри label?
2) как определить в bemhtml input-radio и label, когда radio внутри label?
в обоих случаях radio одиночный.
Примеры видела, пост про radio (http://ru.bem.info/libs/bem-components/v2/desktop/radio/docs/) читала.