observe-dom.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. /*!
  2. * better-scroll / observe-dom
  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.ObserveDom = 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 elementStyle = (inBrowser &&
  48. document.createElement('div').style);
  49. var vendor = (function () {
  50. /* istanbul ignore if */
  51. if (!inBrowser) {
  52. return false;
  53. }
  54. var transformNames = [
  55. {
  56. key: 'standard',
  57. value: 'transform',
  58. },
  59. {
  60. key: 'webkit',
  61. value: 'webkitTransform',
  62. },
  63. {
  64. key: 'Moz',
  65. value: 'MozTransform',
  66. },
  67. {
  68. key: 'O',
  69. value: 'OTransform',
  70. },
  71. {
  72. key: 'ms',
  73. value: 'msTransform',
  74. },
  75. ];
  76. for (var _i = 0, transformNames_1 = transformNames; _i < transformNames_1.length; _i++) {
  77. var obj = transformNames_1[_i];
  78. if (elementStyle[obj.value] !== undefined) {
  79. return obj.key;
  80. }
  81. }
  82. /* istanbul ignore next */
  83. return false;
  84. })();
  85. /* istanbul ignore next */
  86. function prefixStyle(style) {
  87. if (vendor === false) {
  88. return style;
  89. }
  90. if (vendor === 'standard') {
  91. if (style === 'transitionEnd') {
  92. return 'transitionend';
  93. }
  94. return style;
  95. }
  96. return vendor + style.charAt(0).toUpperCase() + style.substr(1);
  97. }
  98. vendor && vendor !== 'standard' ? '-' + vendor.toLowerCase() + '-' : '';
  99. var transform = prefixStyle('transform');
  100. var transition = prefixStyle('transition');
  101. inBrowser && prefixStyle('perspective') in elementStyle;
  102. ({
  103. transform: transform,
  104. transition: transition,
  105. transitionTimingFunction: prefixStyle('transitionTimingFunction'),
  106. transitionDuration: prefixStyle('transitionDuration'),
  107. transitionDelay: prefixStyle('transitionDelay'),
  108. transformOrigin: prefixStyle('transformOrigin'),
  109. transitionEnd: prefixStyle('transitionEnd'),
  110. transitionProperty: prefixStyle('transitionProperty'),
  111. });
  112. function getRect(el) {
  113. /* istanbul ignore if */
  114. if (el instanceof window.SVGElement) {
  115. var rect = el.getBoundingClientRect();
  116. return {
  117. top: rect.top,
  118. left: rect.left,
  119. width: rect.width,
  120. height: rect.height,
  121. };
  122. }
  123. else {
  124. return {
  125. top: el.offsetTop,
  126. left: el.offsetLeft,
  127. width: el.offsetWidth,
  128. height: el.offsetHeight,
  129. };
  130. }
  131. }
  132. var ObserveDOM = /** @class */ (function () {
  133. function ObserveDOM(scroll) {
  134. this.scroll = scroll;
  135. this.stopObserver = false;
  136. this.init();
  137. }
  138. ObserveDOM.prototype.init = function () {
  139. this.handleMutationObserver();
  140. this.handleHooks();
  141. };
  142. ObserveDOM.prototype.handleMutationObserver = function () {
  143. var _this = this;
  144. if (typeof MutationObserver !== 'undefined') {
  145. var timer_1 = 0;
  146. this.observer = new MutationObserver(function (mutations) {
  147. _this.mutationObserverHandler(mutations, timer_1);
  148. });
  149. this.startObserve(this.observer);
  150. }
  151. else {
  152. this.checkDOMUpdate();
  153. }
  154. };
  155. ObserveDOM.prototype.handleHooks = function () {
  156. var _this = this;
  157. this.hooksFn = [];
  158. this.registerHooks(this.scroll.hooks, this.scroll.hooks.eventTypes.contentChanged, function () {
  159. _this.stopObserve();
  160. // launch a new mutationObserver
  161. _this.handleMutationObserver();
  162. });
  163. this.registerHooks(this.scroll.hooks, this.scroll.hooks.eventTypes.enable, function () {
  164. if (_this.stopObserver) {
  165. _this.handleMutationObserver();
  166. }
  167. });
  168. this.registerHooks(this.scroll.hooks, this.scroll.hooks.eventTypes.disable, function () {
  169. _this.stopObserve();
  170. });
  171. this.registerHooks(this.scroll.hooks, this.scroll.hooks.eventTypes.destroy, function () {
  172. _this.destroy();
  173. });
  174. };
  175. ObserveDOM.prototype.mutationObserverHandler = function (mutations, timer) {
  176. var _this = this;
  177. if (this.shouldNotRefresh()) {
  178. return;
  179. }
  180. var immediateRefresh = false;
  181. var deferredRefresh = false;
  182. for (var i = 0; i < mutations.length; i++) {
  183. var mutation = mutations[i];
  184. if (mutation.type !== 'attributes') {
  185. immediateRefresh = true;
  186. break;
  187. }
  188. else {
  189. if (mutation.target !== this.scroll.scroller.content) {
  190. deferredRefresh = true;
  191. break;
  192. }
  193. }
  194. }
  195. if (immediateRefresh) {
  196. this.scroll.refresh();
  197. }
  198. else if (deferredRefresh) {
  199. // attributes changes too often
  200. clearTimeout(timer);
  201. timer = window.setTimeout(function () {
  202. if (!_this.shouldNotRefresh()) {
  203. _this.scroll.refresh();
  204. }
  205. }, 60);
  206. }
  207. };
  208. ObserveDOM.prototype.startObserve = function (observer) {
  209. var config = {
  210. attributes: true,
  211. childList: true,
  212. subtree: true,
  213. };
  214. observer.observe(this.scroll.scroller.content, config);
  215. };
  216. ObserveDOM.prototype.shouldNotRefresh = function () {
  217. var scroller = this.scroll.scroller;
  218. var scrollBehaviorX = scroller.scrollBehaviorX, scrollBehaviorY = scroller.scrollBehaviorY;
  219. var outsideBoundaries = scrollBehaviorX.currentPos > scrollBehaviorX.minScrollPos ||
  220. scrollBehaviorX.currentPos < scrollBehaviorX.maxScrollPos ||
  221. scrollBehaviorY.currentPos > scrollBehaviorY.minScrollPos ||
  222. scrollBehaviorY.currentPos < scrollBehaviorY.maxScrollPos;
  223. return scroller.animater.pending || outsideBoundaries;
  224. };
  225. ObserveDOM.prototype.checkDOMUpdate = function () {
  226. var _this = this;
  227. var content = this.scroll.scroller.content;
  228. var contentRect = getRect(content);
  229. var oldWidth = contentRect.width;
  230. var oldHeight = contentRect.height;
  231. var check = function () {
  232. if (_this.stopObserver) {
  233. return;
  234. }
  235. contentRect = getRect(content);
  236. var newWidth = contentRect.width;
  237. var newHeight = contentRect.height;
  238. if (oldWidth !== newWidth || oldHeight !== newHeight) {
  239. _this.scroll.refresh();
  240. }
  241. oldWidth = newWidth;
  242. oldHeight = newHeight;
  243. next();
  244. };
  245. var next = function () {
  246. setTimeout(function () {
  247. check();
  248. }, 1000);
  249. };
  250. next();
  251. };
  252. ObserveDOM.prototype.registerHooks = function (hooks, name, handler) {
  253. hooks.on(name, handler, this);
  254. this.hooksFn.push([hooks, name, handler]);
  255. };
  256. ObserveDOM.prototype.stopObserve = function () {
  257. this.stopObserver = true;
  258. if (this.observer) {
  259. this.observer.disconnect();
  260. }
  261. };
  262. ObserveDOM.prototype.destroy = function () {
  263. this.stopObserve();
  264. this.hooksFn.forEach(function (item) {
  265. var hooks = item[0];
  266. var hooksName = item[1];
  267. var handlerFn = item[2];
  268. hooks.off(hooksName, handlerFn);
  269. });
  270. this.hooksFn.length = 0;
  271. };
  272. ObserveDOM.pluginName = 'observeDOM';
  273. return ObserveDOM;
  274. }());
  275. return ObserveDOM;
  276. })));