iep-ui/lib/infinite-scroll/InfiniteScroll.js

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

'use strict';

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

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _throttleDebounce = require('../vc-util/Dom/throttle-debounce');

var _type = require('../_util/type');

var _dom = require('../vc-util/Dom/dom');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var getStyleComputedProperty = function getStyleComputedProperty(element, property) {
  if (element === window) {
    element = document.documentElement;
  }

  if (element.nodeType !== 1) {
    return [];
  }
  // NOTE: 1 DOM access here
  var css = window.getComputedStyle(element, null);
  return property ? css[property] : css;
};

var entries = function entries(obj) {
  return Object.keys(obj || {}).map(function (key) {
    return [key, obj[key]];
  });
};

var getPositionSize = function getPositionSize(el, prop) {
  return el === window || el === document ? document.documentElement[prop] : el[prop];
};

var getOffsetHeight = function getOffsetHeight(el) {
  return getPositionSize(el, 'offsetHeight');
};

var getClientHeight = function getClientHeight(el) {
  return getPositionSize(el, 'clientHeight');
};

var scope = 'ElInfiniteScroll';
var attributes = {
  delay: {
    type: Number,
    'default': 200
  },
  distance: {
    type: Number,
    'default': 0
  },
  disabled: {
    type: Boolean,
    'default': false
  },
  immediate: {
    type: Boolean,
    'default': true
  }
};

var getScrollOptions = function getScrollOptions(el, vm) {
  if (!(0, _type.isHtmlElement)(el)) return {};

  return entries(attributes).reduce(function (map, _ref) {
    var _ref2 = (0, _slicedToArray3['default'])(_ref, 2),
        key = _ref2[0],
        option = _ref2[1];

    var type = option.type,
        defaultValue = option['default'];

    var value = el.getAttribute('infinite-scroll-' + key);
    value = (0, _type.isUndefined)(vm[value]) ? value : vm[value];
    switch (type) {
      case Number:
        value = Number(value);
        value = Number.isNaN(value) ? defaultValue : value;
        break;
      case Boolean:
        value = (0, _type.isDefined)(value) ? value === 'false' ? false : Boolean(value) : defaultValue;
        break;
      default:
        value = type(value);
    }
    map[key] = value;
    return map;
  }, {});
};

var getElementTop = function getElementTop(el) {
  return el.getBoundingClientRect().top;
};

var handleScroll = function handleScroll(cb) {
  var _scope = this[scope],
      el = _scope.el,
      vm = _scope.vm,
      container = _scope.container,
      observer = _scope.observer;

  var _getScrollOptions = getScrollOptions(el, vm),
      distance = _getScrollOptions.distance,
      disabled = _getScrollOptions.disabled;

  if (disabled) return;

  var containerInfo = container.getBoundingClientRect();
  if (!containerInfo.width && !containerInfo.height) return;

  var shouldTrigger = false;

  if (container === el) {
    // be aware of difference between clientHeight & offsetHeight & window.getComputedStyle().height
    var scrollBottom = container.scrollTop + getClientHeight(container);
    shouldTrigger = container.scrollHeight - scrollBottom <= distance;
  } else {
    var heightBelowTop = getOffsetHeight(el) + getElementTop(el) - getElementTop(container);
    var offsetHeight = getOffsetHeight(container);
    var borderBottom = Number.parseFloat(getStyleComputedProperty(container, 'borderBottomWidth'));
    shouldTrigger = heightBelowTop - offsetHeight + borderBottom <= distance;
  }

  if (shouldTrigger && (0, _type.isFunction)(cb)) {
    cb.call(vm);
  } else if (observer) {
    observer.disconnect();
    this[scope].observer = null;
  }
};

exports['default'] = {
  name: 'InfiniteScroll',
  inserted: function inserted(el, binding, vnode) {
    var cb = binding.value;

    var vm = vnode.context;
    // only include vertical scroll
    var container = (0, _dom.getScrollContainer)(el, true);

    var _getScrollOptions2 = getScrollOptions(el, vm),
        delay = _getScrollOptions2.delay,
        immediate = _getScrollOptions2.immediate;

    var onScroll = (0, _throttleDebounce.throttle)(delay, handleScroll.bind(el, cb));

    el[scope] = { el: el, vm: vm, container: container, onScroll: onScroll };

    if (container) {
      container.addEventListener('scroll', onScroll);

      if (immediate) {
        var observer = el[scope].observer = new MutationObserver(onScroll);
        observer.observe(container, { childList: true, subtree: true });
        onScroll();
      }
    }
  },
  unbind: function unbind(el) {
    var _el$scope = el[scope],
        container = _el$scope.container,
        onScroll = _el$scope.onScroll;

    if (container) {
      container.removeEventListener('scroll', onScroll);
    }
  }
};