dderg/tabs

pure javascript tabs for ES6

Tabs module for es6

Requirements

• if you want ES5 support you have to use babel or browserify with babelify extension

Features

• Nested tabs
• Lazy load
• No dependencies
• ES2015 support (use babel)

if you need IE9 support, it should work (i didn't test yet) with classList polyfill

simple demo

Install

npm

npm i -S future-tabs

bower

bower i -S future-tabs

Markup

group tabs with tabs block, internal structure does not matter

<div class="tabs">
	<div class="tabs__toggle tabs__toggle_active">tab 1</div>
	<div class="tabs__toggle">tab 2</div>
	<div class="tabs__tab">tab 1 content</div>
	<div class="tabs__tab">tab 2 content</div>
</div>

Lazy Load

<div class="tabs">
	<div class="tabs__toggle tabs__toggle_active">tab 1</div>
	<div class="tabs__toggle">tab 2</div>
	<div class="tabs__tab">tab 1 content</div>
	<div class="tabs__tab" data-src="path/to/contentToBeLoaded">preloader</div>
</div>

Simple usage

import initTabs from 'future-tabs';
initTabs('.tabs');

or

initTabs({
	selector: '.tabs',
	blockClassName: 'tabs' //optional
})

Extended usage

import {Tabs} from 'future-tabs';
const tabs = new Tabs(document.querySelector('.tabs'));

or

import {Tabs} from 'future-tabs';
const tabsDiv = document.getElementById('someCustomId');
new Tabs(tabsDiv, 'tabs'); // 'tabs' here is _bem block class name

Destroy

const tabs = new Tabs(DOMElement);
tabs.destroy();

if you want to init again just do

tabs.init();

If you don't use commonjs build system (like browserify or webpack) you should add this before script

<script>
	var module = {exports: {}};
	var exports = module.exports;
</script>

Build

gulp

todo

• tests

Changelog

1.3.2

• add destroy method #5

1.3.0

• add nested tabs

1.2.1

• xhr error output to console

1.2.0

• add lazy load

1.1.0

• block class name (prefix) can be set

1.0.0

• you are welcome to use it and contribute

tabs's Issues

es5 version seems to depend on babel polyfill

The file tabs.es5.js works when the babel polyfill is used. But without the polyfill I get the following error:
TypeError: document.querySelectorAll(...)[Symbol.iterator] is not a function

Exports is not defined

I get an "Uncaught ReferenceError: exports is not defined " in tabs.es5.js:4

exports boilerplate

The following code (required when using no commonjs) stops other plugins to work:

var module = {exports: {}};
var exports = module.exports;

In my case the plugin https://github.com/cferdinandi/smooth-scroll breaks. I hope that we can get rid of these two lines of code. The plugin "smooth-scroll" checks for the existence of the object "exports" as follows:

(function (root, factory) {
    if ( typeof define === 'function' && define.amd ) {
        define([], factory(root));
    } else if ( typeof exports === 'object' ) {
        module.exports = factory(root);
    } else {
        root.smoothScroll = factory(root);
    }
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {

I don't know what would be the correct solution.

Destroy method missing

In order to free resources every plugin should expose some method to destroy/stop the plugin as explained in http://acuriousanimal.com/blog/2013/02/25/things-i-learned-creating-a-jquery-plugin-part-ii/

    destroy: function() {
        ...
    },

Block-scoped declerations not supported

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode in tabs.js line 11

I am using this polyfill: https://github.com/nicksrandall/babel-polyfill

Leading slash in bower.js main value

Currenttly:

"main": "/dist/tabs.js",

Suggested fix:

"main": "dist/tabs.js",

The command "grunt wiredep" does not find the path beginning with a leading slash.