V8 to v9 package conversion: tabs

Developing with Concrete
1

If anyone wants to use tabs in v9, here’s the difference in usage.

in v8:

<?php
$tabs = [
    ['tab1', t('Tab 1'), true],
    ['tab2', t('Tab 2')],
    ['tab3', t('Tab 3')],
];

echo $app->make('helper/concrete/ui')->tabs($tabs);
?>

<div id="ccm-tab-content-tab1" class="ccm-tab-content">
</div>
<div id="ccm-tab-content-tab2" class="ccm-tab-content">
</div>
<div id="ccm-tab-content-tab3" class="ccm-tab-content">
</div>

in v9:

<?php
$tabs = [
    ['tab1', t('Tab 1'), true],
    ['tab2', t('Tab 2')],
    ['tab3', t('Tab 3')],
];

echo $app->make('helper/concrete/ui')->tabs($tabs);
?>

<div class="tab-content">
    <div id="tab1" class="tab-pane <?php echo count($tabs) > 0 ? 'active' : ''; ?>">
    </div>
    <div id="tab2" class="tab-pane">
    </div>
    <div id="tab3" class="tab-pane">
    </div>
</div>

If you want to return to the last clicked tab, you can do this:

var url = window.location.pathname.toString();
var t = window.sessionStorage.getItem('tab');
var u = window.sessionStorage.getItem('url');

if (t == '') {
    $('ul.nav-tabs li.nav-item:first a').trigger('click');
}
else if (url.includes(u)) {
    $('ul.nav-tabs li.nav-item a').removeClass('active');
    $('.tab-pane').removeClass('active');
    $('ul.nav-tabs li.nav-item a[aria-controls="' + t + '"]').addClass('active');
    $('#' + t).addClass('active');
    $('ul.nav-tabs li.nav-item a[aria-controls="' + t + '"]').trigger('click');
}
else {
    window.sessionStorage.setItem('tab', '');
    window.sessionStorage.setItem('url', '');
    $('ul.nav-tabs li.nav-item:first a').trigger('click');
}

$('ul.nav-tabs li.nav-item a').on('click', function(e) {
    var tab = $(this).attr('aria-controls');
    window.sessionStorage.setItem('tab', tab);
    window.sessionStorage.setItem('url', url);
});

Feel free to make it better.

2 Likes
2

Hi! Thank you for this guide, it has been helpful.
What would be the best way to make package or block to support both tabs, for v8 and v9?