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