utils.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. import { getWindow } from 'ssr-window';
  2. function deleteProps(obj) {
  3. const object = obj;
  4. Object.keys(object).forEach(key => {
  5. try {
  6. object[key] = null;
  7. } catch (e) {// no getter for object
  8. }
  9. try {
  10. delete object[key];
  11. } catch (e) {// something got wrong
  12. }
  13. });
  14. }
  15. function nextTick(callback, delay) {
  16. if (delay === void 0) {
  17. delay = 0;
  18. }
  19. return setTimeout(callback, delay);
  20. }
  21. function now() {
  22. return Date.now();
  23. }
  24. function getComputedStyle(el) {
  25. const window = getWindow();
  26. let style;
  27. if (window.getComputedStyle) {
  28. style = window.getComputedStyle(el, null);
  29. }
  30. if (!style && el.currentStyle) {
  31. style = el.currentStyle;
  32. }
  33. if (!style) {
  34. style = el.style;
  35. }
  36. return style;
  37. }
  38. function getTranslate(el, axis) {
  39. if (axis === void 0) {
  40. axis = 'x';
  41. }
  42. const window = getWindow();
  43. let matrix;
  44. let curTransform;
  45. let transformMatrix;
  46. const curStyle = getComputedStyle(el, null);
  47. if (window.WebKitCSSMatrix) {
  48. curTransform = curStyle.transform || curStyle.webkitTransform;
  49. if (curTransform.split(',').length > 6) {
  50. curTransform = curTransform.split(', ').map(a => a.replace(',', '.')).join(', ');
  51. } // Some old versions of Webkit choke when 'none' is passed; pass
  52. // empty string instead in this case
  53. transformMatrix = new window.WebKitCSSMatrix(curTransform === 'none' ? '' : curTransform);
  54. } else {
  55. transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,');
  56. matrix = transformMatrix.toString().split(',');
  57. }
  58. if (axis === 'x') {
  59. // Latest Chrome and webkits Fix
  60. if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41; // Crazy IE10 Matrix
  61. else if (matrix.length === 16) curTransform = parseFloat(matrix[12]); // Normal Browsers
  62. else curTransform = parseFloat(matrix[4]);
  63. }
  64. if (axis === 'y') {
  65. // Latest Chrome and webkits Fix
  66. if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42; // Crazy IE10 Matrix
  67. else if (matrix.length === 16) curTransform = parseFloat(matrix[13]); // Normal Browsers
  68. else curTransform = parseFloat(matrix[5]);
  69. }
  70. return curTransform || 0;
  71. }
  72. function isObject(o) {
  73. return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
  74. }
  75. function isNode(node) {
  76. // eslint-disable-next-line
  77. if (typeof window !== 'undefined' && typeof window.HTMLElement !== 'undefined') {
  78. return node instanceof HTMLElement;
  79. }
  80. return node && (node.nodeType === 1 || node.nodeType === 11);
  81. }
  82. function extend() {
  83. const to = Object(arguments.length <= 0 ? undefined : arguments[0]);
  84. const noExtend = ['__proto__', 'constructor', 'prototype'];
  85. for (let i = 1; i < arguments.length; i += 1) {
  86. const nextSource = i < 0 || arguments.length <= i ? undefined : arguments[i];
  87. if (nextSource !== undefined && nextSource !== null && !isNode(nextSource)) {
  88. const keysArray = Object.keys(Object(nextSource)).filter(key => noExtend.indexOf(key) < 0);
  89. for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {
  90. const nextKey = keysArray[nextIndex];
  91. const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
  92. if (desc !== undefined && desc.enumerable) {
  93. if (isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
  94. if (nextSource[nextKey].__swiper__) {
  95. to[nextKey] = nextSource[nextKey];
  96. } else {
  97. extend(to[nextKey], nextSource[nextKey]);
  98. }
  99. } else if (!isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
  100. to[nextKey] = {};
  101. if (nextSource[nextKey].__swiper__) {
  102. to[nextKey] = nextSource[nextKey];
  103. } else {
  104. extend(to[nextKey], nextSource[nextKey]);
  105. }
  106. } else {
  107. to[nextKey] = nextSource[nextKey];
  108. }
  109. }
  110. }
  111. }
  112. }
  113. return to;
  114. }
  115. function setCSSProperty(el, varName, varValue) {
  116. el.style.setProperty(varName, varValue);
  117. }
  118. function animateCSSModeScroll(_ref) {
  119. let {
  120. swiper,
  121. targetPosition,
  122. side
  123. } = _ref;
  124. const window = getWindow();
  125. const startPosition = -swiper.translate;
  126. let startTime = null;
  127. let time;
  128. const duration = swiper.params.speed;
  129. swiper.wrapperEl.style.scrollSnapType = 'none';
  130. window.cancelAnimationFrame(swiper.cssModeFrameID);
  131. const dir = targetPosition > startPosition ? 'next' : 'prev';
  132. const isOutOfBound = (current, target) => {
  133. return dir === 'next' && current >= target || dir === 'prev' && current <= target;
  134. };
  135. const animate = () => {
  136. time = new Date().getTime();
  137. if (startTime === null) {
  138. startTime = time;
  139. }
  140. const progress = Math.max(Math.min((time - startTime) / duration, 1), 0);
  141. const easeProgress = 0.5 - Math.cos(progress * Math.PI) / 2;
  142. let currentPosition = startPosition + easeProgress * (targetPosition - startPosition);
  143. if (isOutOfBound(currentPosition, targetPosition)) {
  144. currentPosition = targetPosition;
  145. }
  146. swiper.wrapperEl.scrollTo({
  147. [side]: currentPosition
  148. });
  149. if (isOutOfBound(currentPosition, targetPosition)) {
  150. swiper.wrapperEl.style.overflow = 'hidden';
  151. swiper.wrapperEl.style.scrollSnapType = '';
  152. setTimeout(() => {
  153. swiper.wrapperEl.style.overflow = '';
  154. swiper.wrapperEl.scrollTo({
  155. [side]: currentPosition
  156. });
  157. });
  158. window.cancelAnimationFrame(swiper.cssModeFrameID);
  159. return;
  160. }
  161. swiper.cssModeFrameID = window.requestAnimationFrame(animate);
  162. };
  163. animate();
  164. }
  165. export { animateCSSModeScroll, deleteProps, nextTick, now, getTranslate, isObject, extend, getComputedStyle, setCSSProperty };