6 6
import Vue from '../../../utils/vue'
7 7
import getScopId from '../../../utils/get-scope-id'
8 8
import looseEqual from '../../../utils/loose-equal'
9 +
import noop from '../../../utils/noop'
9 10
import { arrayIncludes, concat, from as arrayFrom } from '../../../utils/array'
10 11
import {
11 12
isElement,
@@ -34,7 +35,6 @@ import {
34 35
import { keys } from '../../../utils/object'
35 36
import { warn } from '../../../utils/warn'
36 37
import { BvEvent } from '../../../utils/bv-event.class'
37 - 38 38
import { BVTooltipTemplate } from './bv-tooltip-template'
39 39 40 40
const NAME = 'BVTooltip'
@@ -203,7 +203,7 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
203 203
this.$_hoverState = ''
204 204
this.$_visibleInterval = null
205 205
this.$_enabled = !this.disabled
206 -
this.$_noop = () => {}
206 +
this.$_noop = noop.bind(this)
207 207 208 208
// Destroy ourselves when the parent is destroyed
209 209
if (this.$parent) {
@@ -236,18 +236,14 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
236 236
// Remove all handler/listeners
237 237
this.unListen()
238 238
this.setWhileOpenListeners(false)
239 - 240 -
// Clear any timeouts/Timers
241 -
clearTimeout(this.$_hoverTimeout)
242 -
this.$_hoverTimeout = null
243 - 239 +
// Clear any timeouts/intervals
240 +
this.clearHoverTimeout()
241 +
this.clearVisibilityInterval()
242 +
// Destroy the template
244 243
this.destroyTemplate()
245 -
this.restoreTitle()
246 244
},
247 245
methods: {
248 -
//
249 -
// Methods for creating and destroying the template
250 -
//
246 +
// --- Methods for creating and destroying the template ---
251 247
getTemplate() {
252 248
// Overridden by BVPopover
253 249
return BVTooltipTemplate
@@ -273,7 +269,6 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
273 269
},
274 270
createTemplateAndShow() {
275 271
// Creates the template instance and show it
276 -
// this.destroyTemplate()
277 272
const container = this.getContainer()
278 273
const Template = this.getTemplate()
279 274
const $tip = (this.$_tip = new Template({
@@ -323,19 +318,24 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
323 318
// then emit the `hidden` event once it is fully hidden
324 319
// The `hook:destroyed` will also be called (safety measure)
325 320
this.$_tip && this.$_tip.hide()
321 +
// Clear out any stragging active triggers
322 +
this.clearActiveTriggers()
323 +
// Reset the hover state
324 +
this.$_hoverState = ''
326 325
},
326 +
// Destroy the template instance and reset state
327 327
destroyTemplate() {
328 -
// Destroy the template instance and reset state
329 328
this.setWhileOpenListeners(false)
330 -
clearTimeout(this.$_hoverTimeout)
331 -
this.$_hoverTimout = null
329 +
this.clearHoverTimeout()
332 330
this.$_hoverState = ''
333 331
this.clearActiveTriggers()
334 332
this.localPlacementTarget = null
335 333
try {
336 334
this.$_tip && this.$_tip.$destroy()
337 335
} catch {}
338 336
this.$_tip = null
337 +
this.removeAriaDescribedby()
338 +
this.restoreTitle()
339 339
this.localShow = false
340 340
},
341 341
getTemplateElement() {
@@ -355,13 +355,10 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
355 355
})
356 356
}
357 357
},
358 -
//
359 -
// Show and Hide handlers
360 -
//
358 +
// --- Show/Hide handlers ---
359 +
// Show the tooltip
361 360
show() {
362 -
// Show the tooltip
363 361
const target = this.getTarget()
364 - 365 362
if (
366 363
!target ||
367 364
!contains(document.body, target) ||
@@ -375,38 +372,29 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
375 372
// we exit without showing
376 373
return
377 374
}
378 - 375 +
// If tip already exists, exit early
379 376
if (this.$_tip || this.localShow) {
380 -
// If tip already exists, exit early
381 377
/* istanbul ignore next */
382 378
return
383 379
}
384 - 385 380
// In the process of showing
386 381
this.localShow = true
387 - 388 382
// Create a cancelable BvEvent
389 383
const showEvt = this.buildEvent('show', { cancelable: true })
390 384
this.emitEvent(showEvt)
385 +
// Don't show if event cancelled
391 386
/* istanbul ignore next: ignore for now */
392 387
if (showEvt.defaultPrevented) {
393 -
// Don't show if event cancelled
394 388
// Destroy the template (if for some reason it was created)
395 389
/* istanbul ignore next */
396 390
this.destroyTemplate()
397 -
// Clear the localShow flag
398 -
/* istanbul ignore next */
399 -
this.localShow = false
400 391
/* istanbul ignore next */
401 392
return
402 393
}
403 - 404 394
// Fix the title attribute on target
405 395
this.fixTitle()
406 - 407 396
// Set aria-describedby on target
408 397
this.addAriaDescribedby()
409 - 410 398
// Create and show the tooltip
411 399
this.createTemplateAndShow()
412 400
},
@@ -433,11 +421,6 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
433 421 434 422
// Tell the template to hide
435 423
this.hideTemplate()
436 -
// TODO: The following could be added to `hideTemplate()`
437 -
// Clear out any stragging active triggers
438 -
this.clearActiveTriggers()
439 -
// Reset the hover state
440 -
this.$_hoverState = ''
441 424
},
442 425
forceHide() {
443 426
// Forcefully hides/destroys the template, regardless of any active triggers
@@ -450,8 +433,7 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
450 433
// This is also done in the template `hide` evt handler
451 434
this.setWhileOpenListeners(false)
452 435
// Clear any hover enter/leave event
453 -
clearTimeout(this.hoverTimeout)
454 -
this.$_hoverTimeout = null
436 +
this.clearHoverTimeout()
455 437
this.$_hoverState = ''
456 438
this.clearActiveTriggers()
457 439
// Disable the fade animation on the template
@@ -464,49 +446,42 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
464 446
enable() {
465 447
this.$_enabled = true
466 448
// Create a non-cancelable BvEvent
467 -
this.emitEvent(this.buildEvent('enabled', {}))
449 +
this.emitEvent(this.buildEvent('enabled'))
468 450
},
469 451
disable() {
470 452
this.$_enabled = false
471 453
// Create a non-cancelable BvEvent
472 -
this.emitEvent(this.buildEvent('disabled', {}))
454 +
this.emitEvent(this.buildEvent('disabled'))
473 455
},
474 -
//
475 -
// Handlers for template events
476 -
//
456 +
// --- Handlers for template events ---
457 +
// When template is inserted into DOM, but not yet shown
477 458
onTemplateShow() {
478 -
// When template is inserted into DOM, but not yet shown
479 459
// Enable while open listeners/watchers
480 460
this.setWhileOpenListeners(true)
481 461
},
462 +
// When template show transition completes
482 463
onTemplateShown() {
483 -
// When template show transition completes
484 464
const prevHoverState = this.$_hoverState
485 465
this.$_hoverState = ''
486 466
if (prevHoverState === 'out') {
487 467
this.leave(null)
488 468
}
489 469
// Emit a non-cancelable BvEvent 'shown'
490 -
this.emitEvent(this.buildEvent('shown', {}))
470 +
this.emitEvent(this.buildEvent('shown'))
491 471
},
472 +
// When template is starting to hide
492 473
onTemplateHide() {
493 -
// When template is starting to hide
494 474
// Disable while open listeners/watchers
495 475
this.setWhileOpenListeners(false)
496 476
},
477 +
// When template has completed closing (just before it self destructs)
497 478
onTemplateHidden() {
498 -
// When template has completed closing (just before it self destructs)
499 -
// TODO:
500 -
// The next two lines could be moved into `destroyTemplate()`
501 -
this.removeAriaDescribedby()
502 -
this.restoreTitle()
479 +
// Destroy the template
503 480
this.destroyTemplate()
504 481
// Emit a non-cancelable BvEvent 'shown'
505 482
this.emitEvent(this.buildEvent('hidden', {}))
506 483
},
507 -
//
508 -
// Utility methods
509 -
//
484 +
// --- Utility methods ---
510 485
getTarget() {
511 486
// Handle case where target may be a component ref
512 487
let target = this.target ? this.target.$el || this.target : null
@@ -566,6 +541,18 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
566 541
const target = this.getTarget()
567 542
return this.isDropdown() && target && select(DROPDOWN_OPEN_SELECTOR, target)
568 543
},
544 +
clearHoverTimeout() {
545 +
if (this.$_hoverTimeout) {
546 +
clearTimeout(this.$_hoverTimeout)
547 +
this.$_hoverTimeout = null
548 +
}
549 +
},
550 +
clearVisibilityInterval() {
551 +
if (this.$_visibleInterval) {
552 +
clearInterval(this.$_visibleInterval)
553 +
this.$_visibleInterval = null
554 +
}
555 +
},
569 556
clearActiveTriggers() {
570 557
for (const trigger in this.activeTrigger) {
571 558
this.activeTrigger[trigger] = false
@@ -619,9 +606,7 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
619 606
removeAttr(target, 'data-original-title')
620 607
}
621 608
},
622 -
//
623 -
// BvEvent helpers
624 -
//
609 +
// --- BvEvent helpers ---
625 610
buildEvent(type, opts = {}) {
626 611
// Defaults to a non-cancellable event
627 612
return new BvEvent(type, {
@@ -644,20 +629,16 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
644 629
}
645 630
this.$emit(evtName, bvEvt)
646 631
},
647 -
//
648 -
// Event handler setup methods
649 -
//
632 +
// --- Event handler setup methods ---
650 633
listen() {
651 634
// Enable trigger event handlers
652 635
const el = this.getTarget()
653 636
if (!el) {
654 637
/* istanbul ignore next */
655 638
return
656 639
}
657 - 658 640
// Listen for global show/hide events
659 641
this.setRootListener(true)
660 - 661 642
// Set up our listeners on the target trigger element
662 643
this.computedTriggers.forEach(trigger => {
663 644
if (trigger === 'click') {
@@ -712,14 +693,13 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
712 693
// On-touch start listeners
713 694
this.setOnTouchStartListener(on)
714 695
},
696 +
// Handler for periodic visibility check
715 697
visibleCheck(on) {
716 -
// Handler for periodic visibility check
717 -
clearInterval(this.$_visibleInterval)
718 -
this.$_visibleInterval = null
698 +
this.clearVisibilityInterval()
719 699
const target = this.getTarget()
720 700
const tip = this.getTemplateElement()
721 701
if (on) {
722 -
this.visibleInterval = setInterval(() => {
702 +
this.$_visibleInterval = setInterval(() => {
723 703
if (tip && this.localShow && (!target.parentNode || !isVisible(target))) {
724 704
// Target element is no longer visible or not in DOM, so force-hide the tooltip
725 705
this.forceHide()
@@ -762,9 +742,7 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
762 742
target.__vue__[on ? '$on' : '$off']('shown', this.forceHide)
763 743
}
764 744
},
765 -
//
766 -
// Event handlers
767 -
//
745 +
// --- Event handlers ---
768 746
handleEvent(evt) {
769 747
// General trigger event handler
770 748
// target is the trigger element
@@ -884,14 +862,14 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
884 862
this.$_hoverState = 'in'
885 863
return
886 864
}
887 -
clearTimeout(this.hoverTimeout)
865 +
this.clearHoverTimeout()
888 866
this.$_hoverState = 'in'
889 867
if (!this.computedDelay.show) {
890 868
this.show()
891 869
} else {
892 870
// Hide any title attribute while enter delay is active
893 871
this.fixTitle()
894 -
this.hoverTimeout = setTimeout(() => {
872 +
this.$_hoverTimeout = setTimeout(() => {
895 873
/* istanbul ignore else */
896 874
if (this.$_hoverState === 'in') {
897 875
this.show()
@@ -917,12 +895,12 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
917 895
if (this.isWithActiveTrigger) {
918 896
return
919 897
}
920 -
clearTimeout(this.hoverTimeout)
898 +
this.clearHoverTimeout()
921 899
this.$_hoverState = 'out'
922 900
if (!this.computedDelay.hide) {
923 901
this.hide()
924 902
} else {
925 -
this.$hoverTimeout = setTimeout(() => {
903 +
this.$_hoverTimeout = setTimeout(() => {
926 904
if (this.$_hoverState === 'out') {
927 905
this.hide()
928 906
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4