diff --git a/web/app/themes/clarity/src/components/c-tabbed-content/tabbed-content.js b/web/app/themes/clarity/src/components/c-tabbed-content/tabbed-content.js index 482ba03f2..0905c8062 100644 --- a/web/app/themes/clarity/src/components/c-tabbed-content/tabbed-content.js +++ b/web/app/themes/clarity/src/components/c-tabbed-content/tabbed-content.js @@ -1,37 +1,105 @@ -export default (function ($) { - $.fn.moji_tabbedContent = function () { +/* global console */ +/* jshint esversion: 6 */ +export default (($) => { + const tabbed = { + panels: {}, + tabs: {}, + hash: null, + /** + * Get the hash fragment + * @returns {string} + */ + getHash: () => { + return tabbed.hash || (tabbed.hash = window.location.hash.substring(1)); + }, + /** + * Show a tab and panel + * Supports accessibility + * @param tab jquery object + */ + show: (tab) => { + // hide first + tabbed.hide(); + + // then show + tab.addClass('u-current').attr('aria-selected', 'true'); + tabbed.panels.filter('[data-tab-title="' + tab.text() + '"]').show().addClass('u-current'); + }, + /** + * Hide all tabs + * Supports accessibility + */ + hide: () => { + // Hide panel + tabbed.tabs.removeClass('u-current').attr('aria-selected', 'false'); + tabbed.panels.removeClass('u-current'); + tabbed.panels.hide(); + }, + /** + * Handle hash fragments, locates named anchors or elements with IDs + * Switches the tab and activates scroll + */ + findAndDeliver: () => { + /** F I N D */ + let target = $("a[name='" + tabbed.getHash() + "']"); + + // test target ~ .get(0) reduces object to DOM element + if (typeof target.get(0) === 'undefined') { + target = $("#" + tabbed.getHash()); + } + + // attempt to match the tab title + const title = target.closest('.c-tabbed-content').data('tab-title'); + + /** D E L I V E R */ + if (typeof title !== 'undefined') { + tabbed.tabs.each(function(){ + if ($(this).text() === title) { + + // show the right tab + tabbed.show($(this)); + + // scroll to the item + $('html,body').animate({ + scrollTop: (target.offset().top - 20) + }, 'slow'); + return false; + } + }); + } + } + }; + + $.fn.mojTabbedContent = () => { // create panels var then assign u-current to first panel to display first panel - var panels = $('.js-tabbed-content') - panels.filter(':first-of-type').show().addClass('u-current') + tabbed.panels = $('.js-tabbed-content'); + tabbed.panels.filter(':first-of-type').show().addClass('u-current'); // create tabs var then assign u-current to first tab to display first tab - var tabs = $('.c-tabbed-content__nav li') - tabs.attr("tabindex", "0").attr('aria-selected', 'false') - $('.c-tabbed-content__nav li:first-child').addClass('u-current').attr('aria-selected', 'true') + tabbed.tabs = $('.c-tabbed-content__nav li'); + tabbed.tabs.attr("tabindex", "0").attr('aria-selected', 'false'); + $('.c-tabbed-content__nav li:first-child').addClass('u-current').attr('aria-selected', 'true'); - // remove nav styling if there is less than 1 tab - if (tabs.length < 1) { - $('.c-tabbed-content__nav').hide() - } - function showhidetab (tab) { - // Hide panel - tabs.removeClass('u-current').attr('aria-selected', 'false') - panels.removeClass('u-current') - panels.hide() - - // show panel - tab.addClass('u-current').attr('aria-selected', 'true') - var thisTab = tab.text() - panels.filter('[data-tab-title="' + thisTab + '"]').show().addClass('u-current') + // remove nav styling if there is less than 1 tab + if (tabbed.tabs.length < 1) { + $('.c-tabbed-content__nav').hide(); } - tabs.click( + + // try and follow hash fragments + tabbed.findAndDeliver(); + + // set up user interaction + tabbed.tabs.click( function () { - showhidetab($(this)); + tabbed.show($(this)); } - ).keyup(function (quay){ - if (quay.keyCode && quay.keyCode == "13" ){ - showhidetab($(this)); + ).keyup(function (event) { + // https://api.jquery.com/event.which/ + if (event.which === 13) { + tabbed.show($(this)); } - }) - } + }); + }; + + return null; })(jQuery); diff --git a/web/app/themes/clarity/src/globals/js/script-loader.js b/web/app/themes/clarity/src/globals/js/script-loader.js index e814ca4e6..1717c40dc 100644 --- a/web/app/themes/clarity/src/globals/js/script-loader.js +++ b/web/app/themes/clarity/src/globals/js/script-loader.js @@ -34,7 +34,7 @@ jQuery(function ($) { $('.c-news-list > .js-article-item').moji_equaliser(); // Load component scripts - $('.js-tabbed-content-container').moji_tabbedContent(); + $('.js-tabbed-content-container').mojTabbedContent(); $('.js-reveal').moji_feedbackForm(); $('.js-blog-content-ajaxfilter').moji_ajaxFilter(); $('.js-condolences-filter').moji_condolencesFilter();