Licensed under the Apache License, Version 2.0 (the “License”)\n * Licensed under the Apache License, Version 2.0 (the “License”)\n *
Copyright © 2013 Adobe Systems Incorporated.\n *
Project page https://github.com/adobe-accessibility/Accessible-Mega-Menu\n * @version 0.1\n * @author Michael Jordan\n * @requires jquery\n */\n\n/*jslint browser: true, devel: true, plusplus: true, nomen: true */\n/*global jQuery */\n(function ($, window, document) {\n var pluginName = 'accessibleMegaMenu',\n defaults = {\n openOnClick: false,\n uuidPrefix: 'accessible-megamenu', // unique ID's are required to indicate aria-owns, aria-controls and aria-labelledby\n menuClass: 'accessible-megamenu', // default css class used to define the megamenu styling\n topNavItemClass: 'accessible-megamenu-top-nav-item', // default css class for a top-level navigation item in the megamenu\n panelClass: 'accessible-megamenu-panel', // default css class for a megamenu panel\n panelGroupClass: 'accessible-megamenu-panel-group', // default css class for a group of items within a megamenu panel\n hoverClass: 'hover', // default css class for the hover state\n focusClass: 'focus', // default css class for the focus state\n openClass: 'open' // default css class for the open state\n },\n Keyboard = {\n BACKSPACE: 8,\n COMMA: 188,\n DELETE: 46,\n DOWN: 40,\n END: 35,\n ENTER: 13,\n ESCAPE: 27,\n HOME: 36,\n LEFT: 37,\n PAGE_DOWN: 34,\n PAGE_UP: 33,\n PERIOD: 190,\n RIGHT: 39,\n SPACE: 32,\n TAB: 9,\n UP: 38,\n keyMap: {\n 48: '0',\n 49: '1',\n 50: '2',\n 51: '3',\n 52: '4',\n 53: '5',\n 54: '6',\n 55: '7',\n 56: '8',\n 57: '9',\n 59: '',\n 65: 'a',\n 66: 'b',\n 67: 'c',\n 68: 'd',\n 69: 'e',\n 70: 'f',\n 71: 'g',\n 72: 'h',\n 73: 'i',\n 74: 'j',\n 75: 'k',\n 76: 'l',\n 77: 'm',\n 78: 'n',\n 79: 'o',\n 80: 'p',\n 81: 'q',\n 82: 'r',\n 83: 's',\n 84: 't',\n 85: 'u',\n 86: 'v',\n 87: 'w',\n 88: 'x',\n 89: 'y',\n 90: 'z',\n 96: '0',\n 97: '1',\n 98: '2',\n 99: '3',\n 100: '4',\n 101: '5',\n 102: '6',\n 103: '7',\n 104: '8',\n 105: '9',\n 190: '.'\n }\n };\n /**\n * @desc Creates a new accessible mega menu instance.\n * @param {jquery} element\n * @param {object} [options] Mega Menu options\n * @param {string} [options.uuidPrefix=accessible-megamenu] - Prefix for generated unique id attributes, which are required to indicate aria-owns, aria-controls and aria-labelledby\n * @param {string} [options.menuClass=accessible-megamenu] - CSS class used to define the megamenu styling\n * @param {string} [options.topNavItemClass=accessible-megamenu-top-nav-item] - CSS class for a top-level navigation item in the megamenu\n * @param {string} [options.panelClass=accessible-megamenu-panel] - CSS class for a megamenu panel\n * @param {string} [options.panelGroupClass=accessible-megamenu-panel-group] - CSS class for a group of items within a megamenu panel\n * @param {string} [options.hoverClass=hover] - CSS class for the hover state\n * @param {string} [options.focusClass=focus] - CSS class for the focus state\n * @param {string} [options.openClass=open] - CSS class for the open state\n * @constructor\n */\n function AccessibleMegaMenu(element, options) {\n this.element = element;\n\n // merge optional settings and defaults into settings\n this.settings = $.extend({}, defaults, options);\n\n this._defaults = defaults;\n this._name = pluginName;\n\n this.mouseTimeoutID = null;\n this.focusTimeoutID = null;\n this.mouseFocused = false;\n this.justFocused = false;\n\n this.init();\n }\n\n AccessibleMegaMenu.prototype = function () {\n\n /* private attributes and methods ------------------------ */\n var uuid = 0,\n keydownTimeoutDuration = 1000,\n keydownSearchString = '',\n isTouch = typeof window.hasOwnProperty === 'function' && !!window.hasOwnProperty('ontouchstart'),\n _getPlugin,\n _addUniqueId,\n _togglePanel,\n _clickHandler,\n _clickOutsideHandler,\n _DOMAttrModifiedHandler,\n _focusInHandler,\n _focusOutHandler,\n _keyDownHandler,\n _mouseDownHandler,\n _mouseOverHandler,\n _mouseOutHandler,\n _toggleExpandedEventHandlers;\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_getPlugin\n * @desc Returns the parent accessibleMegaMenu instance for a given element\n * @param {jQuery} element\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _getPlugin = function _getPlugin(element) {\n return $(element).closest(':data(plugin_' + pluginName + ')').data('plugin_' + pluginName);\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_addUniqueId\n * @desc Adds a unique id and element.\n * The id string starts with the\n * string defined in settings.uuidPrefix.\n * @param {jQuery} element\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _addUniqueId = function _addUniqueId(element) {\n element = $(element);\n var settings = this.settings;\n if (!element.attr('id')) {\n element.attr('id', settings.uuidPrefix + '-' + new Date().getTime() + '-' + ++uuid);\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_togglePanel\n * @desc Toggle the display of mega menu panels in response to an event.\n * The optional boolean value 'hide' forces all panels to hide.\n * @param {event} event\n * @param {Boolean} [hide] Hide all mega menu panels when true\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _togglePanel = function _togglePanel(event, hide) {\n var target = $(event.target),\n that = this,\n settings = this.settings,\n menu = this.menu,\n topli = target.closest('.' + settings.topNavItemClass),\n panel = target.hasClass(settings.panelClass) ? target : target.closest('.' + settings.panelClass),\n newfocus;\n\n _toggleExpandedEventHandlers.call(this, true);\n\n if (hide) {\n topli = menu.find('.' + settings.topNavItemClass + ' .' + settings.openClass + ':first').closest('.' + settings.topNavItemClass);\n if (!(topli.is(event.relatedTarget) || topli.has(event.relatedTarget).length > 0)) {\n if ((event.type === 'mouseout' || event.type === 'focusout') && topli.has(document.activeElement).length > 0) {\n return;\n }\n topli.find('[aria-expanded]').attr('aria-expanded', 'false').removeClass(settings.openClass).filter('.' + settings.panelClass).attr('aria-hidden', 'true');\n if (event.type === 'keydown' && event.keyCode === Keyboard.ESCAPE || event.type === 'DOMAttrModified') {\n newfocus = topli.find(':tabbable:first');\n setTimeout(function () {\n menu.find('[aria-expanded].' + that.settings.panelClass).off('DOMAttrModified.accessible-megamenu');\n newfocus.focus();\n that.justFocused = false;\n }, 99);\n }\n } else if (topli.length === 0) {\n menu.find('[aria-expanded=true]').attr('aria-expanded', 'false').removeClass(settings.openClass).filter('.' + settings.panelClass).attr('aria-hidden', 'true');\n }\n } else {\n clearTimeout(that.focusTimeoutID);\n topli.siblings().find('[aria-expanded]').attr('aria-expanded', 'false').removeClass(settings.openClass).filter('.' + settings.panelClass).attr('aria-hidden', 'true');\n topli.find('[aria-expanded]').attr('aria-expanded', 'true').addClass(settings.openClass).filter('.' + settings.panelClass).attr('aria-hidden', 'false');\n if (event.type === 'mouseover' && target.is(':tabbable') && topli.length === 1 && panel.length === 0 && menu.has(document.activeElement).length > 0) {\n target.focus();\n that.justFocused = false;\n }\n\n _toggleExpandedEventHandlers.call(that);\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_clickHandler\n * @desc Handle click event on mega menu item\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _clickHandler = function _clickHandler(event) {\n var target = $(event.currentTarget),\n topli = target.closest('.' + this.settings.topNavItemClass),\n panel = target.closest('.' + this.settings.panelClass);\n if (topli.length === 1 && panel.length === 0 && topli.find('.' + this.settings.panelClass).length === 1) {\n if (!target.hasClass(this.settings.openClass)) {\n event.preventDefault();\n event.stopPropagation();\n _togglePanel.call(this, event);\n this.justFocused = false;\n } else {\n if (this.justFocused) {\n event.preventDefault();\n event.stopPropagation();\n this.justFocused = false;\n } else if (isTouch || this.mouseFocused) {\n event.preventDefault();\n event.stopPropagation();\n _togglePanel.call(this, event, target.hasClass(this.settings.openClass));\n }\n }\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_clickOutsideHandler\n * @desc Handle click event outside of a the megamenu\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _clickOutsideHandler = function _clickOutsideHandler(event) {\n if ($(event.target).closest(this.menu).length === 0) {\n event.preventDefault();\n event.stopPropagation();\n _togglePanel.call(this, event, true);\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_DOMAttrModifiedHandler\n * @desc Handle DOMAttrModified event on panel to respond to Windows 8 Narrator ExpandCollapse pattern\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _DOMAttrModifiedHandler = function _DOMAttrModifiedHandler(event) {\n if (event.originalEvent.attrName === 'aria-expanded' && event.originalEvent.newValue === 'false' && $(event.target).hasClass(this.settings.openClass)) {\n event.preventDefault();\n event.stopPropagation();\n _togglePanel.call(this, event, true);\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_focusInHandler\n * @desc Handle focusin event on mega menu item.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _focusInHandler = function _focusInHandler(event) {\n clearTimeout(this.focusTimeoutID);\n var target = $(event.target),\n panel = target.closest('.' + this.settings.panelClass);\n target.addClass(this.settings.focusClass).on('click.accessible-megamenu', $.proxy(_clickHandler, this));\n this.justFocused = !this.mouseFocused;\n this.mouseFocused = false;\n if (this.panels.not(panel).filter('.' + this.settings.openClass).length) {\n _togglePanel.call(this, event);\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_focusOutHandler\n * @desc Handle focusout event on mega menu item.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _focusOutHandler = function _focusOutHandler(event) {\n this.justFocused = false;\n var that = this,\n target = $(event.target),\n topli = target.closest('.' + this.settings.topNavItemClass);\n\n target\n // .removeClass(this.settings.focusClass)\n .off('click.accessible-megamenu');\n\n if (window.cvox) {\n // If ChromeVox is running...\n that.focusTimeoutID = setTimeout(function () {\n window.cvox.Api.getCurrentNode(function (node) {\n if (topli.has(node).length) {\n // and the current node being voiced is in\n // the mega menu, clearTimeout,\n // so the panel stays open.\n clearTimeout(that.focusTimeoutID);\n } else {\n that.focusTimeoutID = setTimeout(function (scope, _event, hide) {\n _togglePanel.call(scope, _event, hide);\n }, 275, that, event, true);\n }\n });\n }, 25);\n } else {\n that.focusTimeoutID = setTimeout(function () {\n _togglePanel.call(that, event, true);\n }, 300);\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_keyDownHandler\n * @desc Handle keydown event on mega menu.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _keyDownHandler = function _keyDownHandler(event) {\n var that = this.constructor === AccessibleMegaMenu ? this : _getPlugin(this),\n // determine the AccessibleMegaMenu plugin instance\n settings = that.settings,\n target = $($(this).is('.' + settings.hoverClass + ':tabbable') ? this : event.target),\n // if the element is hovered the target is this, otherwise, its the focused element\n menu = that.menu,\n topnavitems = that.topnavitems,\n topli = target.closest('.' + settings.topNavItemClass),\n tabbables = menu.find(':tabbable'),\n panel = target.hasClass(settings.panelClass) ? target : target.closest('.' + settings.panelClass),\n panelGroups = panel.find('.' + settings.panelGroupClass),\n currentPanelGroup = target.closest('.' + settings.panelGroupClass),\n next,\n keycode = event.keyCode || event.which,\n start,\n i,\n o,\n label,\n found = false,\n newString = Keyboard.keyMap[event.keyCode] || '',\n regex,\n isTopNavItem = topli.length === 1 && panel.length === 0;\n\n if (target.is('input:focus, select:focus, textarea:focus, button:focus')) {\n // if the event target is a form element we should handle keydown normally\n return;\n }\n\n if (target.is('.' + settings.hoverClass + ':tabbable')) {\n $('html').off('keydown.accessible-megamenu');\n }\n\n switch (keycode) {\n case Keyboard.ESCAPE:\n _togglePanel.call(that, event, true);\n break;\n case Keyboard.DOWN:\n event.preventDefault();\n if (isTopNavItem) {\n _togglePanel.call(that, event);\n found = topli.find('.' + settings.panelClass + ' :tabbable:first').focus().length === 1;\n } else {\n found = tabbables.filter(':gt(' + tabbables.index(target) + '):first').focus().length === 1;\n }\n\n if (!found && window.opera && opera.toString() === '[object Opera]' && (event.ctrlKey || event.metaKey)) {\n tabbables = $(':tabbable');\n i = tabbables.index(target);\n found = $(':tabbable:gt(' + $(':tabbable').index(target) + '):first').focus().length === 1;\n }\n break;\n case Keyboard.UP:\n event.preventDefault();\n if (isTopNavItem && target.hasClass(settings.openClass)) {\n _togglePanel.call(that, event, true);\n next = topnavitems.filter(':lt(' + topnavitems.index(topli) + '):last');\n if (next.children('.' + settings.panelClass).length) {\n found = next.children().attr('aria-expanded', 'true').addClass(settings.openClass).filter('.' + settings.panelClass).attr('aria-hidden', 'false').find(':tabbable:last').focus() === 1;\n }\n } else if (!isTopNavItem) {\n found = tabbables.filter(':lt(' + tabbables.index(target) + '):last').focus().length === 1;\n }\n\n if (!found && window.opera && opera.toString() === '[object Opera]' && (event.ctrlKey || event.metaKey)) {\n tabbables = $(':tabbable');\n i = tabbables.index(target);\n found = $(':tabbable:lt(' + $(':tabbable').index(target) + '):first').focus().length === 1;\n }\n break;\n case Keyboard.RIGHT:\n event.preventDefault();\n if (isTopNavItem) {\n found = topnavitems.filter(':gt(' + topnavitems.index(topli) + '):first').find(':tabbable:first').focus().length === 1;\n } else {\n if (panelGroups.length && currentPanelGroup.length) {\n // if the current panel contains panel groups, and we are able to focus the first tabbable element of the next panel group\n found = panelGroups.filter(':gt(' + panelGroups.index(currentPanelGroup) + '):first').find(':tabbable:first').focus().length === 1;\n }\n\n if (!found) {\n found = topli.find(':tabbable:first').focus().length === 1;\n }\n }\n break;\n case Keyboard.LEFT:\n event.preventDefault();\n if (isTopNavItem) {\n found = topnavitems.filter(':lt(' + topnavitems.index(topli) + '):last').find(':tabbable:first').focus().length === 1;\n } else {\n if (panelGroups.length && currentPanelGroup.length) {\n // if the current panel contains panel groups, and we are able to focus the first tabbable element of the previous panel group\n found = panelGroups.filter(':lt(' + panelGroups.index(currentPanelGroup) + '):last').find(':tabbable:first').focus().length === 1;\n }\n\n if (!found) {\n found = topli.find(':tabbable:first').focus().length === 1;\n }\n }\n break;\n case Keyboard.TAB:\n i = tabbables.index(target);\n if (event.shiftKey && isTopNavItem && target.hasClass(settings.openClass)) {\n _togglePanel.call(that, event, true);\n next = topnavitems.filter(':lt(' + topnavitems.index(topli) + '):last');\n if (next.children('.' + settings.panelClass).length) {\n found = next.children().attr('aria-expanded', 'true').addClass(settings.openClass).filter('.' + settings.panelClass).attr('aria-hidden', 'false').find(':tabbable:last').focus();\n }\n } else if (event.shiftKey && i > 0) {\n found = tabbables.filter(':lt(' + i + '):last').focus().length === 1;\n } else if (!event.shiftKey && i < tabbables.length - 1) {\n found = tabbables.filter(':gt(' + i + '):first').focus().length === 1;\n } else if (window.opera && opera.toString() === '[object Opera]') {\n tabbables = $(':tabbable');\n i = tabbables.index(target);\n if (event.shiftKey) {\n found = $(':tabbable:lt(' + $(':tabbable').index(target) + '):last').focus().length === 1;\n } else {\n found = $(':tabbable:gt(' + $(':tabbable').index(target) + '):first').focus().length === 1;\n }\n }\n\n if (found) {\n event.preventDefault();\n }\n break;\n case Keyboard.SPACE:\n if (isTopNavItem) {\n event.preventDefault();\n _clickHandler.call(that, event);\n } else {\n return;\n }\n break;\n case Keyboard.ENTER:\n return;\n break;\n default:\n // alphanumeric filter\n clearTimeout(this.keydownTimeoutID);\n\n keydownSearchString += newString !== keydownSearchString ? newString : '';\n\n if (keydownSearchString.length === 0) {\n return;\n }\n\n this.keydownTimeoutID = setTimeout(function () {\n keydownSearchString = '';\n }, keydownTimeoutDuration);\n\n if (isTopNavItem && !target.hasClass(settings.openClass)) {\n tabbables = tabbables.filter(':not(.' + settings.panelClass + ' :tabbable)');\n } else {\n tabbables = topli.find(':tabbable');\n }\n\n if (event.shiftKey) {\n tabbables = $(tabbables.get().reverse());\n }\n\n for (i = 0; i < tabbables.length; i++) {\n o = tabbables.eq(i);\n if (o.is(target)) {\n start = keydownSearchString.length === 1 ? i + 1 : i;\n break;\n }\n }\n\n regex = new RegExp('^' + keydownSearchString.replace(/[\\-\\[\\]{}()*+?.,\\\\\\^$|#\\s]/g, '\\\\$&'), 'i');\n\n for (i = start; i < tabbables.length; i++) {\n o = tabbables.eq(i);\n label = $.trim(o.text());\n if (regex.test(label)) {\n found = true;\n o.focus();\n break;\n }\n }\n if (!found) {\n for (i = 0; i < start; i++) {\n o = tabbables.eq(i);\n label = $.trim(o.text());\n if (regex.test(label)) {\n o.focus();\n break;\n }\n }\n }\n break;\n }\n that.justFocused = false;\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_mouseDownHandler\n * @desc Handle mousedown event on mega menu.\n * @param {event} Event object\n * @memberof accessibleMegaMenu\n * @inner\n * @private\n */\n _mouseDownHandler = function _mouseDownHandler(event) {\n if ($(event.target).is(this.settings.panelClass) || $(event.target).closest(':focusable').length) {\n this.mouseFocused = true;\n }\n this.mouseTimeoutID = setTimeout(function () {\n clearTimeout(this.focusTimeoutID);\n }, 1);\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_mouseOverHandler\n * @desc Handle mouseover event on mega menu.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _mouseOverHandler = function _mouseOverHandler(event) {\n clearTimeout(this.mouseTimeoutID);\n $(event.target).addClass(this.settings.hoverClass);\n _togglePanel.call(this, event);\n if ($(event.target).is(':tabbable')) {\n $('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target));\n }\n };\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_mouseOutHandler\n * @desc Handle mouseout event on mega menu.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _mouseOutHandler = function _mouseOutHandler(event) {\n var that = this;\n $(event.target).removeClass(that.settings.hoverClass);\n\n that.mouseTimeoutID = setTimeout(function () {\n _togglePanel.call(that, event, true);\n }, 250);\n if ($(event.target).is(':tabbable')) {\n $('html').off('keydown.accessible-megamenu');\n }\n };\n\n _toggleExpandedEventHandlers = function _toggleExpandedEventHandlers(hide) {\n var menu = this.menu;\n if (hide) {\n $('html').off('mouseup.outside-accessible-megamenu, touchend.outside-accessible-megamenu, mspointerup.outside-accessible-megamenu, pointerup.outside-accessible-megamenu');\n\n menu.find('[aria-expanded].' + this.settings.panelClass).off('DOMAttrModified.accessible-megamenu');\n } else {\n $('html').on('mouseup.outside-accessible-megamenu, touchend.outside-accessible-megamenu, mspointerup.outside-accessible-megamenu, pointerup.outside-accessible-megamenu', $.proxy(_clickOutsideHandler, this));\n\n /* Narrator in Windows 8 automatically toggles the aria-expanded property on double tap or click.\n To respond to the change to collapse the panel, we must add a listener for a DOMAttrModified event. */\n menu.find('[aria-expanded=true].' + this.settings.panelClass).on('DOMAttrModified.accessible-megamenu', $.proxy(_DOMAttrModifiedHandler, this));\n }\n };\n\n /* public attributes and methods ------------------------- */\n return {\n constructor: AccessibleMegaMenu,\n\n /**\n * @lends jQuery.fn.accessibleMegaMenu\n * @desc Initializes an instance of the accessibleMegaMenu plugins\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n init: function init() {\n var settings = this.settings,\n nav = $(this.element),\n menu = nav.children().first(),\n\n // Only filter to those items with the selector class\n topnavitems = this.settings.topNavItems ? menu.children(this.settings.topNavItems) : menu.children();\n this.start(settings, nav, menu, topnavitems);\n },\n\n start: function start(settings, nav, menu, topnavitems) {\n var that = this;\n this.settings = settings;\n this.menu = menu;\n this.topnavitems = topnavitems;\n\n nav.attr('role', 'navigation');\n menu.addClass(settings.menuClass);\n topnavitems.each(function (i, topnavitem) {\n var topnavitemlink, topnavitempanel;\n topnavitem = $(topnavitem);\n // @FIXME: Add classed manually !!!\n // topnavitem.addClass(settings.topNavItemClass)\n topnavitemlink = topnavitem.find(':tabbable:first');\n topnavitempanel = topnavitem.children(':not(:tabbable):last');\n _addUniqueId.call(that, topnavitemlink);\n if (topnavitempanel.length) {\n _addUniqueId.call(that, topnavitempanel);\n topnavitemlink.attr({\n 'aria-haspopup': true,\n 'aria-controls': topnavitempanel.attr('id'),\n 'aria-expanded': false\n });\n\n topnavitempanel.attr({\n 'role': 'group',\n 'aria-expanded': false,\n 'aria-hidden': true\n }).addClass(settings.panelClass).not('[aria-labelledby]').attr('aria-labelledby', topnavitemlink.attr('id'));\n }\n });\n\n this.panels = menu.find('.' + settings.panelClass);\n\n menu.on('focusin.accessible-megamenu', ':focusable, .' + settings.panelClass, $.proxy(_focusInHandler, this)).on('focusout.accessible-megamenu', ':focusable, .' + settings.panelClass, $.proxy(_focusOutHandler, this)).on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, this)).on('mousedown.accessible-megamenu', $.proxy(_mouseDownHandler, this));\n\n if (!settings.openOnClick) {\n menu.on('mouseover.accessible-megamenu', $.proxy(_mouseOverHandler, this)).on('mouseout.accessible-megamenu', $.proxy(_mouseOutHandler, this));\n } else {\n menu.on('click.accessible-megamenu', $.proxy(_mouseOverHandler, this));\n }\n\n if (isTouch) {\n menu.on('touchstart.accessible-megamenu', $.proxy(_clickHandler, this));\n }\n\n menu.find('hr').attr('role', 'separator');\n\n if ($(document.activeElement).closest(menu).length) {\n $(document.activeElement).trigger('focusin.accessible-megamenu');\n }\n },\n\n /**\n * @desc Get default values\n * @example $(selector).accessibleMegaMenu('getDefaults')\n * @return {object}\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n getDefaults: function getDefaults() {\n return this._defaults;\n },\n\n /**\n * @desc Get any option set to plugin using its name (as string)\n * @example $(selector).accessibleMegaMenu('getOption', some_option)\n * @param {string} opt\n * @return {string}\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n getOption: function getOption(opt) {\n return this.settings[opt];\n },\n\n /**\n * @desc Get all options\n * @example $(selector).accessibleMegaMenu('getAllOptions')\n * @return {object}\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n getAllOptions: function getAllOptions() {\n return this.settings;\n },\n\n /**\n * @desc Set option\n * @example $(selector).accessibleMegaMenu('setOption', 'option_name', 'option_value', reinitialize)\n * @param {string} opt - Option name\n * @param {string} val - Option value\n * @param {boolean} [reinitialize] - boolean to re-initialize the menu.\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n setOption: function setOption(opt, value, reinitialize) {\n this.settings[opt] = value;\n if (reinitialize) {\n this.init();\n }\n }\n };\n }();\n\n /*\n * @param {object} [options] Mega Menu options\n * @param {string} [options.uuidPrefix=accessible-megamenu] - Prefix for generated unique id attributes, which are required to indicate aria-owns, aria-controls and aria-labelledby\n * @param {string} [options.menuClass=accessible-megamenu] - CSS class used to define the megamenu styling\n * @param {string} [options.topNavItemClass=accessible-megamenu-top-nav-item] - CSS class for a top-level navigation item in the megamenu\n * @param {string} [options.panelClass=accessible-megamenu-panel] - CSS class for a megamenu panel\n * @param {string} [options.panelGroupClass=accessible-megamenu-panel-group] - CSS class for a group of items within a megamenu panel\n * @param {string} [options.hoverClass=hover] - CSS class for the hover state\n * @param {string} [options.focusClass=focus] - CSS class for the focus state\n * @param {string} [options.openClass=open] - CSS class for the open state\n */\n $.fn[pluginName] = function (options) {\n return this.each(function () {\n if (!$.data(this, 'plugin_' + pluginName)) {\n $.data(this, 'plugin_' + pluginName, new $.fn[pluginName].AccessibleMegaMenu(this, options));\n }\n });\n };\n\n $.fn[pluginName].AccessibleMegaMenu = AccessibleMegaMenu;\n\n /* :focusable and :tabbable selectors from\n https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.core.js */\n\n /**\n * @private\n */\n function visible(element) {\n return $.expr.filters.visible(element) && !$(element).parents().addBack().filter(function () {\n return $.css(this, 'visibility') === 'hidden';\n }).length;\n }\n\n /**\n * @private\n */\n function _focusable(element, isTabIndexNotNaN) {\n var map,\n mapName,\n img,\n nodeName = element.nodeName.toLowerCase();\n if ('area' === nodeName) {\n map = element.parentNode;\n mapName = map.name;\n if (!element.href || !mapName || map.nodeName.toLowerCase() !== 'map') {\n return false;\n }\n img = $('img[usemap=#' + mapName + ']')[0];\n return !!img && visible(img);\n }\n return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) &&\n // the element and all of its ancestors must be visible\n visible(element);\n }\n\n $.extend($.expr[':'], {\n data: $.expr.createPseudo ? $.expr.createPseudo(function (dataName) {\n return function (elem) {\n return !!$.data(elem, dataName);\n };\n }) : // support: jQuery <1.8\n function (elem, i, match) {\n return !!$.data(elem, match[3]);\n },\n\n focusable: function focusable(element) {\n return _focusable(element, !isNaN($.attr(element, 'tabindex')));\n },\n\n tabbable: function tabbable(element) {\n var tabIndex = $.attr(element, 'tabindex'),\n isTabIndexNaN = isNaN(tabIndex);\n return (isTabIndexNaN || tabIndex >= 0) && _focusable(element, !isTabIndexNaN);\n }\n });\n})(jQuery, window, document);\n\n/***/ }),\n/* 16 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _jquery = __webpack_require__(0);\n\nvar _jquery2 = _interopRequireDefault(_jquery);\n\nvar _offcanvas = __webpack_require__(31);\n\nvar _offcanvas2 = _interopRequireDefault(_offcanvas);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar opts = {\n // String - panel\n panelSelector: '.Offcanvas',\n\n // String - content\n contentSelector: '.Offcanvas-content',\n\n // String - content\n modalSelector: '.Offcanvas--modal',\n\n // String - trigger\n jsSelector: '.js-fr-offcanvas-open',\n\n // String - Selector for the open button(s)\n openSelector: '.js-fr-offcanvas-open',\n\n // String - Selector for the close button\n closeSelector: '.js-fr-offcanvas-close',\n\n // String - Class name that will be added to the selector when the component has been initialised\n readyClass: 'is-ready',\n\n // String - Class name that will be added to the selector when the panel is visible\n activeClass: 'is-active'\n};\n\n/*\n * Prevent scroll on body when offcanvas is visible\n * (the touchmove handler targets iOS devices)\n */\nvar _handleModalScroll = function _handleModalScroll() {\n (0, _jquery2['default'])(opts.contentSelector).on('transitionend', function () {\n if (!(0, _jquery2['default'])(opts.panelSelector).hasClass(opts.activeClass)) {\n (0, _jquery2['default'])(window).off('scroll.offcanvas');\n (0, _jquery2['default'])(document).off('touchmove.offcanvas');\n } else {\n var _scrollTop = (0, _jquery2['default'])(window).scrollTop();\n (0, _jquery2['default'])(window).on('scroll.offcanvas', function () {\n return (0, _jquery2['default'])(window).scrollTop(_scrollTop);\n });\n (0, _jquery2['default'])(document).on('touchmove.offcanvas', function () {\n return (0, _jquery2['default'])(window).scrollTop(_scrollTop);\n });\n }\n });\n};\n\n/*\n *\tFIXME: hack to show / hide the background panel\n */\nvar _handleModal = function _handleModal(e) {\n if (e && (0, _jquery2['default'])(opts.panelSelector).hasClass(opts.activeClass) && !(0, _jquery2['default'])(e.target).is(opts.contentSelector)) {\n // for some odd reason plain jquery click() does not work here\n // // so we add that get(0) call\n (0, _jquery2['default'])(opts.closeSelector).get(0).click();\n }\n // we're using \"one\" here instead of \"bind\" because\n // otherwise $(opts.closeSelector).click() would trigger\n // a click on modal again looping forever\n (0, _jquery2['default'])(opts.modalSelector).one('click', _handleModal);\n};\n\nvar _exports = {\n Froffcanvas: _offcanvas2['default'],\n opts: opts\n};\n\n(0, _jquery2['default'])(document).ready(function () {\n var _scrollTop = (0, _jquery2['default'])(window).scrollTop();\n\n (0, _jquery2['default'])(opts.openSelector).add((0, _jquery2['default'])(opts.closeSelector)).click(function (e) {\n _scrollTop = (0, _jquery2['default'])(window).scrollTop();\n e.preventDefault();\n });\n\n (0, _jquery2['default'])(opts.panelSelector).on('focus', function () {\n (0, _jquery2['default'])(window).scrollTop(_scrollTop);\n });\n\n _handleModal();\n _handleModalScroll();\n\n _exports.offcanvas = (0, _offcanvas2['default'])(opts);\n});\n\nexports['default'] = _exports;\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 17 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nvar _jquery = __webpack_require__(0);\n\nvar _jquery2 = _interopRequireDefault(_jquery);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\n/*\n * Randomize order of children in container (.js-randomize)\n */\n(0, _jquery2['default'])(function () {\n var CONTAINER_SELECTOR = '.js-randomize';\n var EXCLUDE_SELECTOR = '.js-randomize-exclude';\n\n function shuffle(o) {\n for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x) {}\n return o;\n }\n\n (0, _jquery2['default'])(CONTAINER_SELECTOR).each(function (i, container) {\n var $container = (0, _jquery2['default'])(container);\n $container.html(shuffle($container.children().not(EXCLUDE_SELECTOR).get()));\n });\n});\n\n/***/ }),\n/* 18 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _jquery = __webpack_require__(0);\n\nvar _jquery2 = _interopRequireDefault(_jquery);\n\nvar _throttle = __webpack_require__(1);\n\nvar _throttle2 = _interopRequireDefault(_throttle);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar threshold = 100;\n\nvar _toggleScrolltop = function _toggleScrolltop() {\n (0, _jquery2['default'])(window).scrollTop() > threshold ? (0, _jquery2['default'])('.js-scrollTop').show() : (0, _jquery2['default'])('.js-scrollTop').hide();\n};\n\n(0, _jquery2['default'])(window).scroll((0, _throttle2['default'])(500, _toggleScrolltop));\n(0, _jquery2['default'])(document).ready(_toggleScrolltop);\n\nexports['default'] = {\n threshold: threshold\n};\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 19 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _frBypasslinks = __webpack_require__(29);\n\nvar _frBypasslinks2 = _interopRequireDefault(_frBypasslinks);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar bypassLinks = (0, _frBypasslinks2['default'])({\n selector: '.js-fr-bypasslinks'\n});\n\nexports['default'] = { bypassLinks: bypassLinks, Frbypasslinks: _frBypasslinks2['default'] };\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 20 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _jquery = __webpack_require__(0);\n\nvar _jquery2 = _interopRequireDefault(_jquery);\n\nvar _throttle = __webpack_require__(1);\n\nvar _throttle2 = _interopRequireDefault(_throttle);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar defaultOpts = {\n responsiveTableSelector: '.js-tableFlip',\n responsiveTableClass: 'Table--flip',\n responsiveTableBreakpoint: 768\n};\n\nvar initResponsiveTables = function initResponsiveTables(opts) {\n (0, _jquery2['default'])(document).ready(function () {\n if ((0, _jquery2['default'])(opts.responsiveTableSelector).length > 0) {\n (0, _jquery2['default'])(window).resize((0, _throttle2['default'])(250, function () {\n if ((0, _jquery2['default'])(window).width() < opts.responsiveTableBreakpoint) {\n (0, _jquery2['default'])(opts.responsiveTableSelector).addClass(opts.responsiveTableClass);\n } else {\n (0, _jquery2['default'])(opts.responsiveTableSelector).removeClass(opts.responsiveTableClass);\n }\n }));\n }\n });\n};\n\ninitResponsiveTables(defaultOpts);\n\nexports['default'] = { defaultOpts: defaultOpts, initResponsiveTables: initResponsiveTables };\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 21 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _jquery = __webpack_require__(0);\n\nvar _jquery2 = _interopRequireDefault(_jquery);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\n/*\n *\tTODO:\n *\t\t- repack as a frend _component and CSS\n *\t\t- refactor without jQuery\n */\n\n/*\n * Porting of http://www.oaa-accessibility.org/examplep/treeview1/\n */\nvar Treeview = function Treeview() {\n var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref$selector = _ref.selector,\n selector = _ref$selector === undefined ? '.js-Treeview' : _ref$selector,\n _ref$classFocused = _ref.classFocused,\n classFocused = _ref$classFocused === undefined ? 'hasFocus' : _ref$classFocused,\n _ref$classParent = _ref.classParent,\n classParent = _ref$classParent === undefined ? 'Treeview-parent' : _ref$classParent,\n _ref$classMenuHandler = _ref.classMenuHandler,\n classMenuHandler = _ref$classMenuHandler === undefined ? 'js-Treeview-handler' : _ref$classMenuHandler,\n _ref$styleMenuHandler = _ref.styleMenuHandler,\n styleMenuHandler = _ref$styleMenuHandler === undefined ? 'Treeview-handler--default' : _ref$styleMenuHandler,\n _ref$styleMenuHandler2 = _ref.styleMenuHandlerStandalone,\n styleMenuHandlerStandalone = _ref$styleMenuHandler2 === undefined ? 'Treeview-handler--standalone' : _ref$styleMenuHandler2,\n _ref$ariaLabelHandler = _ref.ariaLabelHandler,\n ariaLabelHandler = _ref$ariaLabelHandler === undefined ? 'expand' : _ref$ariaLabelHandler,\n _ref$multiselectable = _ref.multiselectable,\n multiselectable = _ref$multiselectable === undefined ? true : _ref$multiselectable,\n _ref$animationMs = _ref.animationMs,\n animationMs = _ref$animationMs === undefined ? 100 : _ref$animationMs;\n\n var keys = {\n tab: 9,\n enter: 13,\n space: 32,\n pageup: 33,\n pagedown: 34,\n end: 35,\n home: 36,\n left: 37,\n up: 38,\n right: 39,\n down: 40,\n asterisk: 106\n };\n\n function _collapseAll(treeview) {\n treeview.$parents.each(function () {\n if ((0, _jquery2['default'])(this).attr('aria-expanded') == 'false') {\n (0, _jquery2['default'])(this).children('ul').attr('aria-hidden', 'true');\n }\n });\n treeview.$visibleItems = treeview.$el.find('li:visible');\n }\n\n function _expandGroup(treeview, $item) {\n var $group = $item.children('ul');\n $group.slideDown(animationMs, function () {\n $group.attr('aria-hidden', 'false');\n $item.attr('aria-expanded', 'true');\n treeview.$visibleItems = treeview.$el.find('li:visible');\n });\n }\n\n function _collapseGroup(treeview, $item) {\n var $group = $item.children('ul');\n $group.slideUp(animationMs, function () {\n $group.attr('aria-hidden', 'true');\n $item.attr('aria-expanded', 'false');\n treeview.$visibleItems = treeview.$el.find('li:visible');\n });\n }\n\n function _collapseSiblings(treeview, $item) {\n $item.closest('ul').find('> .' + classParent).not($item).each(function (i, el) {\n _collapseGroup(treeview, (0, _jquery2['default'])(el));\n });\n }\n\n function _toggleGroup(treeview, $item) {\n if (!multiselectable) {\n _collapseSiblings(treeview, $item);\n }\n if ($item.attr('aria-expanded') == 'true') {\n _collapseGroup(treeview, $item);\n } else {\n _expandGroup(treeview, $item);\n }\n }\n\n function _updateStyling(treeview, $item) {\n treeview.$items.removeClass(classFocused);\n $item.addClass(classFocused);\n }\n\n function _handleKeyDown(treeview, $item, e) {\n var curNdx = treeview.$visibleItems.index($item);\n\n if (e.altKey || e.ctrlKey || e.shiftKey && e.keyCode != keys.tab) {\n return true;\n }\n\n // if (!$(e.currentTarget).is('.' + classMenuHandler)) {\n // return true\n // }\n\n switch (e.keyCode) {\n case keys.tab:\n {\n treeview.$activeItem = null;\n $item.removeClass(classFocused);\n return true;\n }\n\n case keys.home:\n {\n treeview.$activeItem = treeview.$parents.first();\n treeview.$activeItem.find(':focusable:first').focus();\n e.stopPropagation();\n return false;\n }\n\n case keys.end:\n {\n treeview.$activeItem = treeview.$visibleItems.last();\n treeview.$activeItem.find(':focusable:first').focus();\n e.stopPropagation();\n return false;\n }\n\n case keys.enter:\n case keys.space:\n {\n if ((0, _jquery2['default'])(e.currentTarget).is('.' + classMenuHandler)) {\n _toggleGroup(treeview, $item);\n e.stopPropagation();\n return false;\n }\n return true;\n }\n\n case keys.left:\n {\n if ($item.is('.' + classParent) && $item.attr('aria-expanded') == 'true') {\n _collapseGroup(treeview, $item);\n } else {\n var $itemUL = $item.parent();\n var $itemParent = $itemUL.parent();\n treeview.$activeItem = $itemParent;\n treeview.$activeItem.find(':focusable:first').focus();\n }\n e.stopPropagation();\n return false;\n }\n\n case keys.right:\n {\n if (!$item.is('.' + classParent)) {\n // do nothing\n } else if ($item.attr('aria-expanded') == 'false') {\n _expandGroup(treeview, $item);\n } else {\n treeview.$activeItem = $item.children('ul').children('li').first();\n treeview.$activeItem.find(':focusable:first').focus();\n }\n e.stopPropagation();\n return false;\n }\n\n case keys.up:\n {\n if (curNdx > 0) {\n var $prev = treeview.$visibleItems.eq(curNdx - 1);\n treeview.$activeItem = $prev;\n $prev.find(':focusable:first').focus();\n }\n e.stopPropagation();\n return false;\n }\n\n case keys.down:\n {\n if (curNdx < treeview.$visibleItems.length - 1) {\n var $next = treeview.$visibleItems.eq(curNdx + 1);\n treeview.$activeItem = $next;\n $next.find(':focusable:first').focus();\n }\n e.stopPropagation();\n return false;\n }\n\n case keys.asterisk:\n {\n treeview.$parents.each(function () {\n _expandGroup(treeview, (0, _jquery2['default'])(this));\n });\n e.stopPropagation();\n return false;\n }\n\n }\n return true;\n }\n\n function _handleKeyPress(treeview, $item, e) {\n if (e.altKey || e.ctrlKey || e.shiftKey) {\n // do nothing\n return true;\n }\n\n switch (e.keyCode) {\n case keys.tab:\n {\n return true;\n }\n case keys.enter:\n case keys.home:\n case keys.end:\n case keys.left:\n case keys.right:\n case keys.up:\n case keys.down:\n {\n e.stopPropagation();\n return false;\n }\n default:\n {\n var chr = String.fromCharCode(e.which);\n var bMatch = false;\n var itemNdx = treeview.$visibleItems.index($item);\n var itemCnt = treeview.$visibleItems.length;\n var curNdx = itemNdx + 1;\n\n // check if the active item was the last one on the list\n if (curNdx == itemCnt) {\n curNdx = 0;\n }\n\n // Iterate through the menu items (starting from the current item and wrapping) until a match is found\n // or the loop returns to the current menu item\n while (curNdx != itemNdx) {\n\n var $curItem = treeview.$visibleItems.eq(curNdx);\n var titleChr = $curItem.text().charAt(0);\n\n if ($curItem.is('.' + classParent)) {\n titleChr = $curItem.find('span').text().charAt(0);\n }\n\n if (titleChr.toLowerCase() == chr) {\n bMatch = true;\n break;\n }\n\n curNdx = curNdx + 1;\n\n if (curNdx == itemCnt) {\n // reached the end of the list, start again at the beginning\n curNdx = 0;\n }\n }\n\n if (bMatch == true) {\n treeview.$activeItem = treeview.$visibleItems.eq(curNdx);\n treeview.$activeItem.find(':focusable:first').focus();\n }\n\n e.stopPropagation();\n return false;\n }\n }\n\n return true;\n }\n\n function _handleClick(treeview, $item, e) {\n if (e.altKey || e.ctrlKey || e.shiftKey) {\n // do nothing\n return true;\n }\n\n // closest('li')\n var $parent = $item.closest('li');\n\n treeview.$activeItem = $parent;\n _updateStyling(treeview, $parent);\n _toggleGroup(treeview, $parent);\n\n e.stopPropagation();\n return false;\n }\n\n function _bindEvents(treeview) {\n treeview.$handlers.click(function (e) {\n return _handleClick(treeview, (0, _jquery2['default'])(this), e);\n });\n\n treeview.$items.keydown(function (e) {\n return _handleKeyDown(treeview, (0, _jquery2['default'])(this), e);\n });\n\n treeview.$items.keypress(function (e) {\n return _handleKeyPress(treeview, (0, _jquery2['default'])(this), e);\n });\n\n treeview.$handlers.keydown(function (e) {\n return _handleKeyDown(treeview, (0, _jquery2['default'])(this).closest('li'), e);\n });\n\n treeview.$handlers.keypress(function (e) {\n return _handleKeyPress(treeview, (0, _jquery2['default'])(this).closest('li'), e);\n });\n\n (0, _jquery2['default'])(document).click(function () {\n if (treeview.$activeItem != null) {\n treeview.$activeItem.removeClass(classFocused);\n treeview.$activeItem = null;\n }\n return true;\n });\n }\n\n function destroy() {\n /* TODO */\n }\n\n function _addA11y($el) {\n $el.attr('role', 'tree');\n\n // Put role=\"treeitem\" on every LI\n // Put aria-expanded=\"false\" on every LI (if it has no aria-expanded attr)\n // Put tabindex=\"-1\" on every LI (if it's not the first one)\n // Put class=`)\n .end()\n .find('> ul')\n .wrapAll(``)\n })\n .end()\n}\n\n$(document).ready(function() {\n $('.js-megamenu').each((i, el) => {\n const $el = $(el)\n const rel = $(el).data('rel')\n\n if ($el.find('ul').length === 0 && rel && $(rel).length > 0) {\n let $menu = listToMegaMenu($(rel), opts)\n $el.append($menu)\n // @FIXME: make space for javascript rendered megamenu\n if ($('header').css('position') === 'fixed') {\n $('body').css({\n paddingTop: '+=' + $el.height() + 'px'\n })\n }\n }\n\n $el.find('.' + opts.panelClass)\n .append('')\n\n $el.accessibleMegaMenu(opts)\n\n if (opts.addCloseButton) {\n $(opts.closeButtonTemplate).appendTo($('.' + opts.panelClass))\n }\n\n $('.' + opts.closeButtonClass).on('click', function() {\n const e = $.Event('keydown')\n e.which = 27\n $('.' + opts.menuClass).trigger(e)\n return false\n })\n\n })\n\n $('.' + opts.topNavItemClass + ' > a').each((i, el) => {\n const $target = $(el).parent().find('.' + opts.panelClass)\n\n if (el && $target.length > 0) {\n new Popper(el, $target, {\n // onUpdate: (data) => {\n // const $el = $(data.instance.popper)\n // if ($el.offset().left + $el.outerWidth() > $(window).width()) {\n // $el.css({ width: '95%' })\n // }\n // },\n // onCreate: (data) => {\n // const $el = $(data.instance.popper)\n // if ($el.offset().left + $el.outerWidth() > $(window).width()) {\n // $el.css({ width: '95%' })\n // }\n // },\n placement: 'bottom',\n modifiers: {\n arrow: {\n element: '.Dropdown-arrow'\n },\n flip: {\n behavior: ['left', 'right'],\n boundariesElement: 'scrollParent'\n },\n // preventOverflow: {\n // boundariesElement: 'viewport'\n // },\n },\n })\n }\n })\n\n})\n\nexport default {\n opts,\n listToMegaMenu,\n Megamenu\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/megamenu/index.js","/*\nCopyright © 2013 Adobe Systems Incorporated.\n\nLicensed under the Apache License, Version 2.0 (the “License”)\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an “AS IS” BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n*/\n\n/**\n * @fileOverview accessibleMegaMenu plugin\n *\n *
Copyright © 2013 Adobe Systems Incorporated.\n *
Project page https://github.com/adobe-accessibility/Accessible-Mega-Menu\n * @version 0.1\n * @author Michael Jordan\n * @requires jquery\n */\n\n/*jslint browser: true, devel: true, plusplus: true, nomen: true */\n/*global jQuery */\n(function($, window, document) {\n var pluginName = 'accessibleMegaMenu',\n defaults = {\n openOnClick: false,\n uuidPrefix: 'accessible-megamenu', // unique ID's are required to indicate aria-owns, aria-controls and aria-labelledby\n menuClass: 'accessible-megamenu', // default css class used to define the megamenu styling\n topNavItemClass: 'accessible-megamenu-top-nav-item', // default css class for a top-level navigation item in the megamenu\n panelClass: 'accessible-megamenu-panel', // default css class for a megamenu panel\n panelGroupClass: 'accessible-megamenu-panel-group', // default css class for a group of items within a megamenu panel\n hoverClass: 'hover', // default css class for the hover state\n focusClass: 'focus', // default css class for the focus state\n openClass: 'open' // default css class for the open state\n },\n Keyboard = {\n BACKSPACE: 8,\n COMMA: 188,\n DELETE: 46,\n DOWN: 40,\n END: 35,\n ENTER: 13,\n ESCAPE: 27,\n HOME: 36,\n LEFT: 37,\n PAGE_DOWN: 34,\n PAGE_UP: 33,\n PERIOD: 190,\n RIGHT: 39,\n SPACE: 32,\n TAB: 9,\n UP: 38,\n keyMap: {\n 48: '0',\n 49: '1',\n 50: '2',\n 51: '3',\n 52: '4',\n 53: '5',\n 54: '6',\n 55: '7',\n 56: '8',\n 57: '9',\n 59: '',\n 65: 'a',\n 66: 'b',\n 67: 'c',\n 68: 'd',\n 69: 'e',\n 70: 'f',\n 71: 'g',\n 72: 'h',\n 73: 'i',\n 74: 'j',\n 75: 'k',\n 76: 'l',\n 77: 'm',\n 78: 'n',\n 79: 'o',\n 80: 'p',\n 81: 'q',\n 82: 'r',\n 83: 's',\n 84: 't',\n 85: 'u',\n 86: 'v',\n 87: 'w',\n 88: 'x',\n 89: 'y',\n 90: 'z',\n 96: '0',\n 97: '1',\n 98: '2',\n 99: '3',\n 100: '4',\n 101: '5',\n 102: '6',\n 103: '7',\n 104: '8',\n 105: '9',\n 190: '.'\n }\n }\n /**\n * @desc Creates a new accessible mega menu instance.\n * @param {jquery} element\n * @param {object} [options] Mega Menu options\n * @param {string} [options.uuidPrefix=accessible-megamenu] - Prefix for generated unique id attributes, which are required to indicate aria-owns, aria-controls and aria-labelledby\n * @param {string} [options.menuClass=accessible-megamenu] - CSS class used to define the megamenu styling\n * @param {string} [options.topNavItemClass=accessible-megamenu-top-nav-item] - CSS class for a top-level navigation item in the megamenu\n * @param {string} [options.panelClass=accessible-megamenu-panel] - CSS class for a megamenu panel\n * @param {string} [options.panelGroupClass=accessible-megamenu-panel-group] - CSS class for a group of items within a megamenu panel\n * @param {string} [options.hoverClass=hover] - CSS class for the hover state\n * @param {string} [options.focusClass=focus] - CSS class for the focus state\n * @param {string} [options.openClass=open] - CSS class for the open state\n * @constructor\n */\n function AccessibleMegaMenu(element, options) {\n this.element = element\n\n // merge optional settings and defaults into settings\n this.settings = $.extend({}, defaults, options)\n\n this._defaults = defaults\n this._name = pluginName\n\n this.mouseTimeoutID = null\n this.focusTimeoutID = null\n this.mouseFocused = false\n this.justFocused = false\n\n this.init()\n }\n\n AccessibleMegaMenu.prototype = (function() {\n\n /* private attributes and methods ------------------------ */\n var uuid = 0,\n keydownTimeoutDuration = 1000,\n keydownSearchString = '',\n isTouch = typeof window.hasOwnProperty === 'function' && !!window.hasOwnProperty('ontouchstart'),\n _getPlugin,\n _addUniqueId,\n _togglePanel,\n _clickHandler,\n _clickOutsideHandler,\n _DOMAttrModifiedHandler,\n _focusInHandler,\n _focusOutHandler,\n _keyDownHandler,\n _mouseDownHandler,\n _mouseOverHandler,\n _mouseOutHandler,\n _toggleExpandedEventHandlers\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_getPlugin\n * @desc Returns the parent accessibleMegaMenu instance for a given element\n * @param {jQuery} element\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _getPlugin = function(element) {\n return $(element).closest(':data(plugin_' + pluginName + ')').data('plugin_' + pluginName)\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_addUniqueId\n * @desc Adds a unique id and element.\n * The id string starts with the\n * string defined in settings.uuidPrefix.\n * @param {jQuery} element\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _addUniqueId = function(element) {\n element = $(element)\n var settings = this.settings\n if (!element.attr('id')) {\n element.attr('id', settings.uuidPrefix + '-' + new Date().getTime() + '-' + (++uuid))\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_togglePanel\n * @desc Toggle the display of mega menu panels in response to an event.\n * The optional boolean value 'hide' forces all panels to hide.\n * @param {event} event\n * @param {Boolean} [hide] Hide all mega menu panels when true\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _togglePanel = function(event, hide) {\n var target = $(event.target),\n that = this,\n settings = this.settings,\n menu = this.menu,\n topli = target.closest('.' + settings.topNavItemClass),\n panel = target.hasClass(settings.panelClass) ? target : target.closest('.' + settings.panelClass),\n newfocus\n\n _toggleExpandedEventHandlers.call(this, true)\n\n if (hide) {\n topli = menu.find('.' + settings.topNavItemClass + ' .' + settings.openClass + ':first').closest('.' + settings.topNavItemClass)\n if (!(topli.is(event.relatedTarget) || topli.has(event.relatedTarget).length > 0)) {\n if ((event.type === 'mouseout' || event.type === 'focusout') && topli.has(document.activeElement).length > 0) {\n return\n }\n topli.find('[aria-expanded]')\n .attr('aria-expanded', 'false')\n .removeClass(settings.openClass)\n .filter('.' + settings.panelClass)\n .attr('aria-hidden', 'true')\n if ((event.type === 'keydown' && event.keyCode === Keyboard.ESCAPE) || event.type === 'DOMAttrModified') {\n newfocus = topli.find(':tabbable:first')\n setTimeout(function() {\n menu.find('[aria-expanded].' + that.settings.panelClass).off('DOMAttrModified.accessible-megamenu')\n newfocus.focus()\n that.justFocused = false\n }, 99)\n }\n } else if (topli.length === 0) {\n menu.find('[aria-expanded=true]')\n .attr('aria-expanded', 'false')\n .removeClass(settings.openClass)\n .filter('.' + settings.panelClass)\n .attr('aria-hidden', 'true')\n }\n } else {\n clearTimeout(that.focusTimeoutID)\n topli.siblings()\n .find('[aria-expanded]')\n .attr('aria-expanded', 'false')\n .removeClass(settings.openClass)\n .filter('.' + settings.panelClass)\n .attr('aria-hidden', 'true')\n topli.find('[aria-expanded]')\n .attr('aria-expanded', 'true')\n .addClass(settings.openClass)\n .filter('.' + settings.panelClass)\n .attr('aria-hidden', 'false')\n if (event.type === 'mouseover' && target.is(':tabbable') && topli.length === 1 && panel.length === 0 && menu.has(document.activeElement).length > 0) {\n target.focus()\n that.justFocused = false\n }\n\n _toggleExpandedEventHandlers.call(that)\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_clickHandler\n * @desc Handle click event on mega menu item\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _clickHandler = function(event) {\n var target = $(event.currentTarget),\n topli = target.closest('.' + this.settings.topNavItemClass),\n panel = target.closest('.' + this.settings.panelClass)\n if (topli.length === 1 &&\n panel.length === 0 &&\n topli.find('.' + this.settings.panelClass).length === 1) {\n if (!target.hasClass(this.settings.openClass)) {\n event.preventDefault()\n event.stopPropagation()\n _togglePanel.call(this, event)\n this.justFocused = false\n } else {\n if (this.justFocused) {\n event.preventDefault()\n event.stopPropagation()\n this.justFocused = false\n } else if (isTouch || this.mouseFocused) {\n event.preventDefault()\n event.stopPropagation()\n _togglePanel.call(this, event, target.hasClass(this.settings.openClass))\n }\n }\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_clickOutsideHandler\n * @desc Handle click event outside of a the megamenu\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _clickOutsideHandler = function(event) {\n if ($(event.target).closest(this.menu).length === 0) {\n event.preventDefault()\n event.stopPropagation()\n _togglePanel.call(this, event, true)\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_DOMAttrModifiedHandler\n * @desc Handle DOMAttrModified event on panel to respond to Windows 8 Narrator ExpandCollapse pattern\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _DOMAttrModifiedHandler = function(event) {\n if (event.originalEvent.attrName === 'aria-expanded' &&\n event.originalEvent.newValue === 'false' &&\n $(event.target).hasClass(this.settings.openClass)) {\n event.preventDefault()\n event.stopPropagation()\n _togglePanel.call(this, event, true)\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_focusInHandler\n * @desc Handle focusin event on mega menu item.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _focusInHandler = function(event) {\n clearTimeout(this.focusTimeoutID)\n var target = $(event.target),\n panel = target.closest('.' + this.settings.panelClass)\n target\n .addClass(this.settings.focusClass)\n .on('click.accessible-megamenu', $.proxy(_clickHandler, this))\n this.justFocused = !this.mouseFocused\n this.mouseFocused = false\n if (this.panels.not(panel).filter('.' + this.settings.openClass).length) {\n _togglePanel.call(this, event)\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_focusOutHandler\n * @desc Handle focusout event on mega menu item.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _focusOutHandler = function(event) {\n this.justFocused = false\n var that = this,\n target = $(event.target),\n topli = target.closest('.' + this.settings.topNavItemClass)\n\n target\n // .removeClass(this.settings.focusClass)\n .off('click.accessible-megamenu')\n\n if (window.cvox) {\n // If ChromeVox is running...\n that.focusTimeoutID = setTimeout(function() {\n window.cvox.Api.getCurrentNode(function(node) {\n if (topli.has(node).length) {\n // and the current node being voiced is in\n // the mega menu, clearTimeout,\n // so the panel stays open.\n clearTimeout(that.focusTimeoutID)\n } else {\n that.focusTimeoutID = setTimeout(function(scope, _event, hide) {\n _togglePanel.call(scope, _event, hide)\n }, 275, that, event, true)\n }\n })\n }, 25)\n } else {\n that.focusTimeoutID = setTimeout(function() {\n _togglePanel.call(that, event, true)\n }, 300)\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_keyDownHandler\n * @desc Handle keydown event on mega menu.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _keyDownHandler = function(event) {\n var that = (this.constructor === AccessibleMegaMenu) ? this : _getPlugin(this), // determine the AccessibleMegaMenu plugin instance\n settings = that.settings,\n target = $($(this).is('.' + settings.hoverClass + ':tabbable') ? this : event.target), // if the element is hovered the target is this, otherwise, its the focused element\n menu = that.menu,\n topnavitems = that.topnavitems,\n topli = target.closest('.' + settings.topNavItemClass),\n tabbables = menu.find(':tabbable'),\n panel = target.hasClass(settings.panelClass) ? target : target.closest('.' + settings.panelClass),\n panelGroups = panel.find('.' + settings.panelGroupClass),\n currentPanelGroup = target.closest('.' + settings.panelGroupClass),\n next,\n keycode = event.keyCode || event.which,\n start,\n i,\n o,\n label,\n found = false,\n newString = Keyboard.keyMap[event.keyCode] || '',\n regex,\n isTopNavItem = (topli.length === 1 && panel.length === 0)\n\n if (target.is('input:focus, select:focus, textarea:focus, button:focus')) {\n // if the event target is a form element we should handle keydown normally\n return\n }\n\n if (target.is('.' + settings.hoverClass + ':tabbable')) {\n $('html').off('keydown.accessible-megamenu')\n }\n\n switch (keycode) {\n case Keyboard.ESCAPE:\n _togglePanel.call(that, event, true)\n break\n case Keyboard.DOWN:\n event.preventDefault()\n if (isTopNavItem) {\n _togglePanel.call(that, event)\n found = (topli.find('.' + settings.panelClass + ' :tabbable:first').focus().length === 1)\n } else {\n found = (tabbables.filter(':gt(' + tabbables.index(target) + '):first').focus().length === 1)\n }\n\n if (!found && window.opera && opera.toString() === '[object Opera]' && (event.ctrlKey || event.metaKey)) {\n tabbables = $(':tabbable')\n i = tabbables.index(target)\n found = ($(':tabbable:gt(' + $(':tabbable').index(target) + '):first').focus().length === 1)\n }\n break\n case Keyboard.UP:\n event.preventDefault()\n if (isTopNavItem && target.hasClass(settings.openClass)) {\n _togglePanel.call(that, event, true)\n next = topnavitems.filter(':lt(' + topnavitems.index(topli) + '):last')\n if (next.children('.' + settings.panelClass).length) {\n found = (next.children()\n .attr('aria-expanded', 'true')\n .addClass(settings.openClass)\n .filter('.' + settings.panelClass)\n .attr('aria-hidden', 'false')\n .find(':tabbable:last')\n .focus() === 1)\n }\n } else if (!isTopNavItem) {\n found = (tabbables.filter(':lt(' + tabbables.index(target) + '):last').focus().length === 1)\n }\n\n if (!found && window.opera && opera.toString() === '[object Opera]' && (event.ctrlKey || event.metaKey)) {\n tabbables = $(':tabbable')\n i = tabbables.index(target)\n found = ($(':tabbable:lt(' + $(':tabbable').index(target) + '):first').focus().length === 1)\n }\n break\n case Keyboard.RIGHT:\n event.preventDefault()\n if (isTopNavItem) {\n found = (topnavitems.filter(':gt(' + topnavitems.index(topli) + '):first').find(':tabbable:first').focus().length === 1)\n } else {\n if (panelGroups.length && currentPanelGroup.length) {\n // if the current panel contains panel groups, and we are able to focus the first tabbable element of the next panel group\n found = (panelGroups.filter(':gt(' + panelGroups.index(currentPanelGroup) + '):first').find(':tabbable:first').focus().length === 1)\n }\n\n if (!found) {\n found = (topli.find(':tabbable:first').focus().length === 1)\n }\n }\n break\n case Keyboard.LEFT:\n event.preventDefault()\n if (isTopNavItem) {\n found = (topnavitems.filter(':lt(' + topnavitems.index(topli) + '):last').find(':tabbable:first').focus().length === 1)\n } else {\n if (panelGroups.length && currentPanelGroup.length) {\n // if the current panel contains panel groups, and we are able to focus the first tabbable element of the previous panel group\n found = (panelGroups.filter(':lt(' + panelGroups.index(currentPanelGroup) + '):last').find(':tabbable:first').focus().length === 1)\n }\n\n if (!found) {\n found = (topli.find(':tabbable:first').focus().length === 1)\n }\n }\n break\n case Keyboard.TAB:\n i = tabbables.index(target)\n if (event.shiftKey && isTopNavItem && target.hasClass(settings.openClass)) {\n _togglePanel.call(that, event, true)\n next = topnavitems.filter(':lt(' + topnavitems.index(topli) + '):last')\n if (next.children('.' + settings.panelClass).length) {\n found = next.children()\n .attr('aria-expanded', 'true')\n .addClass(settings.openClass)\n .filter('.' + settings.panelClass)\n .attr('aria-hidden', 'false')\n .find(':tabbable:last')\n .focus()\n }\n } else if (event.shiftKey && i > 0) {\n found = (tabbables.filter(':lt(' + i + '):last').focus().length === 1)\n } else if (!event.shiftKey && i < tabbables.length - 1) {\n found = (tabbables.filter(':gt(' + i + '):first').focus().length === 1)\n } else if (window.opera && opera.toString() === '[object Opera]') {\n tabbables = $(':tabbable')\n i = tabbables.index(target)\n if (event.shiftKey) {\n found = ($(':tabbable:lt(' + $(':tabbable').index(target) + '):last').focus().length === 1)\n } else {\n found = ($(':tabbable:gt(' + $(':tabbable').index(target) + '):first').focus().length === 1)\n }\n }\n\n if (found) {\n event.preventDefault()\n }\n break\n case Keyboard.SPACE:\n if (isTopNavItem) {\n event.preventDefault()\n _clickHandler.call(that, event)\n } else {\n return\n }\n break\n case Keyboard.ENTER:\n return\n break\n default:\n // alphanumeric filter\n clearTimeout(this.keydownTimeoutID)\n\n keydownSearchString += newString !== keydownSearchString ? newString : ''\n\n if (keydownSearchString.length === 0) {\n return\n }\n\n this.keydownTimeoutID = setTimeout(function() {\n keydownSearchString = ''\n }, keydownTimeoutDuration)\n\n if (isTopNavItem && !target.hasClass(settings.openClass)) {\n tabbables = tabbables.filter(':not(.' + settings.panelClass + ' :tabbable)')\n } else {\n tabbables = topli.find(':tabbable')\n }\n\n if (event.shiftKey) {\n tabbables = $(tabbables.get()\n .reverse())\n }\n\n for (i = 0; i < tabbables.length; i++) {\n o = tabbables.eq(i)\n if (o.is(target)) {\n start = (keydownSearchString.length === 1) ? i + 1 : i\n break\n }\n }\n\n regex = new RegExp('^' + keydownSearchString.replace(/[\\-\\[\\]{}()*+?.,\\\\\\^$|#\\s]/g, '\\\\$&'), 'i')\n\n for (i = start; i < tabbables.length; i++) {\n o = tabbables.eq(i)\n label = $.trim(o.text())\n if (regex.test(label)) {\n found = true\n o.focus()\n break\n }\n }\n if (!found) {\n for (i = 0; i < start; i++) {\n o = tabbables.eq(i)\n label = $.trim(o.text())\n if (regex.test(label)) {\n o.focus()\n break\n }\n }\n }\n break\n }\n that.justFocused = false\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_mouseDownHandler\n * @desc Handle mousedown event on mega menu.\n * @param {event} Event object\n * @memberof accessibleMegaMenu\n * @inner\n * @private\n */\n _mouseDownHandler = function(event) {\n if ($(event.target).is(this.settings.panelClass) || $(event.target).closest(':focusable').length) {\n this.mouseFocused = true\n }\n this.mouseTimeoutID = setTimeout(function() {\n clearTimeout(this.focusTimeoutID)\n }, 1)\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_mouseOverHandler\n * @desc Handle mouseover event on mega menu.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _mouseOverHandler = function(event) {\n clearTimeout(this.mouseTimeoutID)\n $(event.target)\n .addClass(this.settings.hoverClass)\n _togglePanel.call(this, event)\n if ($(event.target).is(':tabbable')) {\n $('html').on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, event.target))\n }\n }\n\n /**\n * @name jQuery.fn.accessibleMegaMenu~_mouseOutHandler\n * @desc Handle mouseout event on mega menu.\n * @param {event} Event object\n * @memberof jQuery.fn.accessibleMegaMenu\n * @inner\n * @private\n */\n _mouseOutHandler = function(event) {\n var that = this\n $(event.target)\n .removeClass(that.settings.hoverClass)\n\n that.mouseTimeoutID = setTimeout(function() {\n _togglePanel.call(that, event, true)\n }, 250)\n if ($(event.target).is(':tabbable')) {\n $('html').off('keydown.accessible-megamenu')\n }\n }\n\n _toggleExpandedEventHandlers = function(hide) {\n var menu = this.menu\n if (hide) {\n $('html').off('mouseup.outside-accessible-megamenu, touchend.outside-accessible-megamenu, mspointerup.outside-accessible-megamenu, pointerup.outside-accessible-megamenu')\n\n menu.find('[aria-expanded].' + this.settings.panelClass).off('DOMAttrModified.accessible-megamenu')\n } else {\n $('html').on('mouseup.outside-accessible-megamenu, touchend.outside-accessible-megamenu, mspointerup.outside-accessible-megamenu, pointerup.outside-accessible-megamenu', $.proxy(_clickOutsideHandler, this))\n\n /* Narrator in Windows 8 automatically toggles the aria-expanded property on double tap or click.\n To respond to the change to collapse the panel, we must add a listener for a DOMAttrModified event. */\n menu.find('[aria-expanded=true].' + this.settings.panelClass).on('DOMAttrModified.accessible-megamenu', $.proxy(_DOMAttrModifiedHandler, this))\n }\n }\n\n /* public attributes and methods ------------------------- */\n return {\n constructor: AccessibleMegaMenu,\n\n /**\n * @lends jQuery.fn.accessibleMegaMenu\n * @desc Initializes an instance of the accessibleMegaMenu plugins\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n init: function() {\n var settings = this.settings,\n nav = $(this.element),\n menu = nav.children().first(),\n // Only filter to those items with the selector class\n topnavitems = this.settings.topNavItems ?\n menu.children(this.settings.topNavItems) :\n menu.children()\n this.start(settings, nav, menu, topnavitems)\n },\n\n start: function(settings, nav, menu, topnavitems) {\n var that = this\n this.settings = settings\n this.menu = menu\n this.topnavitems = topnavitems\n\n nav.attr('role', 'navigation')\n menu.addClass(settings.menuClass)\n topnavitems.each(function(i, topnavitem) {\n var topnavitemlink, topnavitempanel\n topnavitem = $(topnavitem)\n // @FIXME: Add classed manually !!!\n // topnavitem.addClass(settings.topNavItemClass)\n topnavitemlink = topnavitem.find(':tabbable:first')\n topnavitempanel = topnavitem.children(':not(:tabbable):last')\n _addUniqueId.call(that, topnavitemlink)\n if (topnavitempanel.length) {\n _addUniqueId.call(that, topnavitempanel)\n topnavitemlink.attr({\n 'aria-haspopup': true,\n 'aria-controls': topnavitempanel.attr('id'),\n 'aria-expanded': false\n })\n\n topnavitempanel.attr({\n 'role': 'group',\n 'aria-expanded': false,\n 'aria-hidden': true\n })\n .addClass(settings.panelClass)\n .not('[aria-labelledby]')\n .attr('aria-labelledby', topnavitemlink.attr('id'))\n }\n })\n\n this.panels = menu.find('.' + settings.panelClass)\n\n menu.on('focusin.accessible-megamenu', ':focusable, .' + settings.panelClass, $.proxy(_focusInHandler, this))\n .on('focusout.accessible-megamenu', ':focusable, .' + settings.panelClass, $.proxy(_focusOutHandler, this))\n .on('keydown.accessible-megamenu', $.proxy(_keyDownHandler, this))\n .on('mousedown.accessible-megamenu', $.proxy(_mouseDownHandler, this))\n\n if (!settings.openOnClick) {\n menu.on('mouseover.accessible-megamenu', $.proxy(_mouseOverHandler, this))\n .on('mouseout.accessible-megamenu', $.proxy(_mouseOutHandler, this))\n }\n else {\n menu.on('click.accessible-megamenu', $.proxy(_mouseOverHandler, this))\n }\n\n if (isTouch) {\n menu.on('touchstart.accessible-megamenu', $.proxy(_clickHandler, this))\n }\n\n menu.find('hr').attr('role', 'separator')\n\n if ($(document.activeElement).closest(menu).length) {\n $(document.activeElement).trigger('focusin.accessible-megamenu')\n }\n },\n\n /**\n * @desc Get default values\n * @example $(selector).accessibleMegaMenu('getDefaults')\n * @return {object}\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n getDefaults: function() {\n return this._defaults\n },\n\n /**\n * @desc Get any option set to plugin using its name (as string)\n * @example $(selector).accessibleMegaMenu('getOption', some_option)\n * @param {string} opt\n * @return {string}\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n getOption: function(opt) {\n return this.settings[opt]\n },\n\n /**\n * @desc Get all options\n * @example $(selector).accessibleMegaMenu('getAllOptions')\n * @return {object}\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n getAllOptions: function() {\n return this.settings\n },\n\n /**\n * @desc Set option\n * @example $(selector).accessibleMegaMenu('setOption', 'option_name', 'option_value', reinitialize)\n * @param {string} opt - Option name\n * @param {string} val - Option value\n * @param {boolean} [reinitialize] - boolean to re-initialize the menu.\n * @memberof jQuery.fn.accessibleMegaMenu\n * @instance\n */\n setOption: function(opt, value, reinitialize) {\n this.settings[opt] = value\n if (reinitialize) {\n this.init()\n }\n }\n }\n }())\n\n /*\n * @param {object} [options] Mega Menu options\n * @param {string} [options.uuidPrefix=accessible-megamenu] - Prefix for generated unique id attributes, which are required to indicate aria-owns, aria-controls and aria-labelledby\n * @param {string} [options.menuClass=accessible-megamenu] - CSS class used to define the megamenu styling\n * @param {string} [options.topNavItemClass=accessible-megamenu-top-nav-item] - CSS class for a top-level navigation item in the megamenu\n * @param {string} [options.panelClass=accessible-megamenu-panel] - CSS class for a megamenu panel\n * @param {string} [options.panelGroupClass=accessible-megamenu-panel-group] - CSS class for a group of items within a megamenu panel\n * @param {string} [options.hoverClass=hover] - CSS class for the hover state\n * @param {string} [options.focusClass=focus] - CSS class for the focus state\n * @param {string} [options.openClass=open] - CSS class for the open state\n */\n $.fn[pluginName] = function(options) {\n return this.each(function() {\n if (!$.data(this, 'plugin_' + pluginName)) {\n $.data(this, 'plugin_' + pluginName, new $.fn[pluginName].AccessibleMegaMenu(this, options))\n }\n })\n }\n\n $.fn[pluginName].AccessibleMegaMenu = AccessibleMegaMenu\n\n /* :focusable and :tabbable selectors from\n https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.core.js */\n\n /**\n * @private\n */\n function visible(element) {\n return $.expr.filters.visible(element) && !$(element).parents().addBack().filter(function() {\n return $.css(this, 'visibility') === 'hidden'\n }).length\n }\n\n /**\n * @private\n */\n function focusable(element, isTabIndexNotNaN) {\n var map, mapName, img,\n nodeName = element.nodeName.toLowerCase()\n if ('area' === nodeName) {\n map = element.parentNode\n mapName = map.name\n if (!element.href || !mapName || map.nodeName.toLowerCase() !== 'map') {\n return false\n }\n img = $('img[usemap=#' + mapName + ']')[0]\n return !!img && visible(img)\n }\n return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled :\n 'a' === nodeName ?\n element.href || isTabIndexNotNaN :\n isTabIndexNotNaN) &&\n // the element and all of its ancestors must be visible\n visible(element)\n }\n\n $.extend($.expr[':'], {\n data: $.expr.createPseudo ? $.expr.createPseudo(function(dataName) {\n return function(elem) {\n return !!$.data(elem, dataName)\n }\n }) : // support: jQuery <1.8\n function(elem, i, match) {\n return !!$.data(elem, match[3])\n },\n\n focusable: function(element) {\n return focusable(element, !isNaN($.attr(element, 'tabindex')))\n },\n\n tabbable: function(element) {\n var tabIndex = $.attr(element, 'tabindex'),\n isTabIndexNaN = isNaN(tabIndex)\n return (isTabIndexNaN || tabIndex >= 0) && focusable(element, !isTabIndexNaN)\n }\n })\n}(jQuery, window, document))\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/megamenu/megamenu.js","import $ from 'jquery'\n\nimport Froffcanvas from 'fr-offcanvas/offcanvas'\n\nconst opts = {\n // String - panel\n panelSelector: '.Offcanvas',\n\n // String - content\n contentSelector: '.Offcanvas-content',\n\n // String - content\n modalSelector: '.Offcanvas--modal',\n\n // String - trigger\n jsSelector: '.js-fr-offcanvas-open',\n\n // String - Selector for the open button(s)\n openSelector: '.js-fr-offcanvas-open',\n\n // String - Selector for the close button\n closeSelector: '.js-fr-offcanvas-close',\n\n // String - Class name that will be added to the selector when the component has been initialised\n readyClass: 'is-ready',\n\n // String - Class name that will be added to the selector when the panel is visible\n activeClass: 'is-active'\n}\n\n/*\n * Prevent scroll on body when offcanvas is visible\n * (the touchmove handler targets iOS devices)\n */\nconst _handleModalScroll = () => {\n $(opts.contentSelector).on('transitionend', function() {\n if (!$(opts.panelSelector).hasClass(opts.activeClass)) {\n $(window).off('scroll.offcanvas')\n $(document).off('touchmove.offcanvas')\n } else {\n const _scrollTop = $(window).scrollTop()\n $(window).on('scroll.offcanvas', () => $(window).scrollTop(_scrollTop))\n $(document).on('touchmove.offcanvas', () => $(window).scrollTop(_scrollTop))\n }\n })\n}\n\n/*\n *\tFIXME: hack to show / hide the background panel\n */\nconst _handleModal = (e) => {\n if (e && $(opts.panelSelector).hasClass(opts.activeClass) &&\n !$(e.target).is(opts.contentSelector)) {\n // for some odd reason plain jquery click() does not work here\n // // so we add that get(0) call\n $(opts.closeSelector).get(0).click()\n }\n // we're using \"one\" here instead of \"bind\" because\n // otherwise $(opts.closeSelector).click() would trigger\n // a click on modal again looping forever\n $(opts.modalSelector).one('click', _handleModal)\n}\n\nlet _exports = {\n Froffcanvas,\n opts\n}\n\n$(document).ready(() => {\n let _scrollTop = $(window).scrollTop()\n\n $(opts.openSelector)\n .add($(opts.closeSelector))\n .click((e) => {\n _scrollTop = $(window).scrollTop()\n e.preventDefault()\n })\n\n $(opts.panelSelector).on('focus', () => {\n $(window).scrollTop(_scrollTop)\n })\n\n _handleModal()\n _handleModalScroll()\n\n _exports.offcanvas = Froffcanvas(opts)\n})\n\nexport default _exports\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/offcanvas/index.js","import $ from 'jquery'\n\n/*\n * Randomize order of children in container (.js-randomize)\n */\n$(() => {\n const CONTAINER_SELECTOR = '.js-randomize'\n const EXCLUDE_SELECTOR = '.js-randomize-exclude'\n\n function shuffle(o) {\n for (let j, x, i = o.length; i; j = parseInt(Math.random() * i),\n x = o[--i], o[i] = o[j], o[j] = x);\n return o\n }\n\n $(CONTAINER_SELECTOR).each((i, container) => {\n let $container = $(container)\n $container.html(shuffle($container.children().not(EXCLUDE_SELECTOR).get()))\n })\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/random/index.js","import $ from 'jquery'\nimport debounce from 'throttle-debounce/throttle'\n\nconst threshold = 100\n\nconst _toggleScrolltop = () => {\n ($(window).scrollTop() > threshold) ?\n $('.js-scrollTop').show() :\n $('.js-scrollTop').hide()\n}\n\n$(window).scroll(debounce(500, _toggleScrolltop))\n$(document).ready(_toggleScrolltop)\n\nexport default {\n threshold\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/scrolltop/index.js","import Frbypasslinks from 'fr-bypasslinks'\n\nconst bypassLinks = Frbypasslinks({\n selector: '.js-fr-bypasslinks'\n})\n\nexport default { bypassLinks, Frbypasslinks }\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/skiplinks/index.js","import $ from 'jquery'\nimport debounce from 'throttle-debounce/throttle'\n\nconst defaultOpts = {\n responsiveTableSelector: '.js-tableFlip',\n responsiveTableClass: 'Table--flip',\n responsiveTableBreakpoint: 768,\n}\n\nconst initResponsiveTables = function(opts) {\n $(document).ready(function() {\n if ($(opts.responsiveTableSelector).length > 0) {\n $(window).resize(debounce(250, function() {\n if ($(window).width() < opts.responsiveTableBreakpoint) {\n $(opts.responsiveTableSelector).addClass(opts.responsiveTableClass)\n } else {\n $(opts.responsiveTableSelector).removeClass(opts.responsiveTableClass)\n }\n }))\n }\n })\n}\n\ninitResponsiveTables(defaultOpts)\n\nexport default { defaultOpts, initResponsiveTables }\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/table/index.js","import $ from 'jquery'\n\n/*\n *\tTODO:\n *\t\t- repack as a frend _component and CSS\n *\t\t- refactor without jQuery\n */\n\n/*\n * Porting of http://www.oaa-accessibility.org/examplep/treeview1/\n */\nconst Treeview = function({\n selector: selector = '.js-Treeview',\n classFocused: classFocused = 'hasFocus',\n classParent: classParent = 'Treeview-parent',\n classMenuHandler: classMenuHandler = 'js-Treeview-handler',\n styleMenuHandler: styleMenuHandler = 'Treeview-handler--default',\n styleMenuHandlerStandalone: styleMenuHandlerStandalone = 'Treeview-handler--standalone',\n ariaLabelHandler: ariaLabelHandler = 'expand',\n multiselectable: multiselectable = true,\n animationMs: animationMs = 100,\n} = {}) {\n\n const keys = {\n tab: 9,\n enter: 13,\n space: 32,\n pageup: 33,\n pagedown: 34,\n end: 35,\n home: 36,\n left: 37,\n up: 38,\n right: 39,\n down: 40,\n asterisk: 106\n }\n\n function _collapseAll(treeview) {\n treeview.$parents.each(function() {\n if ($(this).attr('aria-expanded') == 'false') {\n $(this).children('ul').attr('aria-hidden', 'true')\n }\n })\n treeview.$visibleItems = treeview.$el.find('li:visible')\n }\n\n function _expandGroup(treeview, $item) {\n let $group = $item.children('ul')\n $group.slideDown(animationMs, () => {\n $group.attr('aria-hidden', 'false')\n $item.attr('aria-expanded', 'true')\n treeview.$visibleItems = treeview.$el.find('li:visible')\n })\n }\n\n function _collapseGroup(treeview, $item) {\n let $group = $item.children('ul')\n $group.slideUp(animationMs, () => {\n $group.attr('aria-hidden', 'true')\n $item.attr('aria-expanded', 'false')\n treeview.$visibleItems = treeview.$el.find('li:visible')\n })\n }\n\n function _collapseSiblings(treeview, $item) {\n $item.closest('ul')\n .find('> .' + classParent)\n .not($item)\n .each((i, el) => {\n _collapseGroup(treeview, $(el))\n })\n }\n\n function _toggleGroup(treeview, $item) {\n if (!multiselectable) {\n _collapseSiblings(treeview, $item)\n }\n if ($item.attr('aria-expanded') == 'true') {\n _collapseGroup(treeview, $item)\n } else {\n _expandGroup(treeview, $item)\n }\n }\n\n function _updateStyling(treeview, $item) {\n treeview.$items.removeClass(classFocused)\n $item.addClass(classFocused)\n }\n\n function _handleKeyDown(treeview, $item, e) {\n let curNdx = treeview.$visibleItems.index($item)\n\n if ((e.altKey || e.ctrlKey) ||\n (e.shiftKey && e.keyCode != keys.tab)) {\n return true\n }\n\n // if (!$(e.currentTarget).is('.' + classMenuHandler)) {\n // return true\n // }\n\n switch (e.keyCode) {\n case keys.tab:\n {\n treeview.$activeItem = null\n $item.removeClass(classFocused)\n return true\n }\n\n case keys.home:\n {\n treeview.$activeItem = treeview.$parents.first()\n treeview.$activeItem.find(':focusable:first').focus()\n e.stopPropagation()\n return false\n }\n\n case keys.end:\n {\n treeview.$activeItem = treeview.$visibleItems.last()\n treeview.$activeItem.find(':focusable:first').focus()\n e.stopPropagation()\n return false\n }\n\n case keys.enter:\n case keys.space:\n {\n if ($(e.currentTarget).is('.' + classMenuHandler)) {\n _toggleGroup(treeview, $item)\n e.stopPropagation()\n return false\n }\n return true\n }\n\n case keys.left:\n {\n if ($item.is('.' + classParent) && $item.attr('aria-expanded') == 'true') {\n _collapseGroup(treeview, $item)\n } else {\n let $itemUL = $item.parent()\n let $itemParent = $itemUL.parent()\n treeview.$activeItem = $itemParent\n treeview.$activeItem.find(':focusable:first').focus()\n }\n e.stopPropagation()\n return false\n }\n\n case keys.right:\n {\n if (!$item.is('.' + classParent)) {\n // do nothing\n } else if ($item.attr('aria-expanded') == 'false') {\n _expandGroup(treeview, $item)\n } else {\n treeview.$activeItem = $item.children('ul').children('li').first()\n treeview.$activeItem.find(':focusable:first').focus()\n }\n e.stopPropagation()\n return false\n }\n\n case keys.up:\n {\n if (curNdx > 0) {\n let $prev = treeview.$visibleItems.eq(curNdx - 1)\n treeview.$activeItem = $prev\n $prev.find(':focusable:first').focus()\n }\n e.stopPropagation()\n return false\n }\n\n case keys.down:\n {\n if (curNdx < treeview.$visibleItems.length - 1) {\n let $next = treeview.$visibleItems.eq(curNdx + 1)\n treeview.$activeItem = $next\n $next.find(':focusable:first').focus()\n }\n e.stopPropagation()\n return false\n }\n\n case keys.asterisk:\n {\n treeview.$parents.each(function() {\n _expandGroup(treeview, $(this))\n })\n e.stopPropagation()\n return false\n }\n\n }\n return true\n }\n\n function _handleKeyPress(treeview, $item, e) {\n if (e.altKey || e.ctrlKey || e.shiftKey) {\n // do nothing\n return true\n }\n\n switch (e.keyCode) {\n case keys.tab:\n {\n return true\n }\n case keys.enter:\n case keys.home:\n case keys.end:\n case keys.left:\n case keys.right:\n case keys.up:\n case keys.down:\n {\n e.stopPropagation()\n return false\n }\n default:\n {\n let chr = String.fromCharCode(e.which)\n let bMatch = false\n let itemNdx = treeview.$visibleItems.index($item)\n let itemCnt = treeview.$visibleItems.length\n let curNdx = itemNdx + 1\n\n // check if the active item was the last one on the list\n if (curNdx == itemCnt) {\n curNdx = 0\n }\n\n // Iterate through the menu items (starting from the current item and wrapping) until a match is found\n // or the loop returns to the current menu item\n while (curNdx != itemNdx) {\n\n let $curItem = treeview.$visibleItems.eq(curNdx)\n let titleChr = $curItem.text().charAt(0)\n\n if ($curItem.is('.' + classParent)) {\n titleChr = $curItem.find('span').text().charAt(0)\n }\n\n if (titleChr.toLowerCase() == chr) {\n bMatch = true\n break\n }\n\n curNdx = curNdx + 1\n\n if (curNdx == itemCnt) {\n // reached the end of the list, start again at the beginning\n curNdx = 0\n }\n }\n\n if (bMatch == true) {\n treeview.$activeItem = treeview.$visibleItems.eq(curNdx)\n treeview.$activeItem.find(':focusable:first').focus()\n }\n\n e.stopPropagation()\n return false\n }\n }\n\n return true\n }\n\n function _handleClick(treeview, $item, e) {\n if (e.altKey || e.ctrlKey || e.shiftKey) {\n // do nothing\n return true\n }\n\n // closest('li')\n const $parent = $item.closest('li')\n\n treeview.$activeItem = $parent\n _updateStyling(treeview, $parent)\n _toggleGroup(treeview, $parent)\n\n e.stopPropagation()\n return false\n }\n\n function _bindEvents(treeview) {\n treeview.$handlers.click(function(e) {\n return _handleClick(treeview, $(this), e)\n })\n\n treeview.$items.keydown(function(e) {\n return _handleKeyDown(treeview, $(this), e)\n })\n\n treeview.$items.keypress(function(e) {\n return _handleKeyPress(treeview, $(this), e)\n })\n\n treeview.$handlers.keydown(function(e) {\n return _handleKeyDown(treeview, $(this).closest('li'), e)\n })\n\n treeview.$handlers.keypress(function(e) {\n return _handleKeyPress(treeview, $(this).closest('li'), e)\n })\n\n $(document).click(function() {\n if (treeview.$activeItem != null) {\n treeview.$activeItem.removeClass(classFocused)\n treeview.$activeItem = null\n }\n return true\n })\n }\n\n function destroy() {\n /* TODO */\n }\n\n function _addA11y($el) {\n $el.attr('role', 'tree')\n\n // Put role=\"treeitem\" on every LI\n // Put aria-expanded=\"false\" on every LI (if it has no aria-expanded attr)\n // Put tabindex=\"-1\" on every LI (if it's not the first one)\n // Put class=