navigation.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. export default function Navigation({
  2. swiper,
  3. extendParams,
  4. on,
  5. emit
  6. }) {
  7. extendParams({
  8. navigation: {
  9. nextEl: null,
  10. prevEl: null,
  11. hideOnClick: false,
  12. disabledClass: 'swiper-button-disabled',
  13. hiddenClass: 'swiper-button-hidden',
  14. lockClass: 'swiper-button-lock',
  15. },
  16. });
  17. swiper.navigation = {
  18. nextEl: null,
  19. $nextEl: null,
  20. prevEl: null,
  21. $prevEl: null,
  22. };
  23. function toggleEl($el, disabled) {
  24. if (!swiper.$wrapperEl) return
  25. // debugger
  26. const params = swiper.params.navigation;
  27. if ($el) {
  28. swiper.$wrapperEl[disabled ? `add${$el}` : `remove${$el}`](params.disabledClass);
  29. if (swiper.params.watchOverflow && swiper.enabled) {
  30. swiper.$wrapperEl[swiper.isLocked ? `add${$el}` : `remove${$el}`](params.lockClass);
  31. }
  32. }
  33. }
  34. function update() {
  35. // Update Navigation Buttons
  36. if (swiper.params.loop) return;
  37. const {
  38. $nextEl,
  39. $prevEl
  40. } = swiper.navigation;
  41. toggleEl('PrevElClass', swiper.isBeginning && !swiper.params.rewind);
  42. toggleEl('NextElClass', swiper.isEnd && !swiper.params.rewind);
  43. }
  44. function onPrevClick(e) {
  45. // e.preventDefault();
  46. if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
  47. swiper.slidePrev();
  48. }
  49. function onNextClick() {
  50. // e.preventDefault();
  51. if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
  52. swiper.slideNext();
  53. }
  54. function init() {
  55. const params = swiper.params.navigation;
  56. if (params.slot || params.custom) {
  57. params.nextEl = true;
  58. params.prevEl = true;
  59. }
  60. if (!(params.nextEl || params.prevEl) && !params.slot && !params.custom) return;
  61. if (params.slot) {
  62. swiper.native.updateData({
  63. showPrevButtonSlot: true,
  64. showNextButtonSlot: true
  65. })
  66. } else if (params.custom) {} else {
  67. swiper.native.updateData({
  68. showPrevButton: true,
  69. showNextButton: true
  70. })
  71. }
  72. const $nextEl = params.nextEl;
  73. const $prevEl = params.prevEl;
  74. if ($nextEl) {
  75. swiper.on('nextClick', onNextClick);
  76. }
  77. if ($prevEl) {
  78. swiper.on('prevClick', onPrevClick);
  79. }
  80. Object.assign(swiper.navigation, {
  81. $nextEl,
  82. nextEl: $nextEl,
  83. $prevEl,
  84. prevEl: $prevEl,
  85. });
  86. if (!swiper.enabled) {
  87. if ($nextEl) swiper.$wrapperEl.addNextElClass(params.lockClass);
  88. if ($prevEl) swiper.$wrapperEl.addPrevElClass(params.lockClass);
  89. }
  90. }
  91. function destroy() {
  92. const {
  93. $nextEl,
  94. $prevEl
  95. } = swiper.navigation;
  96. if ($nextEl) {
  97. swiper.off('nextClick', onNextClick);
  98. swiper.$wrapperEl.removeNextElClass(swiper.params.navigation.disabledClass);
  99. }
  100. if ($prevEl) {
  101. swiper.off('prevClick', onPrevClick);
  102. swiper.$wrapperEl.removePrevElClass(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. swiper.$wrapperEl[swiper.enabled ? 'removeNextElClass' : 'addNextElClass'](swiper.params.navigation
  122. .lockClass);
  123. // $nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
  124. }
  125. if ($prevEl) {
  126. swiper.$wrapperEl[swiper.enabled ? 'removePrevElClass' : 'addPrevElClass'](swiper.params.navigation
  127. .lockClass);
  128. // $prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
  129. }
  130. });
  131. // on('click', (_s, e) => {
  132. // const {
  133. // $nextEl,
  134. // $prevEl
  135. // } = swiper.navigation;
  136. // const targetEl = e.target;
  137. // if (
  138. // swiper.params.navigation.hideOnClick &&
  139. // !$(targetEl).is($prevEl) &&
  140. // !$(targetEl).is($nextEl)
  141. // ) {
  142. // if (
  143. // swiper.pagination &&
  144. // swiper.params.pagination &&
  145. // swiper.params.pagination.clickable &&
  146. // (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))
  147. // )
  148. // return;
  149. // let isHidden;
  150. // if ($nextEl) {
  151. // isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
  152. // } else if ($prevEl) {
  153. // isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
  154. // }
  155. // if (isHidden === true) {
  156. // emit('navigationShow');
  157. // } else {
  158. // emit('navigationHide');
  159. // }
  160. // if ($nextEl) {
  161. // $nextEl.toggleClass(swiper.params.navigation.hiddenClass);
  162. // }
  163. // if ($prevEl) {
  164. // $prevEl.toggleClass(swiper.params.navigation.hiddenClass);
  165. // }
  166. // }
  167. // });
  168. Object.assign(swiper.navigation, {
  169. update,
  170. init,
  171. destroy,
  172. });
  173. }