toggles.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /* ========================================================================
  2. * Ratchet: toggles.js v2.0.2
  3. * http://goratchet.com/components#toggles
  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 start = {};
  12. var touchMove = false;
  13. var distanceX = false;
  14. var toggle = false;
  15. var findToggle = function (target) {
  16. var i;
  17. var toggles = document.querySelectorAll('.toggle');
  18. for (; target && target !== document; target = target.parentNode) {
  19. for (i = toggles.length; i--;) {
  20. if (toggles[i] === target) {
  21. return target;
  22. }
  23. }
  24. }
  25. };
  26. window.addEventListener('touchstart', function (e) {
  27. e = e.originalEvent || e;
  28. toggle = findToggle(e.target);
  29. if (!toggle) {
  30. return;
  31. }
  32. var handle = toggle.querySelector('.toggle-handle');
  33. var toggleWidth = toggle.clientWidth;
  34. var handleWidth = handle.clientWidth;
  35. var offset = toggle.classList.contains('active') ? (toggleWidth - handleWidth) : 0;
  36. start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
  37. touchMove = false;
  38. });
  39. window.addEventListener('touchmove', function (e) {
  40. e = e.originalEvent || e;
  41. if (e.touches.length > 1) {
  42. return; // Exit if a pinch
  43. }
  44. if (!toggle) {
  45. return;
  46. }
  47. var handle = toggle.querySelector('.toggle-handle');
  48. var current = e.touches[0];
  49. var toggleWidth = toggle.clientWidth;
  50. var handleWidth = handle.clientWidth;
  51. var offset = toggleWidth - handleWidth;
  52. touchMove = true;
  53. distanceX = current.pageX - start.pageX;
  54. if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) {
  55. return;
  56. }
  57. e.preventDefault();
  58. if (distanceX < 0) {
  59. return (handle.style.webkitTransform = 'translate3d(0,0,0)');
  60. }
  61. if (distanceX > offset) {
  62. return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)');
  63. }
  64. handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
  65. toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
  66. });
  67. window.addEventListener('touchend', function (e) {
  68. if (!toggle) {
  69. return;
  70. }
  71. var handle = toggle.querySelector('.toggle-handle');
  72. var toggleWidth = toggle.clientWidth;
  73. var handleWidth = handle.clientWidth;
  74. var offset = (toggleWidth - handleWidth);
  75. var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
  76. if (slideOn) {
  77. handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
  78. } else {
  79. handle.style.webkitTransform = 'translate3d(0,0,0)';
  80. }
  81. toggle.classList[slideOn ? 'add' : 'remove']('active');
  82. e = new CustomEvent('toggle', {
  83. detail: { isActive: slideOn },
  84. bubbles: true,
  85. cancelable: true
  86. });
  87. toggle.dispatchEvent(e);
  88. touchMove = false;
  89. toggle = false;
  90. });
  91. }());