1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
/**
* External dependencies
*/
import { forEach } from 'lodash';
import ResizeObserver from 'resize-observer-polyfill';
/**
* Internal dependencies
*/
import createSwiper from './create-swiper';
import {
swiperApplyAria,
swiperInit,
swiperPaginationRender,
swiperResize,
} from './swiper-callbacks';
typeof window !== 'undefined' &&
window.addEventListener( 'load', function() {
const slideshowBlocks = document.getElementsByClassName( 'wp-block-jetpack-slideshow' );
forEach( slideshowBlocks, slideshowBlock => {
const { autoplay, delay, effect } = slideshowBlock.dataset;
const prefersReducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
const shouldAutoplay = autoplay && ! prefersReducedMotion;
const slideshowContainer = slideshowBlock.getElementsByClassName( 'swiper-container' )[ 0 ];
let pendingRequestAnimationFrame = null;
createSwiper(
slideshowContainer,
{
autoplay: shouldAutoplay
? {
delay: delay * 1000,
disableOnInteraction: false,
}
: false,
effect,
init: true,
initialSlide: 0,
loop: true,
keyboard: {
enabled: true,
onlyInViewport: true,
},
},
{
init: swiperInit,
imagesReady: swiperResize,
paginationRender: swiperPaginationRender,
transitionEnd: swiperApplyAria,
}
)
.then( swiper => {
new ResizeObserver( () => {
if ( pendingRequestAnimationFrame ) {
cancelAnimationFrame( pendingRequestAnimationFrame );
pendingRequestAnimationFrame = null;
}
pendingRequestAnimationFrame = requestAnimationFrame( () => {
swiperResize( swiper );
swiper.update();
} );
} ).observe( swiper.el );
} )
.catch( () => {
slideshowBlock
.querySelector( '.wp-block-jetpack-slideshow_container' )
.classList.add( 'wp-swiper-initialized' );
} );
} );
} );
|
GitWeb
