diff --git a/rocketbelt/components/tabcordions/rocketbelt.tabcordions.js b/rocketbelt/components/tabcordions/rocketbelt.tabcordions.js index d5398a8f..ef58729c 100644 --- a/rocketbelt/components/tabcordions/rocketbelt.tabcordions.js +++ b/rocketbelt/components/tabcordions/rocketbelt.tabcordions.js @@ -1,7 +1,6 @@ (function ($) { - var $navlist = $('.tabcordion_navlist'); - var $tabcordion = $('.tabcordion'); - var $panels = $('.tabcordion_panels'); + var $tabcordions = $('.tabcordion'); + var keys = { ARROWS: [37, 38, 39, 40], ARROW_LEFT: 37, @@ -14,37 +13,49 @@ PAGE_DOWN: 34 }; - $navlist.on('keydown', '.tabcordion_nav-item .tabcordion_nav-trigger', function (keyVent) { - var which = keyVent.which; - var target = keyVent.target; + $tabcordions.each(function () { + var $tabcordion = $(this); + var $navlist = $tabcordion.find('.tabcordion_navlist'); + var $panels = $tabcordion.find('.tabcordion_panels'); - if ($.inArray(which, keys.ARROWS) > -1) { - var adjacentTab = findAdjacentTab(target, $navlist, which); + $navlist.on('keydown', '.tabcordion_nav-item .tabcordion_nav-trigger', function (keyVent) { + var which = keyVent.which; + var target = keyVent.target; - if (adjacentTab) { - keyVent.preventDefault(); - adjacentTab.focus(); + if ($.inArray(which, keys.ARROWS) > -1) { + var adjacentTab = findAdjacentTab(target, $navlist, which); - setActiveAndInactive(adjacentTab, $navlist); + if (adjacentTab) { + keyVent.preventDefault(); + adjacentTab.focus(); + + setActiveAndInactive(adjacentTab, $navlist); + } } - } - else if (which === keys.ENTER || which === keys.SPACE) { - keyVent.preventDefault(); - target.click(); - } - else if (which === keys.PAGE_DOWN) { - keyVent.preventDefault(); - var assocPanel = $('#' + this.getAttribute('aria-controls')); + else if (which === keys.ENTER || which === keys.SPACE) { + keyVent.preventDefault(); + target.click(); + } + else if (which === keys.PAGE_DOWN) { + keyVent.preventDefault(); + var assocPanel = $('#' + this.getAttribute('aria-controls')); - if (assocPanel) { - assocPanel.focus(); + if (assocPanel) { + assocPanel.focus(); + } } - } + }); + + // Click support + $navlist.on('click', '.tabcordion_nav-item .tabcordion_nav-trigger', function () { + setActiveAndInactive(this, $navlist); + }); }); $(document.body).on('keydown', '.tabcordion_panel', function (e) { if (e.which === keys.PAGE_UP) { e.preventDefault(); + var $navlist = $(this).closest('.tabcordion').find('.tabcordion_navlist'); var activeTab = $navlist.find('.tabcordion_nav-item.is-active .tabcordion_nav-trigger')[0]; if (activeTab) { @@ -53,11 +64,6 @@ } }); - // Click support - $navlist.on('click', '.tabcordion_nav-item .tabcordion_nav-trigger', function () { - setActiveAndInactive(this, $navlist); - }); - function findAdjacentTab(startTab, $list, key) { var dir = (key === keys.ARROW_LEFT || key === keys.ARROW_UP) ? 'prev' : 'next'; var adjacentTab = (dir === 'prev') ? @@ -105,8 +111,6 @@ } // Initial configuration based on viewport width - var isAccordionView = false; - var isTabsView = false; determineView(); // Debounced Resize() jQuery Plugin @@ -117,11 +121,13 @@ var debounce = function (func, threshold, execAsap) { var timeout; - return function debounced () { - var obj = this, args = arguments; - function delayed () { - if (!execAsap) + return function debounced() { + var obj = this; + var args = arguments; + function delayed() { + if (!execAsap) { func.apply(obj, args); + } timeout = null; } @@ -136,52 +142,55 @@ }; }; // smartresize - jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; - - })(jQuery,'smartresize'); + jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; + })(jQuery, 'smartresize'); // Resize event: $(window).smartresize(determineView); function determineView() { - var isStatic = $tabcordion.hasClass('is-static'); - - if (!isStatic) { - var winWidth = $(window).width(); - if (winWidth <= 480 && !isAccordionView) { - // Switch to accordion - $tabcordion - .removeClass('is-tabs') - .addClass('is-accordion'); - - // Better markup semantics for accordion - $panels.find('.tabcordion_panel').each(function () { - var panelID = this.id; - var assocLink = panelID && $('.tabcordion_navlist .tabcordion_nav-trigger[aria-controls="' + panelID + '"]')[0]; - if (assocLink) { - $(assocLink.parentNode).append(this); - } - }); - - isAccordionView = true; - isTabsView = false; - } - else if (winWidth > 480 && !isTabsView) { - // Switch to tabs - var wasAccordion = $tabcordion.hasClass('is-accordion'); - $tabcordion - .removeClass('is-accordion') - .addClass('is-tabs'); - - if (wasAccordion) { - $navlist.find('.tabcordion_panel').each(function () { - $panels.append(this); + var winWidth = $(window).width(); + var breakpoint = 480; + + $('.tabcordion').each(function () { + var $tabcordion = $(this); + var $panels = $tabcordion.find('.tabcordion_panels'); + var $navlist = $tabcordion.find('.tabcordion_navlist'); + + var isStatic = $tabcordion.hasClass('is-static'); + var isAccordionView = $tabcordion.hasClass('is-accordion'); + var isTabsView = !isAccordionView; + + if (!isStatic) { + if (winWidth <= breakpoint && !isAccordionView) { + // Switch to accordion + $tabcordion + .removeClass('is-tabs') + .addClass('is-accordion'); + + // Better markup semantics for accordion + $panels.find('.tabcordion_panel').each(function () { + var panelID = this.id; + var assocLink = panelID && $('.tabcordion_navlist .tabcordion_nav-trigger[aria-controls="' + panelID + '"]')[0]; + if (assocLink) { + $(assocLink.parentNode).append(this); + } }); } - - isTabsView = true; - isAccordionView = false; + else if (winWidth > breakpoint && !isTabsView) { + // Switch to tabs + var wasAccordion = $tabcordion.hasClass('is-accordion'); + $tabcordion + .removeClass('is-accordion') + .addClass('is-tabs'); + + if (wasAccordion) { + $navlist.find('.tabcordion_panel').each(function () { + $panels.append(this); + }); + } + } } - } + }); } })(jQuery);