sort pingdom results, expand poor results

clarify-pingdom.js

console.clear()

sortPerfTable()
expandPoorSuggestions()
showFullText()


function sortPerfTable() {

    const tbl = document.querySelector('.table-perfinsights tbody');

    Array.from(document.querySelectorAll('.table-perfinsights .accordion-toggle'))
        .map(header => {
            const t = header.querySelector('.col-suggestion').innerText;
            return {t, header, content: header.nextElementSibling}
        })
        .sort((a,b) => {
            if (a.t === b.t) return 0;
            return a.t > b.t ? 1 : -1;
        })
        .forEach(({header, content}) => {
            tbl.appendChild(header);
            tbl.appendChild(content);
        });
}

function expandPoorSuggestions() {
    Array.from(document.querySelectorAll('.accordion-toggle'))
        .filter(isNotPerfect)
        .forEach(el => {
            const content = el.nextElementSibling;
            content.classList.remove('hidden');
            content.classList.add('accordion-open');

            // hide the big button
            const btn = content.querySelector('.button-green')
            if (btn) btn.parentNode.removeChild(btn)
        })
    
    function isNotPerfect(it){
        return it.querySelector('.col-grade').innerText !== 'A100';
    }
}

function showFullText(){
    // show full text in content
    Array.from(document.querySelectorAll('.accordion-content li'))
        .forEach(li => {
            li.innerText = li.getAttribute('title')
            li.style.overflowWrap = 'break-word';
        })
    
    // remove css for ellipsis
    Array.from(document.querySelectorAll('.accordion-content .overflow-ellipsis'))
        .forEach(el => el.classList.remove('overflow-ellipsis'));
}