From 7d5cd72add787faeaca96370c619d0d6bfbdd610 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 4 Mar 2021 08:01:42 -0300 Subject: [PATCH] Continues implementation of media component. --- compile-sass.sh | 26 ++-- src/assets/css/media-component.css | 86 +++++++++++++ src/assets/css/media-component.css.map | 7 + src/classes/theme-helper/template-tags.php | 21 +-- .../js => media-component}/media-component.js | 0 .../media-component/media-component.scss | 121 ++++++++++++++++++ webpack.common.js | 2 +- 7 files changed, 241 insertions(+), 22 deletions(-) create mode 100644 src/assets/css/media-component.css create mode 100644 src/assets/css/media-component.css.map rename src/views/{admin/js => media-component}/media-component.js (100%) create mode 100644 src/views/media-component/media-component.scss diff --git a/compile-sass.sh b/compile-sass.sh index cdfdc2787..fb4d44492 100644 --- a/compile-sass.sh +++ b/compile-sass.sh @@ -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 diff --git a/src/assets/css/media-component.css b/src/assets/css/media-component.css new file mode 100644 index 000000000..08f9136cf --- /dev/null +++ b/src/assets/css/media-component.css @@ -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 */ diff --git a/src/assets/css/media-component.css.map b/src/assets/css/media-component.css.map new file mode 100644 index 000000000..c0c00f46d --- /dev/null +++ b/src/assets/css/media-component.css.map @@ -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" +} diff --git a/src/classes/theme-helper/template-tags.php b/src/classes/theme-helper/template-tags.php index 1c9de92be..db70879e6 100644 --- a/src/classes/theme-helper/template-tags.php +++ b/src/classes/theme-helper/template-tags.php @@ -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 @@ -260,16 +261,18 @@ function tainacan_get_the_media_component($media_items = array(), $args = array( wp_enqueue_style( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css', array(), TAINACAN_VERSION); 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_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 ); ?> - +