thumbs.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. import { isObject } from '../../shared/utils.js';
  2. import $ from '../../shared/dom.js';
  3. export default function Thumb({
  4. swiper,
  5. extendParams,
  6. on
  7. }) {
  8. extendParams({
  9. thumbs: {
  10. swiper: null,
  11. multipleActiveThumbs: true,
  12. autoScrollOffset: 0,
  13. slideThumbActiveClass: 'swiper-slide-thumb-active',
  14. thumbsContainerClass: 'swiper-thumbs'
  15. }
  16. });
  17. let initialized = false;
  18. let swiperCreated = false;
  19. swiper.thumbs = {
  20. swiper: null
  21. };
  22. function onThumbClick() {
  23. const thumbsSwiper = swiper.thumbs.swiper;
  24. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  25. const clickedIndex = thumbsSwiper.clickedIndex;
  26. const clickedSlide = thumbsSwiper.clickedSlide;
  27. if (clickedSlide && $(clickedSlide).hasClass(swiper.params.thumbs.slideThumbActiveClass)) return;
  28. if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
  29. let slideToIndex;
  30. if (thumbsSwiper.params.loop) {
  31. slideToIndex = parseInt($(thumbsSwiper.clickedSlide).attr('data-swiper-slide-index'), 10);
  32. } else {
  33. slideToIndex = clickedIndex;
  34. }
  35. if (swiper.params.loop) {
  36. let currentIndex = swiper.activeIndex;
  37. if (swiper.slides.eq(currentIndex).hasClass(swiper.params.slideDuplicateClass)) {
  38. swiper.loopFix(); // eslint-disable-next-line
  39. swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
  40. currentIndex = swiper.activeIndex;
  41. }
  42. const prevIndex = swiper.slides.eq(currentIndex).prevAll(`[data-swiper-slide-index="${slideToIndex}"]`).eq(0).index();
  43. const nextIndex = swiper.slides.eq(currentIndex).nextAll(`[data-swiper-slide-index="${slideToIndex}"]`).eq(0).index();
  44. if (typeof prevIndex === 'undefined') slideToIndex = nextIndex;else if (typeof nextIndex === 'undefined') slideToIndex = prevIndex;else if (nextIndex - currentIndex < currentIndex - prevIndex) slideToIndex = nextIndex;else slideToIndex = prevIndex;
  45. }
  46. swiper.slideTo(slideToIndex);
  47. }
  48. function init() {
  49. const {
  50. thumbs: thumbsParams
  51. } = swiper.params;
  52. if (initialized) return false;
  53. initialized = true;
  54. const SwiperClass = swiper.constructor;
  55. if (thumbsParams.swiper instanceof SwiperClass) {
  56. swiper.thumbs.swiper = thumbsParams.swiper;
  57. Object.assign(swiper.thumbs.swiper.originalParams, {
  58. watchSlidesProgress: true,
  59. slideToClickedSlide: false
  60. });
  61. Object.assign(swiper.thumbs.swiper.params, {
  62. watchSlidesProgress: true,
  63. slideToClickedSlide: false
  64. });
  65. } else if (isObject(thumbsParams.swiper)) {
  66. const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
  67. Object.assign(thumbsSwiperParams, {
  68. watchSlidesProgress: true,
  69. slideToClickedSlide: false
  70. });
  71. swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
  72. swiperCreated = true;
  73. }
  74. swiper.thumbs.swiper.$el.addClass(swiper.params.thumbs.thumbsContainerClass);
  75. swiper.thumbs.swiper.on('tap', onThumbClick);
  76. return true;
  77. }
  78. function update(initial) {
  79. const thumbsSwiper = swiper.thumbs.swiper;
  80. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  81. const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView; // Activate thumbs
  82. let thumbsToActivate = 1;
  83. const thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;
  84. if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {
  85. thumbsToActivate = swiper.params.slidesPerView;
  86. }
  87. if (!swiper.params.thumbs.multipleActiveThumbs) {
  88. thumbsToActivate = 1;
  89. }
  90. thumbsToActivate = Math.floor(thumbsToActivate);
  91. thumbsSwiper.slides.removeClass(thumbActiveClass);
  92. if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
  93. for (let i = 0; i < thumbsToActivate; i += 1) {
  94. thumbsSwiper.$wrapperEl.children(`[data-swiper-slide-index="${swiper.realIndex + i}"]`).addClass(thumbActiveClass);
  95. }
  96. } else {
  97. for (let i = 0; i < thumbsToActivate; i += 1) {
  98. thumbsSwiper.slides.eq(swiper.realIndex + i).addClass(thumbActiveClass);
  99. }
  100. }
  101. const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
  102. const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
  103. if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
  104. let currentThumbsIndex = thumbsSwiper.activeIndex;
  105. let newThumbsIndex;
  106. let direction;
  107. if (thumbsSwiper.params.loop) {
  108. if (thumbsSwiper.slides.eq(currentThumbsIndex).hasClass(thumbsSwiper.params.slideDuplicateClass)) {
  109. thumbsSwiper.loopFix(); // eslint-disable-next-line
  110. thumbsSwiper._clientLeft = thumbsSwiper.$wrapperEl[0].clientLeft;
  111. currentThumbsIndex = thumbsSwiper.activeIndex;
  112. } // Find actual thumbs index to slide to
  113. const prevThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).prevAll(`[data-swiper-slide-index="${swiper.realIndex}"]`).eq(0).index();
  114. const nextThumbsIndex = thumbsSwiper.slides.eq(currentThumbsIndex).nextAll(`[data-swiper-slide-index="${swiper.realIndex}"]`).eq(0).index();
  115. if (typeof prevThumbsIndex === 'undefined') {
  116. newThumbsIndex = nextThumbsIndex;
  117. } else if (typeof nextThumbsIndex === 'undefined') {
  118. newThumbsIndex = prevThumbsIndex;
  119. } else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex) {
  120. newThumbsIndex = thumbsSwiper.params.slidesPerGroup > 1 ? nextThumbsIndex : currentThumbsIndex;
  121. } else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex) {
  122. newThumbsIndex = nextThumbsIndex;
  123. } else {
  124. newThumbsIndex = prevThumbsIndex;
  125. }
  126. direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
  127. } else {
  128. newThumbsIndex = swiper.realIndex;
  129. direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
  130. }
  131. if (useOffset) {
  132. newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
  133. }
  134. if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {
  135. if (thumbsSwiper.params.centeredSlides) {
  136. if (newThumbsIndex > currentThumbsIndex) {
  137. newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
  138. } else {
  139. newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
  140. }
  141. } else if (newThumbsIndex > currentThumbsIndex && thumbsSwiper.params.slidesPerGroup === 1) {// newThumbsIndex = newThumbsIndex - slidesPerView + 1;
  142. }
  143. thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
  144. }
  145. }
  146. }
  147. on('beforeInit', () => {
  148. const {
  149. thumbs
  150. } = swiper.params;
  151. if (!thumbs || !thumbs.swiper) return;
  152. init();
  153. update(true);
  154. });
  155. on('slideChange update resize observerUpdate', () => {
  156. update();
  157. });
  158. on('setTransition', (_s, duration) => {
  159. const thumbsSwiper = swiper.thumbs.swiper;
  160. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  161. thumbsSwiper.setTransition(duration);
  162. });
  163. on('beforeDestroy', () => {
  164. const thumbsSwiper = swiper.thumbs.swiper;
  165. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  166. if (swiperCreated) {
  167. thumbsSwiper.destroy();
  168. }
  169. });
  170. Object.assign(swiper.thumbs, {
  171. init,
  172. update
  173. });
  174. }