open-consul/ui/packages/consul-ui/app/modifiers/with-overlay.js

71 lines
1.9 KiB
JavaScript

import { modifier } from 'ember-modifier';
import tippy, { followCursor } from 'tippy.js';
/**
* Overlay modifier using Tippy.js
* https://atomiks.github.io/tippyjs
*
* {{tooltip 'Text' options=(hash )}}
*/
export default modifier(($element, [content], hash = {}) => {
const options = hash.options || {};
let $anchor = $element;
// make it easy to specify the modified element as the actual tooltip
if (typeof options.triggerTarget === 'string') {
const $el = $anchor;
switch (options.triggerTarget) {
case 'parentNode':
$anchor = $anchor.parentNode;
break;
default:
$anchor = $anchor.querySelectorAll(options.triggerTarget);
}
content = $anchor.cloneNode(true);
$el.remove();
hash.options.triggerTarget = undefined;
}
// {{tooltip}} will just use the HTML content
if (typeof content === 'undefined') {
content = $anchor.innerHTML;
$anchor.innerHTML = '';
}
if (hash.returns) {
options.trigger = 'manual';
}
let interval;
if (options.trigger === 'manual') {
// if we are manually triggering, a out delay means only show for the
// amount of time specified by the delay
const delay = options.delay || [];
if (typeof delay[1] !== 'undefined') {
hash.options.onShown = popover => {
clearInterval(interval);
interval = setTimeout(() => {
popover.hide();
}, delay[1]);
};
}
}
let $trigger = $anchor;
const popover = tippy($anchor, {
triggerTarget: $trigger,
content: $anchor => content,
// showOnCreate: true,
// hideOnClick: false,
interactive: true,
plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(item =>
Boolean(item)
),
...hash.options,
});
if (hash.returns) {
hash.returns(popover);
}
return () => {
clearInterval(interval);
popover.destroy();
};
});