cupper-hugo-theme/assets/js/template-dom-scripts.js

163 lines
4.4 KiB
JavaScript
Raw Normal View History

2019-02-15 17:57:49 +01:00
/* Expandable sections */
2017-11-02 17:50:47 +01:00
(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);
})
})
}());
2019-02-15 17:57:49 +01:00
/* Menu button */
2017-11-02 17:50:47 +01:00
(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);
})
}
}());
2019-02-15 17:57:49 +01:00
/* Persist navigation scroll point */
2017-11-02 17:50:47 +01:00
(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;
}
}
})
}());
2020-06-11 20:12:51 +02:00
{{ if not .Site.Params.hideHeaderLinks }}
/* Add "link here" links to <h2> headings */
(function () {
2021-09-12 21:24:53 +02:00
var headings = document.querySelectorAll('h2, h3, h4, h5, h6');
2017-11-02 17:50:47 +01:00
2020-06-11 20:12:51 +02:00
Array.prototype.forEach.call(headings, function (heading) {
var id = heading.getAttribute('id');
2017-11-02 17:50:47 +01:00
2020-06-11 20:12:51 +02:00
if (id) {
var newHeading = heading.cloneNode(true);
newHeading.setAttribute('tabindex', '-1');
2017-11-02 17:50:47 +01:00
2020-06-11 20:12:51 +02:00
var container = document.createElement('div');
container.setAttribute('class', 'h2-container');
container.appendChild(newHeading);
2017-11-02 17:50:47 +01:00
2020-06-11 20:12:51 +02:00
heading.parentNode.insertBefore(container, heading);
2017-11-02 17:50:47 +01:00
2020-06-11 20:12:51 +02:00
var link = document.createElement('a');
link.setAttribute('href', '#' + id);
2022-05-31 04:33:30 +02:00
link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use href="#link"></use> </svg>';
2017-11-02 17:50:47 +01:00
2020-06-11 20:12:51 +02:00
container.appendChild(link);
2017-11-02 17:50:47 +01:00
2020-06-11 20:12:51 +02:00
heading.parentNode.removeChild(heading);
}
})
}());
{{ end }}
2017-11-02 17:50:47 +01:00
/* Enable scrolling by keyboard of code samples */
(function () {
var codeBlocks = document.querySelectorAll('pre, .code-annotated');
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 () {
var checkbox = document.getElementById('themer');
function persistTheme(val) {
localStorage.setItem('darkTheme', val);
2017-11-02 17:50:47 +01:00
}
function applyDarkTheme() {
var darkTheme = document.getElementById('darkTheme');
darkTheme.disabled = false;
}
function clearDarkTheme() {
var darkTheme = document.getElementById('darkTheme');
darkTheme.disabled = true;
}
function defaultDarkTheme() {
{{- with .Site.Params.defaultDarkTheme }}
if (localStorage.getItem('darkTheme') == null) {
persistTheme('true');
checkbox.checked = true;
}
{{- else }}
if (localStorage.getItem('darkTheme') == null) {
persistTheme('false');
checkbox.checked = false;
}
{{ end }}
2017-11-02 17:50:47 +01:00
}
checkbox.addEventListener('change', function () {
defaultDarkTheme();
if (this.checked) {
applyDarkTheme();
persistTheme('true');
} else {
clearDarkTheme();
persistTheme('false');
}
2017-11-02 17:50:47 +01:00
});
function showTheme() {
if (localStorage.getItem('darkTheme') === 'true') {
applyDarkTheme();
checkbox.checked = true;
} else {
clearDarkTheme();
checkbox.checked = false;
2017-11-02 17:50:47 +01:00
}
}
function showContent() {
document.body.style.visibility = 'visible';
document.body.style.opacity = 1;
}
window.addEventListener('DOMContentLoaded', function () {
defaultDarkTheme();
showTheme();
showContent();
2017-11-02 17:50:47 +01:00
});
2020-06-03 04:14:46 +02:00
2017-11-02 17:50:47 +01:00
}());