You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

135 lines
4.3 KiB

9 months ago
  1. /*!
  2. * Bootstrap swipe.js v5.3.3 (https://getbootstrap.com/)
  3. * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  4. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  5. */
  6. (function (global, factory) {
  7. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../dom/event-handler.js'), require('./config.js'), require('./index.js')) :
  8. typeof define === 'function' && define.amd ? define(['../dom/event-handler', './config', './index'], factory) :
  9. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Swipe = factory(global.EventHandler, global.Config, global.Index));
  10. })(this, (function (EventHandler, Config, index_js) { 'use strict';
  11. /**
  12. * --------------------------------------------------------------------------
  13. * Bootstrap util/swipe.js
  14. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  15. * --------------------------------------------------------------------------
  16. */
  17. /**
  18. * Constants
  19. */
  20. const NAME = 'swipe';
  21. const EVENT_KEY = '.bs.swipe';
  22. const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`;
  23. const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`;
  24. const EVENT_TOUCHEND = `touchend${EVENT_KEY}`;
  25. const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`;
  26. const EVENT_POINTERUP = `pointerup${EVENT_KEY}`;
  27. const POINTER_TYPE_TOUCH = 'touch';
  28. const POINTER_TYPE_PEN = 'pen';
  29. const CLASS_NAME_POINTER_EVENT = 'pointer-event';
  30. const SWIPE_THRESHOLD = 40;
  31. const Default = {
  32. endCallback: null,
  33. leftCallback: null,
  34. rightCallback: null
  35. };
  36. const DefaultType = {
  37. endCallback: '(function|null)',
  38. leftCallback: '(function|null)',
  39. rightCallback: '(function|null)'
  40. };
  41. /**
  42. * Class definition
  43. */
  44. class Swipe extends Config {
  45. constructor(element, config) {
  46. super();
  47. this._element = element;
  48. if (!element || !Swipe.isSupported()) {
  49. return;
  50. }
  51. this._config = this._getConfig(config);
  52. this._deltaX = 0;
  53. this._supportPointerEvents = Boolean(window.PointerEvent);
  54. this._initEvents();
  55. }
  56. // Getters
  57. static get Default() {
  58. return Default;
  59. }
  60. static get DefaultType() {
  61. return DefaultType;
  62. }
  63. static get NAME() {
  64. return NAME;
  65. }
  66. // Public
  67. dispose() {
  68. EventHandler.off(this._element, EVENT_KEY);
  69. }
  70. // Private
  71. _start(event) {
  72. if (!this._supportPointerEvents) {
  73. this._deltaX = event.touches[0].clientX;
  74. return;
  75. }
  76. if (this._eventIsPointerPenTouch(event)) {
  77. this._deltaX = event.clientX;
  78. }
  79. }
  80. _end(event) {
  81. if (this._eventIsPointerPenTouch(event)) {
  82. this._deltaX = event.clientX - this._deltaX;
  83. }
  84. this._handleSwipe();
  85. index_js.execute(this._config.endCallback);
  86. }
  87. _move(event) {
  88. this._deltaX = event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this._deltaX;
  89. }
  90. _handleSwipe() {
  91. const absDeltaX = Math.abs(this._deltaX);
  92. if (absDeltaX <= SWIPE_THRESHOLD) {
  93. return;
  94. }
  95. const direction = absDeltaX / this._deltaX;
  96. this._deltaX = 0;
  97. if (!direction) {
  98. return;
  99. }
  100. index_js.execute(direction > 0 ? this._config.rightCallback : this._config.leftCallback);
  101. }
  102. _initEvents() {
  103. if (this._supportPointerEvents) {
  104. EventHandler.on(this._element, EVENT_POINTERDOWN, event => this._start(event));
  105. EventHandler.on(this._element, EVENT_POINTERUP, event => this._end(event));
  106. this._element.classList.add(CLASS_NAME_POINTER_EVENT);
  107. } else {
  108. EventHandler.on(this._element, EVENT_TOUCHSTART, event => this._start(event));
  109. EventHandler.on(this._element, EVENT_TOUCHMOVE, event => this._move(event));
  110. EventHandler.on(this._element, EVENT_TOUCHEND, event => this._end(event));
  111. }
  112. }
  113. _eventIsPointerPenTouch(event) {
  114. return this._supportPointerEvents && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH);
  115. }
  116. // Static
  117. static isSupported() {
  118. return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0;
  119. }
  120. }
  121. return Swipe;
  122. }));
  123. //# sourceMappingURL=swipe.js.map