From 5193d0b3e4d41a23451edfa7ab9776657762be07 Mon Sep 17 00:00:00 2001 From: Simon Willison Date: Thu, 31 Dec 2020 13:27:39 -0800 Subject: [PATCH] Apply prettier to table.js, refs #1166 --- datasette/static/table.js | 328 +++++++++++++++++++------------------- 1 file changed, 165 insertions(+), 163 deletions(-) diff --git a/datasette/static/table.js b/datasette/static/table.js index 179b42c4..b4e1e113 100644 --- a/datasette/static/table.js +++ b/datasette/static/table.js @@ -10,184 +10,186 @@ var DROPDOWN_HTML = `
`; var DROPDOWN_ICON_SVG = ` - - + + `; -(function() { - // Feature detection - if (!window.URLSearchParams) { - return; +(function () { + // Feature detection + if (!window.URLSearchParams) { + return; + } + function getParams() { + return new URLSearchParams(location.search); + } + function paramsToUrl(params) { + var s = params.toString(); + return s ? "?" + s : ""; + } + function sortDescUrl(column) { + var params = getParams(); + params.set("_sort_desc", column); + params.delete("_sort"); + params.delete("_next"); + return paramsToUrl(params); + } + function sortAscUrl(column) { + var params = getParams(); + params.set("_sort", column); + params.delete("_sort_desc"); + params.delete("_next"); + return paramsToUrl(params); + } + function facetUrl(column) { + var params = getParams(); + params.append("_facet", column); + return paramsToUrl(params); + } + function notBlankUrl(column) { + var params = getParams(); + params.set(`${column}__notblank`, "1"); + return paramsToUrl(params); + } + function closeMenu() { + menu.style.display = "none"; + menu.classList.remove("anim-scale-in"); + } + // When page loads, add scroll listener on .table-wrapper + document.addEventListener("DOMContentLoaded", () => { + var tableWrapper = document.querySelector(".table-wrapper"); + if (tableWrapper) { + tableWrapper.addEventListener("scroll", closeMenu); } - function getParams() { - return new URLSearchParams(location.search); + }); + document.body.addEventListener("click", (ev) => { + /* was this click outside the menu? */ + var target = ev.target; + while (target && target != menu) { + target = target.parentNode; } - function paramsToUrl(params) { - var s = params.toString(); - return s ? ('?' + s) : ''; + if (!target) { + closeMenu(); } - function sortDescUrl(column) { - var params = getParams(); - params.set('_sort_desc', column); - params.delete('_sort'); - params.delete('_next'); - return paramsToUrl(params); + }); + function iconClicked(ev) { + ev.preventDefault(); + ev.stopPropagation(); + var th = ev.target; + while (th.nodeName != "TH") { + th = th.parentNode; } - function sortAscUrl(column) { - var params = getParams(); - params.set('_sort', column); - params.delete('_sort_desc'); - params.delete('_next'); - return paramsToUrl(params); + var rect = th.getBoundingClientRect(); + var menuTop = rect.bottom + window.scrollY; + var menuLeft = rect.left + window.scrollX; + var column = th.getAttribute("data-column"); + var params = getParams(); + var sort = menu.querySelector("a.dropdown-sort-asc"); + var sortDesc = menu.querySelector("a.dropdown-sort-desc"); + var facetItem = menu.querySelector("a.dropdown-facet"); + var notBlank = menu.querySelector("a.dropdown-not-blank"); + if (params.get("_sort") == column) { + sort.style.display = "none"; + } else { + sort.style.display = "block"; + sort.setAttribute("href", sortAscUrl(column)); } - function facetUrl(column) { - var params = getParams(); - params.append('_facet', column); - return paramsToUrl(params); + if (params.get("_sort_desc") == column) { + sortDesc.style.display = "none"; + } else { + sortDesc.style.display = "block"; + sortDesc.setAttribute("href", sortDescUrl(column)); } - function notBlankUrl(column) { - var params = getParams(); - params.set(`${column}__notblank`, '1'); - return paramsToUrl(params); + /* Only show facet if it's not the first column, not selected, not a single PK */ + var isFirstColumn = + th.parentElement.querySelector("th:first-of-type") == th; + var isSinglePk = + th.getAttribute("data-is-pk") == "1" && + document.querySelectorAll('th[data-is-pk="1"]').length == 1; + if ( + isFirstColumn || + params.getAll("_facet").includes(column) || + isSinglePk + ) { + facetItem.style.display = "none"; + } else { + facetItem.style.display = "block"; + facetItem.setAttribute("href", facetUrl(column)); } - function closeMenu() { - menu.style.display = 'none'; - menu.classList.remove('anim-scale-in'); + /* Show notBlank option if not selected AND at least one visible blank value */ + var tdsForThisColumn = Array.from( + th.closest("table").querySelectorAll("td." + th.className) + ); + if ( + params.get(`${column}__notblank`) != "1" && + tdsForThisColumn.filter((el) => el.innerText.trim() == "").length + ) { + notBlank.style.display = "block"; + notBlank.setAttribute("href", notBlankUrl(column)); + } else { + notBlank.style.display = "none"; } - // When page loads, add scroll listener on .table-wrapper - document.addEventListener('DOMContentLoaded', () => { - var tableWrapper = document.querySelector('.table-wrapper'); - if (tableWrapper) { - tableWrapper.addEventListener('scroll', closeMenu); - } - }); - document.body.addEventListener('click', (ev) => { - /* was this click outside the menu? */ - var target = ev.target; - while (target && target != menu) { - target = target.parentNode; - } - if (!target) { - closeMenu(); - } - }); - function iconClicked(ev) { - ev.preventDefault(); - ev.stopPropagation(); - var th = ev.target; - while (th.nodeName != 'TH') { - th = th.parentNode; - } - var rect = th.getBoundingClientRect(); - var menuTop = rect.bottom + window.scrollY; - var menuLeft = rect.left + window.scrollX; - var column = th.getAttribute('data-column'); - var params = getParams(); - var sort = menu.querySelector('a.dropdown-sort-asc'); - var sortDesc = menu.querySelector('a.dropdown-sort-desc'); - var facetItem = menu.querySelector('a.dropdown-facet'); - var notBlank = menu.querySelector('a.dropdown-not-blank'); - if (params.get('_sort') == column) { - sort.style.display = 'none'; - } else { - sort.style.display = 'block'; - sort.setAttribute('href', sortAscUrl(column)); - } - if (params.get('_sort_desc') == column) { - sortDesc.style.display = 'none'; - } else { - sortDesc.style.display = 'block'; - sortDesc.setAttribute('href', sortDescUrl(column)); - } - /* Only show facet if it's not the first column, not selected, not a single PK */ - var isFirstColumn = th.parentElement.querySelector('th:first-of-type') == th; - var isSinglePk = ( - th.getAttribute('data-is-pk') == '1' && - document.querySelectorAll('th[data-is-pk="1"]').length == 1 - ); - if (isFirstColumn || params.getAll('_facet').includes(column) || isSinglePk) { - facetItem.style.display = 'none'; - } else { - facetItem.style.display = 'block'; - facetItem.setAttribute('href', facetUrl(column)); - } - /* Show notBlank option if not selected AND at least one visible blank value */ - var tdsForThisColumn = Array.from( - th.closest('table').querySelectorAll('td.' + th.className) - ); - if ( - params.get(`${column}__notblank`) != '1' && - tdsForThisColumn.filter(el => el.innerText.trim() == '').length - ) { - notBlank.style.display = 'block'; - notBlank.setAttribute('href', notBlankUrl(column)); - } else { - notBlank.style.display = 'none'; - } - var columnTypeP = menu.querySelector('.dropdown-column-type'); - var columnType = th.dataset.columnType; - var notNull = th.dataset.columnNotNull == 1 ? ' NOT NULL' : ''; + var columnTypeP = menu.querySelector(".dropdown-column-type"); + var columnType = th.dataset.columnType; + var notNull = th.dataset.columnNotNull == 1 ? " NOT NULL" : ""; - if (columnType) { - columnTypeP.style.display = 'block'; - columnTypeP.innerText = `Type: ${columnType.toUpperCase()}${notNull}`; - } else { - columnTypeP.style.display = 'none'; - } - menu.style.position = 'absolute'; - menu.style.top = (menuTop + 6) + 'px'; - menu.style.left = menuLeft + 'px'; - menu.style.display = 'block'; - menu.classList.add('anim-scale-in'); + if (columnType) { + columnTypeP.style.display = "block"; + columnTypeP.innerText = `Type: ${columnType.toUpperCase()}${notNull}`; + } else { + columnTypeP.style.display = "none"; } - var svg = document.createElement('div'); - svg.innerHTML = DROPDOWN_ICON_SVG; - svg = svg.querySelector('*'); - svg.classList.add('dropdown-menu-icon'); - var menu = document.createElement('div'); - menu.innerHTML = DROPDOWN_HTML; - menu = menu.querySelector('*'); - menu.style.position = 'absolute'; - menu.style.display = 'none'; - document.body.appendChild(menu); + menu.style.position = "absolute"; + menu.style.top = menuTop + 6 + "px"; + menu.style.left = menuLeft + "px"; + menu.style.display = "block"; + menu.classList.add("anim-scale-in"); + } + var svg = document.createElement("div"); + svg.innerHTML = DROPDOWN_ICON_SVG; + svg = svg.querySelector("*"); + svg.classList.add("dropdown-menu-icon"); + var menu = document.createElement("div"); + menu.innerHTML = DROPDOWN_HTML; + menu = menu.querySelector("*"); + menu.style.position = "absolute"; + menu.style.display = "none"; + document.body.appendChild(menu); - var ths = Array.from(document.querySelectorAll('.rows-and-columns th')); - ths.forEach(th => { - if (!th.querySelector('a')) { - return; - } - var icon = svg.cloneNode(true); - icon.addEventListener('click', iconClicked); - th.appendChild(icon); - }); + var ths = Array.from(document.querySelectorAll(".rows-and-columns th")); + ths.forEach((th) => { + if (!th.querySelector("a")) { + return; + } + var icon = svg.cloneNode(true); + icon.addEventListener("click", iconClicked); + th.appendChild(icon); + }); })(); /* Add x buttons to the filter rows */ -(function() { - var x = '✖'; - var rows = Array.from( - document.querySelectorAll('.filter-row') - ).filter( - el => el.querySelector('.filter-op') - ); - rows.forEach(row => { - var a = document.createElement('a'); - a.setAttribute('href', '#'); - a.setAttribute('aria-label', 'Remove this filter'); - a.style.textDecoration = 'none'; - a.innerText = x; - a.addEventListener('click', (ev) => { - ev.preventDefault(); - let row = ev.target.closest('div'); - row.querySelector('select').value = ''; - row.querySelector('.filter-op select').value = 'exact'; - row.querySelector('input.filter-value').value = ''; - ev.target.closest('a').style.display = 'none'; - }); - row.appendChild(a); - var column = row.querySelector('select'); - if (!column.value) { - a.style.display = 'none'; - } +(function () { + var x = "✖"; + var rows = Array.from(document.querySelectorAll(".filter-row")).filter((el) => + el.querySelector(".filter-op") + ); + rows.forEach((row) => { + var a = document.createElement("a"); + a.setAttribute("href", "#"); + a.setAttribute("aria-label", "Remove this filter"); + a.style.textDecoration = "none"; + a.innerText = x; + a.addEventListener("click", (ev) => { + ev.preventDefault(); + let row = ev.target.closest("div"); + row.querySelector("select").value = ""; + row.querySelector(".filter-op select").value = "exact"; + row.querySelector("input.filter-value").value = ""; + ev.target.closest("a").style.display = "none"; }); + row.appendChild(a); + var column = row.querySelector("select"); + if (!column.value) { + a.style.display = "none"; + } + }); })();