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

New strategy for media component on item page (requires Tainacan 0.18)

This commit is contained in:
mateuswetah 2021-04-02 10:58:40 -03:00
parent 722b76dc67
commit c0870b996b
18 changed files with 280 additions and 904 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
inc/enqueues.php
View File

@ -31,16 +31,6 @@ function blocksy_tainacan_enqueue_scripts() {
$collections_post_types = \Tainacan\Repositories\Repository::get_collections_db_identifiers();
$post_type = get_post_type();
if ( in_array($post_type, $collections_post_types) ) {
wp_enqueue_style( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), BLOCKSY_TAINACAN_VERSION );
wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );
wp_enqueue_style( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css', array(), BLOCKSY_TAINACAN_VERSION );
wp_enqueue_style( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css', array(), BLOCKSY_TAINACAN_VERSION );
wp_enqueue_script( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );
wp_enqueue_script( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );
wp_enqueue_script( 'blocksy-tainacan-scripts__swiper', BLOCKSY_TAINACAN_PLUGIN_URL_PATH . '/js/attachments-carousel.js', ['swiper', 'photoswipe', 'photoswipe-skin'], BLOCKSY_TAINACAN_VERSION, true );
}
wp_enqueue_script( 'blocksy-tainacan-scripts', BLOCKSY_TAINACAN_PLUGIN_URL_PATH . '/js/scripts.js', array(), BLOCKSY_TAINACAN_VERSION, true );
}
}

4
inc/global.php
View File

