New filters: tainacan-swiper-main-options and tainacan-swiper-thumb-options for allowing theme authors to pass options to Swiper Carousels in the item gallery.
This commit is contained in:
mateuswetah
parent
7477182dfc
commit
5dc786d4ee
|
|
@ -251,7 +251,9 @@
|
|||
--tainacan-media-thumbs-carousel-width: 100%;
|
||||
--tainacan-media-thumbs-carousel-item-size: 136px;
|
||||
height: auto;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background-color: var(--tainacan-media-background, transparent);
|
||||
box-sizing: border-box; }
|
||||
.tainacan-media-component:not(.alignfull):not(.alignwide) {
|
||||
|
|
@ -325,7 +327,8 @@
|
|||
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata {
|
||||
text-align: center;
|
||||
font-size: 0.875em;
|
||||
margin-bottom: 1em; }
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1rem; }
|
||||
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-name .swiper-slide-metadata__name {
|
||||
display: none;
|
||||
visibility: hidden; }
|
||||
|
|
@ -398,7 +401,7 @@
|
|||
background: var(--tainacan-media-background, #ffffff);
|
||||
border-radius: 3px;
|
||||
word-wrap: break-word;
|
||||
padding: 1rem 2rem;
|
||||
padding: 0rem 2rem;
|
||||
display: block; }
|
||||
.tainacan-media-component__swiper-main .swiper-slide-content audio {
|
||||
background: black;
|
||||
|
|
@ -424,6 +427,10 @@
|
|||
.tainacan-media-component__swiper-thumbs {
|
||||
width: 100%;
|
||||
max-width: var(--tainacan-media-thumbs-carousel-width, 100%); }
|
||||
.tainacan-media-component__swiper-thumbs.swiper-is-beginning .swiper-start-border {
|
||||
display: none; }
|
||||
.tainacan-media-component__swiper-thumbs.swiper-is-end .swiper-end-border {
|
||||
display: none; }
|
||||
.tainacan-media-component__swiper-thumbs ul.swiper-wrapper {
|
||||
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
|
||||
margin: 0 var(--swiper-navigation-size, 44px); }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1614,6 +1614,48 @@ class Theme_Helper {
|
|||
$wrapper_attributes .= 'class="tainacan-media-component"';
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters the Swiper options for the main slider
|
||||
*
|
||||
* @param Object item The current item object
|
||||
* @param Object args Arguments passed to the get_tainacan_item_gallery function
|
||||
*/
|
||||
$extra_swiper_main_options = [];
|
||||
$extra_swiper_main_options = apply_filters( 'tainacan-swiper-main-options', $extra_swiper_main_options, $item, $args );
|
||||
|
||||
$swiper_main_options = array_merge(
|
||||
$extra_swiper_main_options,
|
||||
$layout_elements['main'] ? array(
|
||||
'navigation' => array(
|
||||
'nextEl' => sprintf('.swiper-navigation-next_tainacan-item-gallery-block_id-%s-main', $block_id),
|
||||
'prevEl' => sprintf('.swiper-navigation-prev_tainacan-item-gallery-block_id-%s-main', $block_id),
|
||||
'preloadImages' => false,
|
||||
'lazy' => true
|
||||
)
|
||||
) : []
|
||||
);
|
||||
|
||||
/**
|
||||
* Filters the Swiper options for the thumbnails slider
|
||||
*
|
||||
* @param Object item The current item object
|
||||
* @param Object args Arguments passed to the get_tainacan_item_gallery function
|
||||
*/
|
||||
$extra_swiper_thumbs_options = [];
|
||||
$extra_swiper_thumbs_options = apply_filters( 'tainacan-swiper-thumbs-options', $extra_swiper_thumbs_options, $item, $args );
|
||||
|
||||
$swiper_thumbs_options = array_merge(
|
||||
$extra_swiper_thumbs_options,
|
||||
( $layout_elements['thumbnails'] && !$layout_elements['main'] ) ? array(
|
||||
'navigation' => array(
|
||||
'nextEl' => sprintf('.swiper-navigation-next_tainacan-item-gallery-block_id-%s-thumbs', $block_id),
|
||||
'prevEl' => sprintf('.swiper-navigation-prev_tainacan-item-gallery-block_id-%s-thumbs', $block_id),
|
||||
'preloadImages' => false,
|
||||
'lazy' => true
|
||||
)
|
||||
) : []
|
||||
);
|
||||
|
||||
return tainacan_get_the_media_component(
|
||||
'tainacan-item-gallery-block_id-' . $block_id,
|
||||
$layout_elements['thumbnails'] ? $media_items_thumbnails : null,
|
||||
|
|
@ -1622,22 +1664,8 @@ class Theme_Helper {
|
|||
'wrapper_attributes' => $wrapper_attributes,
|
||||
'class_main_div' => '',
|
||||
'class_thumbs_div' => '',
|
||||
'swiper_main_options' => $layout_elements['main'] ? array(
|
||||
'navigation' => array(
|
||||
'nextEl' => sprintf('.swiper-navigation-next_tainacan-item-gallery-block_id-%s-main', $block_id),
|
||||
'prevEl' => sprintf('.swiper-navigation-prev_tainacan-item-gallery-block_id-%s-main', $block_id),
|
||||
'preloadImages' => false,
|
||||
'lazy' => true
|
||||
)
|
||||
) : '',
|
||||
'swiper_thumbs_options' => ( $layout_elements['thumbnails'] && !$layout_elements['main'] ) ? array(
|
||||
'navigation' => array(
|
||||
'nextEl' => sprintf('.swiper-navigation-next_tainacan-item-gallery-block_id-%s-thumbs', $block_id),
|
||||
'prevEl' => sprintf('.swiper-navigation-prev_tainacan-item-gallery-block_id-%s-thumbs', $block_id),
|
||||
'preloadImages' => false,
|
||||
'lazy' => true
|
||||
)
|
||||
) : '',
|
||||
'swiper_main_options' => $swiper_main_options,
|
||||
'swiper_thumbs_options' => $swiper_thumbs_options,
|
||||
'swiper_arrows_as_svg' => $show_arrows_as_svg,
|
||||
'disable_lightbox' => !$open_lightbox_on_click,
|
||||
'hide_media_name' => $hide_file_name_lightbox,
|
||||
|
|
|
|||
|
|
@ -58,7 +58,9 @@
|
|||
--tainacan-media-thumbs-carousel-item-size: 136px;
|
||||
|
||||
height: auto;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background-color: var(--tainacan-media-background, transparent);
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -149,6 +151,7 @@
|
|||
text-align: center;
|
||||
font-size: 0.875em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1rem;
|
||||
|
||||
&.hide-name .swiper-slide-metadata__name {
|
||||
display: none;
|
||||
|
|
@ -246,7 +249,7 @@
|
|||
background: var(--tainacan-media-background, #ffffff);
|
||||
border-radius: 3px;
|
||||
word-wrap: break-word;
|
||||
padding: 1rem 2rem;
|
||||
padding: 0rem 2rem;
|
||||
display: block;
|
||||
}
|
||||
audio {
|
||||
|
|
@ -279,6 +282,17 @@
|
|||
width: 100%;
|
||||
max-width: var(--tainacan-media-thumbs-carousel-width, 100%);
|
||||
|
||||
&.swiper-is-beginning {
|
||||
.swiper-start-border {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.swiper-is-end {
|
||||
.swiper-end-border {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul.swiper-wrapper {
|
||||
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
|
||||
margin: 0 var(--swiper-navigation-size, 44px);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
||||
import PhotoSwipe from 'photoswipe';
|
||||
import 'photoswipe/dist/photoswipe.css';
|
||||
import Swiper, { Navigation, A11y, Thumbs } from 'swiper';
|
||||
import Swiper, { Navigation, A11y, Thumbs, Pagination } from 'swiper';
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
|
|
@ -53,6 +53,7 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
|
|||
let thumbsSwiperOptions = {
|
||||
spaceBetween: 12,
|
||||
slidesPerView: 'auto',
|
||||
watchSlidesProgress: true,
|
||||
navigation: {
|
||||
nextEl: '.swiper-navigation-next_' + this.thumbs_gallery_selector,
|
||||
prevEl: '.swiper-navigation-prev_' + this.thumbs_gallery_selector,
|
||||
|
|
@ -60,8 +61,8 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
|
|||
pagination: {
|
||||
el: '.swiper-pagination_' + this.thumbs_gallery_selector
|
||||
},
|
||||
// centeredSlides: true,
|
||||
// centeredSlidesBounds: true,
|
||||
centeredSlides: true,
|
||||
centeredSlidesBounds: true,
|
||||
centerInsufficientSlides: true,
|
||||
slideToClickedSlide: true,
|
||||
watchOverflow: true,
|
||||
|
|
@ -71,7 +72,24 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
|
|||
firstSlideMessage: __('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: __('This is the last slide', 'tainacan')
|
||||
},
|
||||
modules: [Navigation, A11y]
|
||||
modules: [Navigation, A11y, Pagination],
|
||||
on: {
|
||||
init: function(swiper) {
|
||||
swiper.el.classList.add('swiper-is-beginning');
|
||||
},
|
||||
slideChange: function(swiper) {
|
||||
|
||||
if (swiper.isBeginning)
|
||||
swiper.el.classList.add('swiper-is-beginning');
|
||||
else
|
||||
swiper.el.classList.remove('swiper-is-beginning');
|
||||
|
||||
if (swiper.isEnd)
|
||||
swiper.el.classList.add('swiper-is-end');
|
||||
else
|
||||
swiper.el.classList.remove('swiper-is-end');
|
||||
}
|
||||
}
|
||||
};
|
||||
thumbsSwiperOptions = {...thumbsSwiperOptions, ...this.options.swiper_thumbs_options };
|
||||
this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbsSwiperOptions);
|
||||
|
|
@ -88,7 +106,10 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
|
|||
firstSlideMessage: __('This is the first slide', 'tainacan'),
|
||||
lastSlideMessage: __('This is the last slide', 'tainacan')
|
||||
},
|
||||
modules: [Navigation, A11y]
|
||||
pagination: {
|
||||
el: '.swiper-pagination_' + this.main_gallery_selector
|
||||
},
|
||||
modules: [Navigation, A11y, Pagination]
|
||||
};
|
||||
mainSwiperOptions = {...mainSwiperOptions, ...this.options.swiper_main_options };
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue