webslides/src/js/plugins/scroll.js

Making HTML presentations easy

import MobileDetector from '../utils/mobile-detector';


/**
 * Scroll plugin.
 */
export default class Scroll {
  /**
   * @param {WebSlides} wsInstance The WebSlides instance
   * @constructor
   */
  constructor(wsInstance) {
    /**
     * @type {WebSlides}
     * @private
     */
    this.ws_ = wsInstance;
    /**
     * Where the scroll is going to happen. The WebSlides element.
     * @type {Element}
     * @private
     */
    this.scrollContainer_ = wsInstance.el;
    /**
     * Whether movement is happening up or down.
     * @type {boolean}
     * @private
     */
    this.isGoingUp_ = false;
    /**
     * Whether movement is happening left or right.
     * @type {boolean}
     * @private
     */
    this.isGoingLeft_ = false;
    /**
     * Timeout id holder.
     * @type {?number}
     * @private
     */
    this.timeout_ = null;

    // Disabling from option
    if (!this.ws_.options.navigateOnScroll) {
      return;
    }

    if (!MobileDetector.isAny()) {
        this.scrollContainer_.addEventListener(
            'wheel', this.onMouseWheel_.bind(this));

        if (!wsInstance.isVertical) {
          wsInstance.el.addEventListener(
              'ws:slide-change', this.onSlideChange_.bind(this));
        }
    }
  }

  /**
   * When the slides change, set an inner timeout to avoid prematurely
   * changing to the next slide again.
   * @private
   */
  onSlideChange_() {
    this.timeout_ = setTimeout(
        () => {
          this.timeout_ = null;
        },
        this.ws_.options.scrollWait);
  }

  /**
   * Reacts to the wheel event. Detects whether is going up or down and decides
   * if it needs to move the slide based on the amount of delta.
   * @param {WheelEvent} event The Wheel Event.
   * @private
   */
  onMouseWheel_(event) {
    if (this.ws_.isDisabled()) {
      return;
    }

    if (this.ws_.isMoving || this.timeout_) {
      event.preventDefault();
      return;
    }

    // Firefox uses lines instead of pixels for delta
    const linesToPx = event.deltaMode * this.ws_.options.minWheelDelta;
    const {deltaY: wheelDeltaY, deltaX: wheelDeltaX} = event;
    const isVertical = this.ws_.isVertical;
    const isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
    this.isGoingUp_ = wheelDeltaY < 0;
    this.isGoingLeft_ = wheelDeltaX < 0;


    // If we're mainly moving horizontally, prevent default
    if (isHorizontalMovement) {
      if (!isVertical) {
        event.preventDefault();
      } else {
        // If we're moving horizontally but this is vertical, return to avoid
        // unwanted navigation.
        return;
      }
    }

    if (Math.abs(wheelDeltaY + linesToPx) >= this.ws_.options.minWheelDelta ||
        Math.abs(wheelDeltaX + linesToPx) >= this.ws_.options.minWheelDelta) {
      if ((isHorizontalMovement && this.isGoingLeft_) ||
          (!isHorizontalMovement && this.isGoingUp_)) {
        this.ws_.goPrev();
      } else {
        this.ws_.goNext();
      }

      event.preventDefault();
    }
  }
}