1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | var tippy = (function (Popper) {
|
7 | 'use strict';
|
8 |
|
9 | Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
|
10 |
|
11 | function _extends() {
|
12 | _extends = Object.assign || function (target) {
|
13 | for (var i = 1; i < arguments.length; i++) {
|
14 | var source = arguments[i];
|
15 |
|
16 | for (var key in source) {
|
17 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
18 | target[key] = source[key];
|
19 | }
|
20 | }
|
21 | }
|
22 |
|
23 | return target;
|
24 | };
|
25 |
|
26 | return _extends.apply(this, arguments);
|
27 | }
|
28 |
|
29 | var version = "5.2.1";
|
30 |
|
31 | |
32 |
|
33 |
|
34 | function reflow(element) {
|
35 | void element.offsetHeight;
|
36 | }
|
37 | |
38 |
|
39 |
|
40 |
|
41 | function setInnerHTML(element, html) {
|
42 | element[innerHTML()] = html;
|
43 | }
|
44 | |
45 |
|
46 |
|
47 |
|
48 | function isReferenceElement(value) {
|
49 | return !!(value && value._tippy && value._tippy.reference === value);
|
50 | }
|
51 | |
52 |
|
53 |
|
54 |
|
55 | function hasOwnProperty(obj, key) {
|
56 | return {}.hasOwnProperty.call(obj, key);
|
57 | }
|
58 | |
59 |
|
60 |
|
61 |
|
62 | function getArrayOfElements(value) {
|
63 | if (isElement(value)) {
|
64 | return [value];
|
65 | }
|
66 |
|
67 | if (isNodeList(value)) {
|
68 | return arrayFrom(value);
|
69 | }
|
70 |
|
71 | if (Array.isArray(value)) {
|
72 | return value;
|
73 | }
|
74 |
|
75 | return arrayFrom(document.querySelectorAll(value));
|
76 | }
|
77 | |
78 |
|
79 |
|
80 |
|
81 | function getValueAtIndexOrReturn(value, index, defaultValue) {
|
82 | if (Array.isArray(value)) {
|
83 | var v = value[index];
|
84 | return v == null ? Array.isArray(defaultValue) ? defaultValue[index] : defaultValue : v;
|
85 | }
|
86 |
|
87 | return value;
|
88 | }
|
89 | |
90 |
|
91 |
|
92 |
|
93 |
|
94 | function getModifier(obj, key) {
|
95 | return obj && obj.modifiers && obj.modifiers[key];
|
96 | }
|
97 | |
98 |
|
99 |
|
100 |
|
101 | function isType(value, type) {
|
102 | var str = {}.toString.call(value);
|
103 | return str.indexOf('[object') === 0 && str.indexOf(type + "]") > -1;
|
104 | }
|
105 | |
106 |
|
107 |
|
108 |
|
109 | function isElement(value) {
|
110 | return isType(value, 'Element');
|
111 | }
|
112 | |
113 |
|
114 |
|
115 |
|
116 | function isNodeList(value) {
|
117 | return isType(value, 'NodeList');
|
118 | }
|
119 | |
120 |
|
121 |
|
122 |
|
123 | function isMouseEvent(value) {
|
124 | return isType(value, 'MouseEvent');
|
125 | }
|
126 | |
127 |
|
128 |
|
129 |
|
130 |
|
131 | function innerHTML() {
|
132 | return 'innerHTML';
|
133 | }
|
134 | |
135 |
|
136 |
|
137 |
|
138 | function invokeWithArgsOrReturn(value, args) {
|
139 | return typeof value === 'function' ? value.apply(void 0, args) : value;
|
140 | }
|
141 | |
142 |
|
143 |
|
144 |
|
145 | function setModifierValue(modifiers, name, property, value) {
|
146 | modifiers.filter(function (m) {
|
147 | return m.name === name;
|
148 | })[0][property] = value;
|
149 | }
|
150 | |
151 |
|
152 |
|
153 |
|
154 | function div() {
|
155 | return document.createElement('div');
|
156 | }
|
157 | |
158 |
|
159 |
|
160 |
|
161 | function setTransitionDuration(els, value) {
|
162 | els.forEach(function (el) {
|
163 | if (el) {
|
164 | el.style.transitionDuration = value + "ms";
|
165 | }
|
166 | });
|
167 | }
|
168 | |
169 |
|
170 |
|
171 |
|
172 | function setVisibilityState(els, state) {
|
173 | els.forEach(function (el) {
|
174 | if (el) {
|
175 | el.setAttribute('data-state', state);
|
176 | }
|
177 | });
|
178 | }
|
179 | |
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 | function debounce(fn, ms) {
|
186 |
|
187 | if (ms === 0) {
|
188 | return fn;
|
189 | }
|
190 |
|
191 | var timeout;
|
192 | return function (arg) {
|
193 | clearTimeout(timeout);
|
194 | timeout = setTimeout(function () {
|
195 | fn(arg);
|
196 | }, ms);
|
197 | };
|
198 | }
|
199 | |
200 |
|
201 |
|
202 |
|
203 | function preserveInvocation(originalFn, currentFn, args) {
|
204 | if (originalFn && originalFn !== currentFn) {
|
205 | originalFn.apply(void 0, args);
|
206 | }
|
207 | }
|
208 | |
209 |
|
210 |
|
211 |
|
212 | function removeProperties(obj, keys) {
|
213 | var clone = _extends({}, obj);
|
214 |
|
215 | keys.forEach(function (key) {
|
216 | delete clone[key];
|
217 | });
|
218 | return clone;
|
219 | }
|
220 | |
221 |
|
222 |
|
223 |
|
224 | function arrayFrom(value) {
|
225 | return [].slice.call(value);
|
226 | }
|
227 | |
228 |
|
229 |
|
230 |
|
231 | function closestCallback(element, callback) {
|
232 | while (element) {
|
233 | if (callback(element)) {
|
234 | return element;
|
235 | }
|
236 |
|
237 | element = element.parentElement;
|
238 | }
|
239 |
|
240 | return null;
|
241 | }
|
242 | |
243 |
|
244 |
|
245 |
|
246 | function includes(a, b) {
|
247 | return a.indexOf(b) > -1;
|
248 | }
|
249 | |
250 |
|
251 |
|
252 |
|
253 | function splitBySpaces(value) {
|
254 | return value.split(/\s+/).filter(Boolean);
|
255 | }
|
256 | |
257 |
|
258 |
|
259 |
|
260 |
|
261 | function useIfDefined(nextValue, currentValue) {
|
262 | return nextValue !== undefined ? nextValue : currentValue;
|
263 | }
|
264 | |
265 |
|
266 |
|
267 |
|
268 | function normalizeToArray(value) {
|
269 | return [].concat(value);
|
270 | }
|
271 | |
272 |
|
273 |
|
274 |
|
275 |
|
276 | function getOwnerDocument(elementOrElements) {
|
277 | var _normalizeToArray = normalizeToArray(elementOrElements),
|
278 | element = _normalizeToArray[0];
|
279 |
|
280 | return element ? element.ownerDocument || document : document;
|
281 | }
|
282 | |
283 |
|
284 |
|
285 |
|
286 | function pushIfUnique(arr, value) {
|
287 | if (arr.indexOf(value) === -1) {
|
288 | arr.push(value);
|
289 | }
|
290 | }
|
291 | |
292 |
|
293 |
|
294 |
|
295 | function appendPxIfNumber(value) {
|
296 | return typeof value === 'number' ? value + "px" : value;
|
297 | }
|
298 | |
299 |
|
300 |
|
301 |
|
302 | function unique(arr) {
|
303 | return arr.filter(function (item, index) {
|
304 | return arr.indexOf(item) === index;
|
305 | });
|
306 | }
|
307 | |
308 |
|
309 |
|
310 |
|
311 | function getNumber(value) {
|
312 | return typeof value === 'number' ? value : parseFloat(value);
|
313 | }
|
314 | |
315 |
|
316 |
|
317 |
|
318 | function getUnitsInPx(doc, value) {
|
319 | var isRem = typeof value === 'string' && includes(value, 'rem');
|
320 | var html = doc.documentElement;
|
321 | var rootFontSize = 16;
|
322 |
|
323 | if (html && isRem) {
|
324 | return parseFloat(getComputedStyle(html).fontSize || String(rootFontSize)) * getNumber(value);
|
325 | }
|
326 |
|
327 | return getNumber(value);
|
328 | }
|
329 | |
330 |
|
331 |
|
332 |
|
333 | function getComputedPadding(basePlacement, padding, distancePx) {
|
334 | if (padding === void 0) {
|
335 | padding = 5;
|
336 | }
|
337 |
|
338 | var freshPaddingObject = {
|
339 | top: 0,
|
340 | right: 0,
|
341 | bottom: 0,
|
342 | left: 0
|
343 | };
|
344 | var keys = Object.keys(freshPaddingObject);
|
345 | return keys.reduce(function (obj, key) {
|
346 | obj[key] = typeof padding === 'number' ? padding : padding[key];
|
347 |
|
348 | if (basePlacement === key) {
|
349 | obj[key] = typeof padding === 'number' ? padding + distancePx : padding[basePlacement] + distancePx;
|
350 | }
|
351 |
|
352 | return obj;
|
353 | }, freshPaddingObject);
|
354 | }
|
355 |
|
356 | function createMemoryLeakWarning(method) {
|
357 | var txt = method === 'destroy' ? 'n already-' : ' ';
|
358 | return "\n " + method + "() was called on a" + txt + "destroyed instance. This is a no-op but\n indicates a potential memory leak.\n ";
|
359 | }
|
360 | function clean(value) {
|
361 | var spacesAndTabs = /[ \t]{2,}/g;
|
362 | var lineStartWithSpaces = /^[ \t]*/gm;
|
363 | return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
|
364 | }
|
365 |
|
366 | function getDevMessage(message) {
|
367 | return clean("\n %ctippy.js\n\n %c" + clean(message) + "\n\n %c\uD83D\uDC77\u200D This is a development-only message. It will be removed in production.\n ");
|
368 | }
|
369 |
|
370 | function getFormattedMessage(message) {
|
371 | return [getDevMessage(message),
|
372 | 'color: #00C584; font-size: 1.3em; font-weight: bold;',
|
373 | 'line-height: 1.5',
|
374 | 'color: #a6a095;'];
|
375 | }
|
376 | |
377 |
|
378 |
|
379 |
|
380 |
|
381 |
|
382 |
|
383 | function warnWhen(condition, message) {
|
384 | if (condition) {
|
385 | var _console;
|
386 |
|
387 | (_console = console).warn.apply(_console, getFormattedMessage(message));
|
388 | }
|
389 | }
|
390 | |
391 |
|
392 |
|
393 |
|
394 | function errorWhen(condition, message) {
|
395 | if (condition) {
|
396 | var _console2;
|
397 |
|
398 | (_console2 = console).error.apply(_console2, getFormattedMessage(message));
|
399 | }
|
400 | }
|
401 | |
402 |
|
403 |
|
404 |
|
405 | function validateTargets(targets) {
|
406 | var didPassFalsyValue = !targets;
|
407 | var didPassPlainObject = Object.prototype.toString.call(targets) === '[object Object]' && !targets.addEventListener;
|
408 | errorWhen(didPassFalsyValue, ['tippy() was passed', '`' + String(targets) + '`', 'as its targets (first) argument. Valid types are: String, Element, Element[],', 'or NodeList.'].join(' '));
|
409 | errorWhen(didPassPlainObject, ['tippy() was passed a plain object which is no longer supported as an argument.', 'See: https://atomiks.github.io/tippyjs/misc/#custom-position'].join(' '));
|
410 | }
|
411 |
|
412 | var pluginProps = {
|
413 | animateFill: false,
|
414 | followCursor: false,
|
415 | inlinePositioning: false,
|
416 | sticky: false
|
417 | };
|
418 | var defaultProps = _extends({
|
419 | allowHTML: true,
|
420 | animation: 'fade',
|
421 | appendTo: function appendTo() {
|
422 | return document.body;
|
423 | },
|
424 | aria: 'describedby',
|
425 | arrow: true,
|
426 | boundary: 'scrollParent',
|
427 | content: '',
|
428 | delay: 0,
|
429 | distance: 10,
|
430 | duration: [300, 250],
|
431 | flip: true,
|
432 | flipBehavior: 'flip',
|
433 | flipOnUpdate: false,
|
434 | hideOnClick: true,
|
435 | ignoreAttributes: false,
|
436 | inertia: false,
|
437 | interactive: false,
|
438 | interactiveBorder: 2,
|
439 | interactiveDebounce: 0,
|
440 | lazy: true,
|
441 | maxWidth: 350,
|
442 | multiple: false,
|
443 | offset: 0,
|
444 | onAfterUpdate: function onAfterUpdate() {},
|
445 | onBeforeUpdate: function onBeforeUpdate() {},
|
446 | onCreate: function onCreate() {},
|
447 | onDestroy: function onDestroy() {},
|
448 | onHidden: function onHidden() {},
|
449 | onHide: function onHide() {},
|
450 | onMount: function onMount() {},
|
451 | onShow: function onShow() {},
|
452 | onShown: function onShown() {},
|
453 | onTrigger: function onTrigger() {},
|
454 | onUntrigger: function onUntrigger() {},
|
455 | placement: 'top',
|
456 | plugins: [],
|
457 | popperOptions: {},
|
458 | role: 'tooltip',
|
459 | showOnCreate: false,
|
460 | theme: '',
|
461 | touch: true,
|
462 | trigger: 'mouseenter focus',
|
463 | triggerTarget: null,
|
464 | updateDuration: 0,
|
465 | zIndex: 9999
|
466 | }, pluginProps);
|
467 | var defaultKeys = Object.keys(defaultProps);
|
468 | |
469 |
|
470 |
|
471 |
|
472 |
|
473 | var POPPER_INSTANCE_DEPENDENCIES = ['arrow', 'boundary', 'distance', 'flip', 'flipBehavior', 'flipOnUpdate', 'offset', 'placement', 'popperOptions'];
|
474 | |
475 |
|
476 |
|
477 |
|
478 | var setDefaultProps = function setDefaultProps(partialProps) {
|
479 | {
|
480 | validateProps(partialProps, []);
|
481 | }
|
482 |
|
483 | var keys = Object.keys(partialProps);
|
484 | keys.forEach(function (key) {
|
485 | defaultProps[key] = partialProps[key];
|
486 | });
|
487 | };
|
488 | |
489 |
|
490 |
|
491 |
|
492 | function getExtendedPassedProps(passedProps) {
|
493 | var plugins = passedProps.plugins || [];
|
494 | var pluginProps = plugins.reduce(function (acc, plugin) {
|
495 | var name = plugin.name,
|
496 | defaultValue = plugin.defaultValue;
|
497 |
|
498 | if (name) {
|
499 | acc[name] = passedProps[name] !== undefined ? passedProps[name] : defaultValue;
|
500 | }
|
501 |
|
502 | return acc;
|
503 | }, {});
|
504 | return _extends({}, passedProps, {}, pluginProps);
|
505 | }
|
506 | |
507 |
|
508 |
|
509 |
|
510 | function getDataAttributeProps(reference, plugins) {
|
511 | var propKeys = plugins ? Object.keys(getExtendedPassedProps(_extends({}, defaultProps, {
|
512 | plugins: plugins
|
513 | }))) : defaultKeys;
|
514 | var props = propKeys.reduce(function (acc, key) {
|
515 | var valueAsString = (reference.getAttribute("data-tippy-" + key) || '').trim();
|
516 |
|
517 | if (!valueAsString) {
|
518 | return acc;
|
519 | }
|
520 |
|
521 | if (key === 'content') {
|
522 | acc[key] = valueAsString;
|
523 | } else {
|
524 | try {
|
525 | acc[key] = JSON.parse(valueAsString);
|
526 | } catch (e) {
|
527 | acc[key] = valueAsString;
|
528 | }
|
529 | }
|
530 |
|
531 | return acc;
|
532 | }, {});
|
533 | return props;
|
534 | }
|
535 | |
536 |
|
537 |
|
538 |
|
539 |
|
540 | function evaluateProps(reference, props) {
|
541 | var out = _extends({}, props, {
|
542 | content: invokeWithArgsOrReturn(props.content, [reference])
|
543 | }, props.ignoreAttributes ? {} : getDataAttributeProps(reference, props.plugins));
|
544 |
|
545 | if (out.interactive) {
|
546 | out.aria = null;
|
547 | }
|
548 |
|
549 | return out;
|
550 | }
|
551 | |
552 |
|
553 |
|
554 |
|
555 | function validateProps(partialProps, plugins) {
|
556 | if (partialProps === void 0) {
|
557 | partialProps = {};
|
558 | }
|
559 |
|
560 | if (plugins === void 0) {
|
561 | plugins = [];
|
562 | }
|
563 |
|
564 | var keys = Object.keys(partialProps);
|
565 | keys.forEach(function (prop) {
|
566 | var value = partialProps[prop];
|
567 | var didSpecifyPlacementInPopperOptions = prop === 'popperOptions' && value !== null && typeof value === 'object' && hasOwnProperty(value, 'placement');
|
568 | var nonPluginProps = removeProperties(defaultProps, ['animateFill', 'followCursor', 'inlinePositioning', 'sticky']);
|
569 |
|
570 | var customWarningProps = ['a11y', 'arrowType', 'showOnInit', 'size', 'target', 'touchHold'];
|
571 | var didPassUnknownProp = !hasOwnProperty(nonPluginProps, prop) && !includes(customWarningProps, prop);
|
572 |
|
573 | if (didPassUnknownProp) {
|
574 | didPassUnknownProp = plugins.filter(function (plugin) {
|
575 | return plugin.name === prop;
|
576 | }).length === 0;
|
577 | }
|
578 |
|
579 | warnWhen(prop === 'target', ['The `target` prop was removed in v5 and replaced with the delegate() addon', 'in order to conserve bundle size.', 'See: https://atomiks.github.io/tippyjs/addons/#event-delegation'].join(' '));
|
580 | warnWhen(prop === 'a11y', ['The `a11y` prop was removed in v5. Make sure the element you are giving a', 'tippy to is natively focusable, such as <button> or <input>, not <div>', 'or <span>.'].join(' '));
|
581 | warnWhen(prop === 'showOnInit', 'The `showOnInit` prop was renamed to `showOnCreate` in v5.');
|
582 | warnWhen(prop === 'arrowType', ['The `arrowType` prop was removed in v5 in favor of overloading the `arrow`', 'prop.', '\n\n', '"round" string was replaced with importing the string from the package.', '\n\n', "* import {roundArrow} from 'tippy.js'; (ESM version)\n", '* const {roundArrow} = tippy; (IIFE CDN version)', '\n\n', 'Before: {arrow: true, arrowType: "round"}\n', 'After: {arrow: roundArrow}`'].join(' '));
|
583 | warnWhen(prop === 'touchHold', ['The `touchHold` prop was removed in v5 in favor of overloading the `touch`', 'prop.', '\n\n', 'Before: {touchHold: true}\n', 'After: {touch: "hold"}'].join(' '));
|
584 | warnWhen(prop === 'size', ['The `size` prop was removed in v5. Instead, use a theme that specifies', 'CSS padding and font-size properties.'].join(' '));
|
585 | warnWhen(prop === 'theme' && value === 'google', 'The included theme "google" was renamed to "material" in v5.');
|
586 | warnWhen(didSpecifyPlacementInPopperOptions, ['Specifying placement in `popperOptions` is not supported. Use the base-level', '`placement` prop instead.', '\n\n', 'Before: {popperOptions: {placement: "bottom"}}\n', 'After: {placement: "bottom"}'].join(' '));
|
587 | warnWhen(didPassUnknownProp, ["`" + prop + "`", "is not a valid prop. You may have spelled it incorrectly, or if it's a", 'plugin, forgot to pass it in an array as props.plugins.', '\n\n', 'In v5, the following props were turned into plugins:', '\n\n', '* animateFill\n', '* followCursor\n', '* sticky', '\n\n', 'All props: https://atomiks.github.io/tippyjs/all-props/\n', 'Plugins: https://atomiks.github.io/tippyjs/plugins/'].join(' '));
|
588 | });
|
589 | }
|
590 |
|
591 | var PASSIVE = {
|
592 | passive: true
|
593 | };
|
594 | var ROUND_ARROW = '<svg viewBox="0 0 18 7" xmlns="http://www.w3.org/2000/svg"><path d="M0 7s2.021-.015 5.253-4.218C6.584 1.051 7.797.007 9 0c1.203-.007 2.416 1.035 3.761 2.782C16.012 7.005 18 7 18 7H0z"/></svg>';
|
595 | var IOS_CLASS = "tippy-iOS";
|
596 | var POPPER_CLASS = "tippy-popper";
|
597 | var TOOLTIP_CLASS = "tippy-tooltip";
|
598 | var CONTENT_CLASS = "tippy-content";
|
599 | var BACKDROP_CLASS = "tippy-backdrop";
|
600 | var ARROW_CLASS = "tippy-arrow";
|
601 | var SVG_ARROW_CLASS = "tippy-svg-arrow";
|
602 | var POPPER_SELECTOR = "." + POPPER_CLASS;
|
603 | var TOOLTIP_SELECTOR = "." + TOOLTIP_CLASS;
|
604 | var CONTENT_SELECTOR = "." + CONTENT_CLASS;
|
605 | var ARROW_SELECTOR = "." + ARROW_CLASS;
|
606 | var SVG_ARROW_SELECTOR = "." + SVG_ARROW_CLASS;
|
607 |
|
608 | var currentInput = {
|
609 | isTouch: false
|
610 | };
|
611 | var lastMouseMoveTime = 0;
|
612 | |
613 |
|
614 |
|
615 |
|
616 |
|
617 |
|
618 |
|
619 | function onDocumentTouchStart() {
|
620 | if (currentInput.isTouch) {
|
621 | return;
|
622 | }
|
623 |
|
624 | currentInput.isTouch = true;
|
625 |
|
626 | if (window.performance) {
|
627 | document.addEventListener('mousemove', onDocumentMouseMove);
|
628 | }
|
629 | }
|
630 | |
631 |
|
632 |
|
633 |
|
634 |
|
635 |
|
636 | function onDocumentMouseMove() {
|
637 | var now = performance.now();
|
638 |
|
639 | if (now - lastMouseMoveTime < 20) {
|
640 | currentInput.isTouch = false;
|
641 | document.removeEventListener('mousemove', onDocumentMouseMove);
|
642 | }
|
643 |
|
644 | lastMouseMoveTime = now;
|
645 | }
|
646 | |
647 |
|
648 |
|
649 |
|
650 |
|
651 |
|
652 |
|
653 | function onWindowBlur() {
|
654 | var activeElement = document.activeElement;
|
655 |
|
656 | if (isReferenceElement(activeElement)) {
|
657 | var instance = activeElement._tippy;
|
658 |
|
659 | if (activeElement.blur && !instance.state.isVisible) {
|
660 | activeElement.blur();
|
661 | }
|
662 | }
|
663 | }
|
664 | |
665 |
|
666 |
|
667 |
|
668 | function bindGlobalEventListeners() {
|
669 | document.addEventListener('touchstart', onDocumentTouchStart, _extends({}, PASSIVE, {
|
670 | capture: true
|
671 | }));
|
672 | window.addEventListener('blur', onWindowBlur);
|
673 | }
|
674 |
|
675 | var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
|
676 | var ua = isBrowser ? navigator.userAgent : '';
|
677 | var isIE = /MSIE |Trident\//.test(ua);
|
678 | var isIOS = isBrowser && /iPhone|iPad|iPod/.test(navigator.platform);
|
679 | function updateIOSClass(isAdd) {
|
680 | var shouldAdd = isAdd && isIOS && currentInput.isTouch;
|
681 | document.body.classList[shouldAdd ? 'add' : 'remove'](IOS_CLASS);
|
682 | }
|
683 |
|
684 | |
685 |
|
686 |
|
687 |
|
688 | function getBasePlacement(placement) {
|
689 | return placement.split('-')[0];
|
690 | }
|
691 | |
692 |
|
693 |
|
694 |
|
695 | function addInertia(tooltip) {
|
696 | tooltip.setAttribute('data-inertia', '');
|
697 | }
|
698 | |
699 |
|
700 |
|
701 |
|
702 | function removeInertia(tooltip) {
|
703 | tooltip.removeAttribute('data-inertia');
|
704 | }
|
705 | |
706 |
|
707 |
|
708 |
|
709 | function addInteractive(tooltip) {
|
710 | tooltip.setAttribute('data-interactive', '');
|
711 | }
|
712 | |
713 |
|
714 |
|
715 |
|
716 | function removeInteractive(tooltip) {
|
717 | tooltip.removeAttribute('data-interactive');
|
718 | }
|
719 | |
720 |
|
721 |
|
722 |
|
723 | function setContent(contentEl, props) {
|
724 | if (isElement(props.content)) {
|
725 | setInnerHTML(contentEl, '');
|
726 | contentEl.appendChild(props.content);
|
727 | } else if (typeof props.content !== 'function') {
|
728 | var key = props.allowHTML ? 'innerHTML' : 'textContent';
|
729 | contentEl[key] = props.content;
|
730 | }
|
731 | }
|
732 | |
733 |
|
734 |
|
735 |
|
736 | function getChildren(popper) {
|
737 | return {
|
738 | tooltip: popper.querySelector(TOOLTIP_SELECTOR),
|
739 | content: popper.querySelector(CONTENT_SELECTOR),
|
740 | arrow: popper.querySelector(ARROW_SELECTOR) || popper.querySelector(SVG_ARROW_SELECTOR)
|
741 | };
|
742 | }
|
743 | |
744 |
|
745 |
|
746 |
|
747 | function createArrowElement(arrow) {
|
748 | var arrowElement = div();
|
749 |
|
750 | if (arrow === true) {
|
751 | arrowElement.className = ARROW_CLASS;
|
752 | } else {
|
753 | arrowElement.className = SVG_ARROW_CLASS;
|
754 |
|
755 | if (isElement(arrow)) {
|
756 | arrowElement.appendChild(arrow);
|
757 | } else {
|
758 | setInnerHTML(arrowElement, arrow);
|
759 | }
|
760 | }
|
761 |
|
762 | return arrowElement;
|
763 | }
|
764 | |
765 |
|
766 |
|
767 |
|
768 | function createPopperElement(id, props) {
|
769 | var popper = div();
|
770 | popper.className = POPPER_CLASS;
|
771 | popper.style.position = 'absolute';
|
772 | popper.style.top = '0';
|
773 | popper.style.left = '0';
|
774 | var tooltip = div();
|
775 | tooltip.className = TOOLTIP_CLASS;
|
776 | tooltip.id = "tippy-" + id;
|
777 | tooltip.setAttribute('data-state', 'hidden');
|
778 | tooltip.setAttribute('tabindex', '-1');
|
779 | updateTheme(tooltip, 'add', props.theme);
|
780 | var content = div();
|
781 | content.className = CONTENT_CLASS;
|
782 | content.setAttribute('data-state', 'hidden');
|
783 |
|
784 | if (props.interactive) {
|
785 | addInteractive(tooltip);
|
786 | }
|
787 |
|
788 | if (props.arrow) {
|
789 | tooltip.setAttribute('data-arrow', '');
|
790 | tooltip.appendChild(createArrowElement(props.arrow));
|
791 | }
|
792 |
|
793 | if (props.inertia) {
|
794 | addInertia(tooltip);
|
795 | }
|
796 |
|
797 | setContent(content, props);
|
798 | tooltip.appendChild(content);
|
799 | popper.appendChild(tooltip);
|
800 | updatePopperElement(popper, props, props);
|
801 | return popper;
|
802 | }
|
803 | |
804 |
|
805 |
|
806 |
|
807 | function updatePopperElement(popper, prevProps, nextProps) {
|
808 | var _getChildren = getChildren(popper),
|
809 | tooltip = _getChildren.tooltip,
|
810 | content = _getChildren.content,
|
811 | arrow = _getChildren.arrow;
|
812 |
|
813 | popper.style.zIndex = '' + nextProps.zIndex;
|
814 | tooltip.setAttribute('data-animation', nextProps.animation);
|
815 | tooltip.style.maxWidth = appendPxIfNumber(nextProps.maxWidth);
|
816 |
|
817 | if (nextProps.role) {
|
818 | tooltip.setAttribute('role', nextProps.role);
|
819 | } else {
|
820 | tooltip.removeAttribute('role');
|
821 | }
|
822 |
|
823 | if (prevProps.content !== nextProps.content) {
|
824 | setContent(content, nextProps);
|
825 | }
|
826 |
|
827 |
|
828 | if (!prevProps.arrow && nextProps.arrow) {
|
829 |
|
830 | tooltip.appendChild(createArrowElement(nextProps.arrow));
|
831 | tooltip.setAttribute('data-arrow', '');
|
832 | } else if (prevProps.arrow && !nextProps.arrow) {
|
833 |
|
834 | tooltip.removeChild(arrow);
|
835 | tooltip.removeAttribute('data-arrow');
|
836 | } else if (prevProps.arrow !== nextProps.arrow) {
|
837 |
|
838 | tooltip.removeChild(arrow);
|
839 | tooltip.appendChild(createArrowElement(nextProps.arrow));
|
840 | }
|
841 |
|
842 |
|
843 | if (!prevProps.interactive && nextProps.interactive) {
|
844 | addInteractive(tooltip);
|
845 | } else if (prevProps.interactive && !nextProps.interactive) {
|
846 | removeInteractive(tooltip);
|
847 | }
|
848 |
|
849 |
|
850 | if (!prevProps.inertia && nextProps.inertia) {
|
851 | addInertia(tooltip);
|
852 | } else if (prevProps.inertia && !nextProps.inertia) {
|
853 | removeInertia(tooltip);
|
854 | }
|
855 |
|
856 |
|
857 | if (prevProps.theme !== nextProps.theme) {
|
858 | updateTheme(tooltip, 'remove', prevProps.theme);
|
859 | updateTheme(tooltip, 'add', nextProps.theme);
|
860 | }
|
861 | }
|
862 | |
863 |
|
864 |
|
865 |
|
866 | function updateTransitionEndListener(tooltip, action, listener) {
|
867 | ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
|
868 | tooltip[action + 'EventListener'](event, listener);
|
869 | });
|
870 | }
|
871 | |
872 |
|
873 |
|
874 |
|
875 | function updateTheme(tooltip, action, theme) {
|
876 | splitBySpaces(theme).forEach(function (name) {
|
877 | tooltip.classList[action](name + "-theme");
|
878 | });
|
879 | }
|
880 | |
881 |
|
882 |
|
883 |
|
884 |
|
885 | function isCursorOutsideInteractiveBorder(popperTreeData, event) {
|
886 | var clientX = event.clientX,
|
887 | clientY = event.clientY;
|
888 | return popperTreeData.every(function (_ref) {
|
889 | var popperRect = _ref.popperRect,
|
890 | tooltipRect = _ref.tooltipRect,
|
891 | interactiveBorder = _ref.interactiveBorder;
|
892 |
|
893 |
|
894 | var mergedRect = {
|
895 | top: Math.min(popperRect.top, tooltipRect.top),
|
896 | right: Math.max(popperRect.right, tooltipRect.right),
|
897 | bottom: Math.max(popperRect.bottom, tooltipRect.bottom),
|
898 | left: Math.min(popperRect.left, tooltipRect.left)
|
899 | };
|
900 | var exceedsTop = mergedRect.top - clientY > interactiveBorder;
|
901 | var exceedsBottom = clientY - mergedRect.bottom > interactiveBorder;
|
902 | var exceedsLeft = mergedRect.left - clientX > interactiveBorder;
|
903 | var exceedsRight = clientX - mergedRect.right > interactiveBorder;
|
904 | return exceedsTop || exceedsBottom || exceedsLeft || exceedsRight;
|
905 | });
|
906 | }
|
907 |
|
908 | var idCounter = 1;
|
909 | var mouseMoveListeners = [];
|
910 | |
911 |
|
912 |
|
913 |
|
914 | var mountedInstances = [];
|
915 | |
916 |
|
917 |
|
918 |
|
919 |
|
920 |
|
921 | function createTippy(reference, passedProps) {
|
922 | var props = evaluateProps(reference, _extends({}, defaultProps, {}, getExtendedPassedProps(passedProps)));
|
923 |
|
924 | if (!props.multiple && reference._tippy) {
|
925 | return null;
|
926 | }
|
927 |
|
928 |
|
929 |
|
930 | var showTimeout;
|
931 | var hideTimeout;
|
932 | var scheduleHideAnimationFrame;
|
933 | var isBeingDestroyed = false;
|
934 | var isVisibleFromClick = false;
|
935 | var didHideDueToDocumentMouseDown = false;
|
936 | var popperUpdates = 0;
|
937 | var lastTriggerEvent;
|
938 | var currentMountCallback;
|
939 | var currentTransitionEndListener;
|
940 | var listeners = [];
|
941 | var debouncedOnMouseMove = debounce(onMouseMove, props.interactiveDebounce);
|
942 | var currentTarget;
|
943 |
|
944 |
|
945 |
|
946 | var doc = getOwnerDocument(props.triggerTarget || reference);
|
947 |
|
948 |
|
949 | var id = idCounter++;
|
950 | var popper = createPopperElement(id, props);
|
951 | var popperChildren = getChildren(popper);
|
952 | var popperInstance = null;
|
953 | var plugins = unique(props.plugins);
|
954 |
|
955 | var tooltip = popperChildren.tooltip,
|
956 | content = popperChildren.content;
|
957 | var transitionableElements = [tooltip, content];
|
958 | var state = {
|
959 |
|
960 | currentPlacement: null,
|
961 |
|
962 | isEnabled: true,
|
963 |
|
964 | isVisible: false,
|
965 |
|
966 | isDestroyed: false,
|
967 |
|
968 | isMounted: false,
|
969 |
|
970 | isShown: false
|
971 | };
|
972 | var instance = {
|
973 |
|
974 | id: id,
|
975 | reference: reference,
|
976 | popper: popper,
|
977 | popperChildren: popperChildren,
|
978 | popperInstance: popperInstance,
|
979 | props: props,
|
980 | state: state,
|
981 | plugins: plugins,
|
982 |
|
983 | clearDelayTimeouts: clearDelayTimeouts,
|
984 | setProps: setProps,
|
985 | setContent: setContent,
|
986 | show: show,
|
987 | hide: hide,
|
988 | enable: enable,
|
989 | disable: disable,
|
990 | destroy: destroy
|
991 | };
|
992 |
|
993 |
|
994 | reference._tippy = instance;
|
995 | popper._tippy = instance;
|
996 | var pluginsHooks = plugins.map(function (plugin) {
|
997 | return plugin.fn(instance);
|
998 | });
|
999 | var hadAriaExpandedAttributeOnCreate = reference.hasAttribute('aria-expanded');
|
1000 | addListenersToTriggerTarget();
|
1001 | handleAriaExpandedAttribute();
|
1002 |
|
1003 | if (!props.lazy) {
|
1004 | createPopperInstance();
|
1005 | }
|
1006 |
|
1007 | invokeHook('onCreate', [instance]);
|
1008 |
|
1009 | if (props.showOnCreate) {
|
1010 | scheduleShow();
|
1011 | }
|
1012 |
|
1013 |
|
1014 |
|
1015 | popper.addEventListener('mouseenter', function () {
|
1016 | if (instance.props.interactive && instance.state.isVisible) {
|
1017 | instance.clearDelayTimeouts();
|
1018 | }
|
1019 | });
|
1020 | popper.addEventListener('mouseleave', function (event) {
|
1021 | if (instance.props.interactive && includes(instance.props.trigger, 'mouseenter')) {
|
1022 | debouncedOnMouseMove(event);
|
1023 | doc.addEventListener('mousemove', debouncedOnMouseMove);
|
1024 | }
|
1025 | });
|
1026 | return instance;
|
1027 |
|
1028 |
|
1029 | function getNormalizedTouchSettings() {
|
1030 | var touch = instance.props.touch;
|
1031 | return Array.isArray(touch) ? touch : [touch, 0];
|
1032 | }
|
1033 |
|
1034 | function getIsCustomTouchBehavior() {
|
1035 | return getNormalizedTouchSettings()[0] === 'hold';
|
1036 | }
|
1037 |
|
1038 | function getCurrentTarget() {
|
1039 | return currentTarget || reference;
|
1040 | }
|
1041 |
|
1042 | function getDelay(isShow) {
|
1043 |
|
1044 |
|
1045 |
|
1046 | if (instance.state.isMounted && !instance.state.isVisible || currentInput.isTouch || lastTriggerEvent && lastTriggerEvent.type === 'focus') {
|
1047 | return 0;
|
1048 | }
|
1049 |
|
1050 | return getValueAtIndexOrReturn(instance.props.delay, isShow ? 0 : 1, defaultProps.delay);
|
1051 | }
|
1052 |
|
1053 | function invokeHook(hook, args, shouldInvokePropsHook) {
|
1054 | if (shouldInvokePropsHook === void 0) {
|
1055 | shouldInvokePropsHook = true;
|
1056 | }
|
1057 |
|
1058 | pluginsHooks.forEach(function (pluginHooks) {
|
1059 | if (hasOwnProperty(pluginHooks, hook)) {
|
1060 |
|
1061 | pluginHooks[hook].apply(pluginHooks, args);
|
1062 | }
|
1063 | });
|
1064 |
|
1065 | if (shouldInvokePropsHook) {
|
1066 | var _instance$props;
|
1067 |
|
1068 |
|
1069 | (_instance$props = instance.props)[hook].apply(_instance$props, args);
|
1070 | }
|
1071 | }
|
1072 |
|
1073 | function handleAriaDescribedByAttribute() {
|
1074 | var aria = instance.props.aria;
|
1075 |
|
1076 | if (!aria) {
|
1077 | return;
|
1078 | }
|
1079 |
|
1080 | var attr = "aria-" + aria;
|
1081 | var id = tooltip.id;
|
1082 | var nodes = normalizeToArray(instance.props.triggerTarget || reference);
|
1083 | nodes.forEach(function (node) {
|
1084 | var currentValue = node.getAttribute(attr);
|
1085 |
|
1086 | if (instance.state.isVisible) {
|
1087 | node.setAttribute(attr, currentValue ? currentValue + " " + id : id);
|
1088 | } else {
|
1089 | var nextValue = currentValue && currentValue.replace(id, '').trim();
|
1090 |
|
1091 | if (nextValue) {
|
1092 | node.setAttribute(attr, nextValue);
|
1093 | } else {
|
1094 | node.removeAttribute(attr);
|
1095 | }
|
1096 | }
|
1097 | });
|
1098 | }
|
1099 |
|
1100 | function handleAriaExpandedAttribute() {
|
1101 |
|
1102 |
|
1103 |
|
1104 | if (hadAriaExpandedAttributeOnCreate) {
|
1105 | return;
|
1106 | }
|
1107 |
|
1108 | var nodes = normalizeToArray(instance.props.triggerTarget || reference);
|
1109 | nodes.forEach(function (node) {
|
1110 | if (instance.props.interactive) {
|
1111 | node.setAttribute('aria-expanded', instance.state.isVisible && node === getCurrentTarget() ? 'true' : 'false');
|
1112 | } else {
|
1113 | node.removeAttribute('aria-expanded');
|
1114 | }
|
1115 | });
|
1116 | }
|
1117 |
|
1118 | function cleanupInteractiveMouseListeners() {
|
1119 | doc.body.removeEventListener('mouseleave', scheduleHide);
|
1120 | doc.removeEventListener('mousemove', debouncedOnMouseMove);
|
1121 | mouseMoveListeners = mouseMoveListeners.filter(function (listener) {
|
1122 | return listener !== debouncedOnMouseMove;
|
1123 | });
|
1124 | }
|
1125 |
|
1126 | function onDocumentMouseDown(event) {
|
1127 |
|
1128 | if (instance.props.interactive && popper.contains(event.target)) {
|
1129 | return;
|
1130 | }
|
1131 |
|
1132 |
|
1133 | if (getCurrentTarget().contains(event.target)) {
|
1134 | if (currentInput.isTouch) {
|
1135 | return;
|
1136 | }
|
1137 |
|
1138 | if (instance.state.isVisible && includes(instance.props.trigger, 'click')) {
|
1139 | return;
|
1140 | }
|
1141 | }
|
1142 |
|
1143 | if (instance.props.hideOnClick === true) {
|
1144 | isVisibleFromClick = false;
|
1145 | instance.clearDelayTimeouts();
|
1146 | instance.hide();
|
1147 |
|
1148 |
|
1149 |
|
1150 | didHideDueToDocumentMouseDown = true;
|
1151 | setTimeout(function () {
|
1152 | didHideDueToDocumentMouseDown = false;
|
1153 | });
|
1154 |
|
1155 |
|
1156 |
|
1157 | if (!instance.state.isMounted) {
|
1158 | removeDocumentMouseDownListener();
|
1159 | }
|
1160 | }
|
1161 | }
|
1162 |
|
1163 | function addDocumentMouseDownListener() {
|
1164 | doc.addEventListener('mousedown', onDocumentMouseDown, true);
|
1165 | }
|
1166 |
|
1167 | function removeDocumentMouseDownListener() {
|
1168 | doc.removeEventListener('mousedown', onDocumentMouseDown, true);
|
1169 | }
|
1170 |
|
1171 | function onTransitionedOut(duration, callback) {
|
1172 | onTransitionEnd(duration, function () {
|
1173 | if (!instance.state.isVisible && popper.parentNode && popper.parentNode.contains(popper)) {
|
1174 | callback();
|
1175 | }
|
1176 | });
|
1177 | }
|
1178 |
|
1179 | function onTransitionedIn(duration, callback) {
|
1180 | onTransitionEnd(duration, callback);
|
1181 | }
|
1182 |
|
1183 | function onTransitionEnd(duration, callback) {
|
1184 | function listener(event) {
|
1185 | if (event.target === tooltip) {
|
1186 | updateTransitionEndListener(tooltip, 'remove', listener);
|
1187 | callback();
|
1188 | }
|
1189 | }
|
1190 |
|
1191 |
|
1192 |
|
1193 | if (duration === 0) {
|
1194 | return callback();
|
1195 | }
|
1196 |
|
1197 | updateTransitionEndListener(tooltip, 'remove', currentTransitionEndListener);
|
1198 | updateTransitionEndListener(tooltip, 'add', listener);
|
1199 | currentTransitionEndListener = listener;
|
1200 | }
|
1201 |
|
1202 | function on(eventType, handler, options) {
|
1203 | if (options === void 0) {
|
1204 | options = false;
|
1205 | }
|
1206 |
|
1207 | var nodes = normalizeToArray(instance.props.triggerTarget || reference);
|
1208 | nodes.forEach(function (node) {
|
1209 | node.addEventListener(eventType, handler, options);
|
1210 | listeners.push({
|
1211 | node: node,
|
1212 | eventType: eventType,
|
1213 | handler: handler,
|
1214 | options: options
|
1215 | });
|
1216 | });
|
1217 | }
|
1218 |
|
1219 | function addListenersToTriggerTarget() {
|
1220 | if (getIsCustomTouchBehavior()) {
|
1221 | on('touchstart', onTrigger, PASSIVE);
|
1222 | on('touchend', onMouseLeave, PASSIVE);
|
1223 | }
|
1224 |
|
1225 | splitBySpaces(instance.props.trigger).forEach(function (eventType) {
|
1226 | if (eventType === 'manual') {
|
1227 | return;
|
1228 | }
|
1229 |
|
1230 | on(eventType, onTrigger);
|
1231 |
|
1232 | switch (eventType) {
|
1233 | case 'mouseenter':
|
1234 | on('mouseleave', onMouseLeave);
|
1235 | break;
|
1236 |
|
1237 | case 'focus':
|
1238 | on(isIE ? 'focusout' : 'blur', onBlurOrFocusOut);
|
1239 | break;
|
1240 |
|
1241 | case 'focusin':
|
1242 | on('focusout', onBlurOrFocusOut);
|
1243 | break;
|
1244 | }
|
1245 | });
|
1246 | }
|
1247 |
|
1248 | function removeListenersFromTriggerTarget() {
|
1249 | listeners.forEach(function (_ref) {
|
1250 | var node = _ref.node,
|
1251 | eventType = _ref.eventType,
|
1252 | handler = _ref.handler,
|
1253 | options = _ref.options;
|
1254 | node.removeEventListener(eventType, handler, options);
|
1255 | });
|
1256 | listeners = [];
|
1257 | }
|
1258 |
|
1259 | function onTrigger(event) {
|
1260 | var shouldScheduleClickHide = false;
|
1261 |
|
1262 | if (!instance.state.isEnabled || isEventListenerStopped(event) || didHideDueToDocumentMouseDown) {
|
1263 | return;
|
1264 | }
|
1265 |
|
1266 | lastTriggerEvent = event;
|
1267 | currentTarget = event.currentTarget;
|
1268 | handleAriaExpandedAttribute();
|
1269 |
|
1270 | if (!instance.state.isVisible && isMouseEvent(event)) {
|
1271 |
|
1272 |
|
1273 |
|
1274 |
|
1275 | mouseMoveListeners.forEach(function (listener) {
|
1276 | return listener(event);
|
1277 | });
|
1278 | }
|
1279 |
|
1280 |
|
1281 | if (event.type === 'click' && (!includes(instance.props.trigger, 'mouseenter') || isVisibleFromClick) && instance.props.hideOnClick !== false && instance.state.isVisible) {
|
1282 | shouldScheduleClickHide = true;
|
1283 | } else {
|
1284 | var _getNormalizedTouchSe = getNormalizedTouchSettings(),
|
1285 | value = _getNormalizedTouchSe[0],
|
1286 | duration = _getNormalizedTouchSe[1];
|
1287 |
|
1288 | if (currentInput.isTouch && value === 'hold' && duration) {
|
1289 |
|
1290 |
|
1291 | showTimeout = setTimeout(function () {
|
1292 | scheduleShow(event);
|
1293 | }, duration);
|
1294 | } else {
|
1295 | scheduleShow(event);
|
1296 | }
|
1297 | }
|
1298 |
|
1299 | if (event.type === 'click') {
|
1300 | isVisibleFromClick = !shouldScheduleClickHide;
|
1301 | }
|
1302 |
|
1303 | if (shouldScheduleClickHide) {
|
1304 | scheduleHide(event);
|
1305 | }
|
1306 | }
|
1307 |
|
1308 | function onMouseMove(event) {
|
1309 | var isCursorOverReferenceOrPopper = closestCallback(event.target, function (el) {
|
1310 | return el === reference || el === popper;
|
1311 | });
|
1312 |
|
1313 | if (event.type === 'mousemove' && isCursorOverReferenceOrPopper) {
|
1314 | return;
|
1315 | }
|
1316 |
|
1317 | var popperTreeData = arrayFrom(popper.querySelectorAll(POPPER_SELECTOR)).concat(popper).map(function (popper) {
|
1318 | var instance = popper._tippy;
|
1319 | var tooltip = instance.popperChildren.tooltip;
|
1320 | var interactiveBorder = instance.props.interactiveBorder;
|
1321 | return {
|
1322 | popperRect: popper.getBoundingClientRect(),
|
1323 | tooltipRect: tooltip.getBoundingClientRect(),
|
1324 | interactiveBorder: interactiveBorder
|
1325 | };
|
1326 | });
|
1327 |
|
1328 | if (isCursorOutsideInteractiveBorder(popperTreeData, event)) {
|
1329 | cleanupInteractiveMouseListeners();
|
1330 | scheduleHide(event);
|
1331 | }
|
1332 | }
|
1333 |
|
1334 | function onMouseLeave(event) {
|
1335 | if (isEventListenerStopped(event)) {
|
1336 | return;
|
1337 | }
|
1338 |
|
1339 | if (includes(instance.props.trigger, 'click') && isVisibleFromClick) {
|
1340 | return;
|
1341 | }
|
1342 |
|
1343 | if (instance.props.interactive) {
|
1344 | doc.body.addEventListener('mouseleave', scheduleHide);
|
1345 | doc.addEventListener('mousemove', debouncedOnMouseMove);
|
1346 | pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);
|
1347 | debouncedOnMouseMove(event);
|
1348 | return;
|
1349 | }
|
1350 |
|
1351 | scheduleHide(event);
|
1352 | }
|
1353 |
|
1354 | function onBlurOrFocusOut(event) {
|
1355 | if (!includes(instance.props.trigger, 'focusin') && event.target !== getCurrentTarget()) {
|
1356 | return;
|
1357 | }
|
1358 |
|
1359 |
|
1360 | if (instance.props.interactive && event.relatedTarget && popper.contains(event.relatedTarget)) {
|
1361 | return;
|
1362 | }
|
1363 |
|
1364 | scheduleHide(event);
|
1365 | }
|
1366 |
|
1367 | function isEventListenerStopped(event) {
|
1368 | var supportsTouch = 'ontouchstart' in window;
|
1369 | var isTouchEvent = includes(event.type, 'touch');
|
1370 | var isCustomTouch = getIsCustomTouchBehavior();
|
1371 | return supportsTouch && currentInput.isTouch && isCustomTouch && !isTouchEvent || currentInput.isTouch && !isCustomTouch && isTouchEvent;
|
1372 | }
|
1373 |
|
1374 | function createPopperInstance() {
|
1375 | var popperOptions = instance.props.popperOptions;
|
1376 | var arrow = instance.popperChildren.arrow;
|
1377 | var flipModifier = getModifier(popperOptions, 'flip');
|
1378 | var preventOverflowModifier = getModifier(popperOptions, 'preventOverflow');
|
1379 | var distancePx;
|
1380 |
|
1381 | function applyMutations(data) {
|
1382 | var prevPlacement = instance.state.currentPlacement;
|
1383 | instance.state.currentPlacement = data.placement;
|
1384 |
|
1385 | if (instance.props.flip && !instance.props.flipOnUpdate) {
|
1386 | if (data.flipped) {
|
1387 | instance.popperInstance.options.placement = data.placement;
|
1388 | }
|
1389 |
|
1390 | setModifierValue(instance.popperInstance.modifiers, 'flip', 'enabled', false);
|
1391 | }
|
1392 |
|
1393 | tooltip.setAttribute('data-placement', data.placement);
|
1394 |
|
1395 | if (data.attributes['x-out-of-boundaries'] !== false) {
|
1396 | tooltip.setAttribute('data-out-of-boundaries', '');
|
1397 | } else {
|
1398 | tooltip.removeAttribute('data-out-of-boundaries');
|
1399 | }
|
1400 |
|
1401 | var basePlacement = getBasePlacement(data.placement);
|
1402 | var isVerticalPlacement = includes(['top', 'bottom'], basePlacement);
|
1403 | var isSecondaryPlacement = includes(['bottom', 'right'], basePlacement);
|
1404 |
|
1405 | tooltip.style.top = '0';
|
1406 | tooltip.style.left = '0';
|
1407 | tooltip.style[isVerticalPlacement ? 'top' : 'left'] = (isSecondaryPlacement ? 1 : -1) * distancePx + 'px';
|
1408 |
|
1409 |
|
1410 | if (prevPlacement && prevPlacement !== data.placement) {
|
1411 | instance.popperInstance.update();
|
1412 | }
|
1413 | }
|
1414 |
|
1415 | var config = _extends({
|
1416 | eventsEnabled: false,
|
1417 | placement: instance.props.placement
|
1418 | }, popperOptions, {
|
1419 | modifiers: _extends({}, popperOptions && popperOptions.modifiers, {
|
1420 |
|
1421 |
|
1422 |
|
1423 |
|
1424 |
|
1425 |
|
1426 |
|
1427 | tippyDistance: {
|
1428 | enabled: true,
|
1429 | order: 0,
|
1430 | fn: function fn(data) {
|
1431 |
|
1432 |
|
1433 | distancePx = getUnitsInPx(doc, instance.props.distance);
|
1434 | var basePlacement = getBasePlacement(data.placement);
|
1435 | var computedPreventOverflowPadding = getComputedPadding(basePlacement, preventOverflowModifier && preventOverflowModifier.padding, distancePx);
|
1436 | var computedFlipPadding = getComputedPadding(basePlacement, flipModifier && flipModifier.padding, distancePx);
|
1437 | var instanceModifiers = instance.popperInstance.modifiers;
|
1438 | setModifierValue(instanceModifiers, 'preventOverflow', 'padding', computedPreventOverflowPadding);
|
1439 | setModifierValue(instanceModifiers, 'flip', 'padding', computedFlipPadding);
|
1440 | return data;
|
1441 | }
|
1442 | },
|
1443 | preventOverflow: _extends({
|
1444 | boundariesElement: instance.props.boundary
|
1445 | }, preventOverflowModifier),
|
1446 | flip: _extends({
|
1447 | enabled: instance.props.flip,
|
1448 | behavior: instance.props.flipBehavior
|
1449 | }, flipModifier),
|
1450 | arrow: _extends({
|
1451 | element: arrow,
|
1452 | enabled: !!arrow
|
1453 | }, getModifier(popperOptions, 'arrow')),
|
1454 | offset: _extends({
|
1455 | offset: instance.props.offset
|
1456 | }, getModifier(popperOptions, 'offset'))
|
1457 | }),
|
1458 | onCreate: function onCreate(data) {
|
1459 | applyMutations(data);
|
1460 | preserveInvocation(popperOptions && popperOptions.onCreate, config.onCreate, [data]);
|
1461 | runMountCallback();
|
1462 | },
|
1463 | onUpdate: function onUpdate(data) {
|
1464 | applyMutations(data);
|
1465 | preserveInvocation(popperOptions && popperOptions.onUpdate, config.onUpdate, [data]);
|
1466 | runMountCallback();
|
1467 | }
|
1468 | });
|
1469 |
|
1470 | instance.popperInstance = new Popper(reference, popper, config);
|
1471 | }
|
1472 |
|
1473 | function runMountCallback() {
|
1474 |
|
1475 |
|
1476 | if (popperUpdates === 0) {
|
1477 | popperUpdates++;
|
1478 |
|
1479 | instance.popperInstance.update();
|
1480 | } else if (currentMountCallback && popperUpdates === 1) {
|
1481 | popperUpdates++;
|
1482 |
|
1483 | reflow(popper);
|
1484 | currentMountCallback();
|
1485 | }
|
1486 | }
|
1487 |
|
1488 | function mount() {
|
1489 |
|
1490 |
|
1491 | popperUpdates = 0;
|
1492 | var appendTo = instance.props.appendTo;
|
1493 | var parentNode;
|
1494 |
|
1495 |
|
1496 |
|
1497 |
|
1498 |
|
1499 | var node = getCurrentTarget();
|
1500 |
|
1501 | if (instance.props.interactive && appendTo === defaultProps.appendTo || appendTo === 'parent') {
|
1502 | parentNode = node.parentNode;
|
1503 | } else {
|
1504 | parentNode = invokeWithArgsOrReturn(appendTo, [node]);
|
1505 | }
|
1506 |
|
1507 |
|
1508 |
|
1509 | if (!parentNode.contains(popper)) {
|
1510 | parentNode.appendChild(popper);
|
1511 | }
|
1512 |
|
1513 | {
|
1514 |
|
1515 | warnWhen(instance.props.interactive && appendTo === defaultProps.appendTo && node.nextElementSibling !== popper, ['Interactive tippy element may not be accessible via keyboard navigation', 'because it is not directly after the reference element in the DOM source', 'order.', '\n\n', 'Using a wrapper <div> or <span> tag around the reference element solves', 'this by creating a new parentNode context.', '\n\n', 'Specifying `appendTo: document.body` silences this warning, but it', 'assumes you are using a focus management solution to handle keyboard', 'navigation.', '\n\n', 'See: https://atomiks.github.io/tippyjs/accessibility/#interactivity'].join(' '));
|
1516 | }
|
1517 |
|
1518 | setModifierValue(instance.popperInstance.modifiers, 'flip', 'enabled', instance.props.flip);
|
1519 | instance.popperInstance.enableEventListeners();
|
1520 |
|
1521 | instance.popperInstance.update();
|
1522 | }
|
1523 |
|
1524 | function scheduleShow(event) {
|
1525 | instance.clearDelayTimeouts();
|
1526 |
|
1527 | if (!instance.popperInstance) {
|
1528 | createPopperInstance();
|
1529 | }
|
1530 |
|
1531 | if (event) {
|
1532 | invokeHook('onTrigger', [instance, event]);
|
1533 | }
|
1534 |
|
1535 | addDocumentMouseDownListener();
|
1536 | var delay = getDelay(true);
|
1537 |
|
1538 | if (delay) {
|
1539 | showTimeout = setTimeout(function () {
|
1540 | instance.show();
|
1541 | }, delay);
|
1542 | } else {
|
1543 | instance.show();
|
1544 | }
|
1545 | }
|
1546 |
|
1547 | function scheduleHide(event) {
|
1548 | instance.clearDelayTimeouts();
|
1549 | invokeHook('onUntrigger', [instance, event]);
|
1550 |
|
1551 | if (!instance.state.isVisible) {
|
1552 | removeDocumentMouseDownListener();
|
1553 | return;
|
1554 | }
|
1555 |
|
1556 |
|
1557 |
|
1558 |
|
1559 |
|
1560 | if (includes(instance.props.trigger, 'mouseenter') && includes(instance.props.trigger, 'click') && includes(['mouseleave', 'mousemove'], event.type) && isVisibleFromClick) {
|
1561 | return;
|
1562 | }
|
1563 |
|
1564 | var delay = getDelay(false);
|
1565 |
|
1566 | if (delay) {
|
1567 | hideTimeout = setTimeout(function () {
|
1568 | if (instance.state.isVisible) {
|
1569 | instance.hide();
|
1570 | }
|
1571 | }, delay);
|
1572 | } else {
|
1573 |
|
1574 |
|
1575 | scheduleHideAnimationFrame = requestAnimationFrame(function () {
|
1576 | instance.hide();
|
1577 | });
|
1578 | }
|
1579 | }
|
1580 |
|
1581 |
|
1582 |
|
1583 | function enable() {
|
1584 | instance.state.isEnabled = true;
|
1585 | }
|
1586 |
|
1587 | function disable() {
|
1588 |
|
1589 |
|
1590 | instance.hide();
|
1591 | instance.state.isEnabled = false;
|
1592 | }
|
1593 |
|
1594 | function clearDelayTimeouts() {
|
1595 | clearTimeout(showTimeout);
|
1596 | clearTimeout(hideTimeout);
|
1597 | cancelAnimationFrame(scheduleHideAnimationFrame);
|
1598 | }
|
1599 |
|
1600 | function setProps(partialProps) {
|
1601 | {
|
1602 | warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('setProps'));
|
1603 | }
|
1604 |
|
1605 | if (instance.state.isDestroyed) {
|
1606 | return;
|
1607 | }
|
1608 |
|
1609 | {
|
1610 | validateProps(partialProps, plugins);
|
1611 | warnWhen(partialProps.plugins ? partialProps.plugins.length !== plugins.length || plugins.some(function (p, i) {
|
1612 | if (partialProps.plugins && partialProps.plugins[i]) {
|
1613 | return p !== partialProps.plugins[i];
|
1614 | } else {
|
1615 | return true;
|
1616 | }
|
1617 | }) : false, "Cannot update plugins");
|
1618 | }
|
1619 |
|
1620 | invokeHook('onBeforeUpdate', [instance, partialProps]);
|
1621 | removeListenersFromTriggerTarget();
|
1622 | var prevProps = instance.props;
|
1623 | var nextProps = evaluateProps(reference, _extends({}, instance.props, {}, partialProps, {
|
1624 | ignoreAttributes: true
|
1625 | }));
|
1626 | nextProps.ignoreAttributes = useIfDefined(partialProps.ignoreAttributes, prevProps.ignoreAttributes);
|
1627 | instance.props = nextProps;
|
1628 | addListenersToTriggerTarget();
|
1629 |
|
1630 | if (prevProps.interactiveDebounce !== nextProps.interactiveDebounce) {
|
1631 | cleanupInteractiveMouseListeners();
|
1632 | debouncedOnMouseMove = debounce(onMouseMove, nextProps.interactiveDebounce);
|
1633 | }
|
1634 |
|
1635 | updatePopperElement(popper, prevProps, nextProps);
|
1636 | instance.popperChildren = getChildren(popper);
|
1637 |
|
1638 | if (prevProps.triggerTarget && !nextProps.triggerTarget) {
|
1639 | normalizeToArray(prevProps.triggerTarget).forEach(function (node) {
|
1640 | node.removeAttribute('aria-expanded');
|
1641 | });
|
1642 | } else if (nextProps.triggerTarget) {
|
1643 | reference.removeAttribute('aria-expanded');
|
1644 | }
|
1645 |
|
1646 | handleAriaExpandedAttribute();
|
1647 |
|
1648 | if (instance.popperInstance) {
|
1649 | if (POPPER_INSTANCE_DEPENDENCIES.some(function (prop) {
|
1650 | return hasOwnProperty(partialProps, prop) && partialProps[prop] !== prevProps[prop];
|
1651 | })) {
|
1652 | var currentReference = instance.popperInstance.reference;
|
1653 | instance.popperInstance.destroy();
|
1654 | createPopperInstance();
|
1655 | instance.popperInstance.reference = currentReference;
|
1656 |
|
1657 | if (instance.state.isVisible) {
|
1658 | instance.popperInstance.enableEventListeners();
|
1659 | }
|
1660 | } else {
|
1661 | instance.popperInstance.update();
|
1662 | }
|
1663 | }
|
1664 |
|
1665 | invokeHook('onAfterUpdate', [instance, partialProps]);
|
1666 | }
|
1667 |
|
1668 | function setContent(content) {
|
1669 | instance.setProps({
|
1670 | content: content
|
1671 | });
|
1672 | }
|
1673 |
|
1674 | function show(duration) {
|
1675 | if (duration === void 0) {
|
1676 | duration = getValueAtIndexOrReturn(instance.props.duration, 0, defaultProps.duration);
|
1677 | }
|
1678 |
|
1679 | {
|
1680 | warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('show'));
|
1681 | }
|
1682 |
|
1683 |
|
1684 | var isAlreadyVisible = instance.state.isVisible;
|
1685 | var isDestroyed = instance.state.isDestroyed;
|
1686 | var isDisabled = !instance.state.isEnabled;
|
1687 | var isTouchAndTouchDisabled = currentInput.isTouch && !instance.props.touch;
|
1688 |
|
1689 | if (isAlreadyVisible || isDestroyed || isDisabled || isTouchAndTouchDisabled) {
|
1690 | return;
|
1691 | }
|
1692 |
|
1693 |
|
1694 |
|
1695 |
|
1696 | if (getCurrentTarget().hasAttribute('disabled')) {
|
1697 | return;
|
1698 | }
|
1699 |
|
1700 | if (!instance.popperInstance) {
|
1701 | createPopperInstance();
|
1702 | }
|
1703 |
|
1704 | invokeHook('onShow', [instance], false);
|
1705 |
|
1706 | if (instance.props.onShow(instance) === false) {
|
1707 | return;
|
1708 | }
|
1709 |
|
1710 | addDocumentMouseDownListener();
|
1711 | popper.style.visibility = 'visible';
|
1712 | instance.state.isVisible = true;
|
1713 |
|
1714 |
|
1715 |
|
1716 |
|
1717 | if (!instance.state.isMounted) {
|
1718 | setTransitionDuration(transitionableElements.concat(popper), 0);
|
1719 | }
|
1720 |
|
1721 | currentMountCallback = function currentMountCallback() {
|
1722 | if (!instance.state.isVisible) {
|
1723 | return;
|
1724 | }
|
1725 |
|
1726 | setTransitionDuration([popper], instance.props.updateDuration);
|
1727 | setTransitionDuration(transitionableElements, duration);
|
1728 | setVisibilityState(transitionableElements, 'visible');
|
1729 | handleAriaDescribedByAttribute();
|
1730 | handleAriaExpandedAttribute();
|
1731 | pushIfUnique(mountedInstances, instance);
|
1732 | updateIOSClass(true);
|
1733 | instance.state.isMounted = true;
|
1734 | invokeHook('onMount', [instance]);
|
1735 | onTransitionedIn(duration, function () {
|
1736 | instance.state.isShown = true;
|
1737 | invokeHook('onShown', [instance]);
|
1738 | });
|
1739 | };
|
1740 |
|
1741 | mount();
|
1742 | }
|
1743 |
|
1744 | function hide(duration) {
|
1745 | if (duration === void 0) {
|
1746 | duration = getValueAtIndexOrReturn(instance.props.duration, 1, defaultProps.duration);
|
1747 | }
|
1748 |
|
1749 | {
|
1750 | warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('hide'));
|
1751 | }
|
1752 |
|
1753 |
|
1754 | var isAlreadyHidden = !instance.state.isVisible && !isBeingDestroyed;
|
1755 | var isDestroyed = instance.state.isDestroyed;
|
1756 | var isDisabled = !instance.state.isEnabled && !isBeingDestroyed;
|
1757 |
|
1758 | if (isAlreadyHidden || isDestroyed || isDisabled) {
|
1759 | return;
|
1760 | }
|
1761 |
|
1762 | invokeHook('onHide', [instance], false);
|
1763 |
|
1764 | if (instance.props.onHide(instance) === false && !isBeingDestroyed) {
|
1765 | return;
|
1766 | }
|
1767 |
|
1768 | removeDocumentMouseDownListener();
|
1769 | popper.style.visibility = 'hidden';
|
1770 | instance.state.isVisible = false;
|
1771 | instance.state.isShown = false;
|
1772 | setTransitionDuration(transitionableElements, duration);
|
1773 | setVisibilityState(transitionableElements, 'hidden');
|
1774 | handleAriaDescribedByAttribute();
|
1775 | handleAriaExpandedAttribute();
|
1776 | onTransitionedOut(duration, function () {
|
1777 | instance.popperInstance.disableEventListeners();
|
1778 | instance.popperInstance.options.placement = instance.props.placement;
|
1779 | popper.parentNode.removeChild(popper);
|
1780 | mountedInstances = mountedInstances.filter(function (i) {
|
1781 | return i !== instance;
|
1782 | });
|
1783 |
|
1784 | if (mountedInstances.length === 0) {
|
1785 | updateIOSClass(false);
|
1786 | }
|
1787 |
|
1788 | instance.state.isMounted = false;
|
1789 | invokeHook('onHidden', [instance]);
|
1790 | });
|
1791 | }
|
1792 |
|
1793 | function destroy() {
|
1794 | {
|
1795 | warnWhen(instance.state.isDestroyed, createMemoryLeakWarning('destroy'));
|
1796 | }
|
1797 |
|
1798 | if (instance.state.isDestroyed) {
|
1799 | return;
|
1800 | }
|
1801 |
|
1802 | isBeingDestroyed = true;
|
1803 | instance.clearDelayTimeouts();
|
1804 | instance.hide(0);
|
1805 | removeListenersFromTriggerTarget();
|
1806 | delete reference._tippy;
|
1807 |
|
1808 | if (instance.popperInstance) {
|
1809 | instance.popperInstance.destroy();
|
1810 | }
|
1811 |
|
1812 | isBeingDestroyed = false;
|
1813 | instance.state.isDestroyed = true;
|
1814 | invokeHook('onDestroy', [instance]);
|
1815 | }
|
1816 | }
|
1817 |
|
1818 | function tippy(targets, optionalProps,
|
1819 | /** @deprecated use Props.plugins */
|
1820 | plugins) {
|
1821 | if (optionalProps === void 0) {
|
1822 | optionalProps = {};
|
1823 | }
|
1824 |
|
1825 | if (plugins === void 0) {
|
1826 | plugins = [];
|
1827 | }
|
1828 |
|
1829 | plugins = defaultProps.plugins.concat(optionalProps.plugins || plugins);
|
1830 |
|
1831 | {
|
1832 | validateTargets(targets);
|
1833 | validateProps(optionalProps, plugins);
|
1834 | }
|
1835 |
|
1836 | bindGlobalEventListeners();
|
1837 |
|
1838 | var passedProps = _extends({}, optionalProps, {
|
1839 | plugins: plugins
|
1840 | });
|
1841 |
|
1842 | var elements = getArrayOfElements(targets);
|
1843 |
|
1844 | {
|
1845 | var isSingleContentElement = isElement(passedProps.content);
|
1846 | var isMoreThanOneReferenceElement = elements.length > 1;
|
1847 | warnWhen(isSingleContentElement && isMoreThanOneReferenceElement, ['tippy() was passed an Element as the `content` prop, but more than one tippy', 'instance was created by this invocation. This means the content element will', 'only be appended to the last tippy instance.', '\n\n', 'Instead, pass the .innerHTML of the element, or use a function that returns a', 'cloned version of the element instead.', '\n\n', '1) content: element.innerHTML\n', '2) content: () => element.cloneNode(true)'].join(' '));
|
1848 | }
|
1849 |
|
1850 | var instances = elements.reduce(function (acc, reference) {
|
1851 | var instance = reference && createTippy(reference, passedProps);
|
1852 |
|
1853 | if (instance) {
|
1854 | acc.push(instance);
|
1855 | }
|
1856 |
|
1857 | return acc;
|
1858 | }, []);
|
1859 | return isElement(targets) ? instances[0] : instances;
|
1860 | }
|
1861 |
|
1862 | tippy.version = version;
|
1863 | tippy.defaultProps = defaultProps;
|
1864 | tippy.setDefaultProps = setDefaultProps;
|
1865 | tippy.currentInput = currentInput;
|
1866 | |
1867 |
|
1868 |
|
1869 |
|
1870 | var hideAll = function hideAll(_temp) {
|
1871 | var _ref = _temp === void 0 ? {} : _temp,
|
1872 | excludedReferenceOrInstance = _ref.exclude,
|
1873 | duration = _ref.duration;
|
1874 |
|
1875 | mountedInstances.forEach(function (instance) {
|
1876 | var isExcluded = false;
|
1877 |
|
1878 | if (excludedReferenceOrInstance) {
|
1879 | isExcluded = isReferenceElement(excludedReferenceOrInstance) ? instance.reference === excludedReferenceOrInstance : instance.popper === excludedReferenceOrInstance.popper;
|
1880 | }
|
1881 |
|
1882 | if (!isExcluded) {
|
1883 | instance.hide(duration);
|
1884 | }
|
1885 | });
|
1886 | };
|
1887 |
|
1888 | |
1889 |
|
1890 |
|
1891 |
|
1892 |
|
1893 | var createSingleton = function createSingleton(tippyInstances, optionalProps,
|
1894 | /** @deprecated use Props.plugins */
|
1895 | plugins) {
|
1896 | if (optionalProps === void 0) {
|
1897 | optionalProps = {};
|
1898 | }
|
1899 |
|
1900 | if (plugins === void 0) {
|
1901 | plugins = [];
|
1902 | }
|
1903 |
|
1904 | {
|
1905 | errorWhen(!Array.isArray(tippyInstances), ['The first argument passed to createSingleton() must be an array of tippy', 'instances. The passed value was', String(tippyInstances)].join(' '));
|
1906 | }
|
1907 |
|
1908 | plugins = optionalProps.plugins || plugins;
|
1909 | tippyInstances.forEach(function (instance) {
|
1910 | instance.disable();
|
1911 | });
|
1912 |
|
1913 | var userAria = _extends({}, defaultProps, {}, optionalProps).aria;
|
1914 |
|
1915 | var currentAria;
|
1916 | var currentTarget;
|
1917 | var shouldSkipUpdate = false;
|
1918 | var references = tippyInstances.map(function (instance) {
|
1919 | return instance.reference;
|
1920 | });
|
1921 | var singleton = {
|
1922 | fn: function fn(instance) {
|
1923 | function handleAriaDescribedByAttribute(isShow) {
|
1924 | if (!currentAria) {
|
1925 | return;
|
1926 | }
|
1927 |
|
1928 | var attr = "aria-" + currentAria;
|
1929 |
|
1930 | if (isShow && !instance.props.interactive) {
|
1931 | currentTarget.setAttribute(attr, instance.popperChildren.tooltip.id);
|
1932 | } else {
|
1933 | currentTarget.removeAttribute(attr);
|
1934 | }
|
1935 | }
|
1936 |
|
1937 | return {
|
1938 | onAfterUpdate: function onAfterUpdate(_, _ref) {
|
1939 | var aria = _ref.aria;
|
1940 |
|
1941 |
|
1942 |
|
1943 | if (aria !== undefined && aria !== userAria) {
|
1944 | if (!shouldSkipUpdate) {
|
1945 | userAria = aria;
|
1946 | } else {
|
1947 | shouldSkipUpdate = true;
|
1948 | instance.setProps({
|
1949 | aria: null
|
1950 | });
|
1951 | shouldSkipUpdate = false;
|
1952 | }
|
1953 | }
|
1954 | },
|
1955 | onDestroy: function onDestroy() {
|
1956 | tippyInstances.forEach(function (instance) {
|
1957 | instance.enable();
|
1958 | });
|
1959 | },
|
1960 | onMount: function onMount() {
|
1961 | handleAriaDescribedByAttribute(true);
|
1962 | },
|
1963 | onUntrigger: function onUntrigger() {
|
1964 | handleAriaDescribedByAttribute(false);
|
1965 | },
|
1966 | onTrigger: function onTrigger(_, event) {
|
1967 | var target = event.currentTarget;
|
1968 | var index = references.indexOf(target);
|
1969 |
|
1970 | if (target === currentTarget) {
|
1971 | return;
|
1972 | }
|
1973 |
|
1974 | currentTarget = target;
|
1975 | currentAria = userAria;
|
1976 |
|
1977 | if (instance.state.isVisible) {
|
1978 | handleAriaDescribedByAttribute(true);
|
1979 | }
|
1980 |
|
1981 | instance.popperInstance.reference = target;
|
1982 | instance.setContent(tippyInstances[index].props.content);
|
1983 | }
|
1984 | };
|
1985 | }
|
1986 | };
|
1987 | return tippy(div(), _extends({}, optionalProps, {
|
1988 | plugins: [singleton].concat(plugins),
|
1989 | aria: null,
|
1990 | triggerTarget: references
|
1991 | }));
|
1992 | };
|
1993 |
|
1994 | var BUBBLING_EVENTS_MAP = {
|
1995 | mouseover: 'mouseenter',
|
1996 | focusin: 'focus',
|
1997 | click: 'click'
|
1998 | };
|
1999 | |
2000 |
|
2001 |
|
2002 |
|
2003 |
|
2004 | function delegate(targets, props,
|
2005 | /** @deprecated use Props.plugins */
|
2006 | plugins) {
|
2007 | if (plugins === void 0) {
|
2008 | plugins = [];
|
2009 | }
|
2010 |
|
2011 | {
|
2012 | errorWhen(!(props && props.target), ['You must specity a `target` prop indicating a CSS selector string matching', 'the target elements that should receive a tippy.'].join(' '));
|
2013 | }
|
2014 |
|
2015 | plugins = props.plugins || plugins;
|
2016 | var listeners = [];
|
2017 | var childTippyInstances = [];
|
2018 | var target = props.target;
|
2019 | var nativeProps = removeProperties(props, ['target']);
|
2020 |
|
2021 | var parentProps = _extends({}, nativeProps, {
|
2022 | plugins: plugins,
|
2023 | trigger: 'manual'
|
2024 | });
|
2025 |
|
2026 | var childProps = _extends({}, nativeProps, {
|
2027 | plugins: plugins,
|
2028 | showOnCreate: true
|
2029 | });
|
2030 |
|
2031 | var returnValue = tippy(targets, parentProps);
|
2032 | var normalizedReturnValue = normalizeToArray(returnValue);
|
2033 |
|
2034 | function onTrigger(event) {
|
2035 | if (!event.target) {
|
2036 | return;
|
2037 | }
|
2038 |
|
2039 | var targetNode = event.target.closest(target);
|
2040 |
|
2041 | if (!targetNode) {
|
2042 | return;
|
2043 | }
|
2044 |
|
2045 |
|
2046 |
|
2047 |
|
2048 |
|
2049 | var trigger = targetNode.getAttribute('data-tippy-trigger') || props.trigger || defaultProps.trigger;
|
2050 |
|
2051 | if (!includes(trigger, BUBBLING_EVENTS_MAP[event.type])) {
|
2052 | return;
|
2053 | }
|
2054 |
|
2055 | var instance = tippy(targetNode, childProps);
|
2056 |
|
2057 | if (instance) {
|
2058 | childTippyInstances = childTippyInstances.concat(instance);
|
2059 | }
|
2060 | }
|
2061 |
|
2062 | function on(node, eventType, handler, options) {
|
2063 | if (options === void 0) {
|
2064 | options = false;
|
2065 | }
|
2066 |
|
2067 | node.addEventListener(eventType, handler, options);
|
2068 | listeners.push({
|
2069 | node: node,
|
2070 | eventType: eventType,
|
2071 | handler: handler,
|
2072 | options: options
|
2073 | });
|
2074 | }
|
2075 |
|
2076 | function addEventListeners(instance) {
|
2077 | var reference = instance.reference;
|
2078 | on(reference, 'mouseover', onTrigger);
|
2079 | on(reference, 'focusin', onTrigger);
|
2080 | on(reference, 'click', onTrigger);
|
2081 | }
|
2082 |
|
2083 | function removeEventListeners() {
|
2084 | listeners.forEach(function (_ref) {
|
2085 | var node = _ref.node,
|
2086 | eventType = _ref.eventType,
|
2087 | handler = _ref.handler,
|
2088 | options = _ref.options;
|
2089 | node.removeEventListener(eventType, handler, options);
|
2090 | });
|
2091 | listeners = [];
|
2092 | }
|
2093 |
|
2094 | function applyMutations(instance) {
|
2095 | var originalDestroy = instance.destroy;
|
2096 |
|
2097 | instance.destroy = function (shouldDestroyChildInstances) {
|
2098 | if (shouldDestroyChildInstances === void 0) {
|
2099 | shouldDestroyChildInstances = true;
|
2100 | }
|
2101 |
|
2102 | if (shouldDestroyChildInstances) {
|
2103 | childTippyInstances.forEach(function (instance) {
|
2104 | instance.destroy();
|
2105 | });
|
2106 | }
|
2107 |
|
2108 | childTippyInstances = [];
|
2109 | removeEventListeners();
|
2110 | originalDestroy();
|
2111 | };
|
2112 |
|
2113 | addEventListeners(instance);
|
2114 | }
|
2115 |
|
2116 | normalizedReturnValue.forEach(applyMutations);
|
2117 | return returnValue;
|
2118 | }
|
2119 |
|
2120 | var animateFill = {
|
2121 | name: 'animateFill',
|
2122 | defaultValue: false,
|
2123 | fn: function fn(instance) {
|
2124 | var _instance$popperChild = instance.popperChildren,
|
2125 | tooltip = _instance$popperChild.tooltip,
|
2126 | content = _instance$popperChild.content;
|
2127 | var backdrop = instance.props.animateFill ? createBackdropElement() : null;
|
2128 |
|
2129 | function addBackdropToPopperChildren() {
|
2130 | instance.popperChildren.backdrop = backdrop;
|
2131 | }
|
2132 |
|
2133 | return {
|
2134 | onCreate: function onCreate() {
|
2135 | if (backdrop) {
|
2136 | addBackdropToPopperChildren();
|
2137 | tooltip.insertBefore(backdrop, tooltip.firstElementChild);
|
2138 | tooltip.setAttribute('data-animatefill', '');
|
2139 | tooltip.style.overflow = 'hidden';
|
2140 | instance.setProps({
|
2141 | animation: 'shift-away',
|
2142 | arrow: false
|
2143 | });
|
2144 | }
|
2145 | },
|
2146 | onMount: function onMount() {
|
2147 | if (backdrop) {
|
2148 | var transitionDuration = tooltip.style.transitionDuration;
|
2149 | var duration = Number(transitionDuration.replace('ms', ''));
|
2150 |
|
2151 |
|
2152 |
|
2153 | content.style.transitionDelay = Math.round(duration / 10) + "ms";
|
2154 | backdrop.style.transitionDuration = transitionDuration;
|
2155 | setVisibilityState([backdrop], 'visible');
|
2156 |
|
2157 | {
|
2158 | warnWhen(getComputedStyle(backdrop).position !== 'absolute', "The `tippy.js/dist/backdrop.css` stylesheet has not been\n imported!\n \n The `animateFill` plugin requires this stylesheet to work.");
|
2159 | warnWhen(getComputedStyle(tooltip).transform === 'none', "The `tippy.js/animations/shift-away.css` stylesheet has not\n been imported!\n \n The `animateFill` plugin requires this stylesheet to work.");
|
2160 | }
|
2161 | }
|
2162 | },
|
2163 | onShow: function onShow() {
|
2164 | if (backdrop) {
|
2165 | backdrop.style.transitionDuration = '0ms';
|
2166 | }
|
2167 | },
|
2168 | onHide: function onHide() {
|
2169 | if (backdrop) {
|
2170 | setVisibilityState([backdrop], 'hidden');
|
2171 | }
|
2172 | },
|
2173 | onAfterUpdate: function onAfterUpdate() {
|
2174 |
|
2175 |
|
2176 |
|
2177 | addBackdropToPopperChildren();
|
2178 | }
|
2179 | };
|
2180 | }
|
2181 | };
|
2182 |
|
2183 | function createBackdropElement() {
|
2184 | var backdrop = div();
|
2185 | backdrop.className = BACKDROP_CLASS;
|
2186 | setVisibilityState([backdrop], 'hidden');
|
2187 | return backdrop;
|
2188 | }
|
2189 |
|
2190 | var followCursor = {
|
2191 | name: 'followCursor',
|
2192 | defaultValue: false,
|
2193 | fn: function fn(instance) {
|
2194 | var reference = instance.reference,
|
2195 | popper = instance.popper;
|
2196 | var originalReference = null;
|
2197 |
|
2198 |
|
2199 |
|
2200 | var doc = getOwnerDocument(instance.props.triggerTarget || reference);
|
2201 |
|
2202 | var lastMouseMoveEvent;
|
2203 | var mouseCoords = null;
|
2204 | var isInternallySettingControlledProp = false;
|
2205 |
|
2206 |
|
2207 | var userProps = instance.props;
|
2208 |
|
2209 | function setUserProps(props) {
|
2210 | var keys = Object.keys(props);
|
2211 | keys.forEach(function (prop) {
|
2212 | userProps[prop] = useIfDefined(props[prop], userProps[prop]);
|
2213 | });
|
2214 | }
|
2215 |
|
2216 | function getIsManual() {
|
2217 | return instance.props.trigger.trim() === 'manual';
|
2218 | }
|
2219 |
|
2220 | function getIsEnabled() {
|
2221 |
|
2222 | var isValidMouseEvent = getIsManual() ? true :
|
2223 | mouseCoords !== null && !(mouseCoords.clientX === 0 && mouseCoords.clientY === 0);
|
2224 | return instance.props.followCursor && isValidMouseEvent;
|
2225 | }
|
2226 |
|
2227 | function getIsInitialBehavior() {
|
2228 | return currentInput.isTouch || instance.props.followCursor === 'initial' && instance.state.isVisible;
|
2229 | }
|
2230 |
|
2231 | function resetReference() {
|
2232 | if (instance.popperInstance && originalReference) {
|
2233 | instance.popperInstance.reference = originalReference;
|
2234 | }
|
2235 | }
|
2236 |
|
2237 | function handlePlacement() {
|
2238 |
|
2239 |
|
2240 |
|
2241 | if (!getIsEnabled() && instance.props.placement === userProps.placement) {
|
2242 | return;
|
2243 | }
|
2244 |
|
2245 | var placement = userProps.placement;
|
2246 | var shift = placement.split('-')[1];
|
2247 | isInternallySettingControlledProp = true;
|
2248 | instance.setProps({
|
2249 | placement: getIsEnabled() && shift ? placement.replace(shift, shift === 'start' ? 'end' : 'start') : placement
|
2250 | });
|
2251 | isInternallySettingControlledProp = false;
|
2252 | }
|
2253 |
|
2254 | function handlePopperListeners() {
|
2255 | if (!instance.popperInstance) {
|
2256 | return;
|
2257 | }
|
2258 |
|
2259 |
|
2260 |
|
2261 |
|
2262 | if (getIsEnabled() && getIsInitialBehavior()) {
|
2263 | instance.popperInstance.disableEventListeners();
|
2264 | }
|
2265 | }
|
2266 |
|
2267 | function handleMouseMoveListener() {
|
2268 | if (getIsEnabled()) {
|
2269 | addListener();
|
2270 | } else {
|
2271 | resetReference();
|
2272 | }
|
2273 | }
|
2274 |
|
2275 | function triggerLastMouseMove() {
|
2276 | if (getIsEnabled()) {
|
2277 | onMouseMove(lastMouseMoveEvent);
|
2278 | }
|
2279 | }
|
2280 |
|
2281 | function addListener() {
|
2282 | doc.addEventListener('mousemove', onMouseMove);
|
2283 | }
|
2284 |
|
2285 | function removeListener() {
|
2286 | doc.removeEventListener('mousemove', onMouseMove);
|
2287 | }
|
2288 |
|
2289 | function onMouseMove(event) {
|
2290 | var _lastMouseMoveEvent = lastMouseMoveEvent = event,
|
2291 | clientX = _lastMouseMoveEvent.clientX,
|
2292 | clientY = _lastMouseMoveEvent.clientY;
|
2293 |
|
2294 | if (!instance.popperInstance || !instance.state.currentPlacement) {
|
2295 | return;
|
2296 | }
|
2297 |
|
2298 |
|
2299 |
|
2300 | var isCursorOverReference = closestCallback(event.target, function (el) {
|
2301 | return el === reference;
|
2302 | });
|
2303 | var followCursor = instance.props.followCursor;
|
2304 | var isHorizontal = followCursor === 'horizontal';
|
2305 | var isVertical = followCursor === 'vertical';
|
2306 | var isVerticalPlacement = includes(['top', 'bottom'], getBasePlacement(instance.state.currentPlacement));
|
2307 |
|
2308 | var _getVirtualOffsets = getVirtualOffsets(popper, isVerticalPlacement),
|
2309 | size = _getVirtualOffsets.size,
|
2310 | x = _getVirtualOffsets.x,
|
2311 | y = _getVirtualOffsets.y;
|
2312 |
|
2313 | if (isCursorOverReference || !instance.props.interactive) {
|
2314 |
|
2315 |
|
2316 | if (originalReference === null) {
|
2317 | originalReference = instance.popperInstance.reference;
|
2318 | }
|
2319 |
|
2320 | instance.popperInstance.reference = {
|
2321 | referenceNode: reference,
|
2322 |
|
2323 | clientWidth: 0,
|
2324 | clientHeight: 0,
|
2325 | getBoundingClientRect: function getBoundingClientRect() {
|
2326 | var rect = reference.getBoundingClientRect();
|
2327 | return {
|
2328 | width: isVerticalPlacement ? size : 0,
|
2329 | height: isVerticalPlacement ? 0 : size,
|
2330 | top: (isHorizontal ? rect.top : clientY) - y,
|
2331 | bottom: (isHorizontal ? rect.bottom : clientY) + y,
|
2332 | left: (isVertical ? rect.left : clientX) - x,
|
2333 | right: (isVertical ? rect.right : clientX) + x
|
2334 | };
|
2335 | }
|
2336 | };
|
2337 | instance.popperInstance.update();
|
2338 | }
|
2339 |
|
2340 | if (getIsInitialBehavior()) {
|
2341 | removeListener();
|
2342 | }
|
2343 | }
|
2344 |
|
2345 | return {
|
2346 | onAfterUpdate: function onAfterUpdate(_, partialProps) {
|
2347 | if (!isInternallySettingControlledProp) {
|
2348 | setUserProps(partialProps);
|
2349 |
|
2350 | if (partialProps.placement) {
|
2351 | handlePlacement();
|
2352 | }
|
2353 | }
|
2354 |
|
2355 |
|
2356 | if (partialProps.placement) {
|
2357 | handlePopperListeners();
|
2358 | }
|
2359 |
|
2360 |
|
2361 |
|
2362 | requestAnimationFrame(triggerLastMouseMove);
|
2363 | },
|
2364 | onMount: function onMount() {
|
2365 | triggerLastMouseMove();
|
2366 | handlePopperListeners();
|
2367 | },
|
2368 | onShow: function onShow() {
|
2369 | if (getIsManual()) {
|
2370 |
|
2371 |
|
2372 | mouseCoords = {
|
2373 | clientX: 0,
|
2374 | clientY: 0
|
2375 | };
|
2376 |
|
2377 |
|
2378 | lastMouseMoveEvent = mouseCoords;
|
2379 | handlePlacement();
|
2380 | handleMouseMoveListener();
|
2381 | }
|
2382 | },
|
2383 | onTrigger: function onTrigger(_, event) {
|
2384 |
|
2385 | if (mouseCoords) {
|
2386 | return;
|
2387 | }
|
2388 |
|
2389 | if (isMouseEvent(event)) {
|
2390 | mouseCoords = {
|
2391 | clientX: event.clientX,
|
2392 | clientY: event.clientY
|
2393 | };
|
2394 | lastMouseMoveEvent = event;
|
2395 | }
|
2396 |
|
2397 | handlePlacement();
|
2398 | handleMouseMoveListener();
|
2399 | },
|
2400 | onUntrigger: function onUntrigger() {
|
2401 |
|
2402 | if (!instance.state.isVisible) {
|
2403 | removeListener();
|
2404 | mouseCoords = null;
|
2405 | }
|
2406 | },
|
2407 | onHidden: function onHidden() {
|
2408 | removeListener();
|
2409 | resetReference();
|
2410 | mouseCoords = null;
|
2411 | }
|
2412 | };
|
2413 | }
|
2414 | };
|
2415 | function getVirtualOffsets(popper, isVerticalPlacement) {
|
2416 | var size = isVerticalPlacement ? popper.offsetWidth : popper.offsetHeight;
|
2417 | return {
|
2418 | size: size,
|
2419 | x: isVerticalPlacement ? size : 0,
|
2420 | y: isVerticalPlacement ? 0 : size
|
2421 | };
|
2422 | }
|
2423 |
|
2424 |
|
2425 |
|
2426 |
|
2427 | var inlinePositioning = {
|
2428 | name: 'inlinePositioning',
|
2429 | defaultValue: false,
|
2430 | fn: function fn(instance) {
|
2431 | var reference = instance.reference;
|
2432 |
|
2433 | function getIsEnabled() {
|
2434 | return !!instance.props.inlinePositioning;
|
2435 | }
|
2436 |
|
2437 | return {
|
2438 | onHidden: function onHidden() {
|
2439 | if (getIsEnabled()) {
|
2440 | instance.popperInstance.reference = reference;
|
2441 | }
|
2442 | },
|
2443 | onShow: function onShow() {
|
2444 | if (!getIsEnabled()) {
|
2445 | return;
|
2446 | }
|
2447 |
|
2448 | instance.popperInstance.reference = {
|
2449 | referenceNode: reference,
|
2450 |
|
2451 | clientWidth: 0,
|
2452 | clientHeight: 0,
|
2453 | getBoundingClientRect: function getBoundingClientRect() {
|
2454 | return getInlineBoundingClientRect(instance.state.currentPlacement && getBasePlacement(instance.state.currentPlacement), reference.getBoundingClientRect(), arrayFrom(reference.getClientRects()));
|
2455 | }
|
2456 | };
|
2457 | }
|
2458 | };
|
2459 | }
|
2460 | };
|
2461 | function getInlineBoundingClientRect(currentBasePlacement, boundingRect, clientRects) {
|
2462 |
|
2463 | if (clientRects.length < 2 || currentBasePlacement === null) {
|
2464 | return boundingRect;
|
2465 | }
|
2466 |
|
2467 | switch (currentBasePlacement) {
|
2468 | case 'top':
|
2469 | case 'bottom':
|
2470 | {
|
2471 | var firstRect = clientRects[0];
|
2472 | var lastRect = clientRects[clientRects.length - 1];
|
2473 | var isTop = currentBasePlacement === 'top';
|
2474 | var top = firstRect.top;
|
2475 | var bottom = lastRect.bottom;
|
2476 | var left = isTop ? firstRect.left : lastRect.left;
|
2477 | var right = isTop ? firstRect.right : lastRect.right;
|
2478 | var width = right - left;
|
2479 | var height = bottom - top;
|
2480 | return {
|
2481 | top: top,
|
2482 | bottom: bottom,
|
2483 | left: left,
|
2484 | right: right,
|
2485 | width: width,
|
2486 | height: height
|
2487 | };
|
2488 | }
|
2489 |
|
2490 | case 'left':
|
2491 | case 'right':
|
2492 | {
|
2493 | var minLeft = Math.min.apply(Math, clientRects.map(function (rects) {
|
2494 | return rects.left;
|
2495 | }));
|
2496 | var maxRight = Math.max.apply(Math, clientRects.map(function (rects) {
|
2497 | return rects.right;
|
2498 | }));
|
2499 | var measureRects = clientRects.filter(function (rect) {
|
2500 | return currentBasePlacement === 'left' ? rect.left === minLeft : rect.right === maxRight;
|
2501 | });
|
2502 | var _top = measureRects[0].top;
|
2503 | var _bottom = measureRects[measureRects.length - 1].bottom;
|
2504 | var _left = minLeft;
|
2505 | var _right = maxRight;
|
2506 |
|
2507 | var _width = _right - _left;
|
2508 |
|
2509 | var _height = _bottom - _top;
|
2510 |
|
2511 | return {
|
2512 | top: _top,
|
2513 | bottom: _bottom,
|
2514 | left: _left,
|
2515 | right: _right,
|
2516 | width: _width,
|
2517 | height: _height
|
2518 | };
|
2519 | }
|
2520 |
|
2521 | default:
|
2522 | {
|
2523 | return boundingRect;
|
2524 | }
|
2525 | }
|
2526 | }
|
2527 |
|
2528 | var sticky = {
|
2529 | name: 'sticky',
|
2530 | defaultValue: false,
|
2531 | fn: function fn(instance) {
|
2532 | var reference = instance.reference,
|
2533 | popper = instance.popper;
|
2534 |
|
2535 | function getReference() {
|
2536 | return instance.popperInstance ? instance.popperInstance.reference : reference;
|
2537 | }
|
2538 |
|
2539 | function shouldCheck(value) {
|
2540 | return instance.props.sticky === true || instance.props.sticky === value;
|
2541 | }
|
2542 |
|
2543 | var prevRefRect = null;
|
2544 | var prevPopRect = null;
|
2545 |
|
2546 | function updatePosition() {
|
2547 | var currentRefRect = shouldCheck('reference') ? getReference().getBoundingClientRect() : null;
|
2548 | var currentPopRect = shouldCheck('popper') ? popper.getBoundingClientRect() : null;
|
2549 |
|
2550 | if (currentRefRect && areRectsDifferent(prevRefRect, currentRefRect) || currentPopRect && areRectsDifferent(prevPopRect, currentPopRect)) {
|
2551 | instance.popperInstance.update();
|
2552 | }
|
2553 |
|
2554 | prevRefRect = currentRefRect;
|
2555 | prevPopRect = currentPopRect;
|
2556 |
|
2557 | if (instance.state.isMounted) {
|
2558 | requestAnimationFrame(updatePosition);
|
2559 | }
|
2560 | }
|
2561 |
|
2562 | return {
|
2563 | onMount: function onMount() {
|
2564 | if (instance.props.sticky) {
|
2565 | updatePosition();
|
2566 | }
|
2567 | }
|
2568 | };
|
2569 | }
|
2570 | };
|
2571 |
|
2572 | function areRectsDifferent(rectA, rectB) {
|
2573 | if (rectA && rectB) {
|
2574 | return rectA.top !== rectB.top || rectA.right !== rectB.right || rectA.bottom !== rectB.bottom || rectA.left !== rectB.left;
|
2575 | }
|
2576 |
|
2577 | return true;
|
2578 | }
|
2579 |
|
2580 | tippy.setDefaultProps({
|
2581 | plugins: [animateFill, followCursor, inlinePositioning, sticky]
|
2582 | });
|
2583 | tippy.createSingleton = createSingleton;
|
2584 | tippy.delegate = delegate;
|
2585 | tippy.hideAll = hideAll;
|
2586 | tippy.roundArrow = ROUND_ARROW;
|
2587 |
|
2588 | return tippy;
|
2589 |
|
2590 | }(Popper));
|
2591 |
|