pidgin/nest

closing merged branch
help-weights
2019-08-23, Gary Kramlich
6af542ccd6f4
closing merged branch
{{/*** Templates ***/}}
{{ define "trusted" }}
<span aria-label="{{ T "Trusted" }}" class="tooltipped tooltipped-s">
<i class="fas fa-check-circle " style="color:#784a85"></i>
</span>
{{ end }}
{{ define "community" }}
<span aria-label="{{ T "Community" }}" class="tooltipped tooltipped-s">
<i class="fas fa-users" style="color:green"></i>
</span>
{{ end }}
{{/*** Content ***/}}
<p>
{{ T "Plugin-Info" }}
</p>
<ul>
<li>{{ template "trusted" }} {{ T "Trusted-Info" }}</li>
<li>{{ template "community" }} {{ T "Community-Info" }}</li>
</ul>
<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>
All
</label>
<label style="display: inline-block;">
<input type="radio" id="pidgin" name="publisher" style="margin-right: 0; margin-left: 0.75rem;" value="pidgin">
{{ template "trusted" }}
{{ T "Trusted" }}
</label>
<label style="display: inline-block;">
<input type="radio" id="community" name="publisher" style="margin-right: 0; margin-left: 0.75rem;"
value="community">
{{ template "community" }}
{{ T "Community" }}
</label>
</div>
<input type="text" id="plugin-filter-search" placeholder="{{ T "Search-placeholder" }}" />
<div id="protocol-selector"></div>
</div>
<table id="protocol-table">
<thead>
<th></th>
<th>{{ T "Name" }}</th>
<th>{{ T "Info" }}</th>
<th>
{{ T "Maintainer" }}<br />
{{ T "Repo" }}
</th>
</thead>
<tbody>
{{ range .Site.Data.plugins }}
<tr data-type="{{ .type }}" {{ if .isTrusted }}isTrusted="true"{{ end }}>
<td>
{{ if .logo }}<img src="{{ .logo }}" />{{ else }}&nbsp;{{ end }}
</td>
<td class="plugin-heading">
{{ .heading }}
</td>
<td class="plugin-info">
{{ if eq true .isTrusted }}
{{ template "trusted" }}
{{ else }}
{{ template "community" }}
{{ end }}
<b>{{ .type }}</b> {{ .info | markdownify }}
</td>
<td class="plugin-repo">
<a href="{{ .repo }}">{{ .maintainer }}</a>
</td>
</tr>
{{ end }}
</tbody>
</table>
<script>
document.addEventListener("DOMContentLoaded", () => {
const selectorsContainer = document.getElementById("protocol-selector");
const search = document.getElementById("plugin-filter-search");
search.addEventListener("input", debounce(1000 * 0.5, filterRows));
const [, ...rows] =
document.getElementById("protocol-table").getElementsByTagName("tr");
const types = {};
const typeFilter = new Set();
const rowinfo = rows.map(elem => {
const type = elem.dataset.type;
if (type) {
if (!types[type]) types[type] = []
types[type].push(elem);
}
return {
elem,
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.type = "checkbox";
input.dataset.type = type
input.addEventListener("click", clickEvent);
label.appendChild(document.createTextNode(type));
});
/////////////////////////
function getContents(className, elem){
return (
elem.getElementsByClassName(className)[0]
.textContent.toLowerCase()
)
}
function clickEvent({target}) {
typeFilter[target.checked ? "add" : "delete"](target.dataset.type);
filterRows();
}
const publisherRadioQuery = 'input[name="publisher"]:checked'
function filterRows() {
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");
else
row.elem.classList.add("filter-hide");
});
}
function shouldFilter(row, publisher, str) {
return (
// Checkboxes
(!typeFilter.size || typeFilter.has(row.elem.dataset.type))
// Provider
&& (
publisher == 'all'
|| (publisher == 'pidgin' && row.isTrusted)
|| (publisher == 'community' && !row.isTrusted)
)
// Search box
&& (
!str
|| row.head.includes(str)
|| row.info.includes(str)
|| row.repo.includes(str)
)
)
}
function debounce(t, fn) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), t);
};
}
function createAndAppend(tag, elem = document) {
return elem.appendChild(document.createElement(tag));
}
});
</script>
<style>
.filter-hide {
display: none;
}
#plugin-filters {
text-align: right;
}
#plugin-filter-search {
text-align: right;
max-width: 250px;
display: inline-block;
}
#protocol-selector label {
text-align: right;
display: inline-block;
}
#protocol-selector input {
margin: 8px;
display: inline-block;
}
</style>