1 /**
2 * Gumby Tabs
3 */
4 !function($) {
5 
6 	'use strict';
7 
8 	function Tabs($el) {
9 
10 		Gumby.debug('Initializing Tabs', $el);
11 
12 		this.$el = $el;
13 		this.$nav = this.$el.find('> ul.tab-nav > li');
14 		this.$content = this.$el.children('.tab-content');
15 
16 		var scope = this;
17 
18 		// listen for click event on tab nav and custom gumby set event
19 		this.$nav.children('a').on(Gumby.click, function(e) {
20 			e.preventDefault();
21 			scope.click($(this));
22 		});
23 
24 		// listen for gumby.set value for dynamically set tabs
25 		this.$el.on('gumby.set', function(e, index) {
26 			Gumby.debug('Set event triggered', scope.$el);
27 			scope.set(e, index);
28 		});
29 	}
30 
31 	// handle tab nav click event
32 	Tabs.prototype.click = function($this) {
33 		// index of item to activate
34 		var index = $this.parent().index();
35 
36 		if(this.$nav.eq(index).add(this.$content.eq(index)).hasClass('active')) {
37 			return;
38 		}
39 
40 		Gumby.debug('Setting active tab to '+index, this.$el);
41 
42 		// deactivate other tab navigation and content
43 		this.$nav.add(this.$content).removeClass('active');
44 
45 		// activate this tab nav link and content
46 		this.$nav.eq(index).add(this.$content.eq(index)).addClass('active');
47 
48 		// trigger gumby.change event and pass current active tab index
49 		Gumby.debug('Triggering onChange event', this.$el);
50 		this.$el.trigger('gumby.onChange', index);
51 	};
52 
53 	// set specific tab
54 	Tabs.prototype.set = function(e, index) {
55 		this.$nav.eq(index).find('a').trigger(Gumby.click);
56 	};
57 
58 	// add initialisation
59 	Gumby.addInitalisation('tabs', function() {
60 		$('.tabs').each(function() {
61 			var $this = $(this);
62 			// this element has already been initialized
63 			if($this.data('isTabs')) {
64 				return true;
65 			}
66 			// mark element as initialized
67 			$this.data('isTabs', true);
68 			new Tabs($this);
69 		});
70 	});
71 
72 	// register UI module
73 	Gumby.UIModule({
74 		module: 'tabs',
75 		events: ['onChange', 'set'],
76 		init: function() {
77 			Gumby.initialize('tabs');
78 		}
79 	});
80 }(jQuery);
81