-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add related navigation component (#66)
- Loading branch information
1 parent
d3d1f88
commit 4a1991c
Showing
12 changed files
with
794 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
/* eslint-env jquery */ | ||
/* | ||
Toggle the display of elements | ||
Use as follows: | ||
<div data-module="js-toggle"> | ||
<a href="#" data-controls="target" data-expanded="true"> | ||
Show more | ||
</a> | ||
<div id="target"> | ||
Content to be toggled | ||
</div> | ||
</div> | ||
Use `data-controls` and `data-expanded` to indicate the | ||
starting state and the IDs of the elements that the toggle | ||
controls. This is synonymous with ARIA attributes, which | ||
get added when starting. | ||
If you want to set `data-expanded` to false, you must add | ||
the `js-hidden` class to the element you wish to hide in | ||
your template, the module will not do this for you. | ||
`data-controls` can contain more than one element, space | ||
separated. | ||
Use `data-toggle-class` on the parent element to set the | ||
class that is toggled. Defaults to `js-hidden`. | ||
Use `data-toggled-text` on the trigger element to set the | ||
text shown when the element is toggled. Defaults to not | ||
changing. | ||
Use `data-track-category` and `data-track-action` together | ||
to enable analytics on the element. The label will be | ||
determined based on the text present within the element | ||
at the time it was clicked. | ||
*/ | ||
|
||
window.GOVUK = window.GOVUK || {}; | ||
window.GOVUK.Modules = window.GOVUK.Modules || {}; | ||
|
||
(function (Modules) { | ||
'use strict' | ||
|
||
Modules.Toggle = function () { | ||
this.start = function ($element) { | ||
var toggleSelector = '[data-controls][data-expanded]' | ||
var toggleClass = $element.attr('data-toggle-class') || 'js-hidden' | ||
// var trackable = '[data-track-category][data-track-action]' | ||
|
||
$element.on('click', toggleSelector, toggle) | ||
$element.find(toggleSelector).each(addAriaAttrs) | ||
|
||
// Add the ARIA attributes with JavaScript | ||
// If the JS fails and there's no interactive elements, having | ||
// no aria attributes is an accurate representation. | ||
function addAriaAttrs () { | ||
var $toggle = $(this) | ||
$toggle.attr('role', 'button') | ||
$toggle.attr('aria-controls', $toggle.data('controls')) | ||
$toggle.attr('aria-expanded', $toggle.data('expanded')) | ||
|
||
var $targets = getTargetElements($toggle) | ||
$targets.attr('aria-live', 'polite') | ||
$targets.attr('role', 'region') | ||
$toggle.data('$targets', $targets) | ||
} | ||
|
||
function toggle (event) { | ||
var $toggle = $(event.target) | ||
var expanded = $toggle.attr('aria-expanded') === 'true' | ||
var $targets = $toggle.data('$targets') | ||
|
||
if (expanded) { | ||
$toggle.attr('aria-expanded', false) | ||
$targets.addClass(toggleClass) | ||
} else { | ||
$toggle.attr('aria-expanded', true) | ||
$targets.removeClass(toggleClass) | ||
} | ||
|
||
var toggledText = $toggle.data('toggled-text') | ||
if (typeof toggledText === 'string') { | ||
$toggle.data('toggled-text', $toggle.text()) | ||
$toggle.text(toggledText) | ||
} | ||
|
||
// if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent && $toggle.is(trackable)) { | ||
// track($toggle) | ||
// } | ||
|
||
event.preventDefault() | ||
} | ||
|
||
function getTargetElements ($toggle) { | ||
var ids = $toggle.attr('aria-controls').split(' ') | ||
var selector = '#' + ids.join(', #') | ||
|
||
return $element.find(selector) | ||
} | ||
|
||
// function track ($toggle) { | ||
// var options = { label: $toggle.data('toggled-text') || $toggle.text() } | ||
// | ||
// window.GOVUK.analytics.trackEvent($toggle.data('track-category'), $toggle.data('track-action'), options) | ||
// } | ||
} | ||
} | ||
})(window.GOVUK.Modules) |
Oops, something went wrong.