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

328
datasette/static/table.js
View file

@ -10,184 +10,186 @@ var DROPDOWN_HTML = `<div class="dropdown-menu">
</div>`; </div>`;
var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle> <circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>`; </svg>`;
(function() { (function () {
// Feature detection // Feature detection
if (!window.URLSearchParams) { if (!window.URLSearchParams) {
return; 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) { if (!target) {
var s = params.toString(); closeMenu();
return s ? ('?' + s) : '';
} }
function sortDescUrl(column) { });
var params = getParams(); function iconClicked(ev) {
params.set('_sort_desc', column); ev.preventDefault();
params.delete('_sort'); ev.stopPropagation();
params.delete('_next'); var th = ev.target;
return paramsToUrl(params); while (th.nodeName != "TH") {
th = th.parentNode;
} }
function sortAscUrl(column) { var rect = th.getBoundingClientRect();
var params = getParams(); var menuTop = rect.bottom + window.scrollY;
params.set('_sort', column); var menuLeft = rect.left + window.scrollX;
params.delete('_sort_desc'); var column = th.getAttribute("data-column");
params.delete('_next'); var params = getParams();
return paramsToUrl(params); 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) { if (params.get("_sort_desc") == column) {
var params = getParams(); sortDesc.style.display = "none";
params.append('_facet', column); } else {
return paramsToUrl(params); sortDesc.style.display = "block";
sortDesc.setAttribute("href", sortDescUrl(column));
} }
function notBlankUrl(column) { /* Only show facet if it's not the first column, not selected, not a single PK */
var params = getParams(); var isFirstColumn =
params.set(`${column}__notblank`, '1'); th.parentElement.querySelector("th:first-of-type") == th;
return paramsToUrl(params); 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() { /* Show notBlank option if not selected AND at least one visible blank value */
menu.style.display = 'none'; var tdsForThisColumn = Array.from(
menu.classList.remove('anim-scale-in'); 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 var columnTypeP = menu.querySelector(".dropdown-column-type");
document.addEventListener('DOMContentLoaded', () => { var columnType = th.dataset.columnType;
var tableWrapper = document.querySelector('.table-wrapper'); var notNull = th.dataset.columnNotNull == 1 ? " NOT NULL" : "";
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' : '';
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.top = (menuTop + 6) + 'px';
menu.style.left = menuLeft + 'px';
menu.style.display = 'block';
menu.classList.add('anim-scale-in');
} }
var svg = document.createElement('div'); menu.style.position = "absolute";
svg.innerHTML = DROPDOWN_ICON_SVG; menu.style.top = menuTop + 6 + "px";
svg = svg.querySelector('*'); menu.style.left = menuLeft + "px";
svg.classList.add('dropdown-menu-icon'); menu.style.display = "block";
var menu = document.createElement('div'); menu.classList.add("anim-scale-in");
menu.innerHTML = DROPDOWN_HTML; }
menu = menu.querySelector('*'); var svg = document.createElement("div");
menu.style.position = 'absolute'; svg.innerHTML = DROPDOWN_ICON_SVG;
menu.style.display = 'none'; svg = svg.querySelector("*");
document.body.appendChild(menu); 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')); 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) => {
); var a = document.createElement("a");
rows.forEach(row => { a.setAttribute("href", "#");
var a = document.createElement('a'); a.setAttribute("aria-label", "Remove this filter");
a.setAttribute('href', '#'); a.style.textDecoration = "none";
a.setAttribute('aria-label', 'Remove this filter'); a.innerText = x;
a.style.textDecoration = 'none'; a.addEventListener("click", (ev) => {
a.innerText = x; ev.preventDefault();
a.addEventListener('click', (ev) => { let row = ev.target.closest("div");
ev.preventDefault(); row.querySelector("select").value = "";
let row = ev.target.closest('div'); row.querySelector(".filter-op select").value = "exact";
row.querySelector('select').value = ''; row.querySelector("input.filter-value").value = "";
row.querySelector('.filter-op select').value = 'exact'; ev.target.closest("a").style.display = "none";
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';
}
}); });
row.appendChild(a);
var column = row.querySelector("select");
if (!column.value) {
a.style.display = "none";
}
});
})(); })();