UNPKG

@spectrum-web-components/overlay

Version:

An `<sp-overlay>` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al.

3 lines (2 loc) 3.33 kB
"use strict";import{conditionAttributeWithId as s}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{isWebKit as n}from"@spectrum-web-components/shared";import{randomID as d}from"@spectrum-web-components/shared/src/random-id.js";import{noop as a}from"./AbstractOverlay.js";import{InteractionController as v,InteractionTypes as l,lastInteractionType as p,SAFARI_FOCUS_RING_CLASS as o}from"./InteractionController.js";const c=300;export class HoverController extends v{constructor(){super(...arguments);this.type=l.hover;this.elementIds=[];this.focusedin=!1;this.pointerentered=!1}handleKeyup(e){(e.code==="Tab"||e.code==="Escape")&&(this.open=!0,this.removeSafariFocusRingClass())}handleTargetFocusin(){if(this.target.matches(":focus-visible")){if(n()&&this.target[p]===l.click){this.target.classList.add(o);return}this.open=!0,this.focusedin=!0,this.removeSafariFocusRingClass()}}handleTargetFocusout(){this.removeSafariFocusRingClass(),this.focusedin=!1,!this.pointerentered&&(this.open=!1)}handleTargetPointerenter(){var e;this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0),!((e=this.overlay)!=null&&e.disabled)&&(this.open=!0,this.pointerentered=!0)}handleTargetPointerleave(){this.doPointerleave()}handleHostPointerenter(){this.hoverTimeout&&(clearTimeout(this.hoverTimeout),this.hoverTimeout=void 0)}handleHostPointerleave(){this.doPointerleave()}prepareDescription(){if(!this.overlay.elements.length)return;const e=this.target.getRootNode(),t=this.overlay.elements[0].getRootNode(),r=this.overlay.getRootNode();e===r?this.prepareOverlayRelativeDescription():e===t&&this.prepareContentRelativeDescription()}prepareOverlayRelativeDescription(){const e=s(this.target,"aria-describedby",[this.overlay.id]);this.releaseDescription=()=>{e(),this.releaseDescription=a}}prepareContentRelativeDescription(){const e=[],t=this.overlay.elements.map(i=>(e.push(i.id),i.id||(i.id=`${this.overlay.tagName.toLowerCase()}-helper-${d()}`),i.id));this.elementIds=e;const r=s(this.target,"aria-describedby",t);this.releaseDescription=()=>{r(),this.overlay.elements.map((i,h)=>{i.id=this.elementIds[h]}),this.releaseDescription=a}}doPointerleave(){this.pointerentered=!1;const e=this.target;this.focusedin&&e.matches(":focus-visible")||(this.hoverTimeout=setTimeout(()=>{this.open=!1},c))}init(){var t;(t=this.abortController)==null||t.abort(),this.abortController=new AbortController;const{signal:e}=this.abortController;this.target.addEventListener("keyup",r=>this.handleKeyup(r),{signal:e}),this.target.addEventListener("focusin",()=>this.handleTargetFocusin(),{signal:e}),this.target.addEventListener("focusout",()=>this.handleTargetFocusout(),{signal:e}),this.target.addEventListener("pointerenter",()=>this.handleTargetPointerenter(),{signal:e}),this.target.addEventListener("pointerleave",()=>this.handleTargetPointerleave(),{signal:e}),this.overlay&&this.initOverlay()}initOverlay(){if(!this.abortController)return;const{signal:e}=this.abortController;this.overlay.addEventListener("pointerenter",()=>this.handleHostPointerenter(),{signal:e}),this.overlay.addEventListener("pointerleave",()=>this.handleHostPointerleave(),{signal:e})}removeSafariFocusRingClass(){n()&&this.target.classList.contains(o)&&this.target.classList.remove(o)}} //# sourceMappingURL=HoverController.js.map