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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
/**
* External dependencies
*/
import { escapeHTML } from '@wordpress/escape-html';
import { forEach } from 'lodash';
const SIXTEEN_BY_NINE = 16 / 9;
const MAX_HEIGHT_PERCENT_OF_WINDOW_HEIGHT = 0.8;
const SANITY_MAX_HEIGHT = 600;
const PAUSE_CLASS = 'wp-block-jetpack-slideshow_autoplay-paused';
function swiperInit( swiper ) {
swiperResize( swiper );
swiperApplyAria( swiper );
swiper.el
.querySelector( '.wp-block-jetpack-slideshow_button-pause' )
.addEventListener( 'click', function() {
// Handle destroyed Swiper instances
if ( ! swiper.el ) {
return;
}
if ( swiper.el.classList.contains( PAUSE_CLASS ) ) {
swiper.el.classList.remove( PAUSE_CLASS );
swiper.autoplay.start();
this.setAttribute( 'aria-label', 'Pause Slideshow' );
} else {
swiper.el.classList.add( PAUSE_CLASS );
swiper.autoplay.stop();
this.setAttribute( 'aria-label', 'Play Slideshow' );
}
} );
}
function swiperResize( swiper ) {
if ( ! swiper || ! swiper.el ) {
return;
}
const img = swiper.el.querySelector( '.swiper-slide[data-swiper-slide-index="0"] img' );
if ( ! img ) {
return;
}
const aspectRatio = img.clientWidth / img.clientHeight;
const sanityAspectRatio = Math.max( Math.min( aspectRatio, SIXTEEN_BY_NINE ), 1 );
const sanityHeight =
typeof window !== 'undefined'
? window.innerHeight * MAX_HEIGHT_PERCENT_OF_WINDOW_HEIGHT
: SANITY_MAX_HEIGHT;
const swiperHeight = Math.min( swiper.width / sanityAspectRatio, sanityHeight );
const wrapperHeight = `${ Math.floor( swiperHeight ) }px`;
const buttonTop = `${ Math.floor( swiperHeight / 2 ) }px`;
swiper.el.classList.add( 'wp-swiper-initialized' );
swiper.wrapperEl.style.height = wrapperHeight;
swiper.el.querySelector( '.wp-block-jetpack-slideshow_button-prev' ).style.top = buttonTop;
swiper.el.querySelector( '.wp-block-jetpack-slideshow_button-next' ).style.top = buttonTop;
}
function announceCurrentSlide( swiper ) {
const currentSlide = swiper.slides[ swiper.activeIndex ];
if ( ! currentSlide ) {
return;
}
const figcaption = currentSlide.getElementsByTagName( 'FIGCAPTION' )[ 0 ];
const img = currentSlide.getElementsByTagName( 'IMG' )[ 0 ];
if ( swiper.a11y.liveRegion ) {
swiper.a11y.liveRegion[ 0 ].innerHTML = figcaption
? figcaption.innerHTML
: escapeHTML( img.alt );
}
}
function swiperApplyAria( swiper ) {
forEach( swiper.slides, ( slide, index ) => {
slide.setAttribute( 'aria-hidden', index === swiper.activeIndex ? 'false' : 'true' );
if ( index === swiper.activeIndex ) {
slide.setAttribute( 'tabindex', '-1' );
} else {
slide.removeAttribute( 'tabindex' );
}
} );
announceCurrentSlide( swiper );
}
function swiperPaginationRender( swiper ) {
forEach( swiper.pagination.bullets, bullet => {
bullet.addEventListener( 'click', () => {
const currentSlide = swiper.slides[ swiper.realIndex ];
setTimeout( () => {
currentSlide.focus();
}, 500 );
} );
} );
}
export { swiperApplyAria, swiperInit, swiperPaginationRender, swiperResize };
|
GitWeb