@onereach/webform/src/mixins/intersection-observer-mixin.js

Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;

export default {
  directives : {
    intersectObserver : {
      inserted(el, binding, vnode) {
        vnode.context.$options.observer.observe(el);
      }
    }
  },
    
  data() {
    return {
      scrollState : {
        direction : ''
      }
    };
  },

  created () {
    this.createIntersectionObserverEvents();
  },

  beforeDestroy() {
    this.disconnectIntersectionObserver();
  },

  methods : {
    createIntersectionObserverEvents () {
      if('IntersectionObserver' in window) {
        const eventIntersect = new CustomEvent('intersect');
        const eventLeave = new CustomEvent('leave');
        const callback = (entries) => {
          const eachMethod = this.scrollState.direction === 'up' ? _.forEachRight : _.forEach;
          eachMethod(entries, (entry) => {
            if (entry.isIntersecting) {
              entry.target.dispatchEvent(eventIntersect);
            } else {
              entry.target.dispatchEvent(eventLeave);
            }
          });
        };
        this.$options.observer = new IntersectionObserver(callback);
      }
    },

    disconnectIntersectionObserver () {
      this.$options.observer.disconnect();
    }
  }
};