sliders.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /* ========================================================================
  2. * Ratchet: sliders.js v2.0.2
  3. * http://goratchet.com/components#sliders
  4. * ========================================================================
  5. Adapted from Brad Birdsall's swipe
  6. * Copyright 2014 Connor Sears
  7. * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
  8. * ======================================================================== */
  9. !(function () {
  10. 'use strict';
  11. var pageX;
  12. var pageY;
  13. var slider;
  14. var deltaX;
  15. var deltaY;
  16. var offsetX;
  17. var lastSlide;
  18. var startTime;
  19. var resistance;
  20. var sliderWidth;
  21. var slideNumber;
  22. var isScrolling;
  23. var scrollableArea;
  24. var getSlider = function (target) {
  25. var i;
  26. var sliders = document.querySelectorAll('.slider > .slide-group');
  27. for (; target && target !== document; target = target.parentNode) {
  28. for (i = sliders.length; i--;) {
  29. if (sliders[i] === target) {
  30. return target;
  31. }
  32. }
  33. }
  34. };
  35. var getScroll = function () {
  36. if ('webkitTransform' in slider.style) {
  37. var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
  38. var ret = translate3d ? translate3d[1] : 0;
  39. return parseInt(ret, 10);
  40. }
  41. };
  42. var setSlideNumber = function (offset) {
  43. var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
  44. slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length));
  45. slideNumber += offset;
  46. slideNumber = Math.min(slideNumber, 0);
  47. slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
  48. };
  49. var onTouchStart = function (e) {
  50. slider = getSlider(e.target);
  51. if (!slider) {
  52. return;
  53. }
  54. var firstItem = slider.querySelector('.slide');
  55. scrollableArea = firstItem.offsetWidth * slider.children.length;
  56. isScrolling = undefined;
  57. sliderWidth = slider.offsetWidth;
  58. resistance = 1;
  59. lastSlide = -(slider.children.length - 1);
  60. startTime = +new Date();
  61. pageX = e.touches[0].pageX;
  62. pageY = e.touches[0].pageY;
  63. deltaX = 0;
  64. deltaY = 0;
  65. setSlideNumber(0);
  66. slider.style['-webkit-transition-duration'] = 0;
  67. };
  68. var onTouchMove = function (e) {
  69. if (e.touches.length > 1 || !slider) {
  70. return; // Exit if a pinch || no slider
  71. }
  72. deltaX = e.touches[0].pageX - pageX;
  73. deltaY = e.touches[0].pageY - pageY;
  74. pageX = e.touches[0].pageX;
  75. pageY = e.touches[0].pageY;
  76. if (typeof isScrolling === 'undefined') {
  77. isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
  78. }
  79. if (isScrolling) {
  80. return;
  81. }
  82. offsetX = (deltaX / resistance) + getScroll();
  83. e.preventDefault();
  84. resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
  85. slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
  86. slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
  87. };
  88. var onTouchEnd = function (e) {
  89. if (!slider || isScrolling) {
  90. return;
  91. }
  92. setSlideNumber(
  93. (+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
  94. );
  95. offsetX = slideNumber * sliderWidth;
  96. slider.style['-webkit-transition-duration'] = '.2s';
  97. slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
  98. e = new CustomEvent('slide', {
  99. detail: { slideNumber: Math.abs(slideNumber) },
  100. bubbles: true,
  101. cancelable: true
  102. });
  103. slider.parentNode.dispatchEvent(e);
  104. };
  105. window.addEventListener('touchstart', onTouchStart);
  106. window.addEventListener('touchmove', onTouchMove);
  107. window.addEventListener('touchend', onTouchEnd);
  108. }());