Skip to content

Commit

Permalink
Autoplay pause/play button implementation for AMP.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffersonrabb
jeffersonrabb committed Sep 29, 2019
1 parent 188f089 commit cabea0d
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 11 deletions.
39 changes: 32 additions & 7 deletions extensions/blocks/slideshow/slideshow.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,30 @@ function jetpack_slideshow_block_load_assets( $attr, $content ) {
function jetpack_slideshow_block_render_amp( $attr ) {
global $wp_block_jetpack_slideshow_id;
$wp_block_jetpack_slideshow_id = ( $wp_block_jetpack_slideshow_id || 0 ) + 1;
$amp_carousel_id = sprintf(

$block_id = sprintf(
'wp-block-jetpack-slideshow__%s',
intval( $wp_block_jetpack_slideshow_id )
);

$ids = empty( $attr['ids'] ) ? array() : $attr['ids'];
$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
$delay = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
$align = isset( $attr['align'] ) ? $attr['align'] : 'center';
$classes = array(
$amp_carousel_id = sprintf(
'wp-block-jetpack-slideshow__amp_carousel_%s',
intval( $wp_block_jetpack_slideshow_id )
);

$ids = empty( $attr['ids'] ) ? array() : $attr['ids'];
$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay'];
$delay = empty( $attr['delay'] ) ? 3 : intval( $attr['delay'] );
$align = isset( $attr['align'] ) ? $attr['align'] : 'center';
$classes = array(
'wp-block-jetpack-slideshow',
'wp-amp-block',
'align' . $align,
);
if ( $autoplay ) {
$classes[] = 'wp-block-jetpack-slideshow__autoplay';
$classes[] = 'wp-block-jetpack-slideshow__autoplay-playing';
}
$slides = array_map(
function( $id ) {
$caption = wp_get_attachment_caption( $id );
Expand Down Expand Up @@ -94,10 +104,25 @@ function( $index ) use ( $amp_carousel_id ) {
implode( '', $slides )
);

$autoplay_pause = sprintf(
'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-pause" role="button" on="tap:%s.toggleAutoplay(toggleOn=false),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=false)"></a>',
esc_attr__( 'Pause Slideshow', 'jetpack' ),
esc_attr( $amp_carousel_id ),
esc_attr( $block_id )
);
$autoplay_play = sprintf(
'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-play" role="button" on="tap:%s.toggleAutoplay(toggleOn=true),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=true)"></a>',
esc_attr__( 'Play Slideshow', 'jetpack' ),
esc_attr( $amp_carousel_id ),
esc_attr( $block_id )
);

return sprintf(
'<div class="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s</div></div>',
'<div class="%s" id="%s"><div class="wp-block-jetpack-slideshow_container swiper-container">%s%s%s</div></div>',
esc_attr( implode( $classes, ' ' ) ),
esc_attr( $block_id ),
$carousel,
$autoplay ? $autoplay_pause . $autoplay_play : '',
$pagination
);
}
22 changes: 18 additions & 4 deletions extensions/blocks/slideshow/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,19 @@
outline: 0;
}

&.wp-amp-block > .wp-block-jetpack-slideshow_container {
opacity: 1;
&.wp-amp-block {
& > .wp-block-jetpack-slideshow_container {
opacity: 1;
}
}
&.wp-amp-block.wp-block-jetpack-slideshow__autoplay {
&.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-pause,
.wp-block-jetpack-slideshow_button-play {
display: block;
}
&.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-play {
display: none;
}
}

.wp-block-jetpack-slideshow_container {
Expand Down Expand Up @@ -64,6 +75,7 @@
.wp-block-jetpack-slideshow_button-prev,
.wp-block-jetpack-slideshow_button-next,
.wp-block-jetpack-slideshow_button-pause,
.wp-block-jetpack-slideshow_button-play,
.amp-carousel-button {
background-color: rgba( 0, 0, 0, 0.5 );
background-position: center;
Expand Down Expand Up @@ -110,8 +122,9 @@
background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%204.12L10.12%2012%2018%2019.88%2015.88%2022l-10-10%2010-10z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
}

.wp-block-jetpack-slideshow_button-play,
.wp-block-jetpack-slideshow_button-pause {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" );
background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2019h4V5H6v14zm8-14v14h4V5h-4z'%20fill='white'/%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
display: none;
margin-top: 0;
position: absolute;
Expand All @@ -120,8 +133,9 @@
z-index: 1;
}

.wp-block-jetpack-slideshow_button-play,
.wp-block-jetpack-slideshow_autoplay-paused .wp-block-jetpack-slideshow_button-pause {
background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" );
background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'%20fill='white'/%3E%3Cpath%20d='M0 0h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
}

&[data-autoplay='true'] .wp-block-jetpack-slideshow_button-pause {
Expand Down

0 comments on commit cabea0d

Please sign in to comment.