Advertisement
Guest User

Untitled

a guest
Apr 24th, 2017
64
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.39 KB | None | 0 0
  1. (function() {
  2.  
  3. 'use strict';
  4.  
  5. /**
  6. * tabs
  7. *
  8. * @description The Tabs component.
  9. * @param {Object} options The options hash
  10. */
  11. var tabs = function(options) {
  12.  
  13. var el = document.querySelector(options.el);
  14. var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);
  15. var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
  16. var activeIndex = 0;
  17. var initCalled = false;
  18.  
  19. /**
  20. * init
  21. *
  22. * @description Initializes the component by removing the no-js class from
  23. * the component, and attaching event listeners to each of the nav items.
  24. * Returns nothing.
  25. */
  26. var init = function() {
  27. if (!initCalled) {
  28. initCalled = true;
  29. el.classList.remove('no-js');
  30.  
  31. for (var i = 0; i < tabNavigationLinks.length; i++) {
  32. var link = tabNavigationLinks[i];
  33. handleClick(link, i);
  34. }
  35. }
  36. };
  37.  
  38. /**
  39. * handleClick
  40. *
  41. * @description Handles click event listeners on each of the links in the
  42. * tab navigation. Returns nothing.
  43. * @param {HTMLElement} link The link to listen for events on
  44. * @param {Number} index The index of that link
  45. */
  46. var handleClick = function(link, index) {
  47. link.addEventListener('click', function(e) {
  48. e.preventDefault();
  49. if (index == activeIndex){
  50. tabContentContainers[activeIndex].classList.remove('is-active');
  51. tabNavigationLinks[activeIndex].classList.remove('is-active');
  52. activeIndex = 0;
  53. }
  54. else {
  55. goToTab(index);
  56. }
  57. });
  58. };
  59.  
  60. /**
  61. * goToTab
  62. *
  63. * @description Goes to a specific tab based on index. Returns nothing.
  64. * @param {Number} index The index of the tab to go to
  65. */
  66. var goToTab = function(index) {
  67. if(index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
  68. tabNavigationLinks[activeIndex].classList.remove('is-active');
  69. tabNavigationLinks[index].classList.add('is-active');
  70. tabContentContainers[activeIndex].classList.remove('is-active');
  71. tabContentContainers[index].classList.add('is-active');
  72. activeIndex = index;
  73. }
  74. };
  75.  
  76. /**
  77. * Returns init and goToTab
  78. */
  79. return {
  80. init: init,
  81. goToTab: goToTab
  82. };
  83.  
  84. };
  85.  
  86. /**
  87. * Attach to global namespace
  88. */
  89. window.tabs = tabs;
  90.  
  91. })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement