133 lines
3.9 KiB
JavaScript
133 lines
3.9 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');
|
|
if (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.onbeforeunload = function () {
|
|
var patternsNav = document.getElementById('patterns-nav');
|
|
if (patternsNav) {
|
|
var scrollPoint = patternsNav.scrollTop;
|
|
localStorage.setItem('scrollPoint', scrollPoint);
|
|
}
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
if (document.getElementById('patterns-nav')) {
|
|
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);
|
|
var headingText = heading.textContent;
|
|
link.setAttribute('aria-label', 'This ' + headingText + ' section');
|
|
link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
|
|
|
|
container.appendChild(link);
|
|
|
|
heading.parentNode.removeChild(heading);
|
|
}
|
|
})
|
|
}());
|
|
|
|
/* Enable scrolling by keyboard of code samples */
|
|
(function () {
|
|
var codeBlocks = document.querySelectorAll('pre');
|
|
|
|
Array.prototype.forEach.call(codeBlocks, function (block) {
|
|
if (block.querySelector('code')) {
|
|
block.setAttribute('role', 'region');
|
|
block.setAttribute('aria-label', 'code sample');
|
|
if (block.scrollWidth > block.clientWidth) {
|
|
block.setAttribute('tabindex', '0');
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
|
|
/* Switch and persist theme */
|
|
(function () {
|
|
function CSSSupported (property, value) {
|
|
var prop = property + ':',
|
|
el = document.createElement('test'),
|
|
mStyle = el.style;
|
|
el.style.cssText = prop + value;
|
|
return mStyle[property];
|
|
}
|
|
|
|
var checkbox = document.getElementById('themer');
|
|
var inverter = document.getElementById('inverter');
|
|
|
|
function darkTheme(media) {
|
|
if (!CSSSupported('filter', 'invert(100%)')) {
|
|
checkbox.parentNode.hidden = true;
|
|
return;
|
|
}
|
|
|
|
inverter.setAttribute('media', media);
|
|
inverter.textContent = inverter.textContent.trim();
|
|
localStorage.setItem('darkTheme', media);
|
|
}
|
|
|
|
checkbox.addEventListener('change', function () {
|
|
darkTheme(this.checked ? 'screen' : 'none');
|
|
});
|
|
|
|
window.addEventListener('DOMContentLoaded', function () {
|
|
if ('filter' in document.body.style) {
|
|
if (localStorage.getItem('darkTheme') === 'screen') {
|
|
checkbox.click();
|
|
}
|
|
}
|
|
});
|
|
}());
|