@ -46,7 +46,7 @@ blc_call_fnc(['fnc' => 'blocksy_output_responsive'], [
'css' => $css,
'tablet_css' => $tablet_css,
'mobile_css' => $mobile_css,
'selector' => blocksy_prefix_selector('.tainacan-item-section__attachments-file', $prefix),
'selector' => blocksy_prefix_selector('.tainacan-media-component', $prefix),
'variableName' => 'attachments-size',
'value' => get_theme_mod( $prefix . '_attachments_size', [
'mobile' => '120px',
@ -76,7 +76,7 @@ blc_call_fnc(['fnc' => 'blocksy_output_font_css'], [
'css' => $css,
'tablet_css' => $tablet_css,
'mobile_css' => $mobile_css,
'selector' => blocksy_prefix_selector('.swiper-slide-name', $prefix),
'selector' => blocksy_prefix_selector('.swiper-slide-metadata', $prefix),
'font_value' => get_theme_mod($prefix . '_attachment_label_font',
blocksy_typography_default_values([
'size' => '0.875rem',

3
inc/options/single-elements/document-attachments-structure.php
View File

@ -26,7 +26,6 @@ $options = [
],
'sync' => blocksy_sync_single_post_container([
'prefix' => $prefix
]),
'divider' => 'bottom',
])
],
];

12
inc/options/single-elements/document-attachments.php
View File

@ -33,6 +33,18 @@ $options = [
blocksy_get_options(BLOCKSY_TAINACAN_PLUGIN_DIR_PATH . '/inc/options/single-elements/hide-files-name.php', [
'prefix' => $prefix,
'enabled' => 'no'
], false),
blocksy_get_options(BLOCKSY_TAINACAN_PLUGIN_DIR_PATH . '/inc/options/single-elements/hide-files-caption-main.php', [
'prefix' => $prefix,
'enabled' => 'yes'
], false),
blocksy_get_options(BLOCKSY_TAINACAN_PLUGIN_DIR_PATH . '/inc/options/single-elements/hide-files-name-main.php', [
'prefix' => $prefix,
'enabled' => 'yes'
], false),
blocksy_get_options(BLOCKSY_TAINACAN_PLUGIN_DIR_PATH . '/inc/options/single-elements/hide-files-description-main.php', [
'prefix' => $prefix,
'enabled' => 'yes'
], false)
]
],

21
inc/options/single-elements/hide-files-caption-main.php Normal file
View File

@ -0,0 +1,21 @@
<?php
if (! isset($prefix)) {
$prefix = '';
}
if (! isset($enabled)) {
$enabled = 'yes';
}
$options = [
$prefix . 'hide_files_caption_main' => [
'label' => __( 'Hide files caption', 'blocksy-tainacan' ),
'type' => 'ct-switch',
'value' => $enabled,
'setting' => [ 'transport' => 'postMessage' ],
'desc' => __( 'Toggle to hide the attachments and document caption on the main view.', 'blocksy-tainacan' ),
'sync' => blocksy_sync_single_post_container([
'prefix' => $prefix,
]),
]
];

21
inc/options/single-elements/hide-files-description-main.php Normal file
View File

@ -0,0 +1,21 @@
<?php
if (! isset($prefix)) {
$prefix = '';
}
if (! isset($enabled)) {
$enabled = 'yes';
}
$options = [
$prefix . 'hide_files_description_main' => [
'label' => __( 'Hide files description', 'blocksy-tainacan' ),
'type' => 'ct-switch',
'value' => $enabled,
'setting' => [ 'transport' => 'postMessage' ],
'desc' => __( 'Toggle to hide the attachments and document description on the main view.', 'blocksy-tainacan' ),
'sync' => blocksy_sync_single_post_container([
'prefix' => $prefix,
]),
]
];

21
inc/options/single-elements/hide-files-name-main.php Normal file
View File

@ -0,0 +1,21 @@
<?php
if (! isset($prefix)) {
$prefix = '';
}
if (! isset($enabled)) {
$enabled = 'yes';
}
$options = [
$prefix . 'hide_files_name_main' => [
'label' => __( 'Hide files name', 'blocksy-tainacan' ),
'type' => 'ct-switch',
'value' => $enabled,
'setting' => [ 'transport' => 'postMessage' ],
'desc' => __( 'Toggle to hide the attachments and document name on the main view.', 'blocksy-tainacan' ),
'sync' => blocksy_sync_single_post_container([
'prefix' => $prefix,
]),
]
];

2
inc/options/single-elements/hide-files-name.php
View File

@ -9,7 +9,7 @@ if (! isset($enabled)) {
$options = [
$prefix . 'hide_files_name' => [
'label' => __( 'Hide files name', 'blocksy-tainacan' ),
'label' => __( 'Hide files name on carousel', 'blocksy-tainacan' ),
'type' => 'ct-switch',
'value' => $enabled,
'setting' => [ 'transport' => 'postMessage' ],

248
js/attachments-carousel.js
View File

@ -1,248 +0,0 @@
// 1 of 4 : SWIPER JS #######################################
const attachmentsThumbsSwiper = new Swiper('.swiper-container-thumbs', {
spaceBetween: 16,
slidesPerView: 'auto',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: false,
centerInsufficientSlides: true
});
const attachmentsMainSwiper = new Swiper('.swiper-container-main', {
slidesPerView: 1,
slidesPerGroup: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: false,
thumbs: {
swiper: attachmentsThumbsSwiper,
autoScrollOffset: 1
}
});
// 2 of 4 : PHOTOSWIPE #######################################
// https://photoswipe.com/documentation/getting-started.html //
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl,
linkEl,
imgWidth,
imgHeight,
item;
for (var i = 0; i < numNodes; i++) {
figureEl = thumbElements[i]; // <figure> element
// include only element nodes
if (figureEl.nodeType !== 1) {
continue;
}
linkEl = figureEl.children[0]; // <a> element
if (linkEl.classList.contains('attachment-without-image')) {
item = {
html: '<div class="attachment-without-image"><iframe id="tainacan-attachment-iframe" src="' + linkEl.href + '"></iframe></div>'
}
} else {
imgWidth = linkEl.children[0] && linkEl.children[0].attributes.getNamedItem('width') ? linkEl.children[0].attributes.getNamedItem('width').value : 140;
imgHeight = linkEl.children[0] && linkEl.children[0].attributes.getNamedItem('height') ? linkEl.children[0].attributes.getNamedItem('height').value : 140;
// create slide object
item = {
src: linkEl.getAttribute("href"),
w: parseInt(imgWidth, 10),
h: parseInt(imgHeight, 10)
};
if (linkEl.children[1] && linkEl.children[1].classList.contains('swiper-slide-name')) {
item.title = linkEl.children[1].innerText;
}
}
item.el = figureEl; // save link to element for getThumbBoundsFn
items.push(item);
}
return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
return el && (fn(el) ? el : closest(el.parentNode, fn));
};
// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
var eTarget = e.target || e.srcElement;
// find root element of slide
var 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
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if (childNodes[i].nodeType !== 1) {
continue;
}
if (childNodes[i] === clickedListItem) {
index = nodeIndex;
break;
}
nodeIndex++;
}
if (index >= 0) {
// open PhotoSwipe if valid index found
openPhotoSwipe(index, clickedGallery);
}
return false;
};
// parse picture index and gallery index from URL (#&pid=1&gid=2)
var photoswipeParseHash = function() {
var hash = window.location.hash.substring(1),
params = {};
if (hash.length < 5) {
return params;
}
var vars = hash.split("&");
for (var i = 0; i < vars.length; i++) {
if (!vars[i]) {
continue;
}
var pair = vars[i].split("=");
if (pair.length < 2) {
continue;
}
params[pair[0]] = pair[1];
}
if (params.gid) {
params.gid = parseInt(params.gid, 10);
}
return params;
};
var openPhotoSwipe = function(
index,
galleryElement,
disableAnimation,
fromURL
) {
var pswpElement = document.querySelectorAll(".pswp")[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
// #################### 3/4 define photoswipe options (if needed) ####################
// https://photoswipe.com/documentation/options.html //
options = {
showHideOpacity: false,
loop: false,
// Buttons/elements
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: false,
counterEl: false,
arrowEl: true,
preloaderEl: true,
bgOpacity: 0.85,
// define gallery index (for URL)
galleryUID: galleryElement.getAttribute("data-pswp-uid"),
getThumbBoundsFn: function(index) {
// See Options -> getThumbBoundsFn section of documentation for more info
var thumbnail = items[index].el.getElementsByTagName("img")[0], // find thumbnail
pageYScroll =
window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
}
};
// 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 (var 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 PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = document.querySelectorAll(gallerySelector);
for (var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute("data-pswp-uid", i + 1);
galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if (hashData.pid && hashData.gid) {
openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
}
};
// execute above function
initPhotoSwipeFromDOM(".tainacan-item-section__gallery .swiper-wrapper");
initPhotoSwipeFromDOM(".tainacan-item-section__attachments .swiper-wrapper");

26
js/scripts.js
View File

@ -1 +1,25 @@
/* Nothing here so far! */
// Copy of Blocksy theme's onDocumentLoaded from their helpers package 'blocksy-frontend'
onDocumentLoadedDo = cb => {
if (/comp|inter|loaded/.test(document.readyState)) {
cb();
} else {
document.addEventListener('DOMContentLoaded', cb, false);
}
}
onDocumentLoadedDo(() => {
console.log("Resetar as coisas aqui...");
});
window.ctEvents.default.on('blocksy:frontend:init', () => {
console.log("Resetar mais coisas aqui...", tainacan_plugin);
if (tainacan_plugin?.classes?.TainacanMediaGallery) {
(tainacan_plugin?.tainacan_media_components || []).forEach((component) => {
new tainacan_plugin.classes.TainacanMediaGallery(
component.has_media_thumbs ? '#' + component.media_thumbs_id : null,
component.has_media_main ? '#' + component.media_main_id : null,
component
);
});
}
});

230
sass/tainacan-item-single.scss
View File

@ -94,155 +94,29 @@
text-align: var(--section-alignment, left);
}
// Document, Attachment and Gallery sections -----------------
.tainacan-item-section__document {
display: flex;
justify-content: center;
align-items: center;
height: auto;
position: relative;
&:hover {
.tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
}
> iframe, img.attachment-large {
display: block;
height: auto;
margin: 0 auto;
border: none;
}
> audio {
width: 100%;
}
> iframe {
@media only screen and (min-width: 768px){
min-height: 600px;
}
@media only screen and (max-width: 576px){
min-height: 429px;
}
}
.tainacan-embed-container {
width: 100%;
iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
.tainacan-item-section__gallery-items {
font-weight: normal;
transition: font-weight 0.3s ease;
img {
border-radius: var(--borderRadius, 3px);
border-bottom: 4px solid transparent;
margin-bottom: 4px;
transition: border 0.3s ease;
}
}
.tainacan-item-section__attachments-file {
&:hover {
.tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
}
}
.tainacan-item-section__gallery {
margin-bottom: 24px;
ul {
list-style: none;
padding: 0;
}
li {
cursor: zoom-in;
}
.tainacan-item-section__document {
margin: 0;
img {
max-height: 60vh;
width: auto;
}
video {
width: auto;
}
iframe {
min-height: 200px;
height: 60vh;
}
}
}
.tainacan-item-section__gallery-items,
.tainacan-item-section__attachments {
position: relative;
padding: 0px;
.swiper-button-disabled {
display: none;
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
top: 65px;
padding: 20px;
border-radius: 30px;
background-color: var(--background-color, #f8f9fb);
border: 1px solid var(--paletteColor1, #3eaf7c);
}
.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: 4px solid var(--paletteColor1, #3eaf7c);
}
}
ul {
list-style: none;
padding: 0;
}
&:not(.tainacan-item-section__gallery-items) {
.tainacan-item-section__attachments-file,
.tainacan-item-section__attachments-file>a {
cursor: zoom-in;
}
}
.tainacan-item-section__attachments-file {
text-align: center;
vertical-align: top;
word-break: break-all;
font-size: 0.875em;
max-width: calc(var(--attachments-size, 157px) + 17px);
@media only screen and (max-width: 380px) {
margin: 10px 0;
}
// Tainacan Media Component (attachments gallery)
.tainacan-media-component {
--swiper-theme-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-size: 2.5rem;
--tainacan-media-background: var(--background-color, #ffffff);
--tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%;
--tainacan-media-thumbs-carousel-item-size: var(--attachments-size,140px);
.tainacan-media-component__swiper-thumbs {
font-weight: normal;
transition: font-weight 0.3s ease;
img {
border-radius: var(--borderRadius, 3px);
width: var(--attachments-size, 140px);
height: var(--attachments-size, 140px);
object-fit: cover;
transition: border-bottom 0.3s ease;
&:focus {
outline: none;
}
border-bottom: 4px solid transparent;
margin-bottom: 4px;
transition: border 0.3s ease;
}
.swiper-slide-name {
.swiper-slide-metadata {
display: block;
margin-top: 0.5rem;
font-family: var(--fontFamily);
@ -255,65 +129,8 @@
-webkit-text-decoration: var(--textDecoration);
text-decoration: var(--textDecoration);
}
a {
width: 100%;
max-width: var(--attachments-size, 140px);
text-align: center;
word-break: break-all;
}
a,
a:focus,
a:hover {
outline: none;
text-decoration: none;
color: black;
}
.attachment-without-image img {
box-sizing: border-box;
padding: 36px;
background-color: #dbdbdb;
object-fit: contain;
max-width: var(--attachments-size,140px);
max-height: var(--attachments-size,140px);
}
}
}
--swiper-theme-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-size: 1.1rem;
// Photoswip zoom ---------------------------------
.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;
}
}
.pswp__caption__center {
text-align: center;
font-size: 1rem;
}
// Metadata list -------------------------------------
.tainacan-item-section__metadata {
@ -471,6 +288,7 @@
display: block;
position: relative;
z-index: 99;
background: transparent !important;
}
&::after {
@ -493,4 +311,12 @@
align-items: center;
}
}
.tainacan-item-section__attachments-file {
&:hover {
.tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
}
}
}

258
style.css
View File

@ -356,9 +356,6 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
align-items: start;
grid-column-gap: 48px;
column-gap: 48px;
--swiper-theme-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-size: 1.1rem;
}
.tainacan-item-single .tainacan-item-section {
@ -448,192 +445,30 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
text-align: var(--section-alignment, left);
}
.tainacan-item-single .tainacan-item-section__document {
display: flex;
justify-content: center;
align-items: center;
height: auto;
position: relative;
.tainacan-item-single .tainacan-media-component {
--swiper-theme-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-color: var(--paletteColor1, #3eaf7c);
--swiper-navigation-size: 2.5rem;
--tainacan-media-background: var(--background-color, #ffffff);
--tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%;
--tainacan-media-thumbs-carousel-item-size: var(--attachments-size,140px);
}
.tainacan-item-single .tainacan-item-section__document:hover .tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
.tainacan-item-single .tainacan-item-section__document > iframe, .tainacan-item-single .tainacan-item-section__document img.attachment-large {
display: block;
height: auto;
margin: 0 auto;
border: none;
}
.tainacan-item-single .tainacan-item-section__document > audio {
width: 100%;
}
@media only screen and (min-width: 768px) {
.tainacan-item-single .tainacan-item-section__document > iframe {
min-height: 600px;
}
}
@media only screen and (max-width: 576px) {
.tainacan-item-single .tainacan-item-section__document > iframe {
min-height: 429px;
}
}
.tainacan-item-single .tainacan-item-section__document .tainacan-embed-container {
width: 100%;
}
.tainacan-item-single .tainacan-item-section__document .tainacan-embed-container iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tainacan-item-single .tainacan-item-section__gallery-items {
.tainacan-item-single .tainacan-media-component .tainacan-media-component__swiper-thumbs {
font-weight: normal;
transition: font-weight 0.3s ease;
}
.tainacan-item-single .tainacan-item-section__gallery-items img {
.tainacan-item-single .tainacan-media-component .tainacan-media-component__swiper-thumbs img {
border-radius: var(--borderRadius, 3px);
border-bottom: 4px solid transparent;
margin-bottom: 4px;
transition: border 0.3s ease;
}
.tainacan-item-single .tainacan-item-section__attachments-file:hover .tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
.tainacan-item-single .tainacan-item-section__gallery {
margin-bottom: 24px;
}
.tainacan-item-single .tainacan-item-section__gallery ul {
list-style: none;
padding: 0;
}
.tainacan-item-single .tainacan-item-section__gallery li {
cursor: zoom-in;
}
.tainacan-item-single .tainacan-item-section__gallery .tainacan-item-section__document {
margin: 0;
}
.tainacan-item-single .tainacan-item-section__gallery .tainacan-item-section__document img {
max-height: 60vh;
width: auto;
}
.tainacan-item-single .tainacan-item-section__gallery .tainacan-item-section__document video {
width: auto;
}
.tainacan-item-single .tainacan-item-section__gallery .tainacan-item-section__document iframe {
min-height: 200px;
height: 60vh;
}
.tainacan-item-single .tainacan-item-section__gallery-items,
.tainacan-item-single .tainacan-item-section__attachments {
position: relative;
padding: 0px;
}
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-button-disabled,
.tainacan-item-single .tainacan-item-section__attachments .swiper-button-disabled {
display: none;
}
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-button-next,
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-button-prev,
.tainacan-item-single .tainacan-item-section__attachments .swiper-button-next,
.tainacan-item-single .tainacan-item-section__attachments .swiper-button-prev {
background-image: none;
top: 65px;
padding: 20px;
border-radius: 30px;
background-color: var(--background-color, #f8f9fb);
border: 1px solid var(--paletteColor1, #3eaf7c);
}
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-button-prev, .tainacan-item-single .tainacan-item-section__gallery-items .swiper-container-rtl .swiper-button-next,
.tainacan-item-single .tainacan-item-section__attachments .swiper-button-prev,
.tainacan-item-single .tainacan-item-section__attachments .swiper-container-rtl .swiper-button-next {
left: -20px;
}
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-button-next, .tainacan-item-single .tainacan-item-section__gallery-items .swiper-container-rtl .swiper-button-prev,
.tainacan-item-single .tainacan-item-section__attachments .swiper-button-next,
.tainacan-item-single .tainacan-item-section__attachments .swiper-container-rtl .swiper-button-prev {
right: -20px;
}
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-slide-thumb-active,
.tainacan-item-single .tainacan-item-section__attachments .swiper-slide-thumb-active {
font-weight: bold;
}
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-slide-thumb-active img,
.tainacan-item-single .tainacan-item-section__attachments .swiper-slide-thumb-active img {
border-bottom: 4px solid var(--paletteColor1, #3eaf7c);
}
.tainacan-item-single .tainacan-item-section__gallery-items ul,
.tainacan-item-single .tainacan-item-section__attachments ul {
list-style: none;
padding: 0;
}
.tainacan-item-single .tainacan-item-section__gallery-items:not(.tainacan-item-section__gallery-items) .tainacan-item-section__attachments-file,
.tainacan-item-single .tainacan-item-section__gallery-items:not(.tainacan-item-section__gallery-items) .tainacan-item-section__attachments-file > a,
.tainacan-item-single .tainacan-item-section__attachments:not(.tainacan-item-section__gallery-items) .tainacan-item-section__attachments-file,
.tainacan-item-single .tainacan-item-section__attachments:not(.tainacan-item-section__gallery-items) .tainacan-item-section__attachments-file > a {
cursor: zoom-in;
}
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file {
text-align: center;
vertical-align: top;
word-break: break-all;
font-size: 0.875em;
max-width: calc(var(--attachments-size, 157px) + 17px);
}
@media only screen and (max-width: 380px) {
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file {
margin: 10px 0;
}
}
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file img,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file img {
border-radius: var(--borderRadius, 3px);
width: var(--attachments-size, 140px);
height: var(--attachments-size, 140px);
object-fit: cover;
transition: border-bottom 0.3s ease;
}
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file img:focus,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file img:focus {
outline: none;
}
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file .swiper-slide-name,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file .swiper-slide-name {
.tainacan-item-single .tainacan-media-component .tainacan-media-component__swiper-thumbs .swiper-slide-metadata {
display: block;
margin-top: 0.5rem;
font-family: var(--fontFamily);
@ -647,69 +482,6 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
text-decoration: var(--textDecoration);
}
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file a,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file a {
width: 100%;
max-width: var(--attachments-size, 140px);
text-align: center;
word-break: break-all;
}
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file a,
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file a:focus,
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file a:hover,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file a,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file a:focus,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file a:hover {
outline: none;
text-decoration: none;
color: black;
}
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file .attachment-without-image img,
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file .attachment-without-image img {
box-sizing: border-box;
padding: 36px;
background-color: #dbdbdb;
object-fit: contain;
max-width: var(--attachments-size, 140px);
max-height: var(--attachments-size, 140px);
}
.tainacan-item-single .pswp__zoom-wrap .attachment-without-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tainacan-item-single .pswp__zoom-wrap .attachment-without-image > iframe {
min-height: 80vh;
width: 80%;
border: none;
}
.tainacan-item-single .pswp__zoom-wrap .attachment-without-image > a,
.tainacan-item-single .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-item-single .pswp__zoom-wrap .attachment-without-image > audio,
.tainacan-item-single .pswp__zoom-wrap .attachment-without-image > video {
min-height: 54px;
padding: 12px;
}
.tainacan-item-single .pswp__caption__center {
text-align: center;
font-size: 1rem;
}
.tainacan-item-single .tainacan-item-section__metadata {
height: 100%;
-moz-column-width: var(--metadata-column-width, 400px);
@ -881,6 +653,7 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
display: block;
position: relative;
z-index: 99;
background: transparent !important;
}
.tainacan-item-single .tainacan-item-file-download::after {
@ -903,4 +676,9 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
align-items: center;
}
.tainacan-item-single .tainacan-item-section__attachments-file:hover .tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
/*# sourceMappingURL=style.css.map */

4
style.css.map
View File

File diff suppressed because one or more lines are too long

2
style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
style.min.css.map
View File

File diff suppressed because one or more lines are too long

1
tainacan/archive-items.php
View File

@ -39,6 +39,7 @@ $page_container_style .= '--tainacan-input-color:' . $text_color_palette['color5
$page_container_style .= 'background-color: var(--tainacan-background-color, #f8f9fb);';
global $post;
?>
<?php get_header(); ?>

313
template-parts/tainacan-item-single-attachments.php
View File

@ -1,203 +1,132 @@
<?php
if (function_exists('tainacan_get_the_attachments')) {
$attachments = tainacan_get_the_attachments();
} else {
// compatibility with pre 0.11 tainacan plugin
$attachments = array_values(
get_children(
array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'numberposts' => -1,
)
)
);
}
$attachments = tainacan_get_the_attachments();
$prefix = blocksy_manager()->screen->get_prefix();
// Galley mode is a shortname for when documents and attachments are displayed merged in the same list
$is_gallery_mode = get_theme_mod($prefix . '_document_attachments_structure', 'gallery-type-1') == 'gallery-type-2';
if (!function_exists('render_attachment_thumbnail_slide_item')) {
function render_attachment_thumbnail_slide_item($attachment) {
if ( function_exists('tainacan_get_attachment_html_url') ) {
$href = tainacan_get_attachment_html_url($attachment->ID);
} else {
$href = wp_get_attachment_url($attachment->ID, 'full');
}
if (!wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments')) :
?>
<li class="tainacan-item-section__attachments-file swiper-slide">
<a
class="attachment-without-image"
href="<?php echo $href; ?>">
<?php
echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
?>
<span class="swiper-slide-name <?php if (get_theme_mod( $prefix . '_hide_files_name', 'no') == 'yes') echo 'sr-only' ?>"><?php echo get_the_title( $attachment->ID ); ?></span>
</a>
</li>
<?php
else:
$img_scr = wp_get_attachment_image_src( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
?>
<li class="tainacan-item-section__attachments-file swiper-slide">
<a
href="<?php echo $img_scr[0] ?>">
<?php
echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
?>
<span class="swiper-slide-name <?php if (get_theme_mod( $prefix . '_hide_files_name', 'no') == 'yes') echo 'sr-only' ?>"><?php echo get_the_title( $attachment->ID ); ?></span>
</a>
</li>
<?php endif;
}
}
?>
$is_gallery_mode = get_theme_mod( $prefix . '_document_attachments_structure', 'gallery-type-1' ) == 'gallery-type-2';
$hide_file_name = get_theme_mod( $prefix . '_hide_files_name', 'no') == 'yes';
$hide_file_name_main = get_theme_mod( $prefix . '_hide_files_name_main', 'yes') == 'yes';
$hide_file_caption_main = get_theme_mod( $prefix . '_hide_files_caption_main', 'yes') == 'yes';
$hide_file_description_main = get_theme_mod( $prefix . '_hide_files_description_main', 'yes') == 'yes';
$hide_download_button = get_theme_mod( $prefix . '_hide_download_button', 'no' ) == 'yes';
<?php if ( !empty( $attachments ) || ( $is_gallery_mode && tainacan_has_document() ) ) : ?>
global $post;
<section class="tainacan-item-section tainacan-item-section--<?php echo ((!$is_gallery_mode ? 'attachments' : 'gallery')) ?>">
<?php if ( (get_theme_mod($prefix . '_display_section_labels', 'yes') == 'yes') && (!$is_gallery_mode) && get_theme_mod($prefix . '_section_attachments_label', __( 'Attachments', 'blocksy-tainacan' )) != '' ) : ?>
<h2 class="tainacan-single-item-section" id="tainacan-item-attachments-label">
<?php echo esc_html( get_theme_mod($prefix . '_section_attachments_label', __( 'Attachments', 'blocksy-tainacan' ) ) ); ?>
</h2>
<?php endif; ?>
<?php if ( (get_theme_mod($prefix . '_display_section_labels', 'yes') == 'yes') && ($is_gallery_mode) && get_theme_mod($prefix . '_section_documents_label', __( 'Documents', 'blocksy-tainacan' )) != '') : ?>
<h2 class="tainacan-single-item-section" id="tainacan-item-documents-label">
<?php echo esc_html( get_theme_mod($prefix . '_section_documents_label', __( 'Documents', 'blocksy-tainacan' )) ); ?>
</h2>
<?php endif; ?>
<?php if ( $is_gallery_mode ): ?>
<div class="tainacan-item-section__gallery">
<div class="swiper-container-main swiper-container">
<ul class="swiper-wrapper">
<?php if ( tainacan_has_document() ) : ?>
<li class="swiper-slide tainacan-item-section__document">
<?php
tainacan_the_document();
if ( get_theme_mod( $prefix . '_hide_download_button', 'no' ) == 'no' && function_exists('tainacan_the_item_document_download_link') && tainacan_the_item_document_download_link() != '' ) {
echo '<span class="tainacan-item-file-download">' . tainacan_the_item_document_download_link() . '</span>';
}
?>
</li>
<?php endif; ?>
<?php foreach ( $attachments as $attachment ) { ?>
<li class="swiper-slide tainacan-item-section__document">
<?php
if ( function_exists('tainacan_get_single_attachment_as_html') ) {
tainacan_get_single_attachment_as_html($attachment->ID);
}
if ( get_theme_mod( $prefix . '_hide_download_button', 'no' ) == 'no' && function_exists('tainacan_the_item_attachment_download_link') && tainacan_the_item_attachment_download_link($attachment->ID) != '' ) {
echo '<span class="tainacan-item-file-download">' . tainacan_the_item_attachment_download_link($attachment->ID) . '</span>';
}
?>
</li>
<?php } ?>
</ul>
</div>
</div>
<?php if ( (tainacan_has_document() && $attachments && sizeof($attachments) > 0 ) || (!tainacan_has_document() && $attachments && sizeof($attachments) > 1 ) ) : ?>
<div class="tainacan-item-section__gallery-items">
<div class="swiper-container-thumbs swiper-container">
<ul class="swiper-wrapper">
<?php if ( tainacan_has_document() ) : ?>
<li class="tainacan-item-section__attachments-file swiper-slide">
<?php
the_post_thumbnail('tainacan-medium');
?>
<span class="swiper-slide-name <?php if (get_theme_mod( $prefix . '_hide_files_name', 'no') == 'yes') echo 'sr-only' ?>"><?php echo __( 'Document', 'blocksy-tainacan' ); ?></span>
</li>
<?php endif; ?>
<?php foreach ( $attachments as $attachment ) {
render_attachment_thumbnail_slide_item($attachment);
} ?>
</ul>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
if ( function_exists('tainacan_the_media_component') && (!empty( $attachments ) || ( $is_gallery_mode && tainacan_has_document() ) ) ) {
?>
<section class="tainacan-item-section tainacan-item-section--<?php echo ((!$is_gallery_mode ? 'attachments' : 'gallery')) ?>">
<?php if ( (get_theme_mod($prefix . '_display_section_labels', 'yes') == 'yes') && (!$is_gallery_mode) && get_theme_mod($prefix . '_section_attachments_label', __( 'Attachments', 'blocksy-tainacan' )) != '' ) : ?>
<h2 class="tainacan-single-item-section" id="tainacan-item-attachments-label">
<?php echo esc_html( get_theme_mod($prefix . '_section_attachments_label', __( 'Attachments', 'blocksy-tainacan' ) ) ); ?>
</h2>
<?php endif; ?>
<?php if ( (get_theme_mod($prefix . '_display_section_labels', 'yes') == 'yes') && ($is_gallery_mode) && get_theme_mod($prefix . '_section_documents_label', __( 'Documents', 'blocksy-tainacan' )) != '') : ?>
<h2 class="tainacan-single-item-section" id="tainacan-item-documents-label">
<?php echo esc_html( get_theme_mod($prefix . '_section_documents_label', __( 'Documents', 'blocksy-tainacan' )) ); ?>
</h2>
<?php endif; ?>
<?php else : ?>
<div class="tainacan-item-section__attachments">
<div class="swiper-container-thumbs swiper-container">
<ul class="swiper-wrapper">
<?php foreach ( $attachments as $attachment ) {
render_attachment_thumbnail_slide_item($attachment);
} ?>
</ul>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<?php endif; ?>
</section>
<!-- add PhotoSwipe (.pswp) element to DOM -
Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<?php
$media_items_thumbs = array();
$media_items_main = array();
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
if ($is_gallery_mode) {
$class_slide_metadata = '';
if ($hide_file_name_main)
$class_slide_metadata .= ' hide-name';
if ($hide_file_description_main)
$class_slide_metadata .= ' hide-description';
if ($hide_file_caption_main)
$class_slide_metadata .= ' hide-caption';
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
if ( tainacan_has_document() ) {
$is_document_type_attachment = tainacan_get_the_document_type() === 'attachment';
$media_items_main[] =
tainacan_get_the_media_component_slide(array(
'after_slide_metadata' => (( !$hide_download_button && tainacan_the_item_document_download_link() != '' ) ?
('<span class="tainacan-item-file-download">' . tainacan_the_item_document_download_link() . '</span>')
: ''),
'media_content' => tainacan_get_the_document(),
'media_content_full' => $is_document_type_attachment ? tainacan_get_the_document(0, 'full') : ('<div class="attachment-without-image">' . tainacan_get_the_document(0, 'full') . '</div>'),
'media_title' => $is_document_type_attachment ? get_the_title(tainacan_get_the_document_raw()) : '',
'media_description' => $is_document_type_attachment ? get_the_content(tainacan_get_the_document_raw()) : '',
'media_caption' => $is_document_type_attachment ? get_the_excerpt(tainacan_get_the_document_raw()) : '',
'media_type' => tainacan_get_the_document_type(),
'class_slide_metadata' => $class_slide_metadata
));
}
foreach ( $attachments as $attachment ) {
$media_items_main[] =
tainacan_get_the_media_component_slide(array(
'after_slide_metadata' => (( !$hide_download_button && tainacan_the_item_attachment_download_link($attachment->ID) != '' ) ?
'<span class="tainacan-item-file-download">' . tainacan_the_item_attachment_download_link($attachment->ID) . '</span>'
: ''),
'media_content' => tainacan_get_attachment_as_html($attachment->ID, 0),
'media_content_full' => wp_attachment_is('image', $attachment->ID) ? wp_get_attachment_image( $attachment->ID, 'full', false) : ('<div class="attachment-without-image tainacan-embed-container"><iframe id="tainacan-attachment-iframe" src="' . tainacan_get_attachment_html_url($attachment->ID) . '"></iframe></div>'),
'media_title' => $attachment->post_title,
'media_description' => $attachment->post_content,
'media_caption' => $attachment->post_excerpt,
'media_type' => $attachment->post_mime_type,
'class_slide_metadata' => $class_slide_metadata
));
}
}
if (
(tainacan_has_document() && $attachments && sizeof($attachments) > 0 ) ||
(!tainacan_has_document() && $attachments && sizeof($attachments) > 1 )
) {
if ( tainacan_has_document() ) {
$is_document_type_attachment = tainacan_get_the_document_type() === 'attachment';
$media_items_thumbs[] =
tainacan_get_the_media_component_slide(array(
'media_content' => get_the_post_thumbnail(null, 'tainacan-medium'),
'media_content_full' => $is_document_type_attachment ? tainacan_get_the_document(0, 'full') : ('<div class="attachment-without-image">' . tainacan_get_the_document(0, 'full') . '</div>'),
'media_title' => $is_document_type_attachment ? get_the_title(tainacan_get_the_document_raw()) : '',
'media_description' => $is_document_type_attachment ? get_the_content(tainacan_get_the_document_raw()) : '',
'media_caption' => $is_document_type_attachment ? get_the_excerpt(tainacan_get_the_document_raw()) : '',
'media_type' => tainacan_get_the_document_type(),
'class_slide_metadata' => 'hide-caption hide-description ' . ( $hide_file_name ? 'hide-name' : '' )
));
}
foreach ( $attachments as $attachment ) {
$media_items_thumbs[] =
tainacan_get_the_media_component_slide(array(
'media_content' => wp_get_attachment_image( $attachment->ID, 'tainacan-medium', false ),
'media_content_full' => wp_attachment_is('image', $attachment->ID) ? wp_get_attachment_image( $attachment->ID, 'full', false) : ('<div class="attachment-without-image tainacan-embed-container"><iframe id="tainacan-attachment-iframe" src="' . tainacan_get_attachment_html_url($attachment->ID) . '"></iframe></div>'),
'media_title' => $attachment->post_title,
'media_description' => $attachment->post_content,
'media_caption' => $attachment->post_excerpt,
'media_type' => $attachment->post_mime_type,
'class_slide_metadata' => 'hide-caption hide-description ' . ( $hide_file_name ? 'hide-name' : '' )
));
}
}
<!-- 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>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></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="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<?php endif; ?>
tainacan_the_media_component(
'tainacan-item-attachments_id-' . $post->ID,
$media_items_thumbs,
$is_gallery_mode ? $media_items_main : null,
array(
'class_thumbs_li' => 'tainacan-item-section__attachments-file',
'swiper_thumbs_options' => $is_gallery_mode ? '' : array(
'navigation' => array(
'nextEl' => '.swiper-navigation-next_' . 'tainacan-item-attachments_id-' . $post->ID . '-thumbs',
'prevEl' => '.swiper-navigation-prev_' . 'tainacan-item-attachments_id-' . $post->ID . '-thumbs',
)
),
'swiper_main_options' => $is_gallery_mode ? array(
'navigation' => array(
'nextEl' => '.swiper-navigation-next_' . 'tainacan-item-attachments_id-' . $post->ID . '-main',
'prevEl' => '.swiper-navigation-prev_' . 'tainacan-item-attachments_id-' . $post->ID . '-main',
)
) : ''
)
);
?>
</section>
<?php } ?>

6
template-parts/tainacan-item-single-document.php
View File

@ -2,8 +2,10 @@
$prefix = blocksy_manager()->screen->get_prefix();
// Galley mode is a shortname for when documents and attachments are displayed merged in the same list
$is_gallery_mode = get_theme_mod($prefix . '_document_attachments_structure', 'gallery-type-1') == 'gallery-type-2';
$is_gallery_mode = get_theme_mod($prefix . '_document_attachments_structure', 'gallery-type-1') == 'gallery-type-2';
$hide_file_name_main = get_theme_mod( $prefix . '_hide_files_name_main', 'yes') == 'yes';
$hide_file_caption_main = get_theme_mod( $prefix . '_hide_files_caption_main', 'yes') == 'yes';
$hide_file_description_main = get_theme_mod( $prefix . '_hide_files_description_main', 'yes') == 'yes';
?>
<?php if ( tainacan_has_document() && !$is_gallery_mode ) : ?>
<section class="tainacan-item-section tainacan-item-section--document">