thumbs.mjs 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. import { g as getDocument } from '../shared/ssr-window.esm.mjs';
  2. import { l as isObject, e as elementChildren } from '../shared/utils.mjs';
  3. function Thumb(_ref) {
  4. let {
  5. swiper,
  6. extendParams,
  7. on
  8. } = _ref;
  9. extendParams({
  10. thumbs: {
  11. swiper: null,
  12. multipleActiveThumbs: true,
  13. autoScrollOffset: 0,
  14. slideThumbActiveClass: 'swiper-slide-thumb-active',
  15. thumbsContainerClass: 'swiper-thumbs'
  16. }
  17. });
  18. let initialized = false;
  19. let swiperCreated = false;
  20. swiper.thumbs = {
  21. swiper: null
  22. };
  23. function onThumbClick() {
  24. const thumbsSwiper = swiper.thumbs.swiper;
  25. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  26. const clickedIndex = thumbsSwiper.clickedIndex;
  27. const clickedSlide = thumbsSwiper.clickedSlide;
  28. if (clickedSlide && clickedSlide.classList.contains(swiper.params.thumbs.slideThumbActiveClass)) return;
  29. if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
  30. let slideToIndex;
  31. if (thumbsSwiper.params.loop) {
  32. slideToIndex = parseInt(thumbsSwiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);
  33. } else {
  34. slideToIndex = clickedIndex;
  35. }
  36. if (swiper.params.loop) {
  37. swiper.slideToLoop(slideToIndex);
  38. } else {
  39. swiper.slideTo(slideToIndex);
  40. }
  41. }
  42. function init() {
  43. const {
  44. thumbs: thumbsParams
  45. } = swiper.params;
  46. if (initialized) return false;
  47. initialized = true;
  48. const SwiperClass = swiper.constructor;
  49. if (thumbsParams.swiper instanceof SwiperClass) {
  50. swiper.thumbs.swiper = thumbsParams.swiper;
  51. Object.assign(swiper.thumbs.swiper.originalParams, {
  52. watchSlidesProgress: true,
  53. slideToClickedSlide: false
  54. });
  55. Object.assign(swiper.thumbs.swiper.params, {
  56. watchSlidesProgress: true,
  57. slideToClickedSlide: false
  58. });
  59. swiper.thumbs.swiper.update();
  60. } else if (isObject(thumbsParams.swiper)) {
  61. const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
  62. Object.assign(thumbsSwiperParams, {
  63. watchSlidesProgress: true,
  64. slideToClickedSlide: false
  65. });
  66. swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
  67. swiperCreated = true;
  68. }
  69. swiper.thumbs.swiper.el.classList.add(swiper.params.thumbs.thumbsContainerClass);
  70. swiper.thumbs.swiper.on('tap', onThumbClick);
  71. return true;
  72. }
  73. function update(initial) {
  74. const thumbsSwiper = swiper.thumbs.swiper;
  75. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  76. const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView;
  77. // Activate thumbs
  78. let thumbsToActivate = 1;
  79. const thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;
  80. if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {
  81. thumbsToActivate = swiper.params.slidesPerView;
  82. }
  83. if (!swiper.params.thumbs.multipleActiveThumbs) {
  84. thumbsToActivate = 1;
  85. }
  86. thumbsToActivate = Math.floor(thumbsToActivate);
  87. thumbsSwiper.slides.forEach(slideEl => slideEl.classList.remove(thumbActiveClass));
  88. if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
  89. for (let i = 0; i < thumbsToActivate; i += 1) {
  90. elementChildren(thumbsSwiper.slidesEl, `[data-swiper-slide-index="${swiper.realIndex + i}"]`).forEach(slideEl => {
  91. slideEl.classList.add(thumbActiveClass);
  92. });
  93. }
  94. } else {
  95. for (let i = 0; i < thumbsToActivate; i += 1) {
  96. if (thumbsSwiper.slides[swiper.realIndex + i]) {
  97. thumbsSwiper.slides[swiper.realIndex + i].classList.add(thumbActiveClass);
  98. }
  99. }
  100. }
  101. const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
  102. const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
  103. if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
  104. const currentThumbsIndex = thumbsSwiper.activeIndex;
  105. let newThumbsIndex;
  106. let direction;
  107. if (thumbsSwiper.params.loop) {
  108. const newThumbsSlide = thumbsSwiper.slides.filter(slideEl => slideEl.getAttribute('data-swiper-slide-index') === `${swiper.realIndex}`)[0];
  109. newThumbsIndex = thumbsSwiper.slides.indexOf(newThumbsSlide);
  110. direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
  111. } else {
  112. newThumbsIndex = swiper.realIndex;
  113. direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
  114. }
  115. if (useOffset) {
  116. newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
  117. }
  118. if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {
  119. if (thumbsSwiper.params.centeredSlides) {
  120. if (newThumbsIndex > currentThumbsIndex) {
  121. newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
  122. } else {
  123. newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
  124. }
  125. } else if (newThumbsIndex > currentThumbsIndex && thumbsSwiper.params.slidesPerGroup === 1) ;
  126. thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
  127. }
  128. }
  129. }
  130. on('beforeInit', () => {
  131. const {
  132. thumbs
  133. } = swiper.params;
  134. if (!thumbs || !thumbs.swiper) return;
  135. if (typeof thumbs.swiper === 'string' || thumbs.swiper instanceof HTMLElement) {
  136. const document = getDocument();
  137. const getThumbsElementAndInit = () => {
  138. const thumbsElement = typeof thumbs.swiper === 'string' ? document.querySelector(thumbs.swiper) : thumbs.swiper;
  139. if (thumbsElement && thumbsElement.swiper) {
  140. thumbs.swiper = thumbsElement.swiper;
  141. init();
  142. update(true);
  143. } else if (thumbsElement) {
  144. const eventName = `${swiper.params.eventsPrefix}init`;
  145. const onThumbsSwiper = e => {
  146. thumbs.swiper = e.detail[0];
  147. thumbsElement.removeEventListener(eventName, onThumbsSwiper);
  148. init();
  149. update(true);
  150. thumbs.swiper.update();
  151. swiper.update();
  152. };
  153. thumbsElement.addEventListener(eventName, onThumbsSwiper);
  154. }
  155. return thumbsElement;
  156. };
  157. const watchForThumbsToAppear = () => {
  158. if (swiper.destroyed) return;
  159. const thumbsElement = getThumbsElementAndInit();
  160. if (!thumbsElement) {
  161. requestAnimationFrame(watchForThumbsToAppear);
  162. }
  163. };
  164. requestAnimationFrame(watchForThumbsToAppear);
  165. } else {
  166. init();
  167. update(true);
  168. }
  169. });
  170. on('slideChange update resize observerUpdate', () => {
  171. update();
  172. });
  173. on('setTransition', (_s, duration) => {
  174. const thumbsSwiper = swiper.thumbs.swiper;
  175. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  176. thumbsSwiper.setTransition(duration);
  177. });
  178. on('beforeDestroy', () => {
  179. const thumbsSwiper = swiper.thumbs.swiper;
  180. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  181. if (swiperCreated) {
  182. thumbsSwiper.destroy();
  183. }
  184. });
  185. Object.assign(swiper.thumbs, {
  186. init,
  187. update
  188. });
  189. }
  190. export { Thumb as default };