138 lines
4.4 KiB
JavaScript
138 lines
4.4 KiB
JavaScript
// A single column in the Miller-column navigator.
|
||
//
|
||
// Each column holds a list of Item objects. Selecting an item calls
|
||
// item.onSelect() and marks the item as active (highlighted). The column
|
||
// also supports optional search filtering.
|
||
export default class Column {
|
||
constructor({ title, items = [], searchable = true }) {
|
||
this.title = title;
|
||
this._items = items;
|
||
this._active = null; // currently selected item element
|
||
this._root = null;
|
||
this._list = null;
|
||
this._searchable = searchable;
|
||
this._filter = '';
|
||
this._actionsEl = null;
|
||
}
|
||
|
||
// Build and return the column DOM element.
|
||
mount() {
|
||
const col = document.createElement('div');
|
||
col.className = 'mwse-col';
|
||
this._root = col;
|
||
|
||
const header = document.createElement('div');
|
||
header.className = 'mwse-col__header';
|
||
header.textContent = this.title;
|
||
col.appendChild(header);
|
||
|
||
if (this._searchable && this._items.length > 6) {
|
||
const search = document.createElement('input');
|
||
search.type = 'text';
|
||
search.className = 'mwse-col__search';
|
||
search.placeholder = 'Filter…';
|
||
search.addEventListener('input', () => {
|
||
this._filter = search.value.toLowerCase();
|
||
this._renderItems();
|
||
});
|
||
col.appendChild(search);
|
||
}
|
||
|
||
const list = document.createElement('div');
|
||
list.className = 'mwse-col__list';
|
||
this._list = list;
|
||
col.appendChild(list);
|
||
|
||
this._renderItems();
|
||
return col;
|
||
}
|
||
|
||
// Replace the item list (re-renders the list area).
|
||
setItems(items) {
|
||
this._items = items;
|
||
this._active = null;
|
||
this._filter = '';
|
||
this._renderItems();
|
||
}
|
||
|
||
// Add a persistent action button below the list.
|
||
addAction(label, className, onClick) {
|
||
if (!this._root) return;
|
||
if (!this._actionsEl) {
|
||
this._actionsEl = document.createElement('div');
|
||
this._actionsEl.className = 'mwse-col__actions';
|
||
this._root.appendChild(this._actionsEl);
|
||
}
|
||
const btn = document.createElement('button');
|
||
btn.className = `mwse-btn ${className ?? ''}`;
|
||
btn.textContent = label;
|
||
btn.addEventListener('click', onClick);
|
||
this._actionsEl.appendChild(btn);
|
||
}
|
||
|
||
// Force a re-render (e.g. after external state changes meta text).
|
||
refresh() {
|
||
this._renderItems();
|
||
}
|
||
|
||
// ---- Private --------------------------------------------------------
|
||
|
||
_renderItems() {
|
||
if (!this._list) return;
|
||
this._list.innerHTML = '';
|
||
|
||
const visible = this._filter
|
||
? this._items.filter(i => i.label.toLowerCase().includes(this._filter))
|
||
: this._items;
|
||
|
||
for (const item of visible) {
|
||
this._list.appendChild(this._buildItem(item));
|
||
}
|
||
}
|
||
|
||
_buildItem(item) {
|
||
const row = document.createElement('div');
|
||
row.className = 'mwse-item';
|
||
|
||
const icon = document.createElement('span');
|
||
icon.className = 'mwse-item__icon';
|
||
icon.textContent = item.icon ?? '○';
|
||
row.appendChild(icon);
|
||
|
||
const body = document.createElement('div');
|
||
body.className = 'mwse-item__body';
|
||
|
||
const label = document.createElement('div');
|
||
label.className = 'mwse-item__label';
|
||
label.textContent = item.label;
|
||
body.appendChild(label);
|
||
|
||
if (item.meta !== undefined) {
|
||
const meta = document.createElement('div');
|
||
meta.className = 'mwse-item__meta';
|
||
meta.textContent = typeof item.meta === 'function' ? item.meta() : item.meta;
|
||
body.appendChild(meta);
|
||
item._metaEl = meta; // for refresh()
|
||
}
|
||
|
||
row.appendChild(body);
|
||
|
||
if (item.hasChildren !== false) {
|
||
const arrow = document.createElement('span');
|
||
arrow.className = 'mwse-item__arrow';
|
||
arrow.textContent = '›';
|
||
row.appendChild(arrow);
|
||
}
|
||
|
||
row.addEventListener('click', () => {
|
||
// Deactivate previous selection.
|
||
if (this._active) this._active.classList.remove('mwse-item--active');
|
||
row.classList.add('mwse-item--active');
|
||
this._active = row;
|
||
item.onSelect?.(item);
|
||
});
|
||
|
||
return row;
|
||
}
|
||
}
|