Continues implementation of media component.

This commit is contained in:
mateuswetah 2021-03-04 08:01:42 -03:00
parent da99673585
commit 7d5cd72add
7 changed files with 241 additions and 22 deletions

View File

@ -13,31 +13,33 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-1 src/views/admin/scss/tainacan
sass -E 'UTF-8' --cache-location .tmp/sass-cache-2 src/views/roles/tainacan-roles.scss:src/assets/css/tainacan-roles.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-3 src/views/gutenberg-blocks/tainacan-collections/collections-list/collections-list.scss:src/assets/css/tainacan-gutenberg-block-collections-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-3 src/views/media-component/media-component.scss:src/assets/css/media-component.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-4 src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-4 src/views/gutenberg-blocks/tainacan-collections/collections-list/collections-list.scss:src/assets/css/tainacan-gutenberg-block-collections-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/views/gutenberg-blocks/tainacan-items/items-list/items-list.scss:src/assets/css/tainacan-gutenberg-block-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss:src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/views/gutenberg-blocks/tainacan-items/items-list/items-list.scss:src/assets/css/tainacan-gutenberg-block-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-7 src/views/gutenberg-blocks/tainacan-items/search-bar/search-bar.scss:src/assets/css/tainacan-gutenberg-block-search-bar.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-7 src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss:src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-8 src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-8 src/views/gutenberg-blocks/tainacan-items/search-bar/search-bar.scss:src/assets/css/tainacan-gutenberg-block-search-bar.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-9 src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-10 src/views/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-10 src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-11 src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss:src/assets/css/tainacan-gutenberg-block-facets-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-11 src/views/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-12 src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-12 src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss:src/assets/css/tainacan-gutenberg-block-facets-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-13 src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss:src/assets/css/tainacan-gutenberg-block-faceted-search.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-13 src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-14 src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-14 src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss:src/assets/css/tainacan-gutenberg-block-faceted-search.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-16 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
echo "Compilação do Sass Concluído!"
exit 0

View File

