github/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2025-12-10 16:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

Apply prettier to table.js, refs #1166

Browse source
This commit is contained in:
Simon Willison 2020-12-31 13:27:39 -08:00
commit 5193d0b3e4
1 changed files with 165 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

166
datasette/static/table.js
View file

@ -24,44 +24,44 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
} }
function paramsToUrl(params) { function paramsToUrl(params) {
var s = params.toString(); var s = params.toString();
return s ? ('?' + s) : ''; return s ? "?" + s : "";
} }
function sortDescUrl(column) { function sortDescUrl(column) {
var params = getParams(); var params = getParams();
params.set('_sort_desc', column); params.set("_sort_desc", column);
params.delete('_sort'); params.delete("_sort");
params.delete('_next'); params.delete("_next");
return paramsToUrl(params); return paramsToUrl(params);
} }
function sortAscUrl(column) { function sortAscUrl(column) {
var params = getParams(); var params = getParams();
params.set('_sort', column); params.set("_sort", column);
params.delete('_sort_desc'); params.delete("_sort_desc");
params.delete('_next'); params.delete("_next");
return paramsToUrl(params); return paramsToUrl(params);
} }
function facetUrl(column) { function facetUrl(column) {
var params = getParams(); var params = getParams();
params.append('_facet', column); params.append("_facet", column);
return paramsToUrl(params); return paramsToUrl(params);
} }
function notBlankUrl(column) { function notBlankUrl(column) {
var params = getParams(); var params = getParams();
params.set(`${column}__notblank`, '1'); params.set(`${column}__notblank`, "1");
return paramsToUrl(params); return paramsToUrl(params);
} }
function closeMenu() { function closeMenu() {
menu.style.display = 'none'; menu.style.display = "none";
menu.classList.remove('anim-scale-in'); menu.classList.remove("anim-scale-in");
} }
// When page loads, add scroll listener on .table-wrapper // When page loads, add scroll listener on .table-wrapper
document.addEventListener('DOMContentLoaded', () => { document.addEventListener("DOMContentLoaded", () => {
var tableWrapper = document.querySelector('.table-wrapper'); var tableWrapper = document.querySelector(".table-wrapper");
if (tableWrapper) { if (tableWrapper) {
tableWrapper.addEventListener('scroll', closeMenu); tableWrapper.addEventListener("scroll", closeMenu);
} }
}); });
document.body.addEventListener('click', (ev) => { document.body.addEventListener("click", (ev) => {
/* was this click outside the menu? */ /* was this click outside the menu? */
var target = ev.target; var target = ev.target;
while (target && target != menu) { while (target && target != menu) {
@ -75,119 +75,121 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
var th = ev.target; var th = ev.target;
while (th.nodeName != 'TH') { while (th.nodeName != "TH") {
th = th.parentNode; th = th.parentNode;
} }
var rect = th.getBoundingClientRect(); var rect = th.getBoundingClientRect();
var menuTop = rect.bottom + window.scrollY; var menuTop = rect.bottom + window.scrollY;
var menuLeft = rect.left + window.scrollX; var menuLeft = rect.left + window.scrollX;
var column = th.getAttribute('data-column'); var column = th.getAttribute("data-column");
var params = getParams(); var params = getParams();
var sort = menu.querySelector('a.dropdown-sort-asc'); var sort = menu.querySelector("a.dropdown-sort-asc");
var sortDesc = menu.querySelector('a.dropdown-sort-desc'); var sortDesc = menu.querySelector("a.dropdown-sort-desc");
var facetItem = menu.querySelector('a.dropdown-facet'); var facetItem = menu.querySelector("a.dropdown-facet");
var notBlank = menu.querySelector('a.dropdown-not-blank'); var notBlank = menu.querySelector("a.dropdown-not-blank");
if (params.get('_sort') == column) { if (params.get("_sort") == column) {
sort.style.display = 'none'; sort.style.display = "none";
} else { } else {
sort.style.display = 'block'; sort.style.display = "block";
sort.setAttribute('href', sortAscUrl(column)); sort.setAttribute("href", sortAscUrl(column));
} }
if (params.get('_sort_desc') == column) { if (params.get("_sort_desc") == column) {
sortDesc.style.display = 'none'; sortDesc.style.display = "none";
} else { } else {
sortDesc.style.display = 'block'; sortDesc.style.display = "block";
sortDesc.setAttribute('href', sortDescUrl(column)); sortDesc.setAttribute("href", sortDescUrl(column));
} }
/* Only show facet if it's not the first column, not selected, not a single PK */ /* 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 isFirstColumn =
var isSinglePk = ( th.parentElement.querySelector("th:first-of-type") == th;
th.getAttribute('data-is-pk') == '1' && var isSinglePk =
document.querySelectorAll('th[data-is-pk="1"]').length == 1 th.getAttribute("data-is-pk") == "1" &&
); document.querySelectorAll('th[data-is-pk="1"]').length == 1;
if (isFirstColumn || params.getAll('_facet').includes(column) || isSinglePk) { if (
facetItem.style.display = 'none'; isFirstColumn ||
params.getAll("_facet").includes(column) ||
isSinglePk
) {
facetItem.style.display = "none";
} else { } else {
facetItem.style.display = 'block'; facetItem.style.display = "block";
facetItem.setAttribute('href', facetUrl(column)); facetItem.setAttribute("href", facetUrl(column));
} }
/* Show notBlank option if not selected AND at least one visible blank value */ /* Show notBlank option if not selected AND at least one visible blank value */
var tdsForThisColumn = Array.from( var tdsForThisColumn = Array.from(
th.closest('table').querySelectorAll('td.' + th.className) th.closest("table").querySelectorAll("td." + th.className)
); );
if ( if (
params.get(`${column}__notblank`) != '1' && params.get(`${column}__notblank`) != "1" &&
tdsForThisColumn.filter(el => el.innerText.trim() == '').length tdsForThisColumn.filter((el) => el.innerText.trim() == "").length
) { ) {
notBlank.style.display = 'block'; notBlank.style.display = "block";
notBlank.setAttribute('href', notBlankUrl(column)); notBlank.setAttribute("href", notBlankUrl(column));
} else { } else {
notBlank.style.display = 'none'; notBlank.style.display = "none";
} }
var columnTypeP = menu.querySelector('.dropdown-column-type'); var columnTypeP = menu.querySelector(".dropdown-column-type");
var columnType = th.dataset.columnType; var columnType = th.dataset.columnType;
var notNull = th.dataset.columnNotNull == 1 ? ' NOT NULL' : ''; var notNull = th.dataset.columnNotNull == 1 ? " NOT NULL" : "";
if (columnType) { if (columnType) {
columnTypeP.style.display = 'block'; columnTypeP.style.display = "block";
columnTypeP.innerText = `Type: ${columnType.toUpperCase()}${notNull}`; columnTypeP.innerText = `Type: ${columnType.toUpperCase()}${notNull}`;
} else { } else {
columnTypeP.style.display = 'none'; columnTypeP.style.display = "none";
} }
menu.style.position = 'absolute'; menu.style.position = "absolute";
menu.style.top = (menuTop + 6) + 'px'; menu.style.top = menuTop + 6 + "px";
menu.style.left = menuLeft + 'px'; menu.style.left = menuLeft + "px";
menu.style.display = 'block'; menu.style.display = "block";
menu.classList.add('anim-scale-in'); menu.classList.add("anim-scale-in");
} }
var svg = document.createElement('div'); var svg = document.createElement("div");
svg.innerHTML = DROPDOWN_ICON_SVG; svg.innerHTML = DROPDOWN_ICON_SVG;
svg = svg.querySelector('*'); svg = svg.querySelector("*");
svg.classList.add('dropdown-menu-icon'); svg.classList.add("dropdown-menu-icon");
var menu = document.createElement('div'); var menu = document.createElement("div");
menu.innerHTML = DROPDOWN_HTML; menu.innerHTML = DROPDOWN_HTML;
menu = menu.querySelector('*'); menu = menu.querySelector("*");
menu.style.position = 'absolute'; menu.style.position = "absolute";
menu.style.display = 'none'; menu.style.display = "none";
document.body.appendChild(menu); document.body.appendChild(menu);
var ths = Array.from(document.querySelectorAll('.rows-and-columns th')); var ths = Array.from(document.querySelectorAll(".rows-and-columns th"));
ths.forEach(th => { ths.forEach((th) => {
if (!th.querySelector('a')) { if (!th.querySelector("a")) {
return; return;
} }
var icon = svg.cloneNode(true); var icon = svg.cloneNode(true);
icon.addEventListener('click', iconClicked); icon.addEventListener("click", iconClicked);
th.appendChild(icon); th.appendChild(icon);
}); });
})(); })();
/* Add x buttons to the filter rows */ /* Add x buttons to the filter rows */
(function () { (function () {
var x = '✖'; var x = "✖";
var rows = Array.from( var rows = Array.from(document.querySelectorAll(".filter-row")).filter((el) =>
document.querySelectorAll('.filter-row') el.querySelector(".filter-op")
).filter(
el => el.querySelector('.filter-op')
); );
rows.forEach(row => { rows.forEach((row) => {
var a = document.createElement('a'); var a = document.createElement("a");
a.setAttribute('href', '#'); a.setAttribute("href", "#");
a.setAttribute('aria-label', 'Remove this filter'); a.setAttribute("aria-label", "Remove this filter");
a.style.textDecoration = 'none'; a.style.textDecoration = "none";
a.innerText = x; a.innerText = x;
a.addEventListener('click', (ev) => { a.addEventListener("click", (ev) => {
ev.preventDefault(); ev.preventDefault();
let row = ev.target.closest('div'); let row = ev.target.closest("div");
row.querySelector('select').value = ''; row.querySelector("select").value = "";
row.querySelector('.filter-op select').value = 'exact'; row.querySelector(".filter-op select").value = "exact";
row.querySelector('input.filter-value').value = ''; row.querySelector("input.filter-value").value = "";
ev.target.closest('a').style.display = 'none'; ev.target.closest("a").style.display = "none";
}); });
row.appendChild(a); row.appendChild(a);
var column = row.querySelector('select'); var column = row.querySelector("select");
if (!column.value) { if (!column.value) {
a.style.display = 'none'; a.style.display = "none";
} }
}); });
})(); })();