navigation.mjs 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import { c as createElementIfNotDefined } from '../shared/create-element-if-not-defined.mjs';
  2. import { m as makeElementsArray } from '../shared/utils.mjs';
  3. function Navigation(_ref) {
  4. let {
  5. swiper,
  6. extendParams,
  7. on,
  8. emit
  9. } = _ref;
  10. extendParams({
  11. navigation: {
  12. nextEl: null,
  13. prevEl: null,
  14. hideOnClick: false,
  15. disabledClass: 'swiper-button-disabled',
  16. hiddenClass: 'swiper-button-hidden',
  17. lockClass: 'swiper-button-lock',
  18. navigationDisabledClass: 'swiper-navigation-disabled'
  19. }
  20. });
  21. swiper.navigation = {
  22. nextEl: null,
  23. prevEl: null
  24. };
  25. function getEl(el) {
  26. let res;
  27. if (el && typeof el === 'string' && swiper.isElement) {
  28. res = swiper.el.querySelector(el) || swiper.hostEl.querySelector(el);
  29. if (res) return res;
  30. }
  31. if (el) {
  32. if (typeof el === 'string') res = [...document.querySelectorAll(el)];
  33. if (swiper.params.uniqueNavElements && typeof el === 'string' && res && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
  34. res = swiper.el.querySelector(el);
  35. } else if (res && res.length === 1) {
  36. res = res[0];
  37. }
  38. }
  39. if (el && !res) return el;
  40. // if (Array.isArray(res) && res.length === 1) res = res[0];
  41. return res;
  42. }
  43. function toggleEl(el, disabled) {
  44. const params = swiper.params.navigation;
  45. el = makeElementsArray(el);
  46. el.forEach(subEl => {
  47. if (subEl) {
  48. subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' '));
  49. if (subEl.tagName === 'BUTTON') subEl.disabled = disabled;
  50. if (swiper.params.watchOverflow && swiper.enabled) {
  51. subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
  52. }
  53. }
  54. });
  55. }
  56. function update() {
  57. // Update Navigation Buttons
  58. const {
  59. nextEl,
  60. prevEl
  61. } = swiper.navigation;
  62. if (swiper.params.loop) {
  63. toggleEl(prevEl, false);
  64. toggleEl(nextEl, false);
  65. return;
  66. }
  67. toggleEl(prevEl, swiper.isBeginning && !swiper.params.rewind);
  68. toggleEl(nextEl, swiper.isEnd && !swiper.params.rewind);
  69. }
  70. function onPrevClick(e) {
  71. e.preventDefault();
  72. if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
  73. swiper.slidePrev();
  74. emit('navigationPrev');
  75. }
  76. function onNextClick(e) {
  77. e.preventDefault();
  78. if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
  79. swiper.slideNext();
  80. emit('navigationNext');
  81. }
  82. function init() {
  83. const params = swiper.params.navigation;
  84. swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
  85. nextEl: 'swiper-button-next',
  86. prevEl: 'swiper-button-prev'
  87. });
  88. if (!(params.nextEl || params.prevEl)) return;
  89. let nextEl = getEl(params.nextEl);
  90. let prevEl = getEl(params.prevEl);
  91. Object.assign(swiper.navigation, {
  92. nextEl,
  93. prevEl
  94. });
  95. nextEl = makeElementsArray(nextEl);
  96. prevEl = makeElementsArray(prevEl);
  97. const initButton = (el, dir) => {
  98. if (el) {
  99. el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
  100. }
  101. if (!swiper.enabled && el) {
  102. el.classList.add(...params.lockClass.split(' '));
  103. }
  104. };
  105. nextEl.forEach(el => initButton(el, 'next'));
  106. prevEl.forEach(el => initButton(el, 'prev'));
  107. }
  108. function destroy() {
  109. let {
  110. nextEl,
  111. prevEl
  112. } = swiper.navigation;
  113. nextEl = makeElementsArray(nextEl);
  114. prevEl = makeElementsArray(prevEl);
  115. const destroyButton = (el, dir) => {
  116. el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
  117. el.classList.remove(...swiper.params.navigation.disabledClass.split(' '));
  118. };
  119. nextEl.forEach(el => destroyButton(el, 'next'));
  120. prevEl.forEach(el => destroyButton(el, 'prev'));
  121. }
  122. on('init', () => {
  123. if (swiper.params.navigation.enabled === false) {
  124. // eslint-disable-next-line
  125. disable();
  126. } else {
  127. init();
  128. update();
  129. }
  130. });
  131. on('toEdge fromEdge lock unlock', () => {
  132. update();
  133. });
  134. on('destroy', () => {
  135. destroy();
  136. });
  137. on('enable disable', () => {
  138. let {
  139. nextEl,
  140. prevEl
  141. } = swiper.navigation;
  142. nextEl = makeElementsArray(nextEl);
  143. prevEl = makeElementsArray(prevEl);
  144. if (swiper.enabled) {
  145. update();
  146. return;
  147. }
  148. [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.add(swiper.params.navigation.lockClass));
  149. });
  150. on('click', (_s, e) => {
  151. let {
  152. nextEl,
  153. prevEl
  154. } = swiper.navigation;
  155. nextEl = makeElementsArray(nextEl);
  156. prevEl = makeElementsArray(prevEl);
  157. const targetEl = e.target;
  158. let targetIsButton = prevEl.includes(targetEl) || nextEl.includes(targetEl);
  159. if (swiper.isElement && !targetIsButton) {
  160. const path = e.path || e.composedPath && e.composedPath();
  161. if (path) {
  162. targetIsButton = path.find(pathEl => nextEl.includes(pathEl) || prevEl.includes(pathEl));
  163. }
  164. }
  165. if (swiper.params.navigation.hideOnClick && !targetIsButton) {
  166. if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
  167. let isHidden;
  168. if (nextEl.length) {
  169. isHidden = nextEl[0].classList.contains(swiper.params.navigation.hiddenClass);
  170. } else if (prevEl.length) {
  171. isHidden = prevEl[0].classList.contains(swiper.params.navigation.hiddenClass);
  172. }
  173. if (isHidden === true) {
  174. emit('navigationShow');
  175. } else {
  176. emit('navigationHide');
  177. }
  178. [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.toggle(swiper.params.navigation.hiddenClass));
  179. }
  180. });
  181. const enable = () => {
  182. swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' '));
  183. init();
  184. update();
  185. };
  186. const disable = () => {
  187. swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' '));
  188. destroy();
  189. };
  190. Object.assign(swiper.navigation, {
  191. enable,
  192. disable,
  193. update,
  194. init,
  195. destroy
  196. });
  197. }
  198. export { Navigation as default };