73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
/* expandable sections */
|
|
(function () {
|
|
function toggle (button, target) {
|
|
var expanded = button.getAttribute('aria-expanded') === 'true'
|
|
button.setAttribute('aria-expanded', !expanded)
|
|
target.hidden = !target.hidden
|
|
}
|
|
|
|
var expanders = document.querySelectorAll('[data-expands]')
|
|
|
|
Array.prototype.forEach.call(expanders, function (expander) {
|
|
var target = document.getElementById(expander.getAttribute('data-expands'))
|
|
|
|
expander.addEventListener('click', function () {
|
|
toggle(expander, target)
|
|
})
|
|
})
|
|
}());
|
|
|
|
/* menu button */
|
|
(function () {
|
|
var button = document.getElementById('menu-button')
|
|
var menu = document.getElementById('patterns-list')
|
|
button.addEventListener('click', function() {
|
|
var expanded = this.getAttribute('aria-expanded') === 'true'
|
|
this.setAttribute('aria-expanded', !expanded)
|
|
})
|
|
}());
|
|
|
|
/* persist navigation scroll point */
|
|
(function () {
|
|
window.onunload = function () {
|
|
var scrollPoint = document.getElementById('patterns-nav').scrollTop
|
|
localStorage.setItem('scrollPoint', scrollPoint)
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
if (window.location.href.indexOf('patterns/') !== -1) {
|
|
document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
|
|
} else {
|
|
document.getElementById('patterns-nav').scrollTop = 0
|
|
}
|
|
})
|
|
}());
|
|
|
|
/* Add "link here" links to <h2> headings */
|
|
(function () {
|
|
var headings = document.querySelectorAll('main > h2')
|
|
|
|
Array.prototype.forEach.call(headings, function (heading) {
|
|
var id = heading.getAttribute('id')
|
|
|
|
if (id) {
|
|
var newHeading = heading.cloneNode(true)
|
|
|
|
var container = document.createElement('div')
|
|
container.setAttribute('class', 'h2-container')
|
|
container.appendChild(newHeading)
|
|
|
|
heading.parentNode.insertBefore(container, heading)
|
|
|
|
var link = document.createElement('a')
|
|
link.setAttribute('href', '#' + id)
|
|
link.setAttribute('aria-label', 'link for this section')
|
|
link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50"><use xlink:href="#link"></use></svg>'
|
|
|
|
container.appendChild(link)
|
|
|
|
heading.parentNode.removeChild(heading);
|
|
}
|
|
})
|
|
}());
|