Подключение стороннего виджета

Решил я попробовать обернуть сторонний виджет в блок БЭМ, возьмем например Yandex Share

<script type="text/javascript" src="//yandex.st/share/share.js" 
    charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" 
    data-yashareQuickServices="vkontakte,facebook" data-yashareTheme="counter"></div>

Я создаю блок bem create -l desktop.blocks -b yashare с содержимым

# desktop.blocks/yashare/yashare.bemhtml
`block('yashare')(
    tag()('div'),
    bem()(false),
    cls()('yashare-auto-init'),
    attrs()({'data-yashareQuickServices': '...', 'data-yashareTheme': '...')
)

/* desktop.blocks/yashare/yashare.browser.js */
modules.define('yashare', ['loader_type_js'], function(provide, loader) {
    loader('//yandex.st/share/share.js', provide);
});

А теперь вопрос, как воспользоваться данным блоком, чтоб подключения share.js было единожды (это уже реализует loader), но только в случае наличия на странице блоков yashare?

Если в yashare.browser.js добавить modules.require(['yashare'], function() {}); то подключение скрипта будет вне зависимости от наличия на странице блоков.

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

P.S. Из-за плохой, не структурированной, а местами просто устаревшей документации - очень высокий порог вхождения...

10 years ago

tavriaforever

Как вариант можно в родительском блоке, например page - проверять наличие нужных тебе блоков на странице и если такие есть - грузить скрипт, например

modules.define('page', ['i-bem__dom', 'yashare'], function(provide, BEMDOM, yashare) {
    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                inited: function() {
                    this.findBlocksInside('yashare') && yashare.load();
                }
            }
        }
    }));
});

10 years ago

vlastv

Мысль понятна, но что если на странице 5-10-100 разных виджетов, каждый прописывать в page?

10 years ago

voischev

Да актуальный вопрос. )

@vlastv если нужны шары можно воспользоваться этой либой http://voischev.github.io/bem-social/

Но там такая же проблема с yashare. Можно мне написать issue

10 years ago

tadatuta

Самый простой путь — это оформить виджет БЭМ-блоком, он сам себя позовет:

bemjson

{
    block: 'yashare',
    quickServices : [
        'vkontakte',
        'facebook'
    ],
    theme: 'counter',
    l10n: 'ru'
},
{
    block: 'yashare',
    quickServices : [
        'vkontakte',
        'facebook'
    ]
},
{
    block: 'yashare',
    quickServices : [
        'vkontakte',
        'facebook'
    ]
}

yashare.bemhtml

block('yashare')(
    js()(true),
    cls()('yashare-auto-init'),
    attrs()(function() {
        var ctx = this.ctx;
        return {
            'data-yashareQuickServices': (ctx.quickServices || []).join(','),
            'data-yashareTheme': ctx.theme || 'counter',
            'data-yashareL10n': ctx.l10n || 'ru'
        };
    })
);

yashare.browser.js

modules.define('yashare', ['i-bem__dom', 'loader_type_js'], function(provide, BEMDOM, Loader) {
    provide(BEMDOM.decl('yashare', {
        onSetMod: {
            js: {
                inited: function() {
                    Loader('//yandex.st/share/share.js');
                }
            }
        }
    }));
});

10 years ago

mursya

если вы хотите задать вопрос команде, то ставьте еще и метку asktheteam ;) спасибо!

10 years ago

mursya

P.S. Из-за плохой, не структурированной, а местами просто устаревшей документации - очень высокий порог вхождения... — это не так Но если конкретный случай хочется решить, нужно писать про этот конкретный случай Спасибо

10 years ago

vlastv

Ни в коем случае не конкретный случай. Хочу проект над которым я работаю, постепенно перевести на BEM. В свободное время смотрю пути решения для конкретных блоков на сайте, и часто не нахожу информацию. Данный вопрос не связан с темой про документацию, хотя и такие Use Case, не плохо было бы описывать.

10 years ago

mursya

Данный вопрос не связан, но зато из твоих комментов именно такое впечатление и создается. «P.S. Из-за плохой, не структурированной, а местами просто устаревшей документации». Мы описываем все, что 1) можем 2) успеваем. Такие юзкейсы —это и твои в том числе юзкейсы, про которые можно приходить, рассказывать, описывать и делиться. Про остальное тоже достаточно спросить, а не вылить ушат негатива, который в переписке потом становится «Ни в коем случае не конкретный случай». Камон, мы же одно дело делаем.

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