pidgin/nest

Separate JS from plugin table logic

2019-12-31, Jason
5850f7a89c81
Parents 8eb183677415
Children d9c0224f853a
Separate JS from plugin table logic
2 files changed, 97 insertions(+), 101 deletions(-)
  • +1 -101
    hugo/layouts/shortcodes/plugintable.html
  • +96 -0
    hugo/static/js/plugin-table.js
    • --- a/hugo/layouts/shortcodes/plugintable.html Tue Dec 31 02:07:16 2019 +0000
    +++ b/hugo/layouts/shortcodes/plugintable.html Tue Dec 31 18:19:12 2019 +0000
    @@ -94,107 +94,7 @@
    </tbody>
    </table>
    -<script>
    - document.addEventListener("DOMContentLoaded", () => {
    - const selectorsContainer = document.getElementById("plugin-selector");
    - const search = document.getElementById("plugin-filter-search");
    - search.addEventListener("input", debounce(1000 * 0.5, filterRows));
    - const [, ...rows] =
    - document.getElementById("plugin-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>
    +<script src="/js/plugin-table.js"></script>
    <style>
    .filter-hide {
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/hugo/static/js/plugin-table.js Tue Dec 31 18:19:12 2019 +0000
    @@ -0,0 +1,96 @@
    +document.addEventListener("DOMContentLoaded", () => {
    + const selectorsContainer = document.getElementById("plugin-selector");
    + const search = document.getElementById("plugin-filter-search");
    + search.addEventListener("input", debounce(1000 * 0.5, filterRows));
    + const [, ...rows] = document
    + .getElementById("plugin-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));
    + }
    +});