@ -0,0 +1,86 @@
.tainacan-media-component__swiper-main {
width: 100%; }
.tainacan-media-component__swiper-thumbs {
position: relative; }
.tainacan-media-component__swiper-thumbs .swiper-button-disabled {
display: none; }
.tainacan-media-component__swiper-thumbs .swiper-button-next,
.tainacan-media-component__swiper-thumbs .swiper-button-prev {
top: 65px;
padding: 20px; }
.tainacan-media-component__swiper-thumbs .swiper-button-prev, .tainacan-media-component__swiper-thumbs .swiper-container-rtl .swiper-button-next {
left: -20px; }
.tainacan-media-component__swiper-thumbs .swiper-button-next, .tainacan-media-component__swiper-thumbs .swiper-container-rtl .swiper-button-prev {
right: -20px; }
.tainacan-media-component__swiper-thumbs .swiper-slide-thumb-active {
font-weight: bold; }
.tainacan-media-component__swiper-thumbs .swiper-slide-thumb-active img {
border-bottom-color: var(--tainacan-secondary, #298596); }
.tainacan-media-component__swiper-thumbs ul.swiper-wrapper {
list-style: none;
padding: 0; }
.tainacan-media-component__swiper-thumbs li.swiper-slide {
text-align: center;
vertical-align: top;
word-break: break-all;
font-size: 0.875em;
max-width: calc(var(--tainacan-media-carousel-size, 140px) + 17px); }
@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-carousel-size, 140px);
height: var(--tainacan-media-carousel-size, 140px);
object-fit: cover;
border-bottom: 4px solid transparent;
transition: border-bottom-color 0.3s ease; }
.tainacan-media-component__swiper-thumbs li.swiper-slide img:focus {
outline: none; }
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-name {
display: block;
margin-top: 0.5rem; }
.tainacan-media-component__swiper-thumbs li.swiper-slide a {
width: 100%;
max-width: var(--tainacan-media-carousel-size, 140px);
text-align: center;
word-break: break-word; }
.tainacan-media-component__swiper-thumbs li.swiper-slide a,
.tainacan-media-component__swiper-thumbs li.swiper-slide a:focus,
.tainacan-media-component__swiper-thumbs li.swiper-slide a:hover {
outline: none;
text-decoration: none;
color: var(--tainacan-gray5, #454647); }
.tainacan-media-component__swiper-thumbs li.swiper-slide .attachment-without-image img {
box-sizing: border-box;
padding: 36px;
background-color: var(--tainacan-gray2, #dbdbdb);
object-fit: contain;
max-width: var(--tainacan-media-carousel-size, 140px);
max-height: var(--tainacan-media-carousel-size, 140px); }
.tainacan-photoswipe-layer .pswp__zoom-wrap .attachment-without-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__zoom-wrap .attachment-without-image > iframe {
min-height: 80vh;
width: 80%;
border: none; }
.tainacan-photoswipe-layer .pswp__zoom-wrap .attachment-without-image > a, .tainacan-photoswipe-layer .pswp__zoom-wrap .attachment-without-image > p {
z-index: 99;
padding: 1rem 4.33337vw;
background: white;
border-radius: var(--borderRadius, 3px);
word-wrap: break-word; }
.tainacan-photoswipe-layer .pswp__zoom-wrap .attachment-without-image > audio, .tainacan-photoswipe-layer .pswp__zoom-wrap .attachment-without-image > video {
min-height: 54px;
padding: 12px; }
.tainacan-photoswipe-layer .pswp__caption__center {
text-align: center;
font-size: 1rem; }
/*# sourceMappingURL=media-component.css.map */

View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAAA,sCAAuC;EACnC,KAAK,EAAE,IAAI;;AASf,wCAAyC;EACrC,QAAQ,EAAE,QAAQ;EAElB,gEAAwB;IACpB,OAAO,EAAE,IAAI;EAEjB;8DACoB;IAChB,GAAG,EAAE,IAAI;IACT,OAAO,EAAE,IAAI;EAEjB,gJAA+D;IAC3D,IAAI,EAAE,KAAK;EAEf,gJAA+D;IAC3D,KAAK,EAAE,KAAK;EAEhB,mEAA2B;IACvB,WAAW,EAAE,IAAI;IACjB,uEAAI;MACA,mBAAmB,EAAE,kCAAkC;EAI/D,0DAAkB;IACd,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,CAAC;EAGd,wDAAgB;IACZ,UAAU,EAAE,MAAM;IAClB,cAAc,EAAE,GAAG;IACnB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,uDAAuD;IAElE,yCAA0C;MAP9C,wDAAgB;QAQR,MAAM,EAAE,MAAM;IAGlB,4DAAI;MACA,KAAK,EAAE,0CAA0C;MACjD,MAAM,EAAE,0CAA0C;MAClD,UAAU,EAAE,KAAK;MACjB,aAAa,EAAE,qBAAqB;MACpC,UAAU,EAAE,6BAA6B;MAEzC,kEAAQ;QACJ,OAAO,EAAE,IAAI;IAGrB,2EAAmB;MACf,OAAO,EAAE,KAAK;MACd,UAAU,EAAE,MAAM;IAEtB,0DAAE;MACE,KAAK,EAAE,IAAI;MACX,SAAS,EAAE,0CAA0C;MACrD,UAAU,EAAE,MAAM;MAClB,UAAU,EAAE,UAAU;IAE1B;;oEAEQ;MACJ,OAAO,EAAE,IAAI;MACb,eAAe,EAAE,IAAI;MACrB,KAAK,EAAE,8BAA8B;IAEzC,sFAA8B;MAC1B,UAAU,EAAE,UAAU;MACtB,OAAO,EAAE,IAAI;MACb,gBAAgB,EAAE,8BAA8B;MAChD,UAAU,EAAE,OAAO;MACnB,SAAS,EAAE,0CAAyC;MACpD,UAAU,EAAE,0CAAyC;;AAMjE,qEAAsE;EAClE,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EAEvB,8EAAW;IACP,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;EAGhB,oJACM;IACF,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,cAAc;IACvB,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,wBAAwB;IACvC,SAAS,EAAE,UAAU;EAEzB,4JACU;IACN,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;;AAGrB,iDAAkD;EAC9C,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI",
"sources": ["../../views/media-component/media-component.scss"],
"names": [],
"file": "media-component.css"
}

View File

@ -226,7 +226,8 @@ function tainacan_the_media_component($media_items, $args) {
/**
* Tainacan Gallery component, used to render document, attachments and other files
*
* @param array $media_items Array of media items to be rendered inside the carousel. Default to empty array
* @param array $media_items_thumbs Array of media items to be rendered inside smaller the carousel. Default to empty array
* @param array $media_items_main Array of media items to be rendered inside main, bigger the carousel. Default to empty array
* @param array|string $args {
* Optional. Array of arguments.
*
@ -248,7 +249,7 @@ function tainacan_the_media_component($media_items, $args) {
* }
* @return string
*/
function tainacan_get_the_media_component($media_items = array(), $args = array()) {
function tainacan_get_the_media_component($media_items_thumbs = array(), $media_items_main = array(), $args = array()) {
global $TAINACAN_BASE_URL;
// Modal layer for rendering photoswipe
@ -261,15 +262,17 @@ function tainacan_get_the_media_component($media_items = array(), $args = array(
wp_enqueue_style( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css', array(), TAINACAN_VERSION);
wp_enqueue_script( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js', array(), TAINACAN_VERSION, true );
wp_enqueue_script( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js', array(), TAINACAN_VERSION, true );
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', ['swiper', 'photoswipe', 'photoswipe-skin'], TAINACAN_VERSION, true );
?>
<?php if ($args['render_main_gallery']) : ?>
<?php if ( isset($args['render_main_gallery']) && $args['render_main_gallery'] == true ) : ?>
<?php echo $args['before_main_div'] ?>
<div class="tainacan-media-component__swiper-main swiper-container <?php echo $args['class_main_div'] ?>">
<?php echo $args['before_main_ul'] ?>
<ul class="swiper-wrapper <?php echo $args['class_main_ul'] ?>">
<?php foreach($media_items as $media_item) { ?>
<?php foreach($media_items_main as $media_item) { ?>
<li class="swiper-slide <?php echo $args['class_main_li'] ?>">
<?php tainacan_get_single_attachment_as_html($media_item->ID) ?>
</li>
@ -284,9 +287,9 @@ function tainacan_get_the_media_component($media_items = array(), $args = array(
<div class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
<?php echo $args['before_thumbs_ul'] ?>
<ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>">
<?php foreach($media_items as $media_item) { ?>
<?php foreach($media_items_thumbs as $media_item) { ?>
<li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>">
<?php tainacan_get_single_attachment_as_html($media_item->ID) ?>
<?php echo wp_get_attachment_image($media_item->ID) ?>
</li>
<?php }; ?>
</ul>
@ -306,7 +309,7 @@ function tainacan_get_the_media_modal_layer() {
?>
<!-- add PhotoSwipe (.pswp) element to DOM -
Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<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(). -->
@ -480,7 +483,7 @@ function tainacan_the_faceted_search($args = array()) {
$theme_helper = \Tainacan\Theme_Helper::get_instance();
// echo $theme_helper->get_tainacan_items_list($args);
$attachments = tainacan_get_the_attachments();
tainacan_the_media_component($attachments, ['render_main_gallery' => true, 'class_main_div' => 'teste']);
tainacan_the_media_component($attachments, $attachments, ['render_main_gallery' => true, 'class_main_div' => 'teste']);
}
/**

View File

@ -0,0 +1,121 @@
.tainacan-media-component__swiper-main {
width: 100%;
}
// &:not(.tainacan-item-section__gallery-items) {
// .tainacan-item-section__attachments-file,
// .tainacan-item-section__attachments-file>a {
// cursor: zoom-in;
// }
// }
.tainacan-media-component__swiper-thumbs {
position: relative;
.swiper-button-disabled {
display: none;
}
.swiper-button-next,
.swiper-button-prev {
top: 65px;
padding: 20px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
left: -20px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
right: -20px;
}
.swiper-slide-thumb-active {
font-weight: bold;
img {
border-bottom-color: var(--tainacan-secondary, #298596);
}
}
ul.swiper-wrapper {
list-style: none;
padding: 0;
}
li.swiper-slide {
text-align: center;
vertical-align: top;
word-break: break-all;
font-size: 0.875em;
max-width: calc(var(--tainacan-media-carousel-size, 140px) + 17px);
@media only screen and (max-width: 380px) {
margin: 10px 0;
}
img {
width: var(--tainacan-media-carousel-size, 140px);
height: var(--tainacan-media-carousel-size, 140px);
object-fit: cover;
border-bottom: 4px solid transparent;
transition: border-bottom-color 0.3s ease;
&:focus {
outline: none;
}
}
.swiper-slide-name {
display: block;
margin-top: 0.5rem;
}
a {
width: 100%;
max-width: var(--tainacan-media-carousel-size, 140px);
text-align: center;
word-break: break-word;
}
a,
a:focus,
a:hover {
outline: none;
text-decoration: none;
color: var(--tainacan-gray5, #454647);
}
.attachment-without-image img {
box-sizing: border-box;
padding: 36px;
background-color: var(--tainacan-gray2, #dbdbdb);
object-fit: contain;
max-width: var(--tainacan-media-carousel-size,140px);
max-height: var(--tainacan-media-carousel-size,140px);
}
}
}
// Photoswip zoom ---------------------------------
.tainacan-photoswipe-layer .pswp__zoom-wrap .attachment-without-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
& > iframe {
min-height: 80vh;
width: 80%;
border: none;
}
& > a,
& > p {
z-index: 99;
padding: 1rem 4.33337vw;
background: white;
border-radius: var(--borderRadius, 3px);
word-wrap: break-word;
}
& > audio,
& > video {
min-height: 54px;
padding: 12px;
}
}
.tainacan-photoswipe-layer .pswp__caption__center {
text-align: center;
font-size: 1rem;
}

View File

@ -3,7 +3,7 @@ let path = require('path');
module.exports = {
entry: {
admin: './src/views/admin/js/main.js',
media_component: './src/views/admin/js/media-component.js',
media_component: './src/views/media-component/media-component.js',
theme_search: './src/views/theme-search/js/theme-main.js',
item_submission: './src/views/item-submission/js/item-submission-main.js',
roles: './src/views/roles/js/roles-main.js',