diff options
Diffstat (limited to 'source/bower_components/foundation/js/foundation/foundation.tab.js')
| -rw-r--r-- | source/bower_components/foundation/js/foundation/foundation.tab.js | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/source/bower_components/foundation/js/foundation/foundation.tab.js b/source/bower_components/foundation/js/foundation/foundation.tab.js new file mode 100644 index 0000000..de3230f --- /dev/null +++ b/source/bower_components/foundation/js/foundation/foundation.tab.js @@ -0,0 +1,224 @@ +;(function ($, window, document, undefined) { + 'use strict'; + + Foundation.libs.tab = { + name : 'tab', + + version : '5.4.3', + + settings : { + active_class: 'active', + callback : function () {}, + deep_linking: false, + scroll_to_content: true, + is_hover: false + }, + + default_tab_hashes: [], + + init : function (scope, method, options) { + var self = this, + S = this.S; + + this.bindings(method, options); + this.handle_location_hash_change(); + + // Store the default active tabs which will be referenced when the + // location hash is absent, as in the case of navigating the tabs and + // returning to the first viewing via the browser Back button. + S('[' + this.attr_name() + '] > .active > a', this.scope).each(function () { + self.default_tab_hashes.push(this.hash); + }); + }, + + events : function () { + var self = this, + S = this.S; + + var usual_tab_behavior = function (e) { + var settings = S(this).closest('[' + self.attr_name() +']').data(self.attr_name(true) + '-init'); + if (!settings.is_hover || Modernizr.touch) { + e.preventDefault(); + e.stopPropagation(); + self.toggle_active_tab(S(this).parent()); + } + }; + + S(this.scope) + .off('.tab') + // Click event: tab title + .on('focus.fndtn.tab', '[' + this.attr_name() + '] > * > a', usual_tab_behavior ) + .on('click.fndtn.tab', '[' + this.attr_name() + '] > * > a', usual_tab_behavior ) + // Hover event: tab title + .on('mouseenter.fndtn.tab', '[' + this.attr_name() + '] > * > a', function (e) { + var settings = S(this).closest('[' + self.attr_name() +']').data(self.attr_name(true) + '-init'); + if (settings.is_hover) self.toggle_active_tab(S(this).parent()); + }); + + // Location hash change event + S(window).on('hashchange.fndtn.tab', function (e) { + e.preventDefault(); + self.handle_location_hash_change(); + + }).on('keyup', function (e) { + if (e.keyword == 9) { + // active tab + console.log(document.querySelector('[data-tab] .tab-title :focus')) + } + }); + ; + }, + + handle_location_hash_change : function () { + + var self = this, + S = this.S; + + S('[' + this.attr_name() + ']', this.scope).each(function () { + var settings = S(this).data(self.attr_name(true) + '-init'); + if (settings.deep_linking) { + // Match the location hash to a label + var hash; + if (settings.scroll_to_content) { + hash = self.scope.location.hash; + } else { + // prefix the hash to prevent anchor scrolling + hash = self.scope.location.hash.replace('fndtn-', ''); + } + if (hash != '') { + // Check whether the location hash references a tab content div or + // another element on the page (inside or outside the tab content div) + var hash_element = S(hash); + if (hash_element.hasClass('content') && hash_element.parent().hasClass('tab-content')) { + // Tab content div + self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=' + hash + ']').parent()); + } else { + // Not the tab content div. If inside the tab content, find the + // containing tab and toggle it as active. + var hash_tab_container_id = hash_element.closest('.content').attr('id'); + if (hash_tab_container_id != undefined) { + self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=#' + hash_tab_container_id + ']').parent(), hash); + } + } + } else { + // Reference the default tab hashes which were initialized in the init function + for (var ind in self.default_tab_hashes) { + self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=' + self.default_tab_hashes[ind] + ']').parent()); + } + } + } + }); + }, + + toggle_active_tab: function (tab, location_hash) { + var S = this.S, + tabs = tab.closest('[' + this.attr_name() + ']'), + tab_link = tab.find('a'), + anchor = tab.children('a').first(), + target_hash = '#' + anchor.attr('href').split('#')[1], + target = S(target_hash), + siblings = tab.siblings(), + settings = tabs.data(this.attr_name(true) + '-init'), + interpret_keyup_action = function(e) { + // Light modification of Heydon Pickering's Practical ARIA Examples: http://heydonworks.com/practical_aria_examples/js/a11y.js + + // define current, previous and next (possible) tabs + + var $original = $(this); + var $prev = $(this).parents('li').prev().children('[role="tab"]'); + var $next = $(this).parents('li').next().children('[role="tab"]'); + var $target; + + // find the direction (prev or next) + + switch (e.keyCode) { + case 37: + $target = $prev; + break; + case 39: + $target = $next; + break; + default: + $target = false + break; + } + + if ($target.length) { + $original.attr({ + 'tabindex' : '-1', + 'aria-selected' : null + }); + $target.attr({ + 'tabindex' : '0', + 'aria-selected' : true + }).focus(); + } + + // Hide panels + + $('[role="tabpanel"]') + .attr('aria-hidden', 'true'); + + // Show panel which corresponds to target + + $('#' + $(document.activeElement).attr('href').substring(1)) + .attr('aria-hidden', null); + + }; + + // allow usage of data-tab-content attribute instead of href + if (S(this).data(this.data_attr('tab-content'))) { + target_hash = '#' + S(this).data(this.data_attr('tab-content')).split('#')[1]; + target = S(target_hash); + } + + if (settings.deep_linking) { + + if (settings.scroll_to_content) { + // retain current hash to scroll to content + window.location.hash = location_hash || target_hash; + if (location_hash == undefined || location_hash == target_hash) { + tab.parent()[0].scrollIntoView(); + } else { + S(target_hash)[0].scrollIntoView(); + } + } else { + // prefix the hashes so that the browser doesn't scroll down + if (location_hash != undefined) { + window.location.hash = 'fndtn-' + location_hash.replace('#', ''); + } else { + window.location.hash = 'fndtn-' + target_hash.replace('#', ''); + } + } + } + + // WARNING: The activation and deactivation of the tab content must + // occur after the deep linking in order to properly refresh the browser + // window (notably in Chrome). + // Clean up multiple attr instances to done once + tab.addClass(settings.active_class).triggerHandler('opened'); + tab_link.attr({"aria-selected": "true", tabindex: 0}); + siblings.removeClass(settings.active_class) + siblings.find('a').attr({"aria-selected": "false", tabindex: -1}); + target.siblings().removeClass(settings.active_class).attr({"aria-hidden": "true", tabindex: -1}).end().addClass(settings.active_class).attr('aria-hidden', 'false').find(':first-child').attr('tabindex', 0); + settings.callback(tab); + target.children().attr('tab-index', 0); + target.triggerHandler('toggled', [tab]); + tabs.triggerHandler('toggled', [target]); + + tab_link.on('keydown', interpret_keyup_action ); + }, + + data_attr: function (str) { + if (this.namespace.length > 0) { + return this.namespace + '-' + str; + } + + return str; + }, + + off : function () {}, + + reflow : function () {} + }; +}(jQuery, window, window.document)); |