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

Adds loading gif below iframes. #499

This commit is contained in:
mateuswetah 2021-03-17 11:12:14 -03:00
parent 761dfd3801
commit 87cfd794bc
6 changed files with 135 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -616,7 +616,7 @@ a.pswp__share--download:hover {
--tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%;
--tainacan-media-thumbs-carousel-item-size: 140px;
--tainacan-media-thumbs-carousel-item-size: 136px;
width: 100%;
height: auto;
display: block;
@ -657,6 +657,15 @@ a.pswp__share--download:hover {
padding: 0 var(--swiper-navigation-size, 44px); }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata {
text-align: center; }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-name .swiper-slide-metadata__name {
display: none;
visibility: hidden; }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-description .swiper-slide-metadata__description {
display: none;
visibility: hidden; }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-caption .swiper-slide-metadata__caption {
display: none;
visibility: hidden; }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__name {
font-size: 1em;
font-weight: bold;
@ -674,12 +683,18 @@ a.pswp__share--download:hover {
align-items: center;
justify-content: center;
flex-direction: column; }
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-embed-container {
width: 100%;
height: auto; }
.tainacan-media-component__swiper-main .swiper-slide-content iframe {
max-height: var(--tainacan-media-main-carousel-height, 60vh);
width: 90%;
max-width: 90%;
width: 100%;
max-width: 100%;
border: none;
display: block; }
display: block;
background-image: url("../images/preloader.gif");
background-repeat: no-repeat;
background-position: center; }
.tainacan-media-component__swiper-main .swiper-slide-content a:first-of-type,
.tainacan-media-component__swiper-main .swiper-slide-content p:first-of-type {
z-index: 99;
@ -687,12 +702,17 @@ a.pswp__share--download:hover {
background: white;
border-radius: 3px;
word-wrap: break-word; }
.tainacan-media-component__swiper-main .swiper-slide-content audio,
.tainacan-media-component__swiper-main .swiper-slide-content video {
.tainacan-media-component__swiper-main .swiper-slide-content audio {
background: black;
min-height: 38px;
border-radius: 20px;
width: 100%;
height: auto;
max-height: var(--tainacan-media-main-carousel-height, 60vh); }
.tainacan-media-component__swiper-main .swiper-slide-content video {
min-height: 56px;
width: 100%;
height: auto;
min-height: 54px;
padding: 12px;
max-height: var(--tainacan-media-main-carousel-height, 60vh); }
.tainacan-media-component__swiper-main .swiper-slide-content img {
width: auto;
@ -709,16 +729,16 @@ a.pswp__share--download:hover {
vertical-align: top;
word-break: break-all;
font-size: 0.875em;
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 140px) + 17px);
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px);
cursor: zoom-in; }
@media only screen and (max-width: 380px) {
.tainacan-media-component__swiper-thumbs li.swiper-slide {
margin: 10px 0; } }
.tainacan-media-component__swiper-thumbs li.swiper-slide img {
width: var(--tainacan-media-thumbs-carousel-item-size, 140px);
height: var(--tainacan-media-thumbs-carousel-item-size, 140px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 140px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 140px);
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center;
border-bottom-width: 6px;
@ -741,7 +761,7 @@ a.pswp__share--download:hover {
margin-top: 0.5rem; }
.tainacan-media-component__swiper-thumbs li.swiper-slide a {
width: 100%;
max-width: var(--tainacan-media-thumbs-carousel-item-size, 140px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
text-align: center;
word-break: break-word; }
.tainacan-media-component__swiper-thumbs li.swiper-slide a,
@ -795,11 +815,17 @@ a.pswp__share--download:hover {
align-items: center;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__container iframe {
min-height: 80vh;
width: 80%;
padding: 44px;
min-height: 80%;
height: 100%;
width: 100%;
max-width: 80%;
margin: auto;
border: none;
display: block; }
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 {
z-index: 99;
@ -807,10 +833,12 @@ a.pswp__share--download:hover {
background: var(--tainacan-media-background, #ffffff);
border-radius: var(--borderRadius, 3px);
word-wrap: break-word; }
.tainacan-photoswipe-layer .pswp__container audio,
.tainacan-photoswipe-layer .pswp__container audio {
background: black;
min-height: 38px;
border-radius: 20px; }
.tainacan-photoswipe-layer .pswp__container video {
min-height: 54px;
padding: 12px; }
min-height: 56px; }
.tainacan-photoswipe-layer .pswp__name {
color: white;
text-align: center;

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

File diff suppressed because one or more lines are too long

6
src/assets/css/tainacan-media-page.css
View File

@ -16,7 +16,6 @@ body:not([class]) > iframe {
min-height: 80vh;
border: none;
}
body:not([class]) > audio,
body:not([class]) > video {
width: 100%;
height: auto;
@ -25,6 +24,11 @@ body:not([class]) > video {
}
body:not([class]) > audio {
width: 100%;
height: auto;
border-radius: 20px;
background: black;
min-height: 38px;
max-height: 100%;
}
body:not([class]) > a,
body:not([class]) > p {

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

@ -478,15 +478,21 @@ function tainacan_get_the_media_component_slide( $args = array() ) {
<?php if ( !empty($args['media_title']) || !empty($args['description']) || !empty($args['media_caption']) ) : ?>
<div class="swiper-slide-metadata">
<?php if ( !empty($args['media_caption']) ) :?>
<span class="swiper-slide-metadata__caption"><?php echo $args['media_caption'] ?></span>
<br>
<span class="swiper-slide-metadata__caption">
<?php echo $args['media_caption'] ?>
<br>
</span>
<?php endif; ?>
<?php if ( !empty($args['media_title']) ) :?>
<span class="swiper-slide-metadata__name"><?php echo $args['media_title'] ?></span>
<span class="swiper-slide-metadata__name">
<?php echo $args['media_title'] ?>
</span>
<?php endif; ?>
<?php if ( !empty($args['media_description']) ) :?>
<br>
<span class="swiper-slide-metadata__description"><?php echo $args['media_description'] ?></span>
<span class="swiper-slide-metadata__description">
<br>
<?php echo $args['media_description'] ?>
</span>
<?php endif; ?>
</div>

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

@ -48,6 +48,7 @@ class TainacanMediaGallery {
el: '.swiper-pagination'
},
centerInsufficientSlides: true,
watchOverflow: true
};
thumbsSwiperOptions = {...thumbsSwiperOptions, ...this.options.swiper_thumbs_options };
this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbsSwiperOptions);
@ -64,17 +65,24 @@ class TainacanMediaGallery {
},
pagination: {
el: '.swiper-pagination'
}
},
watchOverflow: true
};
if (this.thumbsSwiper) {
mainSwiperOptions.thumbs = {
swiper: this.thumbsSwiper,
autoScrollOffset: 1
autoScrollOffset: 3
}
}
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'
}
}
}
@ -104,19 +112,19 @@ 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.innerHTML ? fullContentElement.innerHTML : fullContentElement
html: fullContentElement.outterHTML ? fullContentElement.outterHTML : fullContentElement
}
continue;
} else {
@ -130,7 +138,7 @@ class TainacanMediaGallery {
};
} else {
item = {
html: fullContentElement.innerHTML ? fullContentElement.innerHTML : fullContentElement
html: fullContentElement.outterHTML ? fullContentElement.outterHTML : fullContentElement
}
}
}
@ -151,6 +159,7 @@ class TainacanMediaGallery {
item.el = liElement; // save link to element for getThumbBoundsFn
items.push(item);
}
console.log(items.length);
return items;
};

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

