kopia lustrzana https://github.com/simonw/datasette
340 wiersze
12 KiB
JavaScript
340 wiersze
12 KiB
JavaScript
var DROPDOWN_HTML = `<div class="dropdown-menu">
|
|
<div class="hook"></div>
|
|
<ul>
|
|
<li><a class="dropdown-sort-asc" href="#">Sort ascending</a></li>
|
|
<li><a class="dropdown-sort-desc" href="#">Sort descending</a></li>
|
|
<li><a class="dropdown-facet" href="#">Facet by this</a></li>
|
|
<li><a class="dropdown-hide-column" href="#">Hide this column</a></li>
|
|
<li><a class="dropdown-show-all-columns" href="#">Show all columns</a></li>
|
|
<li><a class="dropdown-not-blank" href="#">Show not-blank rows</a></li>
|
|
</ul>
|
|
<p class="dropdown-column-type"></p>
|
|
<p class="dropdown-column-description"></p>
|
|
</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>
|
|
</svg>`;
|
|
|
|
/** Main initialization function for Datasette Table interactions */
|
|
const initDatasetteTable = function (manager) {
|
|
// Feature detection
|
|
if (!window.URLSearchParams) {
|
|
return;
|
|
}
|
|
function getParams() {
|
|
return new URLSearchParams(location.search);
|
|
}
|
|
function paramsToUrl(params) {
|
|
var s = params.toString();
|
|
return s ? "?" + s : location.pathname;
|
|
}
|
|
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 hideColumnUrl(column) {
|
|
var params = getParams();
|
|
params.append("_nocol", column);
|
|
return paramsToUrl(params);
|
|
}
|
|
function showAllColumnsUrl() {
|
|
var params = getParams();
|
|
params.delete("_nocol");
|
|
params.delete("_col");
|
|
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");
|
|
}
|
|
|
|
const tableWrapper = document.querySelector(manager.selectors.tableWrapper);
|
|
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 onTableHeaderClick(ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
menu.innerHTML = DROPDOWN_HTML;
|
|
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");
|
|
var hideColumn = menu.querySelector("a.dropdown-hide-column");
|
|
var showAllColumns = menu.querySelector("a.dropdown-show-all-columns");
|
|
if (params.get("_sort") == column) {
|
|
sort.parentNode.style.display = "none";
|
|
} else {
|
|
sort.parentNode.style.display = "block";
|
|
sort.setAttribute("href", sortAscUrl(column));
|
|
}
|
|
if (params.get("_sort_desc") == column) {
|
|
sortDesc.parentNode.style.display = "none";
|
|
} else {
|
|
sortDesc.parentNode.style.display = "block";
|
|
sortDesc.setAttribute("href", sortDescUrl(column));
|
|
}
|
|
/* Show hide columns options */
|
|
if (params.get("_nocol") || params.get("_col")) {
|
|
showAllColumns.parentNode.style.display = "block";
|
|
showAllColumns.setAttribute("href", showAllColumnsUrl());
|
|
} else {
|
|
showAllColumns.parentNode.style.display = "none";
|
|
}
|
|
if (th.getAttribute("data-is-pk") != "1") {
|
|
hideColumn.parentNode.style.display = "block";
|
|
hideColumn.setAttribute("href", hideColumnUrl(column));
|
|
} else {
|
|
hideColumn.parentNode.style.display = "none";
|
|
}
|
|
/* Only show "Facet by this" if it's not the first column, not selected,
|
|
not a single PK and the Datasette allow_facet setting is True */
|
|
var displayedFacets = Array.from(
|
|
document.querySelectorAll(".facet-info")
|
|
).map((el) => el.dataset.column);
|
|
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 (
|
|
!DATASETTE_ALLOW_FACET ||
|
|
isFirstColumn ||
|
|
displayedFacets.includes(column) ||
|
|
isSinglePk
|
|
) {
|
|
facetItem.parentNode.style.display = "none";
|
|
} else {
|
|
facetItem.parentNode.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.parentNode.style.display = "block";
|
|
notBlank.setAttribute("href", notBlankUrl(column));
|
|
} else {
|
|
notBlank.parentNode.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) {
|
|
columnTypeP.style.display = "block";
|
|
columnTypeP.innerText = `Type: ${columnType.toUpperCase()}${notNull}`;
|
|
} else {
|
|
columnTypeP.style.display = "none";
|
|
}
|
|
|
|
var columnDescriptionP = menu.querySelector(".dropdown-column-description");
|
|
if (th.dataset.columnDescription) {
|
|
columnDescriptionP.innerText = th.dataset.columnDescription;
|
|
columnDescriptionP.style.display = "block";
|
|
} else {
|
|
columnDescriptionP.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");
|
|
|
|
// Custom menu items on each render
|
|
// Plugin hook: allow adding JS-based additional menu items
|
|
const columnActionsPayload = {
|
|
columnName: th.dataset.column,
|
|
columnNotNull: th.dataset.columnNotNull === '1',
|
|
columnType: th.dataset.columnType,
|
|
isPk: th.dataset.isPk === '1'
|
|
};
|
|
const columnItemConfigs = manager.makeColumnActions(columnActionsPayload);
|
|
|
|
const menuList = menu.querySelector('ul');
|
|
columnItemConfigs.forEach(itemConfig => {
|
|
// Remove items from previous render. We assume entries have unique labels.
|
|
const existingItems = menuList.querySelectorAll(`li`);
|
|
Array.from(existingItems).filter(item => item.innerText === itemConfig.label).forEach(node => {
|
|
node.remove();
|
|
});
|
|
|
|
const newLink = document.createElement('a');
|
|
newLink.textContent = itemConfig.label;
|
|
newLink.href = itemConfig.href ?? '#';
|
|
if (itemConfig.onClick) {
|
|
newLink.onclick = itemConfig.onClick;
|
|
}
|
|
|
|
// Attach new elements to DOM
|
|
const menuItem = document.createElement('li');
|
|
menuItem.appendChild(newLink);
|
|
menuList.appendChild(menuItem);
|
|
});
|
|
|
|
// Measure width of menu and adjust position if too far right
|
|
const menuWidth = menu.offsetWidth;
|
|
const windowWidth = window.innerWidth;
|
|
if (menuLeft + menuWidth > windowWidth) {
|
|
menu.style.left = windowWidth - menuWidth - 20 + "px";
|
|
}
|
|
// Align menu .hook arrow with the column cog icon
|
|
const hook = menu.querySelector('.hook');
|
|
const icon = th.querySelector('.dropdown-menu-icon');
|
|
const iconRect = icon.getBoundingClientRect();
|
|
const hookLeft = (iconRect.left - menuLeft + 1) + 'px';
|
|
hook.style.left = hookLeft;
|
|
// Move the whole menu right if the hook is too far right
|
|
const menuRect = menu.getBoundingClientRect();
|
|
if (iconRect.right > menuRect.right) {
|
|
menu.style.left = (iconRect.right - menuWidth) + 'px';
|
|
// And move hook tip as well
|
|
hook.style.left = (menuWidth - 13) + 'px';
|
|
}
|
|
}
|
|
|
|
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(manager.selectors.tableHeaders));
|
|
ths.forEach((th) => {
|
|
if (!th.querySelector("a")) {
|
|
return;
|
|
}
|
|
var icon = svg.cloneNode(true);
|
|
icon.addEventListener("click", onTableHeaderClick);
|
|
th.appendChild(icon);
|
|
});
|
|
};
|
|
|
|
/* Add x buttons to the filter rows */
|
|
function addButtonsToFilterRows(manager) {
|
|
var x = "✖";
|
|
var rows = Array.from(document.querySelectorAll(manager.selectors.filterRow)).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";
|
|
}
|
|
});
|
|
};
|
|
|
|
/* Set up datalist autocomplete for filter values */
|
|
function initAutocompleteForFilterValues(manager) {
|
|
function createDataLists() {
|
|
var facetResults = document.querySelectorAll(
|
|
manager.selectors.facetResults
|
|
);
|
|
Array.from(facetResults).forEach(function (facetResult) {
|
|
// Use link text from all links in the facet result
|
|
var links = Array.from(
|
|
facetResult.querySelectorAll("li:not(.facet-truncated) a")
|
|
);
|
|
// Create a datalist element
|
|
var datalist = document.createElement("datalist");
|
|
datalist.id = "datalist-" + facetResult.dataset.column;
|
|
// Create an option element for each link text
|
|
links.forEach(function (link) {
|
|
var option = document.createElement("option");
|
|
option.label = link.innerText;
|
|
option.value = link.dataset.facetValue;
|
|
datalist.appendChild(option);
|
|
});
|
|
// Add the datalist to the facet result
|
|
facetResult.appendChild(datalist);
|
|
});
|
|
}
|
|
createDataLists();
|
|
// When any select with name=_filter_column changes, update the datalist
|
|
document.body.addEventListener("change", function (event) {
|
|
if (event.target.name === "_filter_column") {
|
|
event.target
|
|
.closest(manager.selectors.filterRow)
|
|
.querySelector(".filter-value")
|
|
.setAttribute("list", "datalist-" + event.target.value);
|
|
}
|
|
});
|
|
};
|
|
|
|
// Ensures Table UI is initialized only after the Manager is ready.
|
|
document.addEventListener("datasette_init", function (evt) {
|
|
const { detail: manager } = evt;
|
|
|
|
// Main table
|
|
initDatasetteTable(manager);
|
|
|
|
// Other UI functions with interactive JS needs
|
|
addButtonsToFilterRows(manager);
|
|
initAutocompleteForFilterValues(manager);
|
|
});
|