observe-image.esm.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /*!
  2. * better-scroll / observe-image
  3. * (c) 2016-2021 ustbhuangyi
  4. * Released under the MIT License.
  5. */
  6. // ssr support
  7. var inBrowser = typeof window !== 'undefined';
  8. var ua = inBrowser && navigator.userAgent.toLowerCase();
  9. !!(ua && /wechatdevtools/.test(ua));
  10. ua && ua.indexOf('android') > 0;
  11. /* istanbul ignore next */
  12. ((function () {
  13. if (typeof ua === 'string') {
  14. var regex = /os (\d\d?_\d(_\d)?)/;
  15. var matches = regex.exec(ua);
  16. if (!matches)
  17. return false;
  18. var parts = matches[1].split('_').map(function (item) {
  19. return parseInt(item, 10);
  20. });
  21. // ios version >= 13.4 issue 982
  22. return !!(parts[0] === 13 && parts[1] >= 4);
  23. }
  24. return false;
  25. }))();
  26. /* istanbul ignore next */
  27. var supportsPassive = false;
  28. /* istanbul ignore next */
  29. if (inBrowser) {
  30. var EventName = 'test-passive';
  31. try {
  32. var opts = {};
  33. Object.defineProperty(opts, 'passive', {
  34. get: function () {
  35. supportsPassive = true;
  36. },
  37. }); // https://github.com/facebook/flow/issues/285
  38. window.addEventListener(EventName, function () { }, opts);
  39. }
  40. catch (e) { }
  41. }
  42. var extend = function (target, source) {
  43. for (var key in source) {
  44. target[key] = source[key];
  45. }
  46. return target;
  47. };
  48. var elementStyle = (inBrowser &&
  49. document.createElement('div').style);
  50. var vendor = (function () {
  51. /* istanbul ignore if */
  52. if (!inBrowser) {
  53. return false;
  54. }
  55. var transformNames = [
  56. {
  57. key: 'standard',
  58. value: 'transform',
  59. },
  60. {
  61. key: 'webkit',
  62. value: 'webkitTransform',
  63. },
  64. {
  65. key: 'Moz',
  66. value: 'MozTransform',
  67. },
  68. {
  69. key: 'O',
  70. value: 'OTransform',
  71. },
  72. {
  73. key: 'ms',
  74. value: 'msTransform',
  75. },
  76. ];
  77. for (var _i = 0, transformNames_1 = transformNames; _i < transformNames_1.length; _i++) {
  78. var obj = transformNames_1[_i];
  79. if (elementStyle[obj.value] !== undefined) {
  80. return obj.key;
  81. }
  82. }
  83. /* istanbul ignore next */
  84. return false;
  85. })();
  86. /* istanbul ignore next */
  87. function prefixStyle(style) {
  88. if (vendor === false) {
  89. return style;
  90. }
  91. if (vendor === 'standard') {
  92. if (style === 'transitionEnd') {
  93. return 'transitionend';
  94. }
  95. return style;
  96. }
  97. return vendor + style.charAt(0).toUpperCase() + style.substr(1);
  98. }
  99. function addEvent(el, type, fn, capture) {
  100. var useCapture = supportsPassive
  101. ? {
  102. passive: false,
  103. capture: !!capture,
  104. }
  105. : !!capture;
  106. el.addEventListener(type, fn, useCapture);
  107. }
  108. function removeEvent(el, type, fn, capture) {
  109. el.removeEventListener(type, fn, {
  110. capture: !!capture,
  111. });
  112. }
  113. vendor && vendor !== 'standard' ? '-' + vendor.toLowerCase() + '-' : '';
  114. var transform = prefixStyle('transform');
  115. var transition = prefixStyle('transition');
  116. inBrowser && prefixStyle('perspective') in elementStyle;
  117. ({
  118. transform: transform,
  119. transition: transition,
  120. transitionTimingFunction: prefixStyle('transitionTimingFunction'),
  121. transitionDuration: prefixStyle('transitionDuration'),
  122. transitionDelay: prefixStyle('transitionDelay'),
  123. transformOrigin: prefixStyle('transformOrigin'),
  124. transitionEnd: prefixStyle('transitionEnd'),
  125. transitionProperty: prefixStyle('transitionProperty'),
  126. });
  127. var EventRegister = /** @class */ (function () {
  128. function EventRegister(wrapper, events) {
  129. this.wrapper = wrapper;
  130. this.events = events;
  131. this.addDOMEvents();
  132. }
  133. EventRegister.prototype.destroy = function () {
  134. this.removeDOMEvents();
  135. this.events = [];
  136. };
  137. EventRegister.prototype.addDOMEvents = function () {
  138. this.handleDOMEvents(addEvent);
  139. };
  140. EventRegister.prototype.removeDOMEvents = function () {
  141. this.handleDOMEvents(removeEvent);
  142. };
  143. EventRegister.prototype.handleDOMEvents = function (eventOperation) {
  144. var _this = this;
  145. var wrapper = this.wrapper;
  146. this.events.forEach(function (event) {
  147. eventOperation(wrapper, event.name, _this, !!event.capture);
  148. });
  149. };
  150. EventRegister.prototype.handleEvent = function (e) {
  151. var eventType = e.type;
  152. this.events.some(function (event) {
  153. if (event.name === eventType) {
  154. event.handler(e);
  155. return true;
  156. }
  157. return false;
  158. });
  159. };
  160. return EventRegister;
  161. }());
  162. var isImageTag = function (el) {
  163. return el.tagName.toLowerCase() === 'img';
  164. };
  165. var ObserveImage = /** @class */ (function () {
  166. function ObserveImage(scroll) {
  167. this.scroll = scroll;
  168. this.refreshTimer = 0;
  169. this.init();
  170. }
  171. ObserveImage.prototype.init = function () {
  172. this.handleOptions(this.scroll.options.observeImage);
  173. this.bindEventsToWrapper();
  174. };
  175. ObserveImage.prototype.handleOptions = function (userOptions) {
  176. if (userOptions === void 0) { userOptions = {}; }
  177. userOptions = (userOptions === true ? {} : userOptions);
  178. var defaultOptions = {
  179. debounceTime: 100,
  180. };
  181. this.options = extend(defaultOptions, userOptions);
  182. };
  183. ObserveImage.prototype.bindEventsToWrapper = function () {
  184. var wrapper = this.scroll.scroller.wrapper;
  185. this.imageLoadEventRegister = new EventRegister(wrapper, [
  186. {
  187. name: 'load',
  188. handler: this.load.bind(this),
  189. capture: true,
  190. },
  191. ]);
  192. this.imageErrorEventRegister = new EventRegister(wrapper, [
  193. {
  194. name: 'error',
  195. handler: this.load.bind(this),
  196. capture: true,
  197. },
  198. ]);
  199. };
  200. ObserveImage.prototype.load = function (e) {
  201. var _this = this;
  202. var target = e.target;
  203. var debounceTime = this.options.debounceTime;
  204. if (target && isImageTag(target)) {
  205. if (debounceTime === 0) {
  206. this.scroll.refresh();
  207. }
  208. else {
  209. clearTimeout(this.refreshTimer);
  210. this.refreshTimer = window.setTimeout(function () {
  211. _this.scroll.refresh();
  212. }, this.options.debounceTime);
  213. }
  214. }
  215. };
  216. ObserveImage.pluginName = 'observeImage';
  217. return ObserveImage;
  218. }());
  219. export default ObserveImage;