cupper-hugo-theme/docs/js/dom-scripts.js

134 lines
3.9 KiB
JavaScript
Raw Normal View History

2017-07-03 13:43:14 +02:00
/* expandable sections */
(function () {
function toggle (button, target) {
2017-08-12 10:14:05 +02:00
var expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !expanded);
target.hidden = !target.hidden;
2017-07-03 13:43:14 +02:00
}
2017-08-12 10:14:05 +02:00
var expanders = document.querySelectorAll('[data-expands]');
2017-07-03 13:43:14 +02:00
Array.prototype.forEach.call(expanders, function (expander) {
2017-08-12 10:14:05 +02:00
var target = document.getElementById(expander.getAttribute('data-expands'));
2017-07-03 13:43:14 +02:00
expander.addEventListener('click', function () {
2017-08-12 10:14:05 +02:00
toggle(expander, target);
2017-07-03 13:43:14 +02:00
})
})
}());
/* menu button */
(function () {
2017-08-12 10:14:05 +02:00
var button = document.getElementById('menu-button');
2017-07-30 17:47:07 +02:00
if (button) {
2017-08-12 10:14:05 +02:00
var menu = document.getElementById('patterns-list');
2017-07-30 17:47:07 +02:00
button.addEventListener('click', function() {
2017-08-12 10:14:05 +02:00
var expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
2017-07-30 17:47:07 +02:00
})
}
2017-07-03 13:43:14 +02:00
}());
/* persist navigation scroll point */
(function () {
2017-08-12 10:14:05 +02:00
window.onbeforeunload = function () {
var patternsNav = document.getElementById('patterns-nav');
2017-07-31 22:07:38 +02:00
if (patternsNav) {
2017-08-12 10:14:05 +02:00
var scrollPoint = patternsNav.scrollTop;
localStorage.setItem('scrollPoint', scrollPoint);
2017-07-30 17:47:07 +02:00
}
2017-07-21 09:53:42 +02:00
}
2017-07-03 13:43:14 +02:00
2017-07-21 09:53:42 +02:00
window.addEventListener('DOMContentLoaded', function () {
2017-07-31 22:07:38 +02:00
if (document.getElementById('patterns-nav')) {
if (window.location.href.indexOf('patterns/') !== -1) {
2017-08-12 10:14:05 +02:00
document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'));
2017-07-31 22:07:38 +02:00
} else {
2017-08-12 10:14:05 +02:00
document.getElementById('patterns-nav').scrollTop = 0;
2017-07-31 22:07:38 +02:00
}
}
2017-07-03 13:43:14 +02:00
})
}());
2017-07-27 13:00:25 +02:00
/* Add "link here" links to <h2> headings */
(function () {
2017-08-12 10:14:05 +02:00
var headings = document.querySelectorAll('main > h2');
2017-07-27 13:00:25 +02:00
Array.prototype.forEach.call(headings, function (heading) {
2017-08-12 10:14:05 +02:00
var id = heading.getAttribute('id');
2017-07-27 13:00:25 +02:00
if (id) {
2017-08-12 10:14:05 +02:00
var newHeading = heading.cloneNode(true);
2017-08-28 13:09:59 +02:00
newHeading.setAttribute('tabindex', '-1');
2017-07-27 13:00:25 +02:00
2017-08-12 10:14:05 +02:00
var container = document.createElement('div');
container.setAttribute('class', 'h2-container');
container.appendChild(newHeading);
2017-07-27 13:00:25 +02:00
2017-08-12 10:14:05 +02:00
heading.parentNode.insertBefore(container, heading);
2017-07-27 13:00:25 +02:00
2017-08-12 10:14:05 +02:00
var link = document.createElement('a');
link.setAttribute('href', '#' + id);
var headingText = heading.textContent;
2017-08-13 16:23:41 +02:00
link.setAttribute('aria-label', 'This ' + headingText + ' section');
2017-08-24 14:31:48 +02:00
link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
2017-07-27 13:00:25 +02:00
2017-08-12 10:14:05 +02:00
container.appendChild(link);
2017-07-27 13:00:25 +02:00
heading.parentNode.removeChild(heading);
}
})
}());
2017-07-28 15:42:01 +02:00
2017-08-14 14:19:47 +02:00
/* 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');
2017-08-18 11:33:09 +02:00
if (block.scrollWidth > block.clientWidth) {
block.setAttribute('tabindex', '0');
}
2017-08-14 14:19:47 +02:00
}
2017-08-12 10:14:05 +02:00
});
2017-08-14 14:19:47 +02:00
}());
2017-08-17 18:21:19 +02:00
/* Switch and persist theme */
(function () {
2017-08-24 17:29:54 +02:00
function CSSSupported (property, value) {
var prop = property + ':',
el = document.createElement('test'),
mStyle = el.style;
el.style.cssText = prop + value;
return mStyle[property];
}
2017-08-17 18:21:19 +02:00
var checkbox = document.getElementById('themer');
2017-08-19 19:18:18 +02:00
var inverter = document.getElementById('inverter');
2017-08-17 18:21:19 +02:00
2017-08-25 13:31:58 +02:00
if (!CSSSupported('filter', 'invert(100%)')) {
checkbox.parentNode.hidden = true;
return;
}
2017-08-19 19:18:18 +02:00
2017-08-25 13:31:58 +02:00
function darkTheme(media) {
2017-08-19 19:18:18 +02:00
inverter.setAttribute('media', media);
inverter.textContent = inverter.textContent.trim();
2017-08-17 18:21:19 +02:00
localStorage.setItem('darkTheme', media);
}
checkbox.addEventListener('change', function () {
darkTheme(this.checked ? 'screen' : 'none');
});
window.addEventListener('DOMContentLoaded', function () {
2017-08-19 19:18:18 +02:00
if ('filter' in document.body.style) {
if (localStorage.getItem('darkTheme') === 'screen') {
checkbox.click();
}
2017-08-17 18:21:19 +02:00
}
});
}());