a11y-headers

a11y-headers

javascript: (function () {
    var css = `#e404h_overlay {position:fixed; bottom:0; width:80%; max-height:200px; overflow:auto; padding:15px;}.e404h_i:hover {background: rgba(255,0,0,.2); cursor:pointer;}.e404h_i.e404h_hidden {opacity:.2; cursor:not-allowed;}.e404h_i.e404h_hidden::after {content:' [hidden]';}.e404h_h1 {font-size: 30px; line-height: 1.1;}.e404h_h2 {font-size: 25px; line-height: 1.1;}.e404h_h3 {font-size: 20px; line-height: 1.2;}.e404h_h4 {font-size: 17px; line-height: 1.3;}.e404h_h5 {font-size: 14px; line-height: 1.3;}.e404h_h6 {font-size: 11px; line-height: 1.3;}.e404h_hlight {box-shadow: 0 0 3px 1px #f00;}`;
    var html = '';
    var headings = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
    var heads = [];
    for (var i = 0; i < headings.length; i++) {
        heads.push({
            tag: headings[i].tagName.toLowerCase(),
            text: headings[i].textContent.trim(),
            elem: headings[i]
        });
    }
    heads.forEach((h, i) => {
        let hidden = h.elem.offsetParent ? '' : ' e404h_hidden';
        html += `<div class="e404h_i e404h_${h.tag}${hidden}" data-i="${i}">${h.tag}: ${h.text}</div>`
    });
    var wrap = document.getElementById('e404h_overlay');
    if (wrap) {
        wrap.outherHTML = '';
    } else {
        var style = document.createElement('style');
        style.id = 'e404h_style';
        style.innerHTML = css;
        document.body.appendChild(style);
    }
    wrap = document.createElement('dialog');
    wrap.id = 'e404h_overlay';
    wrap.innerHTML = html;
    document.body.appendChild(wrap);
    wrap.showModal();
    wrap.addEventListener('click', function (e) {
        if (e.target.classList.contains('e404h_i')) {
            var ind = e.target.getAttribute('data-i') * 1;
            var el = heads[ind].elem;
            console.log(el);
            if (e.target.classList.contains('e404h_hidden')) {
                return;
            }
            var dy = el.getBoundingClientRect().y;
            window.scroll(0, window.pageYOffset + dy - 100);
            el.classList.add('e404h_hlight');
            setTimeout(() => {
                el.classList.remove('e404h_hlight')
            }, 1000)
        } else if (e.target.nodeName === 'DIALOG') {
            this.close();
        }
    });
})()