diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/slideshow/view.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/slideshow/view.js | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/slideshow/view.js b/plugins/jetpack/extensions/blocks/slideshow/view.js new file mode 100644 index 00000000..6d807897 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/slideshow/view.js @@ -0,0 +1,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' ); + } ); + } ); + } ); |