-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathhover.js
More file actions
111 lines (110 loc) · 2.69 KB
/
hover.js
File metadata and controls
111 lines (110 loc) · 2.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import tippy from 'tippy.js';
import Translation from 'src/structures/constants/translation.js';
import eventManager from './eventManager.js';
import { footer, footer2, window } from './1.variables.js';
import { debug } from './debug.js';
let e;
let x;
let y;
function update() {
if (!e) return;
e.css({
// move to left if at the edge of screen
left: x + e.width() + 15 < $(window).width() ? x + 15 : x - e.width() - 10,
// Try to lock to the bottom
top: y + e.height() + 18 > $(window).height() ? $(window).height() - e.height() : y + 18,
});
}
eventManager.on('jQuery', () => {
$(document).on('mousemove.script', function mouseMove(event) {
x = event.pageX - window.pageXOffset;
y = event.pageY - window.pageYOffset;
update();
});
});
export function hide() {
if (e) {
// Hide element
e.remove();
e = null;
}
}
export function show(data, border = null) {
return function hoverAction(event) {
hide();
if (event.type === 'mouseleave' || event.type === 'blur') return;
const el = $('<div>');
e = el;
if (data instanceof Translation) {
eventManager.on('underscript:ready', () => {
el.prepend(`${data}`);
});
} else {
e.append(data);
}
e.append($(footer).clone());
e.css({
border,
position: 'fixed',
'background-color': 'rgba(0,0,0,0.9)',
padding: '2px',
'z-index': 1220,
});
$('body').append(e);
update();
};
}
function getFooter(type) {
switch (type) {
case 'footer2':
case 'short': return footer2;
case 'none':
case 'hidden': return '';
default: return footer;
}
}
export function tip(text, target, {
follow = true,
arrow = false,
onShow,
footer: lFooter = 'footer',
fade = false,
placement = 'auto',
trigger,
distance,
offset = '50, 25',
} = {}) {
debug(`Hover Tip: ${text}`);
const options = {
arrow,
placement,
content: `<div>${text}</div>${getFooter(lFooter)}`,
animateFill: false,
// animation: '',
theme: 'undercards',
hideOnClick: true,
a11y: false,
};
if (offset || offset === '') options.offset = offset;
if (distance !== undefined) options.distance = distance;
if (trigger) options.trigger = trigger;
if (typeof onShow === 'function') options.onShow = onShow;
if (!fade) {
options.delay = 0;
options.duration = 0;
}
if (follow && !arrow) {
options.placement = 'bottom';
options.followCursor = true;
options.hideOnClick = false;
}
if (tippy.version.startsWith(3)) {
options.performance = true;
}
if (tippy.version.startsWith(4)) {
options.boundary = 'viewport';
options.aria = false;
options.ignoreAttributes = true;
}
tippy(target, options);
}