@ -18,7 +18,7 @@ $pswp__include-minimal-style: true !default;
--tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%;
--tainacan-media-thumbs-carousel-item-size: 140px;
--tainacan-media-thumbs-carousel-item-size: 136px;
width: 100%;
height: auto;
@ -67,6 +67,19 @@ $pswp__include-minimal-style: true !default;
.swiper-slide-metadata {
text-align: center;
&.hide-name .swiper-slide-metadata__name {
display: none;
visibility: hidden;
}
&.hide-description .swiper-slide-metadata__description {
display: none;
visibility: hidden;
}
&.hide-caption .swiper-slide-metadata__caption {
display: none;
visibility: hidden;
}
}
.swiper-slide-metadata__name {
@ -92,12 +105,19 @@ $pswp__include-minimal-style: true !default;
justify-content: center;
flex-direction: column;
.tainacan-embed-container {
width: 100%;
height: auto;
}
iframe {
max-height: var(--tainacan-media-main-carousel-height, 60vh);
width: 90%;
max-width: 90%;
width: 100%;
max-width: 100%;
border: none;
display: block;
background-image: url('../images/preloader.gif');
background-repeat: no-repeat;
background-position: center;
}
a:first-of-type,
@ -108,12 +128,18 @@ $pswp__include-minimal-style: true !default;
border-radius: 3px;
word-wrap: break-word;
}
audio,
video {
audio {
background: black;
min-height: 38px;
border-radius: 20px;
width: 100%;
height: auto;
max-height: var(--tainacan-media-main-carousel-height, 60vh);
}
video {
min-height: 56px;
width: 100%;
height: auto;
min-height: 54px;
padding: 12px;
max-height: var(--tainacan-media-main-carousel-height, 60vh);
}
img {
@ -136,7 +162,7 @@ $pswp__include-minimal-style: true !default;
vertical-align: top;
word-break: break-all;
font-size: 0.875em;
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 140px) + 17px);
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px);
cursor: zoom-in;
@media only screen and (max-width: 380px) {
@ -144,10 +170,10 @@ $pswp__include-minimal-style: true !default;
}
img {
width: var(--tainacan-media-thumbs-carousel-item-size, 140px);
height: var(--tainacan-media-thumbs-carousel-item-size, 140px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 140px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 140px);
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center;
border-bottom-width: 6px;
@ -179,7 +205,7 @@ $pswp__include-minimal-style: true !default;
}
a {
width: 100%;
max-width: var(--tainacan-media-thumbs-carousel-item-size, 140px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
text-align: center;
word-break: break-word;
}
@ -253,11 +279,17 @@ $pswp__include-minimal-style: true !default;
}
iframe {
min-height: 80vh;
width: 80%;
padding: 44px;
min-height: 80%;
height: 100%;
width: 100%;
max-width: 80%;
margin: auto;
border: none;
display: block;
background-image: url('../images/preloader.gif');
background-repeat: no-repeat;
background-position: center;
}
a:first-of-type,
@ -268,10 +300,13 @@ $pswp__include-minimal-style: true !default;
border-radius: var(--borderRadius, 3px);
word-wrap: break-word;
}
audio,
audio {
background: black;
min-height: 38px;
border-radius: 20px;
}
video {
min-height: 54px;
padding: 12px;
min-height: 56px;
}
}
.pswp__name {