diff --git a/src/blocks/gallery-carousel/deprecated.js b/src/blocks/gallery-carousel/deprecated.js index 08b87de9dc7..3f5a0e64961 100644 --- a/src/blocks/gallery-carousel/deprecated.js +++ b/src/blocks/gallery-carousel/deprecated.js @@ -649,63 +649,54 @@ const deprecated = ...BackgroundAttributes, ...metadata.attributes, }, - save: ( { attributes, className } ) => { + save( { attributes } ) { const { autoPlay, autoPlaySpeed, draggable, - freeScroll, - gridSize, gutter, - gutterMobile, - height, images, - pageDots, pauseHover, + freeScroll, prevNextButtons, - primaryCaption, - alignCells, thumbnails, responsiveHeight, lightbox, + loop, + pageDots, + gutterMobile, + height, + alignCells, + gridSize, navForClass, } = attributes; - // Return early if there are no images. if ( images.length <= 0 ) { - return; + return null; } - const classes = classnames( - className, { - 'has-responsive-height': responsiveHeight, - } - ); - const innerClasses = classnames( 'is-cropped', - ...GalleryClasses( attributes ), { + ...GalleryClasses( attributes ), + { 'has-horizontal-gutter': gutter > 0, 'has-lightbox': lightbox, + 'has-no-thumbnails': ! thumbnails, } ); - const flickityClasses = classnames( - 'has-carousel', - `has-carousel-${ gridSize }`, { - 'has-aligned-cells': alignCells, - [ `has-margin-bottom-${ gutter }` ]: thumbnails && gutter > 0, - [ `has-margin-bottom-mobile-${ gutterMobile }` ]: thumbnails && gutterMobile > 0, - [ navForClass ]: thumbnails, + const figureClasses = classnames( + 'coblocks-gallery--figure', { + [ `has-margin-left-${ gutter }` ]: gutter > 0, + [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, + [ `has-margin-right-${ gutter }` ]: gutter > 0, + [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, } ); - const flickityStyles = { - height: height ? height + 'px' : undefined, - }; - - const figureClasses = classnames( - 'coblocks-gallery--figure', { + const thumbnailClasses = classnames( + 'wp-block-coblocks-gallery-carousel-thumbnail', + { [ `has-margin-left-${ gutter }` ]: gutter > 0, [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, [ `has-margin-right-${ gutter }` ]: gutter > 0, @@ -713,103 +704,116 @@ const deprecated = } ); - const flickityOptions = { - autoPlay: autoPlay && autoPlaySpeed ? parseFloat( autoPlaySpeed ) : false, - draggable, - pageDots, - prevNextButtons, - wrapAround: true, - cellAlign: alignCells ? 'left' : 'center', - pauseAutoPlayOnHover: pauseHover, - freeScroll, - arrowShape: { - x0: 10, - x1: 60, y1: 50, - x2: 65, y2: 45, - x3: 20, - }, - thumbnails, - responsiveHeight, - }; + const thumbnailContainerClasses = classnames( + 'wp-block-coblocks-gallery-carousel-thumbnail-pagination', + { + [ `has-margin-top-${ gutter }` ]: gutter > 0, + [ `has-margin-top-mobile-${ gutterMobile }` ]: gutterMobile > 0, + } + ); const captionClasses = classnames( 'coblocks-gallery--caption', 'coblocks-gallery--primary-caption', {} ); - const navClasses = classnames( - 'carousel-nav', { - [ `has-margin-top-${ gutter }` ]: gutter > 0, - [ `has-margin-top-mobile-${ gutterMobile }` ]: gutterMobile > 0, - [ `has-negative-margin-left-${ gutter }` ]: gutter > 0, - [ `has-negative-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, - [ `has-negative-margin-right-${ gutter }` ]: gutter > 0, - [ `has-negative-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, + const swiperClasses = classnames( + 'has-carousel', + `has-carousel-${ gridSize }`, + 'swiper-container', + { + 'has-aligned-cells': alignCells, + 'has-responsive-height': responsiveHeight, + [ navForClass ]: thumbnails, } ); - const navFigureClasses = classnames( - 'coblocks--figure', { - [ `has-margin-left-${ gutter }` ]: gutter > 0, - [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, - [ `has-margin-right-${ gutter }` ]: gutter > 0, - [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, - } - ); + const swiperStyles = { + height: height ? `${ height }px` : undefined, + }; - const navOptions = { - asNavFor: `.${ navForClass }`, - autoPlay: false, - contain: true, - cellAlign: 'left', - pageDots: false, - thumbnails: false, + const uuid = '12345'; + + const swiperSizing = { + lrg: 2, + med: 4, + sml: 5, + xlrg: 1, + }; + + const swiperOptions = { + alignCells, + autoPlay, + autoPlaySpeed, draggable, - prevNextButtons: false, - wrapAround: false, + freeScroll, + loop, + navigation: prevNextButtons, + pageDots, + pauseHover, + responsiveHeight, + slidesPerView: swiperSizing[ gridSize ], + thumbnails, + uuid, }; return ( -
+
-
- { images.map( ( image ) => { - const img = {; - - return ( -
-
- { img } -
-
- ); - } ) } -
- { thumbnails - ? ( -
- { images.map( ( image ) => { - const img = {; - return ( -
-
- { img } +
+
+ { images.map( ( image, index ) => { + return ( +
+
+
+ {
+
- ); - } ) } -
) : null - } +
+ ); + } ) } +
+ { prevNextButtons && ( + <> + + + + ) } +
+ { thumbnails && ( +
+ { images.map( ( item, index ) => { + return ( +
+ { +
+ ); + } ) } +
+ ) }
- { ! RichText.isEmpty( primaryCaption ) && }
); }, diff --git a/src/blocks/gallery-carousel/save.js b/src/blocks/gallery-carousel/save.js index de8a8838dc2..5c8b48568ae 100644 --- a/src/blocks/gallery-carousel/save.js +++ b/src/blocks/gallery-carousel/save.js @@ -43,6 +43,7 @@ const save = ( props ) => { } const innerClasses = classnames( + 'coblocks-gallery-carousel-swiper-container', 'is-cropped', ...GalleryClasses( attributes ), { @@ -61,15 +62,18 @@ const save = ( props ) => { } ); - const thumbnailClasses = classnames( - 'wp-block-coblocks-gallery-carousel-thumbnail', - { - [ `has-margin-left-${ gutter }` ]: gutter > 0, - [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, - [ `has-margin-right-${ gutter }` ]: gutter > 0, - [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, - } - ); + const thumbnailClasses = ( index ) => { + return classnames( + 'wp-block-coblocks-gallery-carousel-thumbnail', + `wp-block-coblocks-gallery-carousel-thumbnail-${ index }`, + { + [ `has-margin-left-${ gutter }` ]: gutter > 0, + [ `has-margin-left-mobile-${ gutterMobile }` ]: gutterMobile > 0, + [ `has-margin-right-${ gutter }` ]: gutter > 0, + [ `has-margin-right-mobile-${ gutterMobile }` ]: gutterMobile > 0, + } + ); + }; const thumbnailContainerClasses = classnames( 'wp-block-coblocks-gallery-carousel-thumbnail-pagination', @@ -127,8 +131,8 @@ const save = ( props ) => { return (
-
-
+
+
{ images.map( ( image, index ) => { return (
@@ -167,7 +171,7 @@ const save = ( props ) => {
{ images.map( ( item, index ) => { return ( -
+
{ -
+
" `; exports[`coblocks/gallery-carousel should have 'draggable' property set in the data-swiper attribute when draggable enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have 'height' property within the 'style' attribute with the height attribute set. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have 'pageDots' property set in the data-flickity attribute when pageDots enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-aligned-cells' with alignCells enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-carousel-large' with gridSize set to 'large'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-carousel-xlarge' with gridSize set to 'xlarge'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-dim' with filter set to 'dim'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-grayscale' with filter set to 'grayscale'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-saturation' with filter set to 'saturation'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-sepia' with filter set to 'sepia'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-filter-vintage' with filter set to 'vintage'. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-lightbox' with lightbox enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have className 'has-responsive-height' with responsiveHeight enabled. 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have navigation swiper setting of '.\${ attributes.navigation }' with arrow navigation buttons enabled 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should have thumbnails on swiper if thumbnails enabled 1`] = ` " -
+
" `; exports[`coblocks/gallery-carousel should render with images 1`] = ` " -
+
" `; diff --git a/src/js/coblocks-tinyswiper-initializer.js b/src/js/coblocks-tinyswiper-initializer.js index 6881abc24b4..7fc42e8b1f3 100644 --- a/src/js/coblocks-tinyswiper-initializer.js +++ b/src/js/coblocks-tinyswiper-initializer.js @@ -1,145 +1,157 @@ import TinySwiper from 'tiny-swiper'; import TinySwiperPluginNavigation from 'tiny-swiper/lib/modules/navigation.min.js'; -let swiper = null; -let activeIndex = 0; -let isHovering = false; +( function() { + 'use strict'; -const swiperContainer = document.querySelector( '.swiper-container' ); + const eventsSwiperContainers = document.querySelectorAll( '.wp-block-coblocks-gallery-carousel' ); -const updateThumbnails = ( newIndex ) => { - const currentActiveThumbnail = document.getElementById( `wp-block-coblocks-gallery-carousel-thumbnail-${ activeIndex }` ); + for ( let j = 0; j < eventsSwiperContainers.length; j++ ) { + let swiper = null; + let activeIndex = 0; + let isHovering = false; - if ( currentActiveThumbnail ) { - currentActiveThumbnail.classList.remove( 'is-active' ); + const currentEventsBlock = eventsSwiperContainers[ j ]; - const nextActiveThumbnail = document.getElementById( `wp-block-coblocks-gallery-carousel-thumbnail-${ newIndex }` ); + const updateThumbnails = ( newIndex ) => { + const currentActiveThumbnail = currentEventsBlock.querySelector( `.wp-block-coblocks-gallery-carousel-thumbnail-${ activeIndex }` ); - nextActiveThumbnail.classList.add( 'is-active' ); - } -}; - -const handleThumbnailClick = ( newIndex ) => { - swiper?.slideTo( newIndex ); - updateThumbnails( newIndex ); - activeIndex = newIndex; -}; - -const handleSwipe = ( newIndex ) => { - if ( newIndex !== activeIndex ) { - updateThumbnails( newIndex ); - activeIndex = newIndex; - } -}; + if ( currentActiveThumbnail ) { + currentActiveThumbnail.classList.remove( 'is-active' ); -( function() { - 'use strict'; + const nextActiveThumbnail = currentEventsBlock.querySelector( `.wp-block-coblocks-gallery-carousel-thumbnail-${ newIndex }` ); - if ( swiperContainer ) { - const swiperOptions = swiperContainer.getAttribute( 'data-swiper' ); + if ( nextActiveThumbnail ) { + nextActiveThumbnail.classList.add( 'is-active' ); + } + } + }; + + const handleThumbnailClick = ( newIndex ) => { + swiper?.slideTo( newIndex ); + updateThumbnails( newIndex ); + activeIndex = newIndex; + }; + + const handleSwipe = ( newIndex ) => { + if ( newIndex !== activeIndex ) { + updateThumbnails( newIndex ); + activeIndex = newIndex; + } + }; - if ( swiperOptions ) { - const parsedSwiperOptions = JSON.parse( swiperOptions ); + const swiperContainer = currentEventsBlock.querySelector( '.swiper-container' ); - const swiperBackButton = document.getElementById( `${ parsedSwiperOptions.uuid }-prev` ); - const swiperNextButton = document.getElementById( `${ parsedSwiperOptions.uuid }-next` ); + if ( swiperContainer ) { + const swiperOptions = swiperContainer.getAttribute( 'data-swiper' ); - const swiperConfig = { - centeredSlides: false, - freeMode: true, - longSwipesRatio: 0.8, - loop: false, - passiveListeners: true, - plugins: [], - touchable: false, - slidesPerView: 1, - }; + if ( swiperOptions ) { + const parsedSwiperOptions = JSON.parse( swiperOptions ); - if ( parsedSwiperOptions.loop === true ) { - swiperConfig.loop = parsedSwiperOptions.loop; - } + const swiperBackButton = currentEventsBlock.querySelector( `.nav-button__prev` ); + const swiperNextButton = currentEventsBlock.querySelector( `.nav-button__next` ); - if ( parsedSwiperOptions.slidesPerView ) { - swiperConfig.slidesPerView = parsedSwiperOptions.slidesPerView; - } + const swiperConfig = { + centeredSlides: false, + freeMode: true, + longSwipesRatio: 0.8, + loop: false, + passiveListeners: true, + plugins: [], + slidesPerView: 1, + touchable: false, + }; - // add button navigation - if ( parsedSwiperOptions.navigation ) { - swiperConfig.plugins = [ ...swiperConfig.plugins, TinySwiperPluginNavigation ]; + if ( parsedSwiperOptions.loop === true ) { + swiperConfig.loop = parsedSwiperOptions.loop; + } - swiperConfig.navigation = { - prevEl: swiperBackButton, - nextEl: swiperNextButton, - }; - } + if ( parsedSwiperOptions.slidesPerView ) { + swiperConfig.slidesPerView = parsedSwiperOptions.slidesPerView; + } - swiper = new TinySwiper( swiperContainer, swiperConfig ); + // add button navigation + if ( parsedSwiperOptions.navigation ) { + swiperConfig.plugins = [ ...swiperConfig.plugins, TinySwiperPluginNavigation ]; - // register swiper resize observer - const resizeObserver = new ResizeObserver( () => { - swiper.update(); - } ); + swiperConfig.navigation = { + nextEl: swiperNextButton, + prevEl: swiperBackButton, + }; + } - resizeObserver.observe( swiperContainer ); + swiper = new TinySwiper( swiperContainer, swiperConfig ); - // add thumbnail pagination - if ( parsedSwiperOptions.thumbnails ) { - const paginationThumbnails = document.getElementsByClassName( 'wp-block-coblocks-gallery-carousel-thumbnail' ); + // register swiper resize observer + const resizeObserver = new ResizeObserver( () => { + swiper.update(); + } ); - for ( const [ index, thumbnail ] of Object.entries( paginationThumbnails ) ) { - thumbnail.addEventListener( ( 'click' ), () => handleThumbnailClick( index ) ); - } + resizeObserver.observe( swiperContainer ); - const firstThumbnailImage = document.getElementById( `wp-block-coblocks-gallery-carousel-thumbnail-${ 0 }` ); + // add thumbnail pagination + if ( parsedSwiperOptions.thumbnails ) { + const paginationThumbnails = currentEventsBlock.querySelectorAll( '.wp-block-coblocks-gallery-carousel-thumbnail' ); - firstThumbnailImage.classList.add( 'is-active' ); - } + for ( const [ index, thumbnail ] of Object.entries( paginationThumbnails ) ) { + thumbnail.addEventListener( ( 'click' ), () => handleThumbnailClick( index ) ); + } - if ( ! parsedSwiperOptions.thumbnails && parsedSwiperOptions.pageDots ) { - const paginationThumbnails = document.getElementsByClassName( 'wp-block-coblocks-gallery-carousel-page-dot-pagination' ); + const firstThumbnailImage = currentEventsBlock.querySelector( `.wp-block-coblocks-gallery-carousel-thumbnail-${ 0 }` ); - for ( const [ index, thumbnail ] of Object.entries( paginationThumbnails ) ) { - thumbnail.addEventListener( ( 'click' ), () => handleThumbnailClick( index ) ); + if ( firstThumbnailImage ) { + firstThumbnailImage.classList.add( 'is-active' ); + } } - const firstThumbnailImage = document.getElementById( `wp-block-coblocks-gallery-carousel-page-dot--${ 0 }` ); + if ( ! parsedSwiperOptions.thumbnails && parsedSwiperOptions.pageDots ) { + const paginationThumbnails = currentEventsBlock.querySelectorAll( '.wp-block-coblocks-gallery-carousel-page-dot-pagination' ); - firstThumbnailImage.classList.add( 'is-active' ); - } + for ( const [ index, thumbnail ] of Object.entries( paginationThumbnails ) ) { + thumbnail.addEventListener( ( 'click' ), () => handleThumbnailClick( index ) ); + } - // add draggable functionality - if ( parsedSwiperOptions.draggable !== true ) { - const swiperWrapper = document.getElementById( 'swiper-wrapper' ); + const firstDot = currentEventsBlock.querySelector( `.wp-block-coblocks-gallery-carousel-page-dot--${ 0 }` ); - swiperWrapper?.addEventListener( ( 'mousedown' ), ( e ) => { - e.stopPropagation(); - } ); - } + if ( firstDot ) { + firstDot.classList.add( 'is-active' ); + } + } - // add autoplay functionality - if ( parsedSwiperOptions.autoPlay === true && parsedSwiperOptions.autoPlaySpeed ) { - // add pause on hover functionality - if ( parsedSwiperOptions.pauseHover === true ) { - swiperContainer.addEventListener( 'mouseenter', () => { - isHovering = true; - } ); + // add draggable functionality + if ( parsedSwiperOptions.draggable !== true ) { + const swiperWrapper = currentEventsBlock.querySelector( '.swiper-wrapper' ); - swiperContainer.addEventListener( 'mouseleave', () => { - isHovering = false; + swiperWrapper?.addEventListener( ( 'mousedown' ), ( e ) => { + e.stopPropagation(); } ); } - setInterval( () => { - if ( parsedSwiperOptions.pauseHover === true && isHovering === true ) { - return; + // add autoplay functionality + if ( parsedSwiperOptions.autoPlay === true && parsedSwiperOptions.autoPlaySpeed ) { + // add pause on hover functionality + if ( parsedSwiperOptions.pauseHover === true ) { + swiperContainer.addEventListener( 'mouseenter', () => { + isHovering = true; + } ); + + swiperContainer.addEventListener( 'mouseleave', () => { + isHovering = false; + } ); } - swiper?.slideTo( swiper.state.index + 1 ); - }, parsedSwiperOptions.autoPlaySpeed ); - } + setInterval( () => { + if ( parsedSwiperOptions.pauseHover === true && isHovering === true ) { + return; + } + + swiper?.slideTo( swiper.state.index + 1 ); + }, parsedSwiperOptions.autoPlaySpeed ); + } - // register the swipe callback - swiper.on( 'after-slide', handleSwipe ); + // register the swipe callback + swiper.on( 'after-slide', handleSwipe ); + } } } }() );