navigation.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. import createElementIfNotDefined from '../../shared/create-element-if-not-defined.js';
  2. import $ from '../../shared/dom.js';
  3. export default function Navigation({
  4. swiper,
  5. extendParams,
  6. on,
  7. emit
  8. }) {
  9. extendParams({
  10. navigation: {
  11. nextEl: null,
  12. prevEl: null,
  13. hideOnClick: false,
  14. disabledClass: 'swiper-button-disabled',
  15. hiddenClass: 'swiper-button-hidden',
  16. lockClass: 'swiper-button-lock'
  17. }
  18. });
  19. swiper.navigation = {
  20. nextEl: null,
  21. $nextEl: null,
  22. prevEl: null,
  23. $prevEl: null
  24. };
  25. function getEl(el) {
  26. let $el;
  27. if (el) {
  28. $el = $(el);
  29. if (swiper.params.uniqueNavElements && typeof el === 'string' && $el.length > 1 && swiper.$el.find(el).length === 1) {
  30. $el = swiper.$el.find(el);
  31. }
  32. }
  33. return $el;
  34. }
  35. function toggleEl($el, disabled) {
  36. const params = swiper.params.navigation;
  37. if ($el && $el.length > 0) {
  38. $el[disabled ? 'addClass' : 'removeClass'](params.disabledClass);
  39. if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
  40. if (swiper.params.watchOverflow && swiper.enabled) {
  41. $el[swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
  42. }
  43. }
  44. }
  45. function update() {
  46. // Update Navigation Buttons
  47. if (swiper.params.loop) return;
  48. const {
  49. $nextEl,
  50. $prevEl
  51. } = swiper.navigation;
  52. toggleEl($prevEl, swiper.isBeginning);
  53. toggleEl($nextEl, swiper.isEnd);
  54. }
  55. function onPrevClick(e) {
  56. e.preventDefault();
  57. if (swiper.isBeginning && !swiper.params.loop) return;
  58. swiper.slidePrev();
  59. }
  60. function onNextClick(e) {
  61. e.preventDefault();
  62. if (swiper.isEnd && !swiper.params.loop) return;
  63. swiper.slideNext();
  64. }
  65. function init() {
  66. const params = swiper.params.navigation;
  67. swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
  68. nextEl: 'swiper-button-next',
  69. prevEl: 'swiper-button-prev'
  70. });
  71. if (!(params.nextEl || params.prevEl)) return;
  72. const $nextEl = getEl(params.nextEl);
  73. const $prevEl = getEl(params.prevEl);
  74. if ($nextEl && $nextEl.length > 0) {
  75. $nextEl.on('click', onNextClick);
  76. }
  77. if ($prevEl && $prevEl.length > 0) {
  78. $prevEl.on('click', onPrevClick);
  79. }
  80. Object.assign(swiper.navigation, {
  81. $nextEl,
  82. nextEl: $nextEl && $nextEl[0],
  83. $prevEl,
  84. prevEl: $prevEl && $prevEl[0]
  85. });
  86. if (!swiper.enabled) {
  87. if ($nextEl) $nextEl.addClass(params.lockClass);
  88. if ($prevEl) $prevEl.addClass(params.lockClass);
  89. }
  90. }
  91. function destroy() {
  92. const {
  93. $nextEl,
  94. $prevEl
  95. } = swiper.navigation;
  96. if ($nextEl && $nextEl.length) {
  97. $nextEl.off('click', onNextClick);
  98. $nextEl.removeClass(swiper.params.navigation.disabledClass);
  99. }
  100. if ($prevEl && $prevEl.length) {
  101. $prevEl.off('click', onPrevClick);
  102. $prevEl.removeClass(swiper.params.navigation.disabledClass);
  103. }
  104. }
  105. on('init', () => {
  106. init();
  107. update();
  108. });
  109. on('toEdge fromEdge lock unlock', () => {
  110. update();
  111. });
  112. on('destroy', () => {
  113. destroy();
  114. });
  115. on('enable disable', () => {
  116. const {
  117. $nextEl,
  118. $prevEl
  119. } = swiper.navigation;
  120. if ($nextEl) {
  121. $nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
  122. }
  123. if ($prevEl) {
  124. $prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
  125. }
  126. });
  127. on('click', (_s, e) => {
  128. const {
  129. $nextEl,
  130. $prevEl
  131. } = swiper.navigation;
  132. const targetEl = e.target;
  133. if (swiper.params.navigation.hideOnClick && !$(targetEl).is($prevEl) && !$(targetEl).is($nextEl)) {
  134. if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
  135. let isHidden;
  136. if ($nextEl) {
  137. isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
  138. } else if ($prevEl) {
  139. isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
  140. }
  141. if (isHidden === true) {
  142. emit('navigationShow');
  143. } else {
  144. emit('navigationHide');
  145. }
  146. if ($nextEl) {
  147. $nextEl.toggleClass(swiper.params.navigation.hiddenClass);
  148. }
  149. if ($prevEl) {
  150. $prevEl.toggleClass(swiper.params.navigation.hiddenClass);
  151. }
  152. }
  153. });
  154. Object.assign(swiper.navigation, {
  155. update,
  156. init,
  157. destroy
  158. });
  159. }