How to use ember-in-viewport - 10 common examples

init() {
    super.init(...arguments);


    set(this, 'registry', new WeakMap());

    let options = assign({
      viewportUseRAF: canUseRAF()
    }, this._buildOptions());

    // set viewportUseIntersectionObserver after merging users config to avoid errors in browsers that lack support (https://github.com/DockYard/ember-in-viewport/issues/146)
    options = assign(options, {
      viewportUseIntersectionObserver: canUseIntersectionObserver(),
    });

    setProperties(this, options);
  }

init() {
    // ensure this mixin runs first, then your component can override the options
    this._super(...arguments);

    let options = assign({
      viewportUseRAF: canUseRAF(),
      viewportEntered: false,
      viewportListeners: []
    }, this._buildOptions());

    // set viewportUseIntersectionObserver after merging users config to avoid errors in browsers that lack support (https://github.com/DockYard/ember-in-viewport/issues/146)
    options = assign(options, {
      viewportUseIntersectionObserver: canUseIntersectionObserver(),
    });

    setProperties(this, options);
    set(this, '_evtListenerClosures', []);
  },

init() {
    super.init(...arguments);


    set(this, 'registry', new WeakMap());

    let options = assign({
      viewportUseRAF: canUseRAF()
    }, this._buildOptions());

    // set viewportUseIntersectionObserver after merging users config to avoid errors in browsers that lack support (https://github.com/DockYard/ember-in-viewport/issues/146)
    options = assign(options, {
      viewportUseIntersectionObserver: canUseIntersectionObserver(),
    });

    setProperties(this, options);
  }

init() {
    // ensure this mixin runs first, then your component can override the options
    this._super(...arguments);

    let options = assign({
      viewportUseRAF: canUseRAF(),
      viewportEntered: false,
      viewportListeners: []
    }, this._buildOptions());

    // set viewportUseIntersectionObserver after merging users config to avoid errors in browsers that lack support (https://github.com/DockYard/ember-in-viewport/issues/146)
    options = assign(options, {
      viewportUseIntersectionObserver: canUseIntersectionObserver(),
    });

    setProperties(this, options);
    set(this, '_evtListenerClosures', []);
  },

scheduleOnce('afterRender', this, () => {
        // grab the user added callbacks when we enter/leave the element
        const {
          enterCallback = noop,
          exitCallback = noop
        } = this.getCallbacks(element) || {};
        // this isn't using the same functions as the mixin case, but that is b/c it is a bit harder to unwind.
        // So just rewrote it with pure functions for now
        startRAF(
          element,
          configOptions,
          enterCallback,
          exitCallback,
          this.addRAF.bind(this, element.id),
          this.removeRAF.bind(this, element.id)
        );
      });
    }

const domScrollableArea = scrollableArea ? document.querySelector(scrollableArea) : undefined;

  const height = domScrollableArea
    ? domScrollableArea.offsetHeight + domScrollableArea.getBoundingClientRect().top
    : window.innerHeight;
  const width = scrollableArea
    ? domScrollableArea.offsetWidth + domScrollableArea.getBoundingClientRect().left
    : window.innerWidth;
  const boundingClientRect = element.getBoundingClientRect();

  if (boundingClientRect) {
    const viewportEntered = element.getAttribute('data-in-viewport-entered');

    triggerDidEnterViewport(
      element,
      isInViewport(
        boundingClientRect,
        height,
        width,
        viewportTolerance
      ),
      viewportSpy,
      enterCallback,
      exitCallback,
      viewportEntered
    );

    if (viewportSpy || viewportEntered !== 'true') {
      // recursive
      // add to pool of requestAnimationFrame listeners and executed on set schedule
      addRAF(
        startRAF.bind(

get(this, 'viewportListeners').forEach((listener) => {
        let { context, event } = listener;
        context = get(this, 'scrollableArea') || context;
        let elem = findElem(context);
        let { evtListener } = this._evtListenerClosures.find((closure) => event === closure.event) || {};

        elem.removeEventListener(event, evtListener, false);
      });
    }

_bindListeners(context = null, event = null, element = null) {
    assert('You must pass a valid context to _bindListeners', context);
    assert('You must pass a valid event to _bindListeners', event);

    let elem = findElem(context);

    let evtListener = (() => this._debouncedEvent('_setViewportEntered', element));
    this._evtListenerClosures.push({ event: event, evtListener });
    elem.addEventListener(event, evtListener, false);
  },

_bindScrollDirectionListener(sensitivity = 1) {
    assert('sensitivity cannot be 0', sensitivity);

    const contextEl = get(this, 'scrollableArea') || window;
    const elem = findElem(contextEl);

    this._debouncedEventHandler = this._debouncedEvent.bind(this, '_triggerDidScrollDirection', elem, sensitivity);
    elem.addEventListener('scroll', this._debouncedEventHandler, { passive: true });
  },

_unbindScrollDirectionListener() {
    const elementId = get(this, 'elementId');
    const context = get(this, 'scrollableArea') || window;
    const elem = findElem(context);

    if (elem) {
      elem.removeEventListener('scroll', this._debouncedEventHandler, { passive: true });
      delete lastPosition[elementId];
      delete lastDirection[elementId];
    }
  },