overscroll/lib/domStates.js

scroll

'use strict';

exports.__esModule = true;

exports['default'] = function (scope) {
  var target = scope.target,
      overscroll = scope.overscroll,
      _scope$domData = scope.domData,
      setData = _scope$domData.setData,
      hasData = _scope$domData.hasData,
      removeData = _scope$domData.removeData,
      hasScrollY = scope.hasScrollY,
      hasScrollX = scope.hasScrollX,
      getNearestScrollable = scope.getNearestScrollable,
      getParent = scope.getParent,
      NOBUBBLE = scope.NOBUBBLE;


  function handleState(states) {
    return function (target) {
      var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';

      if (!hasData(target, state)) {
        states.filter(function (elemState) {
          return state !== elemState && hasData(target, elemState);
        }).forEach(function (state) {
          return removeData(target, state);
        });
        if (state && states.includes(state)) {
          setData(target, state);
        }
      }
    };
  }

  // 滚动位置
  var setPositionX = handleState(['scrollLeft', 'scrollRight', 'scrollX']);
  var setPositionY = handleState(['scrollTop', 'scrollBottom', 'scrollY']);

  // 动画状态
  var setAnimationX = handleState(['scrollingX']);
  var setAnimationY = handleState(['scrollingY']);

  // 方向
  var setDirectionX = handleState(['scrollingLeft', 'scrollingRight']);
  var setDirectionY = handleState(['scrollingUp', 'scrollingDown']);

  function animatingX() {
    setAnimationX(target, 'scrollingX');
  }

  function animatingY() {
    setAnimationY(target, 'scrollingY');
  }

  function scrollingUp() {
    setDirectionY(target, 'scrollingUp');
  }

  function scrollingDown() {
    setDirectionY(target, 'scrollingDown');
  }

  function scrollingLeft() {
    setDirectionX(target, 'scrollingLeft');
  }

  function scrollingRight() {
    setDirectionX(target, 'scrollingRight');
  }

  function scrollingStopX() {
    setDirectionX(target);
    setAnimationX(target);
  }

  function scrollingStopY() {
    setDirectionY(target);
    setAnimationY(target);
  }

  function isTop() {
    var dom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : overscroll;

    return dom.scrollTop < 1;
  }

  function isBottom() {
    var dom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : overscroll;

    return dom.scrollTop === dom.scrollHeight - dom.clientHeight;
  }

  function isLeft() {
    var dom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : overscroll;

    return dom.scrollLeft < 1;
  }

  function isRight() {
    var dom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : overscroll;

    return dom.scrollLeft === dom.scrollWidth - dom.clientWidth;
  }

  function scrollableTo(dom) {
    return {
      top: hasScrollY(dom) && !isTop(dom),
      left: hasScrollX(dom) && !isLeft(dom),
      right: hasScrollX(dom) && !isRight(dom),
      bottom: hasScrollY(dom) && !isBottom(dom)
    };
  }

  function scrollable(dom) {
    var childrenState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { top: false, left: false, right: false, bottom: false };

    var scrollableDom = getNearestScrollable(dom);
    var state = scrollableTo(scrollableDom);
    if (target === scrollableDom) {
      return {
        top: state.top && !childrenState.top,
        left: state.left && !childrenState.left,
        right: state.right && !childrenState.right,
        bottom: state.bottom && !childrenState.bottom
      };
    }
    return scrollable(getParent(scrollableDom), {
      top: hasData(scrollableDom, NOBUBBLE) || state.top || childrenState.top,
      left: hasData(scrollableDom, NOBUBBLE) || state.left || childrenState.left,
      right: hasData(scrollableDom, NOBUBBLE) || state.right || childrenState.right,
      bottom: hasData(scrollableDom, NOBUBBLE) || state.bottom || childrenState.bottom
    });
  }

  // 滚动状态设置完成后运行该函数
  function resetState() {
    var scrollTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var scrollLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;


    // 位置判断 -----------------
    // 纵向状态设置
    if (isTop()) {
      setPositionY(target, 'scrollTop');
    } else if (isBottom()) {
      setPositionY(target, 'scrollBottom');
    } else {
      setPositionY(target, 'scrollY');
    }

    // 横向状态设置
    if (isLeft()) {
      setPositionX(target, 'scrollLeft');
    } else if (isRight()) {
      setPositionX(target, 'scrollRight');
    } else {
      setPositionX(target, 'scrollX');
    }

    // 滚动状态判断 ----------------
    if (scrollTop === 0 || overscroll.scrollTop === scrollTop) {
      scrollingStopY();
    } else if (overscroll.scrollTop > scrollTop) {
      animatingY();
      scrollingDown();
    } else if (overscroll.scrollTop < scrollTop) {
      animatingY();
      scrollingUp();
    }

    if (scrollLeft === 0 || overscroll.scrollLeft === scrollLeft) {
      scrollingStopX();
    } else if (overscroll.scrollLeft > scrollLeft) {
      animatingX();
      scrollingRight();
    } else if (overscroll.scrollLeft < scrollLeft) {
      animatingX();
      scrollingLeft();
    }
  }

  return {
    isTop: isTop,
    isBottom: isBottom,
    isLeft: isLeft,
    isRight: isRight,
    animatingX: animatingX,
    animatingY: animatingY,
    scrollingUp: scrollingUp,
    scrollingDown: scrollingDown,
    scrollingLeft: scrollingLeft,
    scrollingRight: scrollingRight,
    scrollingStopX: scrollingStopX,
    scrollingStopY: scrollingStopY,
    resetState: resetState,
    scrollable: scrollable
  };
};