kopia lustrzana https://github.com/simonw/datasette
211 wiersze
7.5 KiB
JavaScript
211 wiersze
7.5 KiB
JavaScript
// Custom events for use with the native CustomEvent API
|
|
const DATASETTE_EVENTS = {
|
|
INIT: "datasette_init", // returns datasette manager instance in evt.detail
|
|
};
|
|
|
|
// Datasette "core" -> Methods/APIs that are foundational
|
|
// Plugins will have greater stability if they use the functional hooks- but if they do decide to hook into
|
|
// literal DOM selectors, they'll have an easier time using these addresses.
|
|
const DOM_SELECTORS = {
|
|
/** Should have one match */
|
|
jsonExportLink: ".export-links a[href*=json]",
|
|
|
|
/** Event listeners that go outside of the main table, e.g. existing scroll listener */
|
|
tableWrapper: ".table-wrapper",
|
|
table: "table.rows-and-columns",
|
|
aboveTablePanel: ".above-table-panel",
|
|
|
|
// These could have multiple matches
|
|
/** Used for selecting table headers. Use makeColumnActions if you want to add menu items. */
|
|
tableHeaders: `table.rows-and-columns th`,
|
|
|
|
/** Used to add "where" clauses to query using direct manipulation */
|
|
filterRows: ".filter-row",
|
|
/** Used to show top available enum values for a column ("facets") */
|
|
facetResults: ".facet-results [data-column]",
|
|
};
|
|
|
|
/**
|
|
* Monolith class for interacting with Datasette JS API
|
|
* Imported with DEFER, runs after main document parsed
|
|
* For now, manually synced with datasette/version.py
|
|
*/
|
|
const datasetteManager = {
|
|
VERSION: window.datasetteVersion,
|
|
|
|
// TODO: Should order of registration matter more?
|
|
|
|
// Should plugins be allowed to clobber others or is it last-in takes priority?
|
|
// Does pluginMetadata need to be serializable, or can we let it be stateful / have functions?
|
|
plugins: new Map(),
|
|
|
|
registerPlugin: (name, pluginMetadata) => {
|
|
if (datasetteManager.plugins.has(name)) {
|
|
console.warn(`Warning -> plugin ${name} was redefined`);
|
|
}
|
|
datasetteManager.plugins.set(name, pluginMetadata);
|
|
|
|
// If the plugin participates in the panel... update the panel.
|
|
if (pluginMetadata.makeAboveTablePanelConfigs) {
|
|
datasetteManager.renderAboveTablePanel();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* New DOM elements are created on each click, so the data is not stale.
|
|
*
|
|
* Items
|
|
* - must provide label (text)
|
|
* - might provide href (string) or an onclick ((evt) => void)
|
|
*
|
|
* columnMeta is metadata stored on the column header (TH) as a DOMStringMap
|
|
* - column: string
|
|
* - columnNotNull: boolean
|
|
* - columnType: sqlite datatype enum (text, number, etc)
|
|
* - isPk: boolean
|
|
*/
|
|
makeColumnActions: (columnMeta) => {
|
|
let columnActions = [];
|
|
|
|
// Accept function that returns list of columnActions with keys
|
|
// Required: label (text)
|
|
// Optional: onClick or href
|
|
datasetteManager.plugins.forEach((plugin) => {
|
|
if (plugin.makeColumnActions) {
|
|
// Plugins can provide multiple columnActions if they want
|
|
// If multiple try to create entry with same label, the last one deletes the others
|
|
columnActions.push(...plugin.makeColumnActions(columnMeta));
|
|
}
|
|
});
|
|
|
|
// TODO: Validate columnAction configs and give informative error message if missing keys.
|
|
return columnActions;
|
|
},
|
|
|
|
/**
|
|
* In MVP, each plugin can only have 1 instance.
|
|
* In future, panels could be repeated. We omit that for now since so many plugins depend on
|
|
* shared URL state, so having multiple instances of plugin at same time is problematic.
|
|
* Currently, we never destroy any panels, we just hide them.
|
|
*
|
|
* TODO: nicer panel css, show panel selection state.
|
|
* TODO: does this hook need to take any arguments?
|
|
*/
|
|
renderAboveTablePanel: () => {
|
|
const aboveTablePanel = document.querySelector(
|
|
DOM_SELECTORS.aboveTablePanel
|
|
);
|
|
|
|
if (!aboveTablePanel) {
|
|
console.warn(
|
|
"This page does not have a table, the renderAboveTablePanel cannot be used."
|
|
);
|
|
return;
|
|
}
|
|
|
|
let aboveTablePanelWrapper = aboveTablePanel.querySelector(".panels");
|
|
|
|
// First render: create wrappers. Otherwise, reuse previous.
|
|
if (!aboveTablePanelWrapper) {
|
|
aboveTablePanelWrapper = document.createElement("div");
|
|
aboveTablePanelWrapper.classList.add("tab-contents");
|
|
const panelNav = document.createElement("div");
|
|
panelNav.classList.add("tab-controls");
|
|
|
|
// Temporary: css for minimal amount of breathing room.
|
|
panelNav.style.display = "flex";
|
|
panelNav.style.gap = "8px";
|
|
panelNav.style.marginTop = "4px";
|
|
panelNav.style.marginBottom = "20px";
|
|
|
|
aboveTablePanel.appendChild(panelNav);
|
|
aboveTablePanel.appendChild(aboveTablePanelWrapper);
|
|
}
|
|
|
|
datasetteManager.plugins.forEach((plugin, pluginName) => {
|
|
const { makeAboveTablePanelConfigs } = plugin;
|
|
|
|
if (makeAboveTablePanelConfigs) {
|
|
const controls = aboveTablePanel.querySelector(".tab-controls");
|
|
const contents = aboveTablePanel.querySelector(".tab-contents");
|
|
|
|
// Each plugin can make multiple panels
|
|
const configs = makeAboveTablePanelConfigs();
|
|
|
|
configs.forEach((config, i) => {
|
|
const nodeContentId = `${pluginName}_${config.id}_panel-content`;
|
|
|
|
// quit if we've already registered this plugin
|
|
// TODO: look into whether plugins should be allowed to ask
|
|
// parent to re-render, or if they should manage that internally.
|
|
if (document.getElementById(nodeContentId)) {
|
|
return;
|
|
}
|
|
|
|
// Add tab control button
|
|
const pluginControl = document.createElement("button");
|
|
pluginControl.textContent = config.label;
|
|
pluginControl.onclick = () => {
|
|
contents.childNodes.forEach((node) => {
|
|
if (node.id === nodeContentId) {
|
|
node.style.display = "block";
|
|
} else {
|
|
node.style.display = "none";
|
|
}
|
|
});
|
|
};
|
|
controls.appendChild(pluginControl);
|
|
|
|
// Add plugin content area
|
|
const pluginNode = document.createElement("div");
|
|
pluginNode.id = nodeContentId;
|
|
config.render(pluginNode);
|
|
pluginNode.style.display = "none"; // Default to hidden unless you're ifrst
|
|
|
|
contents.appendChild(pluginNode);
|
|
});
|
|
|
|
// Let first node be selected by default
|
|
if (contents.childNodes.length) {
|
|
contents.childNodes[0].style.display = "block";
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/** Selectors for document (DOM) elements. Store identifier instead of immediate references in case they haven't loaded when Manager starts. */
|
|
selectors: DOM_SELECTORS,
|
|
|
|
// Future API ideas
|
|
// Fetch page's data in array, and cache so plugins could reuse it
|
|
// Provide knowledge of what datasette JS or server-side via traditional console autocomplete
|
|
// State helpers: URL params https://github.com/simonw/datasette/issues/1144 and localstorage
|
|
// UI Hooks: command + k, tab manager hook
|
|
// Should we notify plugins that have dependencies
|
|
// when all dependencies were fulfilled? (leaflet, codemirror, etc)
|
|
// https://github.com/simonw/datasette-leaflet -> this way
|
|
// multiple plugins can all request the same copy of leaflet.
|
|
};
|
|
|
|
const initializeDatasette = () => {
|
|
// Hide the global behind __ prefix. Ideally they should be listening for the
|
|
// DATASETTE_EVENTS.INIT event to avoid the habit of reading from the window.
|
|
|
|
window.__DATASETTE__ = datasetteManager;
|
|
console.debug("Datasette Manager Created!");
|
|
|
|
const initDatasetteEvent = new CustomEvent(DATASETTE_EVENTS.INIT, {
|
|
detail: datasetteManager,
|
|
});
|
|
|
|
document.dispatchEvent(initDatasetteEvent);
|
|
};
|
|
|
|
/**
|
|
* Main function
|
|
* Fires AFTER the document has been parsed
|
|
*/
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
initializeDatasette();
|
|
});
|