79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
|
let _global_tooltip: JQuery;
|
||
|
|
export type Handle = {
|
||
|
|
show();
|
||
|
|
is_shown();
|
||
|
|
hide();
|
||
|
|
update();
|
||
|
|
}
|
||
|
|
export function initialize(entry: JQuery, callbacks?: {
|
||
|
|
on_show?(tag: JQuery),
|
||
|
|
on_hide?(tag: JQuery)
|
||
|
|
}) : Handle {
|
||
|
|
if(!callbacks) callbacks = {};
|
||
|
|
|
||
|
|
let _show;
|
||
|
|
let _hide;
|
||
|
|
let _shown;
|
||
|
|
let _update;
|
||
|
|
|
||
|
|
entry.find(".container-tooltip").each((index, _node) => {
|
||
|
|
const node = $(_node) as JQuery;
|
||
|
|
const node_content = node.find(".tooltip");
|
||
|
|
|
||
|
|
let _force_show = false, _flag_shown = false;
|
||
|
|
|
||
|
|
const mouseenter = (event?) => {
|
||
|
|
const bounds = node[0].getBoundingClientRect();
|
||
|
|
|
||
|
|
if(!_global_tooltip) {
|
||
|
|
_global_tooltip = $("#global-tooltip");
|
||
|
|
}
|
||
|
|
|
||
|
|
_global_tooltip[0].style.left = (bounds.left + bounds.width / 2) + "px";
|
||
|
|
_global_tooltip[0].style.top = bounds.top + "px";
|
||
|
|
_global_tooltip[0].classList.add("shown");
|
||
|
|
|
||
|
|
_global_tooltip[0].innerHTML = node_content[0].innerHTML;
|
||
|
|
callbacks.on_show && callbacks.on_show(_global_tooltip);
|
||
|
|
_flag_shown = _flag_shown || !!event; /* if event is undefined then it has been triggered by hand */
|
||
|
|
};
|
||
|
|
|
||
|
|
const mouseexit = () => {
|
||
|
|
if(_global_tooltip) {
|
||
|
|
if(!_force_show) {
|
||
|
|
callbacks.on_hide && callbacks.on_hide(_global_tooltip);
|
||
|
|
_global_tooltip[0].classList.remove("shown");
|
||
|
|
}
|
||
|
|
_flag_shown = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
_node.addEventListener("mouseenter", mouseenter);
|
||
|
|
|
||
|
|
_node.addEventListener("mouseleave", mouseexit);
|
||
|
|
|
||
|
|
_show = () => {
|
||
|
|
_force_show = true;
|
||
|
|
mouseenter();
|
||
|
|
};
|
||
|
|
|
||
|
|
_hide = () => {
|
||
|
|
_force_show = false;
|
||
|
|
if(!_flag_shown)
|
||
|
|
mouseexit();
|
||
|
|
};
|
||
|
|
|
||
|
|
_update = () => {
|
||
|
|
if(_flag_shown || _force_show)
|
||
|
|
mouseenter();
|
||
|
|
};
|
||
|
|
|
||
|
|
_shown = () => _flag_shown || _force_show;
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
hide: _hide || (() => {}),
|
||
|
|
show: _show || (() => {}),
|
||
|
|
is_shown: _shown || (() => false),
|
||
|
|
update: _update || (() => {})
|
||
|
|
};
|
||
|
|
}
|