tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds translatable a11y labels to Swiper Instance.

This commit is contained in:
mateuswetah 2021-03-18 15:36:59 -03:00
parent 9038d93947
commit 1ec5359a98
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/classes/theme-helper/template-tags.php
View File

@ -337,7 +337,7 @@ function tainacan_get_the_media_component(
add_action('wp_footer', 'tainacan_get_the_media_modal_layer'); add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/media-component.css', array(), TAINACAN_VERSION); wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/media-component.css', array(), TAINACAN_VERSION);
wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['tainacan-search'], TAINACAN_VERSION, true ); wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['tainacan-search','wp-i18n'], TAINACAN_VERSION, true );
?> ?>
<div class="tainacan-media-component"> <div class="tainacan-media-component">

22
src/views/media-component/media-component.js
View File

@ -4,6 +4,7 @@
// as a carousel with a lightbox. Check examples in the end of the file // as a carousel with a lightbox. Check examples in the end of the file
import PhotoSwipe from 'photoswipe/dist/photoswipe.min.js'; import PhotoSwipe from 'photoswipe/dist/photoswipe.min.js';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.min.js'; import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.min.js';
const { __ } = wp.i18n;
class TainacanMediaGallery { class TainacanMediaGallery {
@ -26,7 +27,7 @@ class TainacanMediaGallery {
this.options = options; this.options = options;
this.initializeSwiper(); this.initializeSwiper();
console.log(this.main_gallery_selector, this.thumbs_gallery_selector);
if (this.main_gallery_selector) if (this.main_gallery_selector)
this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper"); this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
else if (this.thumbs_gallery_selector) else if (this.thumbs_gallery_selector)
@ -48,7 +49,13 @@ class TainacanMediaGallery {
el: '.swiper-pagination_' + this.thumbs_gallery_selector el: '.swiper-pagination_' + this.thumbs_gallery_selector
}, },
centerInsufficientSlides: true, centerInsufficientSlides: true,
watchOverflow: true watchOverflow: true,
a11y: {
prevSlideMessage: __( 'Previous slide', 'tainacan'),
nextSlideMessage: __( 'Next slide', 'tainacan'),
firstSlideMessage: __('This is the first slide', 'tainacan'),
lastSlideMessage: __('This is the last slide', 'tainacan')
},
}; };
thumbsSwiperOptions = {...thumbsSwiperOptions, ...this.options.swiper_thumbs_options }; thumbsSwiperOptions = {...thumbsSwiperOptions, ...this.options.swiper_thumbs_options };
this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbsSwiperOptions); this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbsSwiperOptions);
@ -66,7 +73,13 @@ class TainacanMediaGallery {
pagination: { pagination: {
el: '.swiper-pagination_' + this.main_gallery_selector el: '.swiper-pagination_' + this.main_gallery_selector
}, },
watchOverflow: true watchOverflow: true,
a11y: {
prevSlideMessage: __( 'Previous slide', 'tainacan'),
nextSlideMessage: __( 'Next slide', 'tainacan'),
firstSlideMessage: __('This is the first slide', 'tainacan'),
lastSlideMessage: __('This is the last slide', 'tainacan')
},
}; };
if (this.thumbsSwiper) { if (this.thumbsSwiper) {
mainSwiperOptions.thumbs = { mainSwiperOptions.thumbs = {
@ -89,7 +102,7 @@ class TainacanMediaGallery {
initPhotoSwipeFromDOM (gallerySelector) { initPhotoSwipeFromDOM (gallerySelector) {
// loop through all gallery elements and bind events // loop through all gallery elements and bind events
let galleryElement = document.querySelector(gallerySelector); let galleryElement = document.querySelector(gallerySelector);
console.log(galleryElement);
galleryElement.setAttribute("data-pswp-uid", this.options.media_id); galleryElement.setAttribute("data-pswp-uid", this.options.media_id);
galleryElement.onclick = (event) => this.onThumbnailsClick(event, this); galleryElement.onclick = (event) => this.onThumbnailsClick(event, this);
@ -271,7 +284,6 @@ class TainacanMediaGallery {
// Update position of the slider // Update position of the slider
swiperInstance.slideTo(getCurrentIndex, 0, false); swiperInstance.slideTo(getCurrentIndex, 0, false);
// Start swiper autoplay (on close - if swiper autoplay is true) // Start swiper autoplay (on close - if swiper autoplay is true)
console.log(swiperInstance);
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled) if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled)
swiperInstance.autoplay.start(); swiperInstance.autoplay.start();
}); });