diff --git a/.gitignore b/.gitignore index dc91904..3d99a04 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +node_modules +.DS_Store components build public \ No newline at end of file diff --git a/lib/node-index.js b/lib/node-index.js new file mode 100644 index 0000000..b1f699f --- /dev/null +++ b/lib/node-index.js @@ -0,0 +1,103 @@ +var classes = require('component-classes') + , Emitter = require('component-emitter') + , events = require('component-event'); + + +/** + * Turn a linksEl and targetsEl + * @param {el} parent el of links you want to be tabs + * @param {el} parent el of targets for the tabs + */ +function Tabify (links, targets, options) { + if (!(this instanceof Tabify)) return new Tabify(links, targets, options); + options = options || {}; + this.hiddenClass = options.hiddenClass || "hidden"; + this.activeClass = options.activeClass || "active"; + this.links = links; + this.targets = targets; + this.current = 0; + this.bind(); + this.show(0); +}; + +/** + * Mixin emitter + */ +Emitter(Tabify.prototype); + +/** + * Show target and activate link + * @param {Number} the tab order + * @return {Tabify} + */ +Tabify.prototype.show = function (i) { + this.current = i; + this.hide(); + classes(this.links[i]).add(this.activeClass); + classes(this.targets[i]).remove(this.hiddenClass); + this.emit('show'); + return this; +} + +/** + * Hide tab. If no id is passed, hide all. + * @param {Number} tab id (order in array) + * @return {Tabify} + */ +Tabify.prototype.hide = function (id) { + for (i = 0; i < this.links.length; i++) { + if (id != null && id != i) { continue; } + classes(this.links[i]).remove(this.activeClass); + classes(this.targets[i]).add(this.hiddenClass); + } + return this; +} + +/** + * Show the next tab + * @return {Tabify} + */ +Tabify.prototype.next = function () { + if (this.current + 1 == this.links.length) { + this.emit('finished'); + this.show(0); + } else { + this.show(this.current + 1); + } + return this; +} + +/** + * Show the previous tab + * @return {Tabify} + */ +Tabify.prototype.prev = function () { + if (this.current - 1 < 0) { + this.show(this.links.length - 1); + } else { + this.show(this.current - 1); + } + return this; +} + +/** + * Bind click events + * @return {Tabify} + */ +Tabify.prototype.bind = function () { + var self = this; + bindListener = function (i) { + events.bind(self.links[i], 'click', function () { + self.show(i); + }); + }; + for (i = 0; i < this.links.length; i++) { + bindListener(i); + } + return this; +} + +/** + * Expose Tabify + */ +module.exports = Tabify; diff --git a/package.json b/package.json new file mode 100644 index 0000000..8e1cba0 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "tabify", + "version": "2.0.0", + "description": "[Component](https://github.com/component/component) for turning a list into tabs.", + "main": "lib/node-index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/fredsterss/tabify.git" + }, + "author": "Fred Stevens-Smith", + "license": "MIT", + "bugs": { + "url": "https://github.com/fredsterss/tabify/issues" + }, + "homepage": "https://github.com/fredsterss/tabify", + "dependencies": { + "component-classes": "^1.2.4", + "component-emitter": "^1.2.0", + "component-event": "^0.1.4" + } +}