src/core/overlay.js
/**
   * `draw` is called for every frame . Puts back the
   * filled overlay on body (i.e. while removing existing highlight if any) and
   * Slowly eases towards the item to be selected.
   */
`draw` is called for every frame . Puts back the
filled overlay on body  and
Slowly eases towards the item to be selected.
` draw ` is called for every frame . Puts back the filled overlay on body and Slowly eases towards the item to be selected .
draw() {
    const canHighlight = this.positionToHighlight.canHighlight();
    this.removeCloak();
    this.addCloak();
    const isFadingIn = this.overlayAlpha < 0.1;
    if (canHighlight) {
      if (isFadingIn) {
        this.highlightedPosition = this.positionToHighlight;
      } else {
        this.highlightedPosition.left += (this.positionToHighlight.left - this.highlightedPosition.left) * 0.18;
        this.highlightedPosition.top += (this.positionToHighlight.top - this.highlightedPosition.top) * 0.18;
        this.highlightedPosition.right += (this.positionToHighlight.right - this.highlightedPosition.right) * 0.18;
        this.highlightedPosition.bottom += (this.positionToHighlight.bottom - this.highlightedPosition.bottom) * 0.18;
      }
    }
    this.removeCloak({
      posX: this.highlightedPosition.left - this.window.scrollX - this.options.padding,
      posY: this.highlightedPosition.top - this.window.scrollY - this.options.padding,
      width: (this.highlightedPosition.right - this.highlightedPosition.left) + (this.options.padding * 2),
      height: (this.highlightedPosition.bottom - this.highlightedPosition.top) + (this.options.padding * 2),
    });
    if (canHighlight) {
      if (!this.options.animate) {
        this.overlayAlpha = this.options.opacity;
      } else {
        this.overlayAlpha += (this.options.opacity - this.overlayAlpha) * 0.08;
      }
    } else {
      this.overlayAlpha = Math.max((this.overlayAlpha * 0.85) - 0.02, 0);
    }
    this.window.cancelAnimationFrame(this.redrawAnimation);
    if (canHighlight || this.overlayAlpha > 0) {
      if (!this.overlay.parentNode) {
        this.document.body.appendChild(this.overlay);
      }
      if (!this.hasPositionHighlighted()) {
        this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
      } else if (!this.options.animate && isFadingIn) {
        this.redrawAnimation = this.window.requestAnimationFrame(this.draw);
      } else {
        this.highlightedElement.onHighlighted();
      }
    } else if (this.overlay.parentNode) {
      this.document.body.removeChild(this.overlay);
    }
  }
draw ( ) { const canHighlight = this . positionToHighlight . canHighlight ( ) ; this . removeCloak ( ) ; this . addCloak ( ) ; const isFadingIn = this . overlayAlpha < 0.1 ; if ( canHighlight ) { if ( isFadingIn ) { this . highlightedPosition = this . positionToHighlight ; } else { this . highlightedPosition . left += ( this . positionToHighlight . left - this . highlightedPosition . left ) * 0.18 ; this . highlightedPosition . top += ( this . positionToHighlight . top - this . highlightedPosition . top ) * 0.18 ; this . highlightedPosition . right += ( this . positionToHighlight . right - this . highlightedPosition . right ) * 0.18 ; this . highlightedPosition . bottom += ( this . positionToHighlight . bottom - this . highlightedPosition . bottom ) * 0.18 ; } } this . removeCloak ( { posX : this . highlightedPosition . left - this . window . scrollX - this . options . padding , posY : this . highlightedPosition . top - this . window . scrollY - this . options . padding , width : ( this . highlightedPosition . right - this . highlightedPosition . left ) + ( this . options . padding * 2 ) , height : ( this . highlightedPosition . bottom - this . highlightedPosition . top ) + ( this . options . padding * 2 ) , } ) ; if ( canHighlight ) { if ( ! this . options . animate ) { this . overlayAlpha = this . options . opacity ; } else { this . overlayAlpha += ( this . options . opacity - this . overlayAlpha ) * 0.08 ; } } else { this . overlayAlpha = Math . max ( ( this . overlayAlpha * 0.85 ) - 0.02 , 0 ) ; } this . window . cancelAnimationFrame ( this . redrawAnimation ) ; if ( canHighlight || this . overlayAlpha > 0 ) { if ( ! this . overlay . parentNode ) { this . document . body . appendChild ( this . overlay ) ; } if ( ! this . hasPositionHighlighted ( ) ) { this . redrawAnimation = this . window . requestAnimationFrame ( this . draw ) ; } else if ( ! this . options . animate && isFadingIn ) { this . redrawAnimation = this . window . requestAnimationFrame ( this . draw ) ; } else { this . highlightedElement . onHighlighted ( ) ; } } else if ( this . overlay . parentNode ) { this . document . body . removeChild ( this . overlay ) ; } }
`draw` is called for every frame .
` draw ` is called for every frame .
// Cache the response of this for re-use below // Remove the existing cloak from the body // it might be torn i.e. have patches from last highlight // Add the overlay on top of the whole body // Ignore the animation, just highlight the item at its current position // Slowly move towards the position to highlight // Cut the chunk of overlay that is over the highlighted item // Fade the overlay in if we can highlight // otherwise fade out // cancel any existing animation frames // to avoid the overlapping of frames // Continue drawing while we can highlight or we are still fading out // Add the overlay if not already there // Stage a new animation frame only if the position has not been reached // or the alpha has not yet fully reached fully required opacity // Element has been highlighted // Otherwise if the overlay is there, remove it