Class IntersectionController

packages/labs/observers/src/intersection-controller.ts:64–178

 * The controller's `value` is usable during the host's update cycle.
 */
export class IntersectionController<T = unknown> implements ReactiveController {
  private _host: ReactiveControllerHost;
  private _targets = new Set<Element>();
  private _observer!: IntersectionObserver;
  private _skipInitial = false;
  /**
   * Flag used to help manage calling the `callback` when observe is called
   * and `skipInitial` is set to true. Note that unlike the other observers
   * IntersectionObserver *does* report its initial state (e.g. whether or not
   * there is an intersection). This flag is used to avoid handling this
   * state if `skipInitial` is true.
   */
  private _unobservedUpdate = false;
  /**
   * The result of processing the observer's changes via the `callback`
   * function.
   */
  value?: T;
  /**
   * Function that returns a value processed from the observer's changes.
   * The result is stored in the `value` property.
   */
  callback?: IntersectionValueCallback<T>;
  constructor(
    host: ReactiveControllerHost & Element,
    {target, config, callback, skipInitial}: IntersectionControllerConfig<T>
  ) {
    this._host = host;
    // Target defaults to `host` unless explicitly `null`.
    if (target !== null) {
      this._targets.add(target ?? host);
    }
    this._skipInitial = skipInitial ?? this._skipInitial;
    this.callback = callback;
    if (isServer) {
      return;
    }
    // Check browser support.
    if (!window.IntersectionObserver) {
      console.warn(
        `IntersectionController error: browser does not support IntersectionObserver.`
      );
      return;
    }
    this._observer = new IntersectionObserver(
      (entries: IntersectionObserverEntry[]) => {
        const unobservedUpdate = this._unobservedUpdate;
        this._unobservedUpdate = false;
        if (this._skipInitial && unobservedUpdate) {
          return;
        }
        this.handleChanges(entries);
        this._host.requestUpdate();
      },
      config
    );
    host.addController(this);
  }