stylie.tabs
Version:
100% width tabbed content with some example media queries for smaller screens.
149 lines (124 loc) • 3.9 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: stylie.tabs.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: stylie.tabs.js</h1>
<section>
<article>
<pre class="prettyprint source"><code>/*
* stylie.tabs
* http://github.com/typesettin
*
* Copyright (c) 2015 Typesettin. All rights reserved.
*/
'use strict';
var extend = require('util-extend'),
classie = require('classie'),
events = require('events'),
util = require('util');
/**
* A module that represents a StylieTabs object, a componentTab is a page composition tool.
* @{@link https://github.com/typesettin/stylie.tabs}
* @author Yaw Joseph Etse
* @copyright Copyright (c) 2015 Typesettin. All rights reserved.
* @license MIT
* @constructor StylieTabs
* @requires module:util-extent
* @requires module:util
* @requires module:events
* @param {object} el element of tab container
* @param {object} options configuration options
*/
var StylieTabs = function (el, options) {
events.EventEmitter.call(this);
this.el = el;
this.options = extend({}, this.options);
extend(this.options, options);
this.showTab = this._show;
this._init();
};
util.inherits(StylieTabs, events.EventEmitter);
/** module default configuration */
StylieTabs.prototype.options = {
start: 0,
tabselector: 'nav > ul > li',
itemselector: '.ts-tabs-content > section',
currenttabclass: 'ts-tab-current',
currentitemclass: 'ts-tabs-content-current'
};
/**
* initializes tabs and shows current tab.
* @emits tabsInitialized
*/
StylieTabs.prototype._init = function () {
// tabs elemes
this.tabs = [].slice.call(this.el.querySelectorAll(this.options.tabselector));
// content items
this.items = [].slice.call(this.el.querySelectorAll(this.options.itemselector));
// current index
this.current = -1;
// show current content item
this._show();
// init events
this._initEvents();
if (this.options.callback) {
this.options.callback();
}
this.emit('tabsInitialized');
};
/**
* handle tab click events.
*/
StylieTabs.prototype._initEvents = function () {
var self = this;
this.tabs.forEach(function (tab, idx) {
tab.addEventListener('click', function (ev) {
ev.preventDefault();
self._show(idx);
});
});
this.emit('tabsEventsInitialized');
};
/**
* Sets up a new lintotype component.
* @param {number} idx tab to show
* @emits tabsShowIndex
*/
StylieTabs.prototype._show = function (idx) {
if (this.current >= 0) {
classie.remove(this.tabs[this.current], this.options.currenttabclass);
classie.remove(this.items[this.current], this.options.currentitemclass);
}
// change current
this.current = idx !== undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
classie.add(this.tabs[this.current], this.options.currenttabclass);
classie.add(this.items[this.current], this.options.currentitemclass);
this.emit('tabsShowIndex', this.current);
};
module.exports = StylieTabs;
</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="StylieTabs.html">StylieTabs</a></li></ul>
</nav>
<br clear="both">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Wed May 06 2015 13:46:05 GMT-0400 (EDT)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>