@fe6/water-pro/lib/_util/hooks/use-scroll-to.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useScrollTo = useScrollTo;

var _shared = require("@fe6/shared");

var _vue = require("vue");

/** @format */
var easeInOutQuad = function easeInOutQuad(t, b, c, d) {
  t /= d / 2;

  if (t < 1) {
    return c / 2 * t * t + b;
  }

  t--;
  return -c / 2 * (t * (t - 2) - 1) + b;
};

var move = function move(el, amount) {
  el.scrollTop = amount;
};

var position = function position(el) {
  return el.scrollTop;
};

function useScrollTo(_ref) {
  var el = _ref.el,
      to = _ref.to,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 500 : _ref$duration,
      callback = _ref.callback;
  var isActiveRef = (0, _vue.ref)(false);
  var start = position(el);
  var change = to - start;
  var increment = 20;
  var currentTime = 0;
  duration = (0, _shared.isUndefined)(duration) ? 500 : duration;

  var animateScroll = function animateScroll() {
    if (!(0, _vue.unref)(isActiveRef)) {
      return;
    }

    currentTime += increment;
    var val = easeInOutQuad(currentTime, start, change, duration);
    move(el, val);

    if (currentTime < duration && (0, _vue.unref)(isActiveRef)) {
      requestAnimationFrame(animateScroll);
    } else {
      if (callback && (0, _shared.isFunction)(callback)) {
        callback();
      }
    }
  };

  var run = function run() {
    isActiveRef.value = true;
    animateScroll();
  };

  var stop = function stop() {
    isActiveRef.value = false;
  };

  return {
    start: run,
    stop: stop
  };
}