virtual.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. import $ from '../../shared/dom.js';
  2. import { setCSSProperty } from '../../shared/utils.js';
  3. export default function Virtual({
  4. swiper,
  5. extendParams,
  6. on,
  7. emit
  8. }) {
  9. extendParams({
  10. virtual: {
  11. enabled: false,
  12. slides: [],
  13. cache: true,
  14. renderSlide: null,
  15. renderExternal: null,
  16. renderExternalUpdate: true,
  17. addSlidesBefore: 0,
  18. addSlidesAfter: 0
  19. }
  20. });
  21. let cssModeTimeout;
  22. swiper.virtual = {
  23. cache: {},
  24. from: undefined,
  25. to: undefined,
  26. slides: [],
  27. offset: 0,
  28. slidesGrid: []
  29. };
  30. function renderSlide(slide, index) {
  31. const params = swiper.params.virtual;
  32. if (params.cache && swiper.virtual.cache[index]) {
  33. return swiper.virtual.cache[index];
  34. }
  35. const $slideEl = params.renderSlide ? $(params.renderSlide.call(swiper, slide, index)) : $(`<div class="${swiper.params.slideClass}" data-swiper-slide-index="${index}">${slide}</div>`);
  36. if (!$slideEl.attr('data-swiper-slide-index')) $slideEl.attr('data-swiper-slide-index', index);
  37. if (params.cache) swiper.virtual.cache[index] = $slideEl;
  38. return $slideEl;
  39. }
  40. function update(force) {
  41. const {
  42. slidesPerView,
  43. slidesPerGroup,
  44. centeredSlides
  45. } = swiper.params;
  46. const {
  47. addSlidesBefore,
  48. addSlidesAfter
  49. } = swiper.params.virtual;
  50. const {
  51. from: previousFrom,
  52. to: previousTo,
  53. slides,
  54. slidesGrid: previousSlidesGrid,
  55. offset: previousOffset
  56. } = swiper.virtual;
  57. if (!swiper.params.cssMode) {
  58. swiper.updateActiveIndex();
  59. }
  60. const activeIndex = swiper.activeIndex || 0;
  61. let offsetProp;
  62. if (swiper.rtlTranslate) offsetProp = 'right';else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
  63. let slidesAfter;
  64. let slidesBefore;
  65. if (centeredSlides) {
  66. slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;
  67. slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;
  68. } else {
  69. slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesAfter;
  70. slidesBefore = slidesPerGroup + addSlidesBefore;
  71. }
  72. const from = Math.max((activeIndex || 0) - slidesBefore, 0);
  73. const to = Math.min((activeIndex || 0) + slidesAfter, slides.length - 1);
  74. const offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
  75. Object.assign(swiper.virtual, {
  76. from,
  77. to,
  78. offset,
  79. slidesGrid: swiper.slidesGrid
  80. });
  81. function onRendered() {
  82. swiper.updateSlides();
  83. swiper.updateProgress();
  84. swiper.updateSlidesClasses();
  85. if (swiper.lazy && swiper.params.lazy.enabled) {
  86. swiper.lazy.load();
  87. }
  88. emit('virtualUpdate');
  89. }
  90. if (previousFrom === from && previousTo === to && !force) {
  91. if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
  92. swiper.slides.css(offsetProp, `${offset}px`);
  93. }
  94. swiper.updateProgress();
  95. emit('virtualUpdate');
  96. return;
  97. }
  98. if (swiper.params.virtual.renderExternal) {
  99. swiper.params.virtual.renderExternal.call(swiper, {
  100. offset,
  101. from,
  102. to,
  103. slides: function getSlides() {
  104. const slidesToRender = [];
  105. for (let i = from; i <= to; i += 1) {
  106. slidesToRender.push(slides[i]);
  107. }
  108. return slidesToRender;
  109. }()
  110. });
  111. if (swiper.params.virtual.renderExternalUpdate) {
  112. onRendered();
  113. } else {
  114. emit('virtualUpdate');
  115. }
  116. return;
  117. }
  118. const prependIndexes = [];
  119. const appendIndexes = [];
  120. if (force) {
  121. swiper.$wrapperEl.find(`.${swiper.params.slideClass}`).remove();
  122. } else {
  123. for (let i = previousFrom; i <= previousTo; i += 1) {
  124. if (i < from || i > to) {
  125. swiper.$wrapperEl.find(`.${swiper.params.slideClass}[data-swiper-slide-index="${i}"]`).remove();
  126. }
  127. }
  128. }
  129. for (let i = 0; i < slides.length; i += 1) {
  130. if (i >= from && i <= to) {
  131. if (typeof previousTo === 'undefined' || force) {
  132. appendIndexes.push(i);
  133. } else {
  134. if (i > previousTo) appendIndexes.push(i);
  135. if (i < previousFrom) prependIndexes.push(i);
  136. }
  137. }
  138. }
  139. appendIndexes.forEach(index => {
  140. swiper.$wrapperEl.append(renderSlide(slides[index], index));
  141. });
  142. prependIndexes.sort((a, b) => b - a).forEach(index => {
  143. swiper.$wrapperEl.prepend(renderSlide(slides[index], index));
  144. });
  145. swiper.$wrapperEl.children('.swiper-slide').css(offsetProp, `${offset}px`);
  146. onRendered();
  147. }
  148. function appendSlide(slides) {
  149. if (typeof slides === 'object' && 'length' in slides) {
  150. for (let i = 0; i < slides.length; i += 1) {
  151. if (slides[i]) swiper.virtual.slides.push(slides[i]);
  152. }
  153. } else {
  154. swiper.virtual.slides.push(slides);
  155. }
  156. update(true);
  157. }
  158. function prependSlide(slides) {
  159. const activeIndex = swiper.activeIndex;
  160. let newActiveIndex = activeIndex + 1;
  161. let numberOfNewSlides = 1;
  162. if (Array.isArray(slides)) {
  163. for (let i = 0; i < slides.length; i += 1) {
  164. if (slides[i]) swiper.virtual.slides.unshift(slides[i]);
  165. }
  166. newActiveIndex = activeIndex + slides.length;
  167. numberOfNewSlides = slides.length;
  168. } else {
  169. swiper.virtual.slides.unshift(slides);
  170. }
  171. if (swiper.params.virtual.cache) {
  172. const cache = swiper.virtual.cache;
  173. const newCache = {};
  174. Object.keys(cache).forEach(cachedIndex => {
  175. const $cachedEl = cache[cachedIndex];
  176. const cachedElIndex = $cachedEl.attr('data-swiper-slide-index');
  177. if (cachedElIndex) {
  178. $cachedEl.attr('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);
  179. }
  180. newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = $cachedEl;
  181. });
  182. swiper.virtual.cache = newCache;
  183. }
  184. update(true);
  185. swiper.slideTo(newActiveIndex, 0);
  186. }
  187. function removeSlide(slidesIndexes) {
  188. if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
  189. let activeIndex = swiper.activeIndex;
  190. if (Array.isArray(slidesIndexes)) {
  191. for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {
  192. swiper.virtual.slides.splice(slidesIndexes[i], 1);
  193. if (swiper.params.virtual.cache) {
  194. delete swiper.virtual.cache[slidesIndexes[i]];
  195. }
  196. if (slidesIndexes[i] < activeIndex) activeIndex -= 1;
  197. activeIndex = Math.max(activeIndex, 0);
  198. }
  199. } else {
  200. swiper.virtual.slides.splice(slidesIndexes, 1);
  201. if (swiper.params.virtual.cache) {
  202. delete swiper.virtual.cache[slidesIndexes];
  203. }
  204. if (slidesIndexes < activeIndex) activeIndex -= 1;
  205. activeIndex = Math.max(activeIndex, 0);
  206. }
  207. update(true);
  208. swiper.slideTo(activeIndex, 0);
  209. }
  210. function removeAllSlides() {
  211. swiper.virtual.slides = [];
  212. if (swiper.params.virtual.cache) {
  213. swiper.virtual.cache = {};
  214. }
  215. update(true);
  216. swiper.slideTo(0, 0);
  217. }
  218. on('beforeInit', () => {
  219. if (!swiper.params.virtual.enabled) return;
  220. swiper.virtual.slides = swiper.params.virtual.slides;
  221. swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);
  222. swiper.params.watchSlidesProgress = true;
  223. swiper.originalParams.watchSlidesProgress = true;
  224. if (!swiper.params.initialSlide) {
  225. update();
  226. }
  227. });
  228. on('setTranslate', () => {
  229. if (!swiper.params.virtual.enabled) return;
  230. if (swiper.params.cssMode && !swiper._immediateVirtual) {
  231. clearTimeout(cssModeTimeout);
  232. cssModeTimeout = setTimeout(() => {
  233. update();
  234. }, 100);
  235. } else {
  236. update();
  237. }
  238. });
  239. on('init update resize', () => {
  240. if (!swiper.params.virtual.enabled) return;
  241. if (swiper.params.cssMode) {
  242. setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);
  243. }
  244. });
  245. Object.assign(swiper.virtual, {
  246. appendSlide,
  247. prependSlide,
  248. removeSlide,
  249. removeAllSlides,
  250. update
  251. });
  252. }