<span aria-label="{{ T "Trusted" }}" class="tooltipped tooltipped-s"> <i class="fas fa-check-circle " style="color:#784a85"></i> <span aria-label="{{ T "Community" }}" class="tooltipped tooltipped-s"> <i class="fas fa-users" style="color:green"></i> <li>{{ template "trusted" }} {{ T "Trusted-Info" }}</li> <li>{{ template "community" }} {{ T "Community-Info" }}</li> <div id="plugin-filters"> <div id="publisher-selector"> <label style="display: inline-block;"> <input type="radio" id="all" name="publisher" style="margin-right: 0; margin-left: 0.75rem;" value="all" checked> <label style="display: inline-block;"> <input type="radio" id="pidgin" name="publisher" style="margin-right: 0; margin-left: 0.75rem;" value="pidgin"> <label style="display: inline-block;"> <input type="radio" id="community" name="publisher" style="margin-right: 0; margin-left: 0.75rem;" {{ template "community" }} <input type="text" id="plugin-filter-search" placeholder="{{ T "Search-placeholder" }}" /> <div id="plugin-selector"></div> <table id="plugin-table"> <th>{{ T "Maintainer" }}</th> {{ range .Site.Data.plugins }} <tr data-type="{{ .type }}" {{ if .isTrusted }}isTrusted="true"{{ end }}> {{ if .logo }}<img src="{{ .logo }}" alt="{{ .heading | safeHTMLAttr }} logo" />{{ else }} {{ end }} <td class="plugin-heading"> <a href="{{ .repo }}">{{ .heading }}</a> <td class="plugin-publisher"> {{ if eq true .isTrusted }} {{ template "community" }} {{ with .info }}{{ . | markdownify }}{{ end }} document.addEventListener("DOMContentLoaded", () => { const selectorsContainer = document.getElementById("plugin-selector"); const search = document.getElementById("plugin-filter-search"); search.addEventListener("input", debounce(1000 * 0.5, filterRows)); document.getElementById("plugin-table").getElementsByTagName("tr"); const typeFilter = new Set(); const rowinfo = rows.map(elem => { const type = elem.dataset.type; if (!types[type]) types[type] = [] head: getContents("plugin-heading", elem), info: getContents("plugin-info", elem), repo: getContents("plugin-repo", elem), isTrusted: elem.getAttribute('isTrusted') == 'true' document.getElementById("publisher-selector") .addEventListener('click', filterRows) Object.keys(types).forEach(type => { const label = createAndAppend("label", selectorsContainer); label.classList.add('pidgin-plugin-filter-checkbox') const input = createAndAppend("input", label); input.dataset.type = type input.addEventListener("click", clickEvent); label.appendChild(document.createTextNode(type)); ///////////////////////// function getContents(className, elem){ elem.getElementsByClassName(className)[0] .textContent.toLowerCase() function clickEvent({target}) { typeFilter[target.checked ? "add" : "delete"](target.dataset.type); const publisherRadioQuery = 'input[name="publisher"]:checked' const str = (search.value || "").toLowerCase() const publisherSelector = document.querySelector(publisherRadioQuery).value; rowinfo.forEach((row) => { if (shouldFilter(row, publisherSelector, str)) row.elem.classList.remove("filter-hide"); row.elem.classList.add("filter-hide"); function shouldFilter(row, publisher, str) { (!typeFilter.size || typeFilter.has(row.elem.dataset.type)) || (publisher == 'pidgin' && row.isTrusted) || (publisher == 'community' && !row.isTrusted) || row.head.includes(str) || row.info.includes(str) || row.repo.includes(str) function debounce(t, fn) { return function (...args) { timer = setTimeout(() => fn(...args), t); function createAndAppend(tag, elem = document) { return elem.appendChild(document.createElement(tag));