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>`;
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>
<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>
<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>
</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";
}
});
})();