vue-next-level-scroll/dist/vue-next-level-scroll.js

Bring your scroll game to the next level

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.nextLevelScroll = factory());
}(this, (function () { 'use strict';

  var index = {
    functional: true,
    render: function render(h, _ref) {
      var children = _ref.children,
          data = _ref.data,
          _ref$props = _ref.props,
          target = _ref$props.target,
          scrollFunction = _ref$props.scrollFunction,
          _ref$props$shouldNavi = _ref$props.shouldNavigate,
          shouldNavigate = _ref$props$shouldNavi === void 0 ? false : _ref$props$shouldNavi,
          _ref$props$navigation = _ref$props.navigationType,
          navigationType = _ref$props$navigation === void 0 ? 'push' : _ref$props$navigation,
          _ref$props$tag = _ref$props.tag,
          tag = _ref$props$tag === void 0 ? 'div' : _ref$props$tag,
          $router = _ref.parent.$router,
          _ssrNode = _ref._ssrNode;

      var clickFunction = function clickFunction() {
        var fn = scrollFunction || defaultScrollFunction;
        fn(target, {
          shouldNavigate: shouldNavigate,
          navigationType: navigationType,
          $router: $router
        });
      };

      return h(tag, Object.assign({}, data, {
        on: {
          // Ignore scroll function on server side
          click: _ssrNode || process.server ? undefined : clickFunction
        }
      }), children);
    }
  };

  var defaultScrollFunction = function defaultScrollFunction(rawTarget, _ref2) {
    return new Promise(function ($return, $error) {
      var shouldNavigate, navigationType, $router, target, currentRoute, hash, fullPath, newPath, node;
      shouldNavigate = _ref2.shouldNavigate, navigationType = _ref2.navigationType, $router = _ref2.$router;
      return Promise.resolve(new Promise(function ($return, $error) {
        if (typeof rawTarget === 'function') {
          return Promise.resolve(rawTarget()).then($return, $error);
        }

        return $return(rawTarget);
      })).then(function ($await_4) {
        try {
          target = $await_4;

          // If no target given, auto scroll to top
          if (!target) {
            window.scroll({
              top: 0,
              behavior: 'smooth'
            });

            if (shouldNavigate && $router) {
              currentRoute = $router.currentRoute;
              hash = currentRoute.hash;
              fullPath = currentRoute.fullPath;
              newPath = fullPath.replace(hash, '');
              navigate($router, newPath, navigationType);
            }

            return $return();
          }

          node = document.querySelector(target);

          // If target prop is present but the node does not exist, send an error
          if (!node) {
            // eslint-disable-next-line no-console
            return $return(console.error("Could not scroll to ".concat(target)));
          }

          node.scrollIntoView({
            behavior: 'smooth'
          });

          if (shouldNavigate && $router) {
            navigate($router, target, navigationType);
          }

          return $return();
        } catch ($boundEx) {
          return $error($boundEx);
        }
      }, $error);
    });
  };

  var navigate = function navigate($router, path, type) {
    $router[type](path);
  };

  return index;

})));