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

Allows multiple instances of media gallery according to ID. #499

This commit is contained in:
mateuswetah 2021-03-18 15:08:40 -03:00
parent 87cfd794bc
commit 9038d93947
7 changed files with 91 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/css/media-component.css
View File

@ -650,7 +650,8 @@ a.pswp__share--download:hover {
max-width: var(--tainacan-media-main-carousel-width, 100%); }
.tainacan-media-component__swiper-main ul.swiper-wrapper {
display: flex;
align-items: center; }
align-items: center;
margin-bottom: 30px; }
.tainacan-media-component__swiper-main li.swiper-slide {
height: 100%;
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
@ -723,7 +724,8 @@ a.pswp__share--download:hover {
max-width: var(--tainacan-media-thumbs-carousel-width, 100%); }
.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); }
margin: 0 var(--swiper-navigation-size, 44px);
margin-bottom: 30px; }
.tainacan-media-component__swiper-thumbs li.swiper-slide {
text-align: center;
vertical-align: top;
@ -808,26 +810,32 @@ a.pswp__share--download:hover {
display: flex;
align-items: center;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__container .tainacan-embed-container {
.tainacan-photoswipe-layer .pswp__container .attachment-without-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__container .attachment-without-image.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
padding: 0px; }
.tainacan-photoswipe-layer .pswp__container .attachment-without-image .tainacan-embed-container .twitter-tweet {
width: 100vw !important; }
.tainacan-photoswipe-layer .pswp__container iframe {
padding: 44px;
min-height: 80%;
min-height: 90vh;
max-height: 90vh;
height: 100%;
width: 100%;
max-width: 80%;
margin: auto;
max-width: 100%;
margin: 0 auto;
border: none;
display: block;
background-image: url("../images/preloader.gif");
background-repeat: no-repeat;
background-position: center; }
.tainacan-photoswipe-layer .pswp__container a:first-of-type,
.tainacan-photoswipe-layer .pswp__container p: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);

2
src/assets/css/media-component.css.map
View File

File diff suppressed because one or more lines are too long

24
src/assets/css/tainacan-embeds.css
View File

@ -8,12 +8,36 @@
.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
padding-bottom: 56.25%;
padding-top: 30px;
width: 100%;
margin: auto;
}
.tainacan-embed-container .twitter-tweet {
margin: 0 auto;
}
.tainacan-embed-container iframe.wp-embedded-content {
display: flex !important;
align-items: center;
justify-content: center;
margin: auto !important;
width: auto !important;
top: 50%;
bottom: 50%;
}
@media screen and (max-width: 1024px) {
.tainacan-embed-container iframe.wp-embedded-content {
position: relative;
}
}
.tainacan-embed-container #tainacan-attachment-iframe { /* PDF */
width: 100%;
}
.tainacan-embed-container iframe,
.tainacan-embed-container object,
.tainacan-embed-container embed {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;

2
src/classes/entities/class-tainacan-item.php
View File

@ -725,7 +725,7 @@ class Item extends Entity {
}
$output .= $_embed;
} elseif ( $type == 'text' ) {
$output .= $this->get_document();
$output .= '<article>' . $this->get_document() . '</article>';
} elseif ( $type == 'attachment' ) {
if ( wp_attachment_is_image($this->get_document()) ) {

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

@ -328,8 +328,9 @@ function tainacan_get_the_media_component(
$args['has_media_main'] = $media_items_main && is_array($media_items_main) && count($media_items_main);
$args['has_media_thumbs'] = $media_items_thumbs && is_array($media_items_thumbs) && count($media_items_thumbs);
$args['media_main_id'] = $args['has_media_thumbs'] ? ( $media_id . '-main' ) : $media_id;
$args['media_thumbs_id'] = $args['has_media_main'] ? ( $media_id . '-thumbs' ) : $media_id;
$args['media_main_id'] = $media_id . '-main';
$args['media_thumbs_id'] = $media_id . '-thumbs';
$args['media_id'] = $media_id;
if ( $args['has_media_main'] || $args['has_media_thumbs'] ) :
// Modal lightbox layer for rendering photoswipe
@ -360,13 +361,13 @@ function tainacan_get_the_media_component(
<?php if ( $args['swiper_main_options'] && isset($args['swiper_main_options']['pagination']) ) : ?>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-pagination swiper-pagination_<?php echo $args['media_main_id'] ?>"></div>
<?php endif; ?>
<?php if ( $args['swiper_main_options'] && isset($args['swiper_main_options']['navigation']) ) : ?>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_main_id'] ?>"></div>
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_main_id'] ?>"></div>
<?php endif; ?>
</div>
<?php echo $args['after_main_div'] ?>
@ -374,7 +375,7 @@ function tainacan_get_the_media_component(
<?php if ( $args['has_media_thumbs'] ) : ?>
<!-- Slider main container -->
<!-- Slider thumbs container -->
<?php echo $args['before_thumbs_div'] ?>
<div id="<?php echo $args['media_thumbs_id'] ?>" class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
@ -391,13 +392,13 @@ function tainacan_get_the_media_component(
<?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['pagination']) ) : ?>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-paginations wiper-pagination_<?php echo $args['media_thumbs_id'] ?>"></div>
<?php endif; ?>
<?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['navigation']) ) : ?>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_thumbs_id'] ?>"></div>
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_thumbs_id'] ?>"></div>
<?php endif; ?>
<!-- These elements will create a gradient on the side of the carousel -->

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

@ -14,7 +14,7 @@ class TainacanMediaGallery {
* @param {Object} options several options to be tweaked
* @param {Object} options.swiper_thumbs_options object with SwiperJS options for the thumbnails list
* @param {Object} options.swiper_main_options object with SwiperJS options for the main list
* @param {Boolean} options.show_share_button showd share button on lightbox
* @param {Boolean} options.show_share_button show share button on lightbox
*
* @return {Object} TainacanMediaGallery instance
*/
@ -26,7 +26,7 @@ class TainacanMediaGallery {
this.options = options;
this.initializeSwiper();
console.log(this.main_gallery_selector, this.thumbs_gallery_selector);
if (this.main_gallery_selector)
this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
else if (this.thumbs_gallery_selector)
@ -41,11 +41,11 @@ class TainacanMediaGallery {
spaceBetween: 12,
slidesPerView: 'auto',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
nextEl: '.swiper-navigation-next_' + this.thumbs_gallery_selector,
prevEl: '.swiper-navigation-prev_' + this.thumbs_gallery_selector,
},
pagination: {
el: '.swiper-pagination'
el: '.swiper-pagination_' + this.thumbs_gallery_selector
},
centerInsufficientSlides: true,
watchOverflow: true
@ -60,11 +60,11 @@ class TainacanMediaGallery {
slidesPerView: 1,
slidesPerGroup: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
nextEl: '.swiper-navigation-next_' + this.main_gallery_selector,
prevEl: '.swiper-navigation-prev_' + this.main_gallery_selector,
},
pagination: {
el: '.swiper-pagination'
el: '.swiper-pagination_' + this.main_gallery_selector
},
watchOverflow: true
};
@ -88,19 +88,16 @@ class TainacanMediaGallery {
initPhotoSwipeFromDOM (gallerySelector) {
// loop through all gallery elements and bind events
let galleryElements = document.querySelectorAll(gallerySelector);
galleryElements.forEach((galleryElement, index) => {
galleryElement.setAttribute("data-pswp-uid", index + 1);
galleryElement.onclick = (event) => this.onThumbnailsClick(event, this);
})
let galleryElement = document.querySelector(gallerySelector);
console.log(galleryElement);
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();
if (hashData.pid && hashData.gid)
this.openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
this.openPhotoSwipe(hashData.pid, galleryElement, true, true);
}
// parse slide data (url, title, size ...) from DOM elements
@ -112,31 +109,30 @@ class TainacanMediaGallery {
metadataElement,
fullContentElement,
item;
console.log(el.childNodes);
for (let i = 0; i < thumbElements.length; i++) {
liElement = thumbElements[i];
// include only element nodes
if (liElement.nodeType !== 1)
continue;
console.log(_.clone(liElement));
fullContentElement = liElement.querySelectorAll('.media-full-content *');
console.log(fullContentElement);
if ( !fullContentElement.length ) {
item = {
html: fullContentElement.outterHTML ? fullContentElement.outterHTML : fullContentElement
}
continue;
} else {
fullContentElement = fullContentElement[fullContentElement.length - 1];
if (fullContentElement.nodeName === 'IMG') {
if (fullContentElement[fullContentElement.length - 1].nodeName === 'IMG') {
fullContentElement = fullContentElement[fullContentElement.length - 1];
item = {
src: fullContentElement.src,
w: parseInt(fullContentElement.width),
h: parseInt(fullContentElement.height)
};
} else {
fullContentElement = fullContentElement[0];
item = {
html: fullContentElement.outterHTML ? fullContentElement.outterHTML : fullContentElement
}
@ -159,7 +155,7 @@ class TainacanMediaGallery {
item.el = liElement; // save link to element for getThumbBoundsFn
items.push(item);
}
console.log(items.length);
return items;
};
@ -275,12 +271,14 @@ class TainacanMediaGallery {
// Update position of the slider
swiperInstance.slideTo(getCurrentIndex, 0, false);
// Start swiper autoplay (on close - if swiper autoplay is true)
swiperInstance.autoplay.start();
console.log(swiperInstance);
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled)
swiperInstance.autoplay.start();
});
// Swiper autoplay stop when image zoom */
gallery.listen('initialZoomIn', () => {
if (swiperInstance.autoplay.running)
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled && swiperInstance.autoplay.running)
swiperInstance.autoplay.stop();
});
};

21
src/views/media-component/media-component.scss
View File

@ -59,6 +59,7 @@ $pswp__include-minimal-style: true !default;
ul.swiper-wrapper {
display: flex;
align-items: center;
margin-bottom: 30px;
}
li.swiper-slide {
height: 100%;
@ -155,6 +156,7 @@ $pswp__include-minimal-style: true !default;
ul.swiper-wrapper {
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
margin: 0 var(--swiper-navigation-size, 44px);
margin-bottom: 30px;
}
li.swiper-slide {
@ -270,21 +272,29 @@ $pswp__include-minimal-style: true !default;
align-items: center;
justify-content: center;
.tainacan-embed-container {
.attachment-without-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
&.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
padding: 0px;
}
.tainacan-embed-container .twitter-tweet {
width: 100vw !important;
}
}
iframe {
padding: 44px;
min-height: 80%;
min-height: 90vh;
max-height: 90vh;
height: 100%;
width: 100%;
max-width: 80%;
margin: auto;
max-width: 100%;
margin: 0 auto;
border: none;
display: block;
background-image: url('../images/preloader.gif');
@ -293,7 +303,8 @@ $pswp__include-minimal-style: true !default;
}
a:first-of-type,
p:first-of-type {
p:first-of-type ,
article:first-of-type {
z-index: 99;
padding: 1rem 4.33337vw;
background: var(--tainacan-media-background, #ffffff);