Edouard Vanbelle
fac184ccfe
- reduce amount of warnings in IDE
- maximize API type mapping with static/js/core/types.js
90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
/**
|
|
* Path tooltip — shows the full path of a hovered file/folder item
|
|
* in an overlay at the bottom-left of the content area.
|
|
*
|
|
* Usage: call init(container) after rendering items, destroy(container) on teardown.
|
|
* Only file-item elements with a data-path attribute trigger the tooltip.
|
|
*/
|
|
|
|
/** @type {HTMLElement|null} */
|
|
let _tooltip = null;
|
|
|
|
function _getOrCreateTooltip() {
|
|
if (_tooltip) return _tooltip;
|
|
_tooltip = document.getElementById('path-tooltip');
|
|
if (!_tooltip) {
|
|
_tooltip = document.createElement('div');
|
|
_tooltip.id = 'path-tooltip';
|
|
_tooltip.className = 'path-tooltip hidden';
|
|
document.querySelector('.main-content')?.appendChild(_tooltip);
|
|
}
|
|
return _tooltip;
|
|
}
|
|
|
|
/**
|
|
* @param {MouseEvent} e
|
|
*/
|
|
function _onEnter(e) {
|
|
const item = /** @type {HTMLElement} */ (e.currentTarget);
|
|
const path = item.dataset.path;
|
|
if (!path) return;
|
|
|
|
const tooltip = _getOrCreateTooltip();
|
|
tooltip.textContent = path;
|
|
tooltip.classList.remove('hidden');
|
|
}
|
|
|
|
function _onLeave() {
|
|
_tooltip?.classList.add('hidden');
|
|
}
|
|
|
|
/**
|
|
* @typedef {Object} EnterLeaveF
|
|
* @property {(e: MouseEvent) => void} enter
|
|
* @property {(e: MouseEvent) => void} leave
|
|
*
|
|
|
|
/** @type {WeakMap<HTMLElement, EnterLeaveF>} */
|
|
const _listeners = new WeakMap();
|
|
|
|
/**
|
|
* Attach path tooltip listeners to all file-item elements inside container.
|
|
* @param {HTMLElement} container
|
|
*/
|
|
function init(container) {
|
|
const items = container.querySelectorAll('.file-item[data-path]');
|
|
items.forEach((item) => {
|
|
const el = /** @type {HTMLElement} */ (item);
|
|
|
|
/** @type {(e: MouseEvent) => void} */
|
|
const enter = (e) => _onEnter(e);
|
|
el.addEventListener('mouseenter', enter);
|
|
|
|
/** @type {(e: MouseEvent) => void} */
|
|
const leave = (_e) => _onLeave();
|
|
el.addEventListener('mouseleave', leave);
|
|
|
|
_listeners.set(el, { enter, leave });
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Remove path tooltip listeners from all file-item elements inside container.
|
|
* @param {HTMLElement} container
|
|
*/
|
|
function destroy(container) {
|
|
const items = container.querySelectorAll('.file-item');
|
|
items.forEach((item) => {
|
|
const el = /** @type {HTMLElement} */ (item);
|
|
const fns = _listeners.get(el);
|
|
if (fns) {
|
|
el.removeEventListener('mouseenter', fns.enter);
|
|
el.removeEventListener('mouseleave', fns.leave);
|
|
_listeners.delete(el);
|
|
}
|
|
});
|
|
_onLeave();
|
|
}
|
|
|
|
export { destroy, init };
|