const initJQTabs = function()

in static/js/page/index/index.js [6:54]


const initJQTabs = function () {
    const $tabsEl = $('.kjq-tabs');
    const $tabs = $tabsEl.find('.kjq-tabs-tab');

    const $tabsWrapper = $('<ul class="kjq-tabs-tab__tabs"></ul>')

    const $tabLinks = $tabs.map(function(i, el) {
        const $el = $(el);
        const isActive = i === 0;
        const title = $el.find('.kjq-tabs-tab__title').detach().text();

        const $item = $('<li class="kjq-tabs-tab__tabs-item">')
            .toggleClass('kjq-tabs-tab__tabs-item_active', isActive)
            .text(title);

        $el.toggleClass('kjq-tabs-tab_inactive', !isActive);
        $tabsWrapper.append($item);

        return $item;
    });

    $tabsEl.prepend($tabsWrapper);
    $tabsEl.addClass('kjq-tabs_inited');

    $tabsWrapper.on('click', '.kjq-tabs-tab__tabs-item', function(e) {
        const $target = $(e.target);
        const index = $target.index();

        scrollTabToCenter($tabsWrapper, $target);

        $tabs.each(function(i, el) {
            const $el = $(this);
            $el.toggleClass('kjq-tabs-tab_inactive', $el.index() !== index);

            if ($el.index() === index) {
                $el.find('[data-kotlin-playground-initialized]').each(function(i, playground) {
                    playground.KotlinPlayground.view.codemirror.refresh();
                });
            }
        });

        $tabLinks.each(function(i, el) {
            const $el = $(this);
            $el.toggleClass('kjq-tabs-tab__tabs-item_active', $el.index() === index);
        });
    });

    $('.kjq-tabs-tab__tabs').jScroll();
}