pull-down.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. /*!
  2. * better-scroll / pull-down
  3. * (c) 2016-2021 ustbhuangyi
  4. * Released under the MIT License.
  5. */
  6. (function (global, factory) {
  7. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  8. typeof define === 'function' && define.amd ? define(factory) :
  9. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.PullDown = factory());
  10. }(this, (function () { 'use strict';
  11. // ssr support
  12. var inBrowser = typeof window !== 'undefined';
  13. var ua = inBrowser && navigator.userAgent.toLowerCase();
  14. !!(ua && /wechatdevtools/.test(ua));
  15. ua && ua.indexOf('android') > 0;
  16. /* istanbul ignore next */
  17. ((function () {
  18. if (typeof ua === 'string') {
  19. var regex = /os (\d\d?_\d(_\d)?)/;
  20. var matches = regex.exec(ua);
  21. if (!matches)
  22. return false;
  23. var parts = matches[1].split('_').map(function (item) {
  24. return parseInt(item, 10);
  25. });
  26. // ios version >= 13.4 issue 982
  27. return !!(parts[0] === 13 && parts[1] >= 4);
  28. }
  29. return false;
  30. }))();
  31. /* istanbul ignore next */
  32. var supportsPassive = false;
  33. /* istanbul ignore next */
  34. if (inBrowser) {
  35. var EventName = 'test-passive';
  36. try {
  37. var opts = {};
  38. Object.defineProperty(opts, 'passive', {
  39. get: function () {
  40. supportsPassive = true;
  41. },
  42. }); // https://github.com/facebook/flow/issues/285
  43. window.addEventListener(EventName, function () { }, opts);
  44. }
  45. catch (e) { }
  46. }
  47. var extend = function (target, source) {
  48. for (var key in source) {
  49. target[key] = source[key];
  50. }
  51. return target;
  52. };
  53. var elementStyle = (inBrowser &&
  54. document.createElement('div').style);
  55. var vendor = (function () {
  56. /* istanbul ignore if */
  57. if (!inBrowser) {
  58. return false;
  59. }
  60. var transformNames = [
  61. {
  62. key: 'standard',
  63. value: 'transform',
  64. },
  65. {
  66. key: 'webkit',
  67. value: 'webkitTransform',
  68. },
  69. {
  70. key: 'Moz',
  71. value: 'MozTransform',
  72. },
  73. {
  74. key: 'O',
  75. value: 'OTransform',
  76. },
  77. {
  78. key: 'ms',
  79. value: 'msTransform',
  80. },
  81. ];
  82. for (var _i = 0, transformNames_1 = transformNames; _i < transformNames_1.length; _i++) {
  83. var obj = transformNames_1[_i];
  84. if (elementStyle[obj.value] !== undefined) {
  85. return obj.key;
  86. }
  87. }
  88. /* istanbul ignore next */
  89. return false;
  90. })();
  91. /* istanbul ignore next */
  92. function prefixStyle(style) {
  93. if (vendor === false) {
  94. return style;
  95. }
  96. if (vendor === 'standard') {
  97. if (style === 'transitionEnd') {
  98. return 'transitionend';
  99. }
  100. return style;
  101. }
  102. return vendor + style.charAt(0).toUpperCase() + style.substr(1);
  103. }
  104. vendor && vendor !== 'standard' ? '-' + vendor.toLowerCase() + '-' : '';
  105. var transform = prefixStyle('transform');
  106. var transition = prefixStyle('transition');
  107. inBrowser && prefixStyle('perspective') in elementStyle;
  108. ({
  109. transform: transform,
  110. transition: transition,
  111. transitionTimingFunction: prefixStyle('transitionTimingFunction'),
  112. transitionDuration: prefixStyle('transitionDuration'),
  113. transitionDelay: prefixStyle('transitionDelay'),
  114. transformOrigin: prefixStyle('transformOrigin'),
  115. transitionEnd: prefixStyle('transitionEnd'),
  116. transitionProperty: prefixStyle('transitionProperty'),
  117. });
  118. var ease = {
  119. // easeOutQuint
  120. swipe: {
  121. style: 'cubic-bezier(0.23, 1, 0.32, 1)',
  122. fn: function (t) {
  123. return 1 + --t * t * t * t * t;
  124. }
  125. },
  126. // easeOutQuard
  127. swipeBounce: {
  128. style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
  129. fn: function (t) {
  130. return t * (2 - t);
  131. }
  132. },
  133. // easeOutQuart
  134. bounce: {
  135. style: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
  136. fn: function (t) {
  137. return 1 - --t * t * t * t;
  138. }
  139. }
  140. };
  141. var sourcePrefix = 'plugins.pullDownRefresh';
  142. var propertiesMap = [
  143. {
  144. key: 'finishPullDown',
  145. name: 'finishPullDown'
  146. },
  147. {
  148. key: 'openPullDown',
  149. name: 'openPullDown'
  150. },
  151. {
  152. key: 'closePullDown',
  153. name: 'closePullDown'
  154. },
  155. {
  156. key: 'autoPullDownRefresh',
  157. name: 'autoPullDownRefresh'
  158. }
  159. ];
  160. var propertiesConfig = propertiesMap.map(function (item) {
  161. return {
  162. key: item.key,
  163. sourceKey: sourcePrefix + "." + item.name
  164. };
  165. });
  166. var PULLING_DOWN_EVENT = 'pullingDown';
  167. var ENTER_THRESHOLD_EVENT = 'enterThreshold';
  168. var LEAVE_THRESHOLD_EVENT = 'leaveThreshold';
  169. var PullDown = /** @class */ (function () {
  170. function PullDown(scroll) {
  171. this.scroll = scroll;
  172. this.pulling = 0 /* DEFAULT */;
  173. this.thresholdBoundary = 0 /* DEFAULT */;
  174. this.init();
  175. }
  176. PullDown.prototype.setPulling = function (status) {
  177. this.pulling = status;
  178. };
  179. PullDown.prototype.setThresholdBoundary = function (boundary) {
  180. this.thresholdBoundary = boundary;
  181. };
  182. PullDown.prototype.init = function () {
  183. this.handleBScroll();
  184. this.handleOptions(this.scroll.options.pullDownRefresh);
  185. this.handleHooks();
  186. this.watch();
  187. };
  188. PullDown.prototype.handleBScroll = function () {
  189. this.scroll.registerType([
  190. PULLING_DOWN_EVENT,
  191. ENTER_THRESHOLD_EVENT,
  192. LEAVE_THRESHOLD_EVENT,
  193. ]);
  194. this.scroll.proxy(propertiesConfig);
  195. };
  196. PullDown.prototype.handleOptions = function (userOptions) {
  197. if (userOptions === void 0) { userOptions = {}; }
  198. userOptions = (userOptions === true ? {} : userOptions);
  199. var defaultOptions = {
  200. threshold: 90,
  201. stop: 40,
  202. };
  203. this.options = extend(defaultOptions, userOptions);
  204. this.scroll.options.probeType = 3 /* Realtime */;
  205. };
  206. PullDown.prototype.handleHooks = function () {
  207. var _this = this;
  208. this.hooksFn = [];
  209. var scroller = this.scroll.scroller;
  210. var scrollBehaviorY = scroller.scrollBehaviorY;
  211. this.currentMinScrollY = this.cachedOriginanMinScrollY =
  212. scrollBehaviorY.minScrollPos;
  213. this.registerHooks(this.scroll.hooks, this.scroll.hooks.eventTypes.contentChanged, function () {
  214. _this.finishPullDown();
  215. });
  216. this.registerHooks(scrollBehaviorY.hooks, scrollBehaviorY.hooks.eventTypes.computeBoundary, function (boundary) {
  217. // content is smaller than wrapper
  218. if (boundary.maxScrollPos > 0) {
  219. // allow scrolling when content is not full of wrapper
  220. boundary.maxScrollPos = -1;
  221. }
  222. boundary.minScrollPos = _this.currentMinScrollY;
  223. });
  224. // integrate with mousewheel
  225. if (this.hasMouseWheelPlugin()) {
  226. this.registerHooks(this.scroll, this.scroll.eventTypes.alterOptions, function (mouseWheelOptions) {
  227. var SANE_DISCRETE_TIME = 300;
  228. var SANE_EASE_TIME = 350;
  229. mouseWheelOptions.discreteTime = SANE_DISCRETE_TIME;
  230. // easeTime > discreteTime ensure goInto checkPullDown function
  231. mouseWheelOptions.easeTime = SANE_EASE_TIME;
  232. });
  233. this.registerHooks(this.scroll, this.scroll.eventTypes.mousewheelEnd, function () {
  234. // mouseWheel need trigger checkPullDown manually
  235. scroller.hooks.trigger(scroller.hooks.eventTypes.end);
  236. });
  237. }
  238. };
  239. PullDown.prototype.registerHooks = function (hooks, name, handler) {
  240. hooks.on(name, handler, this);
  241. this.hooksFn.push([hooks, name, handler]);
  242. };
  243. PullDown.prototype.hasMouseWheelPlugin = function () {
  244. return !!this.scroll.eventTypes.alterOptions;
  245. };
  246. PullDown.prototype.watch = function () {
  247. var scroller = this.scroll.scroller;
  248. this.watching = true;
  249. this.registerHooks(scroller.hooks, scroller.hooks.eventTypes.end, this.checkPullDown);
  250. this.registerHooks(this.scroll, this.scroll.eventTypes.scrollStart, this.resetStateBeforeScrollStart);
  251. this.registerHooks(this.scroll, this.scroll.eventTypes.scroll, this.checkLocationOfThresholdBoundary);
  252. if (this.hasMouseWheelPlugin()) {
  253. this.registerHooks(this.scroll, this.scroll.eventTypes.mousewheelStart, this.resetStateBeforeScrollStart);
  254. }
  255. };
  256. PullDown.prototype.resetStateBeforeScrollStart = function () {
  257. // current fetching pulldownRefresh has ended
  258. if (!this.isFetchingStatus()) {
  259. this.setPulling(1 /* MOVING */);
  260. this.setThresholdBoundary(0 /* DEFAULT */);
  261. }
  262. };
  263. PullDown.prototype.checkLocationOfThresholdBoundary = function () {
  264. // pulldownRefresh is in the phase of Moving
  265. if (this.pulling === 1 /* MOVING */) {
  266. var scroll_1 = this.scroll;
  267. // enter threshold boundary
  268. var enteredThresholdBoundary = this.thresholdBoundary !== 1 /* INSIDE */ &&
  269. this.locateInsideThresholdBoundary();
  270. // leave threshold boundary
  271. var leftThresholdBoundary = this.thresholdBoundary !== 2 /* OUTSIDE */ &&
  272. !this.locateInsideThresholdBoundary();
  273. if (enteredThresholdBoundary) {
  274. this.setThresholdBoundary(1 /* INSIDE */);
  275. scroll_1.trigger(ENTER_THRESHOLD_EVENT);
  276. }
  277. if (leftThresholdBoundary) {
  278. this.setThresholdBoundary(2 /* OUTSIDE */);
  279. scroll_1.trigger(LEAVE_THRESHOLD_EVENT);
  280. }
  281. }
  282. };
  283. PullDown.prototype.locateInsideThresholdBoundary = function () {
  284. return this.scroll.y <= this.options.threshold;
  285. };
  286. PullDown.prototype.unwatch = function () {
  287. var scroll = this.scroll;
  288. var scroller = scroll.scroller;
  289. this.watching = false;
  290. scroller.hooks.off(scroller.hooks.eventTypes.end, this.checkPullDown);
  291. scroll.off(scroll.eventTypes.scrollStart, this.resetStateBeforeScrollStart);
  292. scroll.off(scroll.eventTypes.scroll, this.checkLocationOfThresholdBoundary);
  293. if (this.hasMouseWheelPlugin()) {
  294. scroll.off(scroll.eventTypes.mousewheelStart, this.resetStateBeforeScrollStart);
  295. }
  296. };
  297. PullDown.prototype.checkPullDown = function () {
  298. var _a = this.options, threshold = _a.threshold, stop = _a.stop;
  299. // check if a real pull down action
  300. if (this.scroll.y < threshold) {
  301. return false;
  302. }
  303. if (this.pulling === 1 /* MOVING */) {
  304. this.modifyBehaviorYBoundary(stop);
  305. this.setPulling(2 /* FETCHING */);
  306. this.scroll.trigger(PULLING_DOWN_EVENT);
  307. }
  308. this.scroll.scrollTo(this.scroll.x, stop, this.scroll.options.bounceTime, ease.bounce);
  309. return this.isFetchingStatus();
  310. };
  311. PullDown.prototype.isFetchingStatus = function () {
  312. return this.pulling === 2 /* FETCHING */;
  313. };
  314. PullDown.prototype.modifyBehaviorYBoundary = function (stopDistance) {
  315. var scrollBehaviorY = this.scroll.scroller.scrollBehaviorY;
  316. // manually modify minScrollPos for a hang animation
  317. // to prevent from resetPosition
  318. this.cachedOriginanMinScrollY = scrollBehaviorY.minScrollPos;
  319. this.currentMinScrollY = stopDistance;
  320. scrollBehaviorY.computeBoundary();
  321. };
  322. PullDown.prototype.finishPullDown = function () {
  323. if (this.isFetchingStatus()) {
  324. var scrollBehaviorY = this.scroll.scroller.scrollBehaviorY;
  325. // restore minScrollY since the hang animation has ended
  326. this.currentMinScrollY = this.cachedOriginanMinScrollY;
  327. scrollBehaviorY.computeBoundary();
  328. this.setPulling(0 /* DEFAULT */);
  329. this.scroll.resetPosition(this.scroll.options.bounceTime, ease.bounce);
  330. }
  331. };
  332. // allow 'true' type is compat for beta version implements
  333. PullDown.prototype.openPullDown = function (config) {
  334. if (config === void 0) { config = {}; }
  335. this.handleOptions(config);
  336. if (!this.watching) {
  337. this.watch();
  338. }
  339. };
  340. PullDown.prototype.closePullDown = function () {
  341. this.unwatch();
  342. };
  343. PullDown.prototype.autoPullDownRefresh = function () {
  344. var _a = this.options, threshold = _a.threshold, stop = _a.stop;
  345. if (this.isFetchingStatus() || !this.watching) {
  346. return;
  347. }
  348. this.modifyBehaviorYBoundary(stop);
  349. this.scroll.trigger(this.scroll.eventTypes.scrollStart);
  350. this.scroll.scrollTo(this.scroll.x, threshold);
  351. this.setPulling(2 /* FETCHING */);
  352. this.scroll.trigger(PULLING_DOWN_EVENT);
  353. this.scroll.scrollTo(this.scroll.x, stop, this.scroll.options.bounceTime, ease.bounce);
  354. };
  355. PullDown.pluginName = 'pullDownRefresh';
  356. return PullDown;
  357. }());
  358. return PullDown;
  359. })));