Vue plugin for scrollwizardy

vue-scrollwizardry.js

/*
  eslint no-underscore-dangle: 0, max-len: 0, prefer-destructuring: 0, no-nested-ternary: 0
*/

import TweenMax from 'gsap/TweenMax';
import TimelineMax from 'gsap/TimelineMax';
import * as ScrollWizardry from 'scrollwizardry';
// import * as ScrollWizardry from '../../scrollwizardry/src';

const { Controller, Scene } = ScrollWizardry;

const defaultOptions = {
  addIndicators: false,
};

let sceneManager;

class SceneManager {
  constructor(options) {
    this.options = options;

    this._scenes = {};
    this._sceneObservers = {};

    if (typeof window === 'undefined') {
      return;
    }

    this.controller = new Controller(options);
  }

  static getTargetElement(element, targetElement) {
    if (targetElement) {
      if (typeof targetElement === 'string') {
        if (/^(parent)$/i.test(targetElement)) {
          return element.parentNode;
        }
        return document.querySelector(targetElement);
      }
      return targetElement;
    }
    return element;
  }

  static parseString(string, triggerElement) {
    let number;

    const vh = /([0-9]+)vh$/.exec(string);
    if (vh) {
      number = () => window.innerHeight * (parseFloat(vh[1]) / 100);
    }

    const percent = /([0-9]+)%$/.exec(string);
    if (percent) {
      number = () => triggerElement.clientHeight * (parseFloat(percent[1]) / 100);
    }

    return number;
  }

  static mounted(element) {
    return new Promise((resolve) => {
      const observer = new MutationObserver(resolve);
      observer.observe(element.parentNode, { childList: true });
    });
  }

  get addIndicators() {
    return this.options.addIndicators;
  }

  _notifySceneObservers(sceneId, ...args) {
    args.push(sceneId);

    this._sceneObservers[sceneId].forEach((fn) => {
      fn(...args);
    });
  }

  addSceneObserver(sceneId, observer) {
    if (this._scenes[sceneId]) {
      observer(this._scenes[sceneId], sceneId);
      return;
    }

    if (!this._sceneObservers[sceneId]) {
      this._sceneObservers[sceneId] = [];
    }

    this._sceneObservers[sceneId].push(observer);
  }

  getSceneIds(sceneId) {
    const defaultSceneId = Object.keys(this._scenes)[0] || 0;

    if (Object.prototype.toString.call(sceneId) === '[object Array]') {
      return sceneId;
    }

    return sceneId && sceneId.length ? [sceneId] : [defaultSceneId];
  }

  getScene(sceneId) {
    sceneId = sceneId || this.getSceneIds(sceneId)[0];

    return this._scenes[sceneId];
  }

  setScene(sceneId, scene) {
    this._scenes[sceneId] = scene;

    if (this._sceneObservers[sceneId]) {
      this._notifySceneObservers(sceneId, scene);
    }
  }

  destroyScene(sceneId) {
    const scene = this._scenes[sceneId];

    this.controller.removeScene(scene);

    scene.destroy(true);

    delete this._scenes[sceneId];
  }

  removeSceneObservers(sceneId, observers = []) {
    const observerIds = observers.map(observer => observer.id);

    if (this._sceneObservers[sceneId]) {
      this._sceneObservers[sceneId] = this._sceneObservers[sceneId].filter(({ id }) => {
        if (observerIds.includes(id)) {
          return false;
        }
        return true;
      });
    }
  }
}

const sceneDirective = {
  inserted(el, binding) {
    const options = binding.value;

    const sceneId = sceneManager.getSceneIds(options.sceneId)[0];

    if (sceneManager.getScene(sceneId)) {
      sceneManager.destroyScene(sceneId);
    }

    let scene;
    let offset = options.offset !== undefined ? options.offset : 0;
    let duration = options.duration !== undefined ? options.duration : 0;
    const triggerElement = options.triggerElement ? options.triggerElement : el;
    const triggerHook = options.triggerHook !== undefined ? options.triggerHook : 0.5;

    if (typeof offset === 'string') {
      offset = SceneManager.parseString(offset, triggerElement);
    }

    if (typeof offset === 'function') {
      offset = offset();
    }

    if (typeof duration === 'function') {
      duration = duration.bind({
        scene,
        triggerElement,
        offset,
        triggerHook: options.triggerHook,
      });
    }

    if (typeof duration === 'string') {
      duration = SceneManager.parseString(duration, triggerElement);
    }

    scene = new Scene({
      offset,
      duration,
      triggerElement,
      triggerHook,
    });

    if (options.onEnter) {
      scene.on('enter', options.onEnter.bind({
        scene,
        triggerElement,
        props: options.props,
      }));
    }

    if (options.onLeave) {
      scene.on('leave', options.onLeave.bind({
        scene,
        triggerElement,
        props: options.props,
      }));
    }

    if (sceneManager.addIndicators) {
      scene.addIndicators({
        name: sceneId,
      });
    }

    scene.addTo(sceneManager.controller);

    sceneManager.setScene(sceneId, scene);

    if (options.onInit) {
      options.onInit({
        scene,
        triggerElement,
        props: options.props,
      });
    }
  },
  unbind(el, binding) {
    const options = binding.value;

    const sceneId = sceneManager.getSceneIds(options.sceneId)[0];

    sceneManager.destroyScene(sceneId);
  },
};

const pinDirective = {
  bind(el, binding) {
    const options = binding.value;

    el.$observers = [];

    sceneManager.getSceneIds(options.sceneId).forEach((sceneId) => {
      const observer = (scene) => {
        scene.setPin(SceneManager.getTargetElement(el, options.targetElement));
      };

      observer.id = +new Date();

      el.$observers.push(observer);

      sceneManager.addSceneObserver(sceneId, observer);
    });
  },
  unbind(el, binding) {
    const options = binding.value;
    sceneManager.removeSceneObservers(options.sceneId, el.$observers);
    delete el.$observers;
  },
};

const classToggleDirective = {
  bind(el, binding) {
    const options = binding.value;

    el.$observers = [];

    sceneManager.getSceneIds(options.sceneId).forEach((sceneId, i) => {
      let className = options.class || options.classes;

      if (Object.prototype.toString.call(className) === '[object Array]') {
        className = className[i];
      }

      const observer = (scene) => {
        scene.setClassToggle(SceneManager.getTargetElement(el, options.targetElement), className);
      };

      observer.id = +new Date();

      el.$observers.push(observer);

      sceneManager.addSceneObserver(sceneId, observer);
    });
  },
  unbind(el, binding) {
    const options = binding.value;
    sceneManager.removeSceneObservers(options.sceneId, el.$observers);
    delete el.$observers;
  },
};

const tweenDirective = {
  bind(el, binding) {
    const options = binding.value;

    el.$observers = [];

    sceneManager.getSceneIds(options.sceneId).forEach((sceneId) => {
      const duration = options.duration;
      const fromVars = options.fromVars;
      const toVars = options.toVars || options.vars;
      const method = fromVars && toVars ? 'fromTo' : fromVars ? 'from' : 'to';

      const observer = (scene) => {
        if (!scene.timeline) {
          scene.timeline = new TimelineMax();
        }

        const tween = TweenMax[method](SceneManager.getTargetElement(el, options.targetElement), duration || 1, fromVars || toVars, toVars);

        scene.timeline.add([tween], 0, 'normal');

        scene.setTween(scene.timeline);
      };

      observer.id = +new Date();

      el.$observers.push(observer);

      sceneManager.addSceneObserver(sceneId, observer);
    });
  },
  unbind(el, binding) {
    const options = binding.value;
    sceneManager.removeSceneObservers(options.sceneId, el.$observers);
    delete el.$observers;
  },
};

const VueScrollWizardryPlugin = (_Vue, options = defaultOptions) => {
  sceneManager = new SceneManager(options);

  _Vue.directive('sw-scene', sceneDirective);
  _Vue.directive('sw-pin', pinDirective);
  _Vue.directive('sw-class-toggle', classToggleDirective);
  _Vue.directive('sw-tween', tweenDirective);
};

export default VueScrollWizardryPlugin;

Few Questions:
Do you have any examples of using this?
Do you have any plans of distributing this as an NPM module?
Also, what about typescript definitions for this and scrollwizardry? If not I'd do them for my project