navigation.js 5.1 KB

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