infinite-scroll.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  41. /******/ }
  42. /******/ };
  43. /******/
  44. /******/ // define __esModule on exports
  45. /******/ __webpack_require__.r = function(exports) {
  46. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  48. /******/ }
  49. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  50. /******/ };
  51. /******/
  52. /******/ // create a fake namespace object
  53. /******/ // mode & 1: value is a module id, require it
  54. /******/ // mode & 2: merge all properties of value into the ns
  55. /******/ // mode & 4: return value when already ns object
  56. /******/ // mode & 8|1: behave like require
  57. /******/ __webpack_require__.t = function(value, mode) {
  58. /******/ if(mode & 1) value = __webpack_require__(value);
  59. /******/ if(mode & 8) return value;
  60. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  61. /******/ var ns = Object.create(null);
  62. /******/ __webpack_require__.r(ns);
  63. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  64. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  65. /******/ return ns;
  66. /******/ };
  67. /******/
  68. /******/ // getDefaultExport function for compatibility with non-harmony modules
  69. /******/ __webpack_require__.n = function(module) {
  70. /******/ var getter = module && module.__esModule ?
  71. /******/ function getDefault() { return module['default']; } :
  72. /******/ function getModuleExports() { return module; };
  73. /******/ __webpack_require__.d(getter, 'a', getter);
  74. /******/ return getter;
  75. /******/ };
  76. /******/
  77. /******/ // Object.prototype.hasOwnProperty.call
  78. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  79. /******/
  80. /******/ // __webpack_public_path__
  81. /******/ __webpack_require__.p = "/dist/";
  82. /******/
  83. /******/
  84. /******/ // Load entry module and return exports
  85. /******/ return __webpack_require__(__webpack_require__.s = 139);
  86. /******/ })
  87. /************************************************************************/
  88. /******/ ({
  89. /***/ 139:
  90. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  91. "use strict";
  92. __webpack_require__.r(__webpack_exports__);
  93. // EXTERNAL MODULE: external "throttle-debounce/debounce"
  94. var debounce_ = __webpack_require__(18);
  95. var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
  96. // EXTERNAL MODULE: external "element-ui/lib/utils/types"
  97. var types_ = __webpack_require__(17);
  98. // EXTERNAL MODULE: external "element-ui/lib/utils/dom"
  99. var dom_ = __webpack_require__(2);
  100. // CONCATENATED MODULE: ./packages/infinite-scroll/src/main.js
  101. var getStyleComputedProperty = function getStyleComputedProperty(element, property) {
  102. if (element === window) {
  103. element = document.documentElement;
  104. }
  105. if (element.nodeType !== 1) {
  106. return [];
  107. }
  108. // NOTE: 1 DOM access here
  109. var css = window.getComputedStyle(element, null);
  110. return property ? css[property] : css;
  111. };
  112. var entries = function entries(obj) {
  113. return Object.keys(obj || {}).map(function (key) {
  114. return [key, obj[key]];
  115. });
  116. };
  117. var getPositionSize = function getPositionSize(el, prop) {
  118. return el === window || el === document ? document.documentElement[prop] : el[prop];
  119. };
  120. var getOffsetHeight = function getOffsetHeight(el) {
  121. return getPositionSize(el, 'offsetHeight');
  122. };
  123. var getClientHeight = function getClientHeight(el) {
  124. return getPositionSize(el, 'clientHeight');
  125. };
  126. var scope = 'ElInfiniteScroll';
  127. var attributes = {
  128. delay: {
  129. type: Number,
  130. default: 200
  131. },
  132. distance: {
  133. type: Number,
  134. default: 0
  135. },
  136. disabled: {
  137. type: Boolean,
  138. default: false
  139. },
  140. immediate: {
  141. type: Boolean,
  142. default: true
  143. }
  144. };
  145. var main_getScrollOptions = function getScrollOptions(el, vm) {
  146. if (!Object(types_["isHtmlElement"])(el)) return {};
  147. return entries(attributes).reduce(function (map, _ref) {
  148. var key = _ref[0],
  149. option = _ref[1];
  150. var type = option.type,
  151. defaultValue = option.default;
  152. var value = el.getAttribute('infinite-scroll-' + key);
  153. value = Object(types_["isUndefined"])(vm[value]) ? value : vm[value];
  154. switch (type) {
  155. case Number:
  156. value = Number(value);
  157. value = Number.isNaN(value) ? defaultValue : value;
  158. break;
  159. case Boolean:
  160. value = Object(types_["isDefined"])(value) ? value === 'false' ? false : Boolean(value) : defaultValue;
  161. break;
  162. default:
  163. value = type(value);
  164. }
  165. map[key] = value;
  166. return map;
  167. }, {});
  168. };
  169. var getElementTop = function getElementTop(el) {
  170. return el.getBoundingClientRect().top;
  171. };
  172. var main_handleScroll = function handleScroll(cb) {
  173. var _scope = this[scope],
  174. el = _scope.el,
  175. vm = _scope.vm,
  176. container = _scope.container,
  177. observer = _scope.observer;
  178. var _getScrollOptions = main_getScrollOptions(el, vm),
  179. distance = _getScrollOptions.distance,
  180. disabled = _getScrollOptions.disabled;
  181. if (disabled) return;
  182. var containerInfo = container.getBoundingClientRect();
  183. if (!containerInfo.width && !containerInfo.height) return;
  184. var shouldTrigger = false;
  185. if (container === el) {
  186. // be aware of difference between clientHeight & offsetHeight & window.getComputedStyle().height
  187. var scrollBottom = container.scrollTop + getClientHeight(container);
  188. shouldTrigger = container.scrollHeight - scrollBottom <= distance;
  189. } else {
  190. var heightBelowTop = getOffsetHeight(el) + getElementTop(el) - getElementTop(container);
  191. var offsetHeight = getOffsetHeight(container);
  192. var borderBottom = Number.parseFloat(getStyleComputedProperty(container, 'borderBottomWidth'));
  193. shouldTrigger = heightBelowTop - offsetHeight + borderBottom <= distance;
  194. }
  195. if (shouldTrigger && Object(types_["isFunction"])(cb)) {
  196. cb.call(vm);
  197. } else if (observer) {
  198. observer.disconnect();
  199. this[scope].observer = null;
  200. }
  201. };
  202. /* harmony default export */ var main = ({
  203. name: 'InfiniteScroll',
  204. inserted: function inserted(el, binding, vnode) {
  205. var cb = binding.value;
  206. var vm = vnode.context;
  207. // only include vertical scroll
  208. var container = Object(dom_["getScrollContainer"])(el, true);
  209. var _getScrollOptions2 = main_getScrollOptions(el, vm),
  210. delay = _getScrollOptions2.delay,
  211. immediate = _getScrollOptions2.immediate;
  212. var onScroll = debounce_default()(delay, main_handleScroll.bind(el, cb));
  213. el[scope] = { el: el, vm: vm, container: container, onScroll: onScroll };
  214. if (container) {
  215. container.addEventListener('scroll', onScroll);
  216. if (immediate) {
  217. var observer = el[scope].observer = new MutationObserver(onScroll);
  218. observer.observe(container, { childList: true, subtree: true });
  219. onScroll();
  220. }
  221. }
  222. },
  223. unbind: function unbind(el) {
  224. var _el$scope = el[scope],
  225. container = _el$scope.container,
  226. onScroll = _el$scope.onScroll;
  227. if (container) {
  228. container.removeEventListener('scroll', onScroll);
  229. }
  230. }
  231. });
  232. // CONCATENATED MODULE: ./packages/infinite-scroll/index.js
  233. /* istanbul ignore next */
  234. main.install = function (Vue) {
  235. Vue.directive(main.name, main);
  236. };
  237. /* harmony default export */ var infinite_scroll = __webpack_exports__["default"] = (main);
  238. /***/ }),
  239. /***/ 17:
  240. /***/ (function(module, exports) {
  241. module.exports = require("element-ui/lib/utils/types");
  242. /***/ }),
  243. /***/ 18:
  244. /***/ (function(module, exports) {
  245. module.exports = require("throttle-debounce/debounce");
  246. /***/ }),
  247. /***/ 2:
  248. /***/ (function(module, exports) {
  249. module.exports = require("element-ui/lib/utils/dom");
  250. /***/ })
  251. /******/ });