New API: watchElement for classes with no mixin

[snewcomer]

@gossi 👋 again! This PR adds the ability to use classes if your target browser supports IntersectionObserver (e.g. not Safari). I likely won't merge this until we can at least support rAF, but wanted to get your feedback first. Thoughts on naming?

This PR adds three user facing APIs.

• watchElement
• addEnterCallback
• addExitCallback

import Component from '@ember/component';
import { tagName } from '@ember-decorators/component';
import { inject as service } from '@ember/service'; // with polyfill

@tagName('')
export default class MyClass extends Component {
  @service inViewport

  didInsertElement() {
    const loader = document.getElementById('loader');
    const { didEnter } = this.inViewport.watchElement(loader);
    didEnter(this.didEnterViewport.bind(this));
  }

  didEnterViewport() {
    this.infinityLoad();
  }
}

[gossi]

I like the idea 💯

I dislike names for addEnterCallback and addExitCallback (I always prefer *Listener for such things, but I maybe be braindead on this - too much java 😁). However, watchElement() could return some object that could do the job? Here is an idea:

const viewportWatcher = this.inViewport.watchElement(element);
viewportWatcher.onEnter(() => {
  // do sth here
});
viewportWatcher.onLeave(() => {
  // do sth here
});
this.inViewport.unwatchElement(viewportWatcher);

Just food for thought.

[snewcomer]

@gossi I like returning an object to do the job! As long as we add the callbacks before the actual "watching" occurs (we have it wrapped with scheduleOnce('afterRender')), then we are ok. Could imagine a scenario where the user reloads the page and immediately triggers an "onIntersection" event without any callbacks (if scheduleOnce was removed that is). So for now, I think we should go with what you suggested unless you have other thoughts.

[gossi]

What happens internally... happens internally ;) I dunno what it is, I can solely think about the API.

One addition, I guess it should be: this.inViewport.watchElement(element, options);

[snewcomer]

Updated README to include a note about that second argument of options 👍. Thx for all the suggestions @gossi. Lmk if you notice anything else!

[snewcomer]

@gossi Merged to master. Lmk if you have other feedback. Otherwise bump a minor release on Friday or so!