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

Loads photoswipe from URL if hash is passed. #548.

This commit is contained in:
mateuswetah 2022-03-16 11:26:45 -03:00
parent 03e1f570fb
commit b70b02a30b
6 changed files with 320 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@ -4886,7 +4886,8 @@
},
"ini": {
"version": "1.3.5",
"resolved": "",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true,
"optional": true
},

217
src/assets/css/tainacan-gutenberg-block-item-gallery.css
View File

@ -290,114 +290,137 @@
.tainacan-media-component__swiper-main + .tainacan-media-component__swiper-thumbs li.swiper-slide {
cursor: pointer; }
.tainacan-photoswipe-layer .pswp__bg {
background-color: rgba(0, 0, 0, 0.85); }
.tainacan-photoswipe-layer .pswp__ui--fit .pswp__top-bar,
.tainacan-photoswipe-layer .pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, 0.7); }
.tainacan-photoswipe-layer .pswp__button--arrow--left::before,
.tainacan-photoswipe-layer .pswp__button--arrow--right::before {
background-color: transparent; }
.tainacan-photoswipe-layer .pswp__container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__container .attachment-without-image {
.tainacan-photoswipe-layer {
--pswp-bg: var(--tainacan-lightbox-background, #000);
--pswp-error-text-color: var(--tainacan-lightbox-text-color, #f7f7f7);
--pswp-icon-color: var(--tainacan-lightbox-text-color, #fff); }
.tainacan-photoswipe-layer .pswp__caption {
bottom: 0;
position: fixed;
padding: 8px;
width: 100%;
height: calc(100% - 44px);
display: flex;
justify-content: center;
align-items: center;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__caption-inner {
opacity: 0.75;
background-color: var(--pswp-bg);
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
max-width: 920px;
padding: 12px;
line-height: 20px;
text-align: center;
padding: 44px;
margin-top: 22px;
margin-bottom: 22px; }
.tainacan-photoswipe-layer .pswp__container .attachment-without-image > iframe:not(.wp-embedded-content) {
font-size: 1em;
border-radius: 3px;
transition: opacity 0.4s ease; }
.tainacan-photoswipe-layer .pswp__caption-inner:hover {
opacity: 1.0; }
.tainacan-photoswipe-layer.pswp--zoomed-in .pswp__caption-inner {
opacity: 0.0; }
.tainacan-photoswipe-layer .pswp__button--arrow--left::before,
.tainacan-photoswipe-layer .pswp__button--arrow--right::before {
background-color: transparent; }
.tainacan-photoswipe-layer .pswp__container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__container .attachment-without-image {
width: 100%;
height: calc(100% - 44px);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 44px;
margin-top: 22px;
margin-bottom: 22px; }
.tainacan-photoswipe-layer .pswp__container .attachment-without-image > iframe:not(.wp-embedded-content) {
width: 90vw;
height: 90vh;
border: none;
margin: 44px;
display: block;
background-image: url("../images/preloader.gif");
background-repeat: no-repeat;
background-position: center; }
.tainacan-photoswipe-layer .pswp__container .pswp__zoom-wrap > iframe#iframePDF {
width: 90vw;
height: 90vh;
border: none;
margin: 44px;
margin: 44px auto;
display: block;
background-image: url("../images/preloader.gif");
background-repeat: no-repeat;
background-position: center; }
.tainacan-photoswipe-layer .pswp__container .pswp__zoom-wrap > iframe#iframePDF {
width: 90vw;
height: 90vh;
border: none;
margin: 44px auto;
.tainacan-photoswipe-layer .pswp__container .pswp__zoom-wrap {
display: flex;
justify-content: center;
align-items: center; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed {
width: 100%;
height: auto; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-has-aspect-ratio {
max-width: calc((90vh * 2) / 1);
/* Default to 2:1 aspect ratio. */
margin-left: auto;
margin-right: auto; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-21-9 {
max-width: calc((90vh * 21) / 9); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-18-9 {
max-width: calc((90vh * 18) / 9); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-16-9 {
max-width: calc((90vh * 16) / 9); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-4-3 {
max-width: calc((90vh * 4) / 3); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-1-1 {
max-width: 90vh; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-9-16 {
max-width: calc((90vh * 9) / 16); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-1-2 {
max-width: calc((90vh * 1) / 2); }
.tainacan-photoswipe-layer .pswp__container a:first-of-type,
.tainacan-photoswipe-layer .pswp__container p:first-of-type,
.tainacan-photoswipe-layer .pswp__container article:first-of-type {
z-index: 99;
padding: 1rem 4.33337vw;
background: var(--tainacan-media-background, #ffffff);
border-radius: 3px;
word-wrap: break-word; }
.tainacan-photoswipe-layer .pswp__container audio {
background: black;
min-height: 38px;
border-radius: 20px;
min-width: 80%;
max-width: 80%; }
.tainacan-photoswipe-layer .pswp__container video {
min-height: 56px;
max-width: 80%; }
.tainacan-photoswipe-layer .pswp__top-bar .pswp__name {
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
text-align: center;
font-size: 1.125em;
display: block;
background-image: url("../images/preloader.gif");
background-repeat: no-repeat;
background-position: center; }
.tainacan-photoswipe-layer .pswp__container .pswp__zoom-wrap {
display: flex;
justify-content: center;
align-items: center; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed {
height: 44px;
max-width: calc(100% - 240px);
width: 100%;
height: auto; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-has-aspect-ratio {
max-width: calc((90vh * 2) / 1);
/* Default to 2:1 aspect ratio. */
margin-left: auto;
margin-right: auto; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-21-9 {
max-width: calc((90vh * 21) / 9); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-18-9 {
max-width: calc((90vh * 18) / 9); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-16-9 {
max-width: calc((90vh * 16) / 9); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-4-3 {
max-width: calc((90vh * 4) / 3); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-1-1 {
max-width: 90vh; }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-9-16 {
max-width: calc((90vh * 9) / 16); }
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-1-2 {
max-width: calc((90vh * 1) / 2); }
.tainacan-photoswipe-layer .pswp__container a:first-of-type,
.tainacan-photoswipe-layer .pswp__container p:first-of-type,
.tainacan-photoswipe-layer .pswp__container article:first-of-type {
z-index: 99;
padding: 1rem 4.33337vw;
background: var(--tainacan-media-background, #ffffff);
border-radius: var(--borderRadius, 3px);
word-wrap: break-word; }
.tainacan-photoswipe-layer .pswp__container audio {
background: black;
min-height: 38px;
border-radius: 20px;
min-width: 80%;
max-width: 80%; }
.tainacan-photoswipe-layer .pswp__container video {
min-height: 56px;
max-width: 80%; }
.tainacan-photoswipe-layer .pswp__top-bar .pswp__name {
color: white;
text-align: center;
font-size: 1.125em;
display: block;
height: 44px;
max-width: calc(100% - 240px);
width: 100%;
left: 44px;
position: absolute;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 44px;
padding: 0 10px; }
.tainacan-photoswipe-layer .pswp__figure_caption {
font-size: 0.875em;
font-style: italic; }
.tainacan-photoswipe-layer .pswp__description {
font-size: 0.9375em; }
.tainacan-photoswipe-layer .pswp__caption__center {
text-align: center;
font-size: 1em;
max-width: 800px; }
left: 44px;
position: absolute;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 44px;
padding: 0 10px; }
.tainacan-photoswipe-layer .pswp__figure_caption {
font-size: 0.875em;
font-style: italic; }
.tainacan-photoswipe-layer .pswp__description {
font-size: 0.9375em; }
.tainacan-photoswipe-layer .pswp__caption__center {
text-align: center;
font-size: 1em;
max-width: 800px; }
/*# sourceMappingURL=tainacan-gutenberg-block-item-gallery.css.map */

2
src/assets/css/tainacan-gutenberg-block-item-gallery.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -346,10 +346,6 @@ function tainacan_get_the_media_component(
ob_start();
if ( $args['has_media_main'] || $args['has_media_thumbs'] ) :
// Modal lightbox layer for rendering photoswipe
if (!$args['disable_lightbox'])
add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-item-gallery.css', array(), TAINACAN_VERSION);
@ -583,75 +579,6 @@ function tainacan_get_the_media_component_slide( $args = array() ) {
return $content;
}
/**
* Div with content necessay to render the photowipe modal
*
* @return string
*/
function tainacan_get_the_media_modal_layer() {
?>
<!-- Root element of PhotoSwipe lightbox. Must have class pswp. -->
<div class="tainacan-photoswipe-layer pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
<!-- don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<div class="pswp__name"></div>
<button class="pswp__button pswp__button--close" title="<?php __('Close modal (Esc)', 'tainacan') ?>"></button>
<button class="pswp__button pswp__button--share" title="<?php __('Share', 'tainacan') ?>"></button>
<button class="pswp__button pswp__button--fs" title="<?php __('Toggle fullscreen', 'tainacan') ?>"></button>
<button class="pswp__button pswp__button--zoom" title="<?php __('Zoom in/out', 'tainacan') ?>"></button>
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="<?php __('Next', 'tainacan') ?>"></button>
<button class="pswp__button pswp__button--arrow--right" title="<?php __('Previous', 'tainacan') ?>"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<?php
}
/**
* When visiting a collection archive or single, returns the collection url link
*

52
src/views/gutenberg-blocks/blocks/item-gallery/style.scss
View File

@ -1,15 +1,3 @@
$pswp__show-hide-transition-duration: 333ms !default;
$pswp__controls-transition-duration: 333ms !default;
$pswp__background-color: rgba(0,0,0, 0.8) !default;
$pswp__placeholder-color: #222 !default;
$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
$pswp__root-z-index: 9999999 !default;
$pswp__assets-path: '../images/' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
$pswp__error-text-color: #CCC !default; // "Image not loaded" text color
$pswp__include-minimal-style: true !default;
// @import '../../../../../node_modules/photoswipe/dist/photoswipe.css';
.item-gallery-edit-container {
.tainacan-media-component {
.swiper-slide,
@ -391,12 +379,37 @@ $pswp__include-minimal-style: true !default;
// Photoswip zoom ---------------------------------
.tainacan-photoswipe-layer {
.pswp__bg {
background-color: rgba(0, 0, 0, 0.85);
--pswp-bg: var(--tainacan-lightbox-background, #000);
--pswp-error-text-color: var(--tainacan-lightbox-text-color, #f7f7f7);
--pswp-icon-color: var(--tainacan-lightbox-text-color, #fff);
.pswp__caption {
bottom: 0;
position: fixed;
padding: 8px;
width: 100%;
display: flex;
justify-content: center;
}
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, 0.7);
.pswp__caption-inner {
opacity: 0.75;
background-color: var(--pswp-bg);
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
max-width: 920px;
padding: 12px;
line-height: 20px;
text-align: center;
font-size: 1em;
border-radius: 3px;
transition: opacity 0.4s ease;
&:hover {
opacity: 1.0;
}
}
&.pswp--zoomed-in .pswp__caption-inner {
opacity: 0.0;
}
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
@ -486,7 +499,7 @@ $pswp__include-minimal-style: true !default;
z-index: 99;
padding: 1rem 4.33337vw;
background: var(--tainacan-media-background, #ffffff);
border-radius: var(--borderRadius, 3px);
border-radius: 3px;
word-wrap: break-word;
}
audio {
@ -502,7 +515,8 @@ $pswp__include-minimal-style: true !default;
}
}
.pswp__top-bar .pswp__name {
color: white;
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
text-align: center;
font-size: 1.125em;
display: block;

383
src/views/gutenberg-blocks/blocks/item-gallery/theme.js
View File

@ -2,13 +2,14 @@
//
// Counts on some HMTL markup to make a list of media links be displayed
// as a carousel with a lightbox. Check examples in the end of the file
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm';
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm';
import 'photoswipe/dist/photoswipe.css';
import Swiper, { Navigation, A11y } from 'swiper';
import Swiper, { Navigation, A11y, Thumbs } from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/navigation/navigation.min.css';
import 'swiper/modules/a11y/a11y.min.css';
import 'swiper/modules/controller/controller.min.css';
const { __ } = wp.i18n;
@ -31,14 +32,16 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
this.main_gallery_selector = main_gallery_selector;
this.thumbsSwiper = null;
this.mainSwiper = null;
this.lightbox = null;
this.options = options;
this.initializeSwiper();
if (!this.options.disable_lightbox) {
if (this.main_gallery_selector)
this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
this.initializePhotoswipe(this.main_gallery_selector + " .swiper-wrapper");
else if (this.thumbs_gallery_selector)
this.initPhotoSwipeFromDOM(this.thumbs_gallery_selector + " .swiper-wrapper");
this.initializePhotoswipe(this.thumbs_gallery_selector + " .swiper-wrapper");
}
}
@ -56,7 +59,10 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
pagination: {
el: '.swiper-pagination_' + this.thumbs_gallery_selector
},
// centeredSlides: true,
// centeredSlidesBounds: true,
centerInsufficientSlides: true,
slideToClickedSlide: true,
watchOverflow: true,
a11y: {
prevSlideMessage: __( 'Previous slide', 'tainacan'),
@ -69,19 +75,11 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
thumbsSwiperOptions = {...thumbsSwiperOptions, ...this.options.swiper_thumbs_options };
this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbsSwiperOptions);
}
if (this.main_gallery_selector) {
let mainSwiperOptions = {
slidesPerView: 1,
slidesPerGroup: 1,
// navigation: {
// nextEl: '.swiper-navigation-next_' + this.main_gallery_selector,
// prevEl: '.swiper-navigation-prev_' + this.main_gallery_selector,
// },
// pagination: {
// el: '.swiper-pagination_' + this.main_gallery_selector
// },
watchOverflow: true,
a11y: {
prevSlideMessage: __( 'Previous slide', 'tainacan'),
@ -91,40 +89,168 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
},
modules: [Navigation, A11y]
};
if (this.thumbsSwiper) {
mainSwiperOptions = {...mainSwiperOptions, ...this.options.swiper_main_options };
if (this.thumbs_gallery_selector && this.thumbsSwiper) {
mainSwiperOptions.thumbs = {
swiper: this.thumbsSwiper,
autoScrollOffset: 3
}
mainSwiperOptions.modules = [Navigation, A11y, Thumbs];
}
mainSwiperOptions = {...mainSwiperOptions, ...this.options.swiper_main_options };
this.mainSwiper = new Swiper(this.main_gallery_selector, mainSwiperOptions);
}
if (this.thumbsMain && this.mainSwiper) {
this.mainSwiper.controller = {
control: this.thumbsSwiper,
by: 'slide'
}
}
}
initPhotoSwipeFromDOM (gallerySelector) {
// loop through all gallery elements and bind events
/* Initializes Photoswipe Lightbox */
initializePhotoswipe (gallerySelector) {
// Loop through all gallery elements and bind events
let galleryElement = document.querySelector(gallerySelector);
galleryElement.setAttribute("data-pswp-uid", this.options.media_id);
galleryElement.onclick = (event) => this.onThumbnailsClick(event, this);
// Parse URL and open gallery if it contains #&pid=3&gid=1
let hashData = this.photoswipeParseHash();
console.log(this.options.media_id);
if (hashData.pid && hashData.gid)
this.openPhotoSwipe(hashData.pid, galleryElement, true, true);
let items = this.parseThumbnailElements(galleryElement);
let photoswipeOptions = {
loop: false,
preloadFirstSlide: false,
mainClass: 'tainacan-photoswipe-layer',
bgOpacity: 0.85,
clickToCloseNonZoomable: false,
closeTitle: __( 'Close lightbox', 'tainacan'),
zoomTitle: __( 'Zoom', 'tainacan'),
arrowPrevTitle: __( 'Previous slide', 'tainacan'),
arrowNextTitle: __( 'Next slide', 'tainacan'),
getClickedIndexFn: (clickedElement) => {
return items.findIndex(anItem => anItem.el.contains(clickedElement.target));
},
padding: { top: 60, bottom: 60, left: 40, right: 40 },
// paddingFn: (viewportSize, itemData, index) => {
// console.log(viewportSize, itemData, index)
// return {
// // check based on slide index
// top: 60,
// bottom: 0,
// left: 0,
// right: 0
// };
// }
};
// Pass data to PhotoSwipe and initialize it
this.lightbox = new PhotoSwipeLightbox({
gallery: galleryElement,
children: items,
pswpModule: PhotoSwipe,
...photoswipeOptions
});
this.lightbox.init();
/* Updates Swiper instance from Photoswipe */
const swiperInstance = this.mainSwiper ? this.mainSwiper : this.thumbsSwiper;
const thisLightbox = this.lightbox;
// Parse URL and open gallery from it if contains #&pid=3&gid=1
const hashData = this.photoswipeParseHash();
if (hashData.pid && hashData.gid && this.options.media_id == hashData.gid) {
// in URL indexes start from 1
photoswipeOptions.index = parseInt(hashData.pid, 10) - 1;
if (!isNaN(photoswipeOptions.index) && items[photoswipeOptions.index] && items[photoswipeOptions.index].el)
items[photoswipeOptions.index].el.click();
}
// On destroy we make a copy of the inner content to clear it
// and set again. This stops YouTube player, for example.
this.lightbox.on('destroy', () => {
let actualGalleryContainer = document.getElementsByClassName("pswp__container")[0];
if (actualGalleryContainer) {
let currentData = actualGalleryContainer.innerHTML;
actualGalleryContainer.innerHTML = '';
actualGalleryContainer.innerHTML = currentData;
}
});
// Swiper autoplay stop when image zoom */
this.lightbox.on('initialZoomInEnd', () => {
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled && swiperInstance.autoplay.running)
swiperInstance.autoplay.stop();
});
// Update position of the slider
this.lightbox.on("change", () => {
if (thisLightbox.pswp && thisLightbox.pswp.currIndex) {
// This is the index of current photoswipe slide
swiperInstance.slideTo(thisLightbox.pswp.currIndex);
// Also updates URL for history navigation
// We only add to the history if it is the first time opening
let currentURL = window.location.toString();
if (currentURL.indexOf("#") > 0) {
currentURL = currentURL.substring(0, currentURL.indexOf("#"));
window.history.replaceState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (thisLightbox.pswp.currIndex + 1));
} else {
window.history.pushState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (thisLightbox.pswp.currIndex + 1));
}
}
});
// Re-starts autoplay, if needed
this.lightbox.on("close", () => {
// Start swiper autoplay (on close - if swiper autoplay is true)
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled)
swiperInstance.autoplay.start();
// Clears URL hash as we no longer need history navigation
let currentURL = window.location.toString();
if (currentURL.indexOf("#") > 0)
window.history.replaceState({},'', currentURL.substring(0, currentURL.indexOf("#")));
});
// Adds caption
this.lightbox.on('uiRegister', () => {
thisLightbox.pswp.ui.registerElement({
name: 'caption',
order: 15,
isButton: false,
appendTo: 'root',
onInit: (el, pswp) => {
thisLightbox.pswp.on('change', () => {
const item = pswp.currSlide.data;
if (item && item.title) {
let innerHTML = '';
innerHTML += '<div class="pswp__caption-inner">';
if (item.title.caption)
innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
if (item.title.name && item.title.caption || (!item.title.name && item.title.caption && item.title.description) )
innerHTML += '<br>';
if (item.title.name)
innerHTML += '<span class="pswp__name">' + item.title.name.innerHTML + '</span>';
if (item.title.description && item.title.name)
innerHTML += '<br>';
if (item.title.description)
innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
innerHTML += '</div>';
el.innerHTML = innerHTML;
}
});
}
});
});
}
// parse slide data (url, title, size ...) from DOM elements
// Parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
parseThumbnailElements(el) {
let items = [];
@ -181,190 +307,9 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
return items;
};
openPhotoSwipe(
index,
galleryElement,
disableAnimation,
fromURL
) {
let pswpElement = document.querySelectorAll(".pswp")[0],
gallery,
options,
items;
items = this.parseThumbnailElements(galleryElement);
// Photoswipe options
// https://photoswipe.com/documentation/options.html //
options = {
showHideOpacity: true,
loop: false,
timeToIdle: 6000,
timeToIdleOutside: 3000,
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
counterEl: true,
arrowEl: true,
preloadFirstSlide: false,
preload: [0,0],
shareEl: this.options.show_share_button ? this.options.show_share_button : false,
bgOpacity: 1,
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute("data-pswp-uid"),
getThumbBoundsFn: (index) => {
let thumbnail = items[index].el,
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
},
// Function builds caption markup
addCaptionHTMLFn: (item, captionEl, isFake) => {
// item - slide object
// captionEl - caption DOM element
// isFake - true when content is added to fake caption container
// (used to get size of next or previous caption)
captionEl.children[0].innerHTML = '';
if(!item.title)
return false;
if (item.title.caption)
captionEl.children[0].innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
if (item.title.name && item.title.caption || (!item.title.name && item.title.caption && item.title.description) )
captionEl.children[0].innerHTML += '<br>';
if (item.title.name)
captionEl.children[0].innerHTML += '<span class="pswp__name">' + item.title.name.innerHTML + '</span>';
if (item.title.description && item.title.name)
captionEl.children[0].innerHTML += '<br>';
if (item.title.description)
captionEl.children[0].innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
return true;
},
};
// PhotoSwipe opened from URL
if (fromURL) {
if (options.galleryPIDs) {
// parse real index when custom PIDs are used
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
for (let j = 0; j < items.length; j++) {
if (items[j].pid == index) {
options.index = j;
break;
}
}
} else {
// in URL indexes start from 1
options.index = parseInt(index, 10) - 1;
}
} else {
options.index = parseInt(index, 10);
}
// exit if index not found
if (isNaN(options.index))
return;
if (disableAnimation)
options.showAnimationDuration = 0;
// Pass data to PhotoSwipe and initialize it
gallery = new PhotoSwipeLightbox({
gallery: pswpElement,
pswpModule: PhotoSwipe,
children: items,
...options
});
gallery.loadAndOpen(options.index);
/* Updates PhotoSwiper instance from Swiper */
let swiperInstance = this.mainSwiper ? this.mainSwiper : this.thumbsSwiper;
gallery.on("unbindEvents", () => {
// This is index of current photoswipe slide
let getCurrentIndex = gallery.getCurrentIndex();
// Update position of the slider
swiperInstance.slideTo(getCurrentIndex, 0, false);
// Start swiper autoplay (on close - if swiper autoplay is true)
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled)
swiperInstance.autoplay.start();
});
// Swiper autoplay stop when image zoom */
gallery.on('initialZoomIn', () => {
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled && swiperInstance.autoplay.running)
swiperInstance.autoplay.stop();
});
// On destroy we make a copy of the inner content to clear it
// and set again. This stops YouTube player, for example.
gallery.on('destroy', () => {
let actualGalleryContainer = document.getElementsByClassName("pswp__container")[0];
if (actualGalleryContainer) {
let currentData = actualGalleryContainer.innerHTML;
actualGalleryContainer.innerHTML = '';
actualGalleryContainer.innerHTML = currentData;
}
});
};
// triggers when user clicks on thumbnail
onThumbnailsClick(e, self) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
let eTarget = e.target || e.srcElement;
// find root element of slide
let closest = function closest(el, fn) {
return el && (fn(el) ? el : closest(el.parentNode, fn));
};
let clickedListItem = closest(eTarget, function(el) {
return el.tagName && el.tagName.toUpperCase() === "LI";
});
if (!clickedListItem)
return;
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
let clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (let i = 0; i < numChildNodes; i++) {
if (childNodes[i].nodeType !== 1)
continue;
if (childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
// open PhotoSwipe if valid index found
if (index >= 0)
self.openPhotoSwipe(index, clickedGallery);
return false;
}
// parse picture index and gallery index from URL (#&pid=1&gid=2)
// Parse slide index and gallery index from URL (#&pid=1&gid=2)
photoswipeParseHash() {
const hash = window.location.hash.substring(1),
params = {};
@ -384,8 +329,8 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
params[pair[0]] = pair[1];
}
if (params.gid)
params.gid = parseInt(params.gid, 10);
if (params.pid)
params.pid = parseInt(params.pid, 10);
return params;
}