thumbs.mjs 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. import { g as getDocument } from '../shared/ssr-window.esm.mjs';
  2. import { o 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. if (thumbsParams.swiper.destroyed) {
  51. initialized = false;
  52. return false;
  53. }
  54. swiper.thumbs.swiper = thumbsParams.swiper;
  55. Object.assign(swiper.thumbs.swiper.originalParams, {
  56. watchSlidesProgress: true,
  57. slideToClickedSlide: false
  58. });
  59. Object.assign(swiper.thumbs.swiper.params, {
  60. watchSlidesProgress: true,
  61. slideToClickedSlide: false
  62. });
  63. swiper.thumbs.swiper.update();
  64. } else if (isObject(thumbsParams.swiper)) {
  65. const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
  66. Object.assign(thumbsSwiperParams, {
  67. watchSlidesProgress: true,
  68. slideToClickedSlide: false
  69. });
  70. swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
  71. swiperCreated = true;
  72. }
  73. swiper.thumbs.swiper.el.classList.add(swiper.params.thumbs.thumbsContainerClass);
  74. swiper.thumbs.swiper.on('tap', onThumbClick);
  75. return true;
  76. }
  77. function update(initial) {
  78. const thumbsSwiper = swiper.thumbs.swiper;
  79. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  80. const slidesPerView = thumbsSwiper.params.slidesPerView === 'auto' ? thumbsSwiper.slidesPerViewDynamic() : thumbsSwiper.params.slidesPerView;
  81. // 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.forEach(slideEl => slideEl.classList.remove(thumbActiveClass));
  92. if (thumbsSwiper.params.loop || thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled) {
  93. for (let i = 0; i < thumbsToActivate; i += 1) {
  94. elementChildren(thumbsSwiper.slidesEl, `[data-swiper-slide-index="${swiper.realIndex + i}"]`).forEach(slideEl => {
  95. slideEl.classList.add(thumbActiveClass);
  96. });
  97. }
  98. } else {
  99. for (let i = 0; i < thumbsToActivate; i += 1) {
  100. if (thumbsSwiper.slides[swiper.realIndex + i]) {
  101. thumbsSwiper.slides[swiper.realIndex + i].classList.add(thumbActiveClass);
  102. }
  103. }
  104. }
  105. const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
  106. const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
  107. if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
  108. const currentThumbsIndex = thumbsSwiper.activeIndex;
  109. let newThumbsIndex;
  110. let direction;
  111. if (thumbsSwiper.params.loop) {
  112. const newThumbsSlide = thumbsSwiper.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') === `${swiper.realIndex}`);
  113. newThumbsIndex = thumbsSwiper.slides.indexOf(newThumbsSlide);
  114. direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
  115. } else {
  116. newThumbsIndex = swiper.realIndex;
  117. direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
  118. }
  119. if (useOffset) {
  120. newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
  121. }
  122. if (thumbsSwiper.visibleSlidesIndexes && thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0) {
  123. if (thumbsSwiper.params.centeredSlides) {
  124. if (newThumbsIndex > currentThumbsIndex) {
  125. newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
  126. } else {
  127. newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
  128. }
  129. } else if (newThumbsIndex > currentThumbsIndex && thumbsSwiper.params.slidesPerGroup === 1) ;
  130. thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
  131. }
  132. }
  133. }
  134. on('beforeInit', () => {
  135. const {
  136. thumbs
  137. } = swiper.params;
  138. if (!thumbs || !thumbs.swiper) return;
  139. if (typeof thumbs.swiper === 'string' || thumbs.swiper instanceof HTMLElement) {
  140. const document = getDocument();
  141. const getThumbsElementAndInit = () => {
  142. const thumbsElement = typeof thumbs.swiper === 'string' ? document.querySelector(thumbs.swiper) : thumbs.swiper;
  143. if (thumbsElement && thumbsElement.swiper) {
  144. thumbs.swiper = thumbsElement.swiper;
  145. init();
  146. update(true);
  147. } else if (thumbsElement) {
  148. const eventName = `${swiper.params.eventsPrefix}init`;
  149. const onThumbsSwiper = e => {
  150. thumbs.swiper = e.detail[0];
  151. thumbsElement.removeEventListener(eventName, onThumbsSwiper);
  152. init();
  153. update(true);
  154. thumbs.swiper.update();
  155. swiper.update();
  156. };
  157. thumbsElement.addEventListener(eventName, onThumbsSwiper);
  158. }
  159. return thumbsElement;
  160. };
  161. const watchForThumbsToAppear = () => {
  162. if (swiper.destroyed) return;
  163. const thumbsElement = getThumbsElementAndInit();
  164. if (!thumbsElement) {
  165. requestAnimationFrame(watchForThumbsToAppear);
  166. }
  167. };
  168. requestAnimationFrame(watchForThumbsToAppear);
  169. } else {
  170. init();
  171. update(true);
  172. }
  173. });
  174. on('slideChange update resize observerUpdate', () => {
  175. update();
  176. });
  177. on('setTransition', (_s, duration) => {
  178. const thumbsSwiper = swiper.thumbs.swiper;
  179. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  180. thumbsSwiper.setTransition(duration);
  181. });
  182. on('beforeDestroy', () => {
  183. const thumbsSwiper = swiper.thumbs.swiper;
  184. if (!thumbsSwiper || thumbsSwiper.destroyed) return;
  185. if (swiperCreated) {
  186. thumbsSwiper.destroy();
  187. }
  188. });
  189. Object.assign(swiper.thumbs, {
  190. init,
  191. update
  192. });
  193. }
  194. export { Thumb as default };