[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/wp-tooltip.js
   3   */
   4  
   5  /**
   6   * Add focus and hover support for the 'tooltip' type in `wp_tooltip()`.
   7   * This script can be made obsolete when support is available for Interest Invokers.
   8   */
   9  (() => {
  10  
  11      const supportsPopover = /** @type {boolean} */ ( Object.prototype.hasOwnProperty.call( HTMLElement.prototype, 'popover' ) );
  12      let hidePopover = false;
  13      if ( ! supportsPopover ) {
  14          hidePopover = true;
  15      }
  16  
  17      const popovers = /** @type {NodeListOf<HTMLSpanElement>} */ ( document.querySelectorAll( '.wp-is-tooltip' ) );
  18  
  19      popovers.forEach( function( popover ) {
  20          const trigger = /** @type {HTMLButtonElement|HTMLAnchorElement|null} */ ( popover.querySelector( '.wp-tooltip__toggle' ) );
  21          const panel   = /** @type {HTMLSpanElement|null} */ ( popover.querySelector( 'span.wp-tooltip__bubble' ) );
  22          if ( hidePopover && panel ) {
  23              panel.classList.add( 'hidden' );
  24  
  25              return;
  26          }
  27          if ( ! trigger || ! panel ) {
  28              return;
  29          }
  30  
  31          /** @type {ReturnType<typeof setTimeout>} */
  32          let openTimeout;
  33  
  34          // Show Tooltip Function (with delay to prevent flickering).
  35          const showTooltip = () => {
  36              clearTimeout( openTimeout );
  37              openTimeout = setTimeout( () => {
  38                  // Only show if it's not already open.
  39                  if ( ! panel.matches( ':popover-open' ) ) {
  40                      // pass the triggering element so implicit position anchors work.
  41                      panel.showPopover( { source: trigger } );
  42                  }
  43              }, 300 );
  44          };
  45          // Hide Tooltip Function.
  46          const hideTooltip = () => {
  47              clearTimeout( openTimeout );
  48              if ( panel.matches( ':popover-open' ) ) {
  49                  panel.hidePopover();
  50              }
  51          };
  52  
  53          // Bind Hover and Focus Events.
  54          trigger.addEventListener( 'mouseenter', showTooltip );
  55          trigger.addEventListener( 'focus', showTooltip );
  56  
  57          trigger.addEventListener( 'mouseleave', hideTooltip );
  58          trigger.addEventListener( 'blur', hideTooltip );
  59      });
  60  })();
  61  
  62  /**
  63   * Add focus and hover support for the toggle tip's hint in `wp_get_toggletip()`.
  64   *
  65   * A toggle tip has no visible text label, so a hover/focus hint exposes the
  66   * toggle button's accessible name to sighted users. The hint is suppressed while
  67   * the toggle tip dialog itself is open, so the two never overlap.
  68   * This script can be made obsolete when support is available for Interest Invokers.
  69   */
  70  (() => {
  71  
  72      const toggletips = /** @type {NodeListOf<HTMLSpanElement>} */ ( document.querySelectorAll( '.wp-is-toggletip' ) );
  73  
  74      /** @type {ReturnType<typeof setTimeout>} */
  75      let openTimeout;
  76  
  77      toggletips.forEach( function( toggletip ) {
  78          const trigger = /** @type {HTMLButtonElement|null} */ ( toggletip.querySelector( 'button.wp-tooltip__toggle' ) );
  79          const hint    = /** @type {HTMLSpanElement|null} */ ( toggletip.querySelector( '.wp-tooltip__hint' ) );
  80          const dialog  = /** @type {HTMLDialogElement|null} */ ( toggletip.querySelector( 'dialog.wp-tooltip__bubble' ) );
  81  
  82          if ( ! trigger || ! hint ) {
  83              return;
  84          }
  85  
  86          // Show Hint Function (with delay to prevent flickering).
  87          const showHint = () => {
  88              clearTimeout( openTimeout );
  89              openTimeout = setTimeout( () => {
  90                  // Don't show the hint over an open toggle tip dialog.
  91                  if ( dialog && dialog.matches( ':popover-open' ) ) {
  92                      return;
  93                  }
  94                  // Only show if it's not already open.
  95                  if ( ! hint.matches( ':popover-open' ) ) {
  96                      // pass the triggering element so implicit position anchors work.
  97                      hint.showPopover( { source: trigger } );
  98                  }
  99              }, 300 );
 100          };
 101          // Hide Hint Function.
 102          const hideHint = () => {
 103              clearTimeout( openTimeout );
 104              if ( hint.matches( ':popover-open' ) ) {
 105                  hint.hidePopover();
 106              }
 107          };
 108  
 109          // Bind Hover and Focus Events.
 110          trigger.addEventListener( 'mouseenter', showHint );
 111          trigger.addEventListener( 'focus', showHint );
 112  
 113          trigger.addEventListener( 'mouseleave', hideHint );
 114          trigger.addEventListener( 'blur', hideHint );
 115  
 116          // Hide the hint as soon as the toggle tip is opened.
 117          trigger.addEventListener( 'click', hideHint );
 118      });
 119  })();