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

Adds options to display item info in the lightbox. #548.

This commit is contained in:
mateuswetah 2022-03-17 15:49:34 -03:00
parent 9eb1096a66
commit 00f3102162
8 changed files with 206 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/assets/css/tainacan-gutenberg-block-item-gallery.css
View File

@ -294,6 +294,26 @@
--pswp-bg: var(--tainacan-lightbox-background, #000);
--pswp-error-text-color: var(--tainacan-lightbox-text-color, #f7f7f7);
--pswp-icon-color: var(--tainacan-lightbox-text-color, #fff); }
.tainacan-photoswipe-layer .pswp__counter {
min-width: 50px; }
.tainacan-photoswipe-layer .pswp__name {
display: block;
height: 30px;
line-height: 30px;
margin: 15px auto;
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
max-width: calc(100% - 220px);
width: 100%;
padding: 0 12px;
text-align: center;
font-size: 0.875em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 0.4s ease; }
.tainacan-photoswipe-layer .pswp__name:hover {
opacity: 1.0; }
.tainacan-photoswipe-layer .pswp__caption {
bottom: 0;
position: fixed;
@ -301,7 +321,7 @@
width: 100%;
display: flex;
justify-content: center; }
.tainacan-photoswipe-layer .pswp__caption-inner {
.tainacan-photoswipe-layer .pswp__caption .pswp__caption-inner {
opacity: 0.75;
background-color: var(--pswp-bg);
color: var(--pswp-icon-color);
@ -311,11 +331,20 @@
line-height: 20px;
text-align: center;
font-size: 1em;
border-radius: 3px;
border-radius: 4px;
transition: opacity 0.4s ease; }
.tainacan-photoswipe-layer .pswp__caption-inner:hover {
.tainacan-photoswipe-layer .pswp__caption .pswp__caption-inner:hover {
opacity: 1.0; }
.tainacan-photoswipe-layer.pswp--zoomed-in .pswp__caption-inner {
.tainacan-photoswipe-layer .pswp__caption .pswp__caption-inner .pswp__figure_caption {
font-size: 0.875em;
font-style: italic;
display: block; }
.tainacan-photoswipe-layer .pswp__caption .pswp__caption-inner .pswp__figure_caption:not(:only-child) {
margin-bottom: 1.25em; }
.tainacan-photoswipe-layer .pswp__caption .pswp__caption-inner .pswp__description {
font-size: 0.9375em;
display: block; }
.tainacan-photoswipe-layer.pswp--zoomed-in .pswp__name, .tainacan-photoswipe-layer.pswp--zoomed-in .pswp__caption-inner {
opacity: 0.0; }
.tainacan-photoswipe-layer .pswp__button--arrow--left::before,
.tainacan-photoswipe-layer .pswp__button--arrow--right::before {
@ -397,30 +426,5 @@
.tainacan-photoswipe-layer .pswp__container video {
min-height: 56px;
max-width: 80%; }
.tainacan-photoswipe-layer .pswp__top-bar .pswp__name {
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
text-align: center;
font-size: 1.125em;
display: block;
height: 44px;
max-width: calc(100% - 240px);
width: 100%;
left: 44px;
position: absolute;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 44px;
padding: 0 10px; }
.tainacan-photoswipe-layer .pswp__figure_caption {
font-size: 0.875em;
font-style: italic; }
.tainacan-photoswipe-layer .pswp__description {
font-size: 0.9375em; }
.tainacan-photoswipe-layer .pswp__caption__center {
text-align: center;
font-size: 1em;
max-width: 800px; }
/*# sourceMappingURL=tainacan-gutenberg-block-item-gallery.css.map */

2
src/assets/css/tainacan-gutenberg-block-item-gallery.css.map
View File

File diff suppressed because one or more lines are too long

12
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -1121,6 +1121,9 @@ class Theme_Helper {
* @type bool $hideFileNameThumbnails Hides the Thumbnails carousel file name
* @type bool $hideFileCaptionThumbnails Hides the Thumbnails carousel file caption
* @type bool $hideFileDescriptionThumbnails Hides the Thumbnails carousel file description
* @type bool $hideFileNameLightbox Hides the Lightbox file name
* @type bool $hideFileCaptionLightbox Hides the Lightbox file caption
* @type bool $hideFileDescriptionLightbox Hides the Lightbox file description
* @type bool $openLightboxOnClick Enables the behaviour of opening a lightbox with zoom when clicking on the media item
* @type bool $showDownloadButtonMain Displays a download button bellow the Main slider
* @return string The HTML div to be used for rendering the item galery component
@ -1137,6 +1140,9 @@ class Theme_Helper {
'hideFileNameThumbnails' => true,
'hideFileCaptionThumbnails' => true,
'hideFileDescriptionThumbnails' => true,
'hideFileNameLightbox' => false,
'hideFileCaptionLightbox' => false,
'hideFileDescriptionLightbox' => false,
'openLightboxOnClick' => true,
'showDownloadButtonMain' => true
);
@ -1158,6 +1164,9 @@ class Theme_Helper {
$hide_file_name_thumbnails = $args['hideFileNameThumbnails'];
$hide_file_caption_thumbnails = $args['hideFileCaptionThumbnails'];
$hide_file_description_thumbnails = $args['hideFileDescriptionThumbnails'];
$hide_file_name_lightbox = $args['hideFileNameLightbox'];
$hide_file_caption_lightbox = $args['hideFileCaptionLightbox'];
$hide_file_description_lightbox = $args['hideFileDescriptionLightbox'];
$open_lightbox_on_click = $args['openLightboxOnClick'];
$show_download_button_main = $args['showDownloadButtonMain'];
@ -1332,6 +1341,9 @@ class Theme_Helper {
) : '',
'swiper_arrows_as_svg' => true,
'disable_lightbox' => !$open_lightbox_on_click,
'hide_media_name' => $hide_file_name_lightbox,
'hide_media_caption' => $hide_file_caption_lightbox,
'hide_media_description' => $hide_file_description_lightbox
)
);
}

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

@ -1090,6 +1090,9 @@ function tainacan_has_related_items($item_id = false) {
* @type bool $hideFileNameThumbnails Hides the Thumbnails carousel file name
* @type bool $hideFileCaptionThumbnails Hides the Thumbnails carousel file caption
* @type bool $hideFileDescriptionThumbnails Hides the Thumbnails carousel file description
* @type bool $hideFileNameLightbox Hides the Lightbox file name
* @type bool $hideFileCaptionLightbox Hides the Lightbox file caption
* @type bool $hideFileDescriptionLightbox Hides the Lightbox file description
* @type bool $openLightboxOnClick Enables the behaviour of opening a lightbox with zoom when clicking on the media item
* @type bool $showDownloadButtonMain Displays a download button bellow the Main slider
* @return void

12
src/views/gutenberg-blocks/blocks/item-gallery/block.json
View File

@ -73,6 +73,18 @@
"type": "boolean",
"default": true
},
"hideFileNameLightbox": {
"type": "boolean",
"default": false
},
"hideFileCaptionLightbox": {
"type": "boolean",
"default": false
},
"hideFileDescriptionLightbox": {
"type": "boolean",
"default": false
},
"openLightboxOnClick": {
"type": "boolean",
"default": true

37
src/views/gutenberg-blocks/blocks/item-gallery/edit.js
View File

@ -22,6 +22,9 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
hideFileNameThumbnails,
hideFileCaptionThumbnails,
hideFileDescriptionThumbnails,
hideFileNameLightbox,
hideFileCaptionLightbox,
hideFileDescriptionLightbox,
openLightboxOnClick,
arrowsSize,
mainSliderHeight,
@ -245,6 +248,40 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
/>
</PanelBody>
: null }
{ openLightboxOnClick === true ?
<PanelBody
title={__('Lightbox settings', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameLightbox }
onChange={ ( isChecked ) => {
hideFileNameLightbox = isChecked;
setAttributes({ hideFileNameLightbox: hideFileNameLightbox });
}
}
/>
<ToggleControl
label={__('Hide file caption', 'tainacan')}
checked={ hideFileCaptionLightbox }
onChange={ ( isChecked ) => {
hideFileCaptionLightbox = isChecked;
setAttributes({ hideFileCaptionLightbox: hideFileCaptionLightbox });
}
}
/>
<ToggleControl
label={__('Hide file description', 'tainacan')}
checked={ hideFileDescriptionLightbox }
onChange={ ( isChecked ) => {
hideFileDescriptionLightbox = isChecked;
setAttributes({ hideFileDescriptionLightbox: hideFileDescriptionLightbox });
}
}
/>
</PanelBody>
: null }
</InspectorControls>
{ isSelected ?

71
src/views/gutenberg-blocks/blocks/item-gallery/style.scss
View File

@ -383,6 +383,30 @@
--pswp-error-text-color: var(--tainacan-lightbox-text-color, #f7f7f7);
--pswp-icon-color: var(--tainacan-lightbox-text-color, #fff);
.pswp__counter {
min-width: 50px;
}
.pswp__name {
display: block;
height: 30px;
line-height: 30px;
margin: 15px auto;
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
max-width: calc(100% - 220px);
width: 100%;
padding: 0 12px;
text-align: center;
font-size: 0.875em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 0.1s ease;
&:hover {
opacity: 1.0;
}
}
.pswp__caption {
bottom: 0;
position: fixed;
@ -390,7 +414,7 @@
width: 100%;
display: flex;
justify-content: center;
}
.pswp__caption-inner {
opacity: 0.75;
background-color: var(--pswp-bg);
@ -401,13 +425,27 @@
line-height: 20px;
text-align: center;
font-size: 1em;
border-radius: 3px;
border-radius: 4px;
transition: opacity 0.4s ease;
&:hover {
opacity: 1.0;
}
.pswp__figure_caption {
font-size: 0.875em;
font-style: italic;
display: block;
&:not(:only-child) {
margin-bottom: 1.25em;
}
}
.pswp__description {
font-size: 0.9375em;
display: block;
}
}
}
&.pswp--zoomed-in .pswp__name,
&.pswp--zoomed-in .pswp__caption-inner {
opacity: 0.0;
}
@ -514,33 +552,4 @@
max-width: 80%;
}
}
.pswp__top-bar .pswp__name {
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
text-align: center;
font-size: 1.125em;
display: block;
height: 44px;
max-width: calc(100% - 240px);
width: 100%;
left: 44px;
position: absolute;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 44px;
padding: 0 10px;
}
.pswp__figure_caption {
font-size: 0.875em;
font-style: italic;
}
.pswp__description {
font-size: 0.9375em;
}
.pswp__caption__center {
text-align: center;
font-size: 1em;
max-width: 800px;
}
}

66
src/views/gutenberg-blocks/blocks/item-gallery/theme.js
View File

@ -24,6 +24,10 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
* @param {Object} options.swiper_main_options object with SwiperJS options for the main list
* @param {Boolean} options.disable_lightbox do not open photoswipes lightbox when clicking the main gallery
* @param {Boolean} options.show_share_button show share button on lightbox
* @param {Boolean} options.show_download_button show share download button on lightbox
* @param {Boolean} options.hide_media_name hide media name on lightbox
* @param {Boolean} options.hide_media_caption hide media caption on lightbox
* @param {Boolean} options.hide_media_description hide media description tbox
*
* @return {Object} TainacanMediaGallery instance
*/
@ -150,7 +154,7 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
/* Updates Swiper instance from Photoswipe */
const swiperInstance = this.mainSwiper ? this.mainSwiper : this.thumbsSwiper;
const thisLightbox = this.lightbox;
const self = this;
// Parse URL and open gallery from it if contains #&pid=3&gid=1
const hashData = this.photoswipeParseHash();
@ -181,18 +185,18 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
// Update position of the slider
this.lightbox.on("change", () => {
if (thisLightbox.pswp && !isNaN(thisLightbox.pswp.currIndex) && thisLightbox.pswp.currIndex >= 0) {
if (self.lightbox.pswp && !isNaN(self.lightbox.pswp.currIndex) && self.lightbox.pswp.currIndex >= 0) {
// This is the index of current photoswipe slide
swiperInstance.slideTo(thisLightbox.pswp.currIndex);
swiperInstance.slideTo(self.lightbox.pswp.currIndex);
// Also updates URL for history navigation
// We only add to the history if it is the first time opening
let currentURL = window.location.toString();
if (currentURL.indexOf("#") > 0) {
currentURL = currentURL.substring(0, currentURL.indexOf("#"));
window.history.replaceState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (thisLightbox.pswp.currIndex + 1));
window.history.replaceState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (self.lightbox.pswp.currIndex + 1));
} else {
window.history.pushState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (thisLightbox.pswp.currIndex + 1));
window.history.pushState({}, '', currentURL + '#gid=' + this.options.media_id + '&pid=' + (self.lightbox.pswp.currIndex + 1));
}
}
});
@ -209,40 +213,56 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
window.history.replaceState({},'', currentURL.substring(0, currentURL.indexOf("#")));
});
// Adds caption
// Adds name, caption, description
this.lightbox.on('uiRegister', () => {
thisLightbox.pswp.ui.registerElement({
self.lightbox.pswp.ui.registerElement({
name: 'name',
order: 7,
isButton: false,
appendTo: 'bar',
onInit: (el, pswp) => {
self.lightbox.pswp.on('change', () => {
const item = pswp.currSlide.data;
let innerHTML = '';
if (
item &&
item.title &&
item.title.name &&
!self.options.hide_media_name
)
innerHTML += item.title.name.innerHTML;
el.innerHTML += item.title.name.innerHTML;
});
}
});
self.lightbox.pswp.ui.registerElement({
name: 'caption',
order: 15,
isButton: false,
appendTo: 'root',
onInit: (el, pswp) => {
thisLightbox.pswp.on('change', () => {
self.lightbox.pswp.on('change', () => {
const item = pswp.currSlide.data;
if (item && item.title) {
let innerHTML = '';
if (
item &&
item.title &&
(
(item.title.caption && !self.options.hide_media_caption) ||
(item.title.description && !self.options.hide_media_description)
)
) {
innerHTML += '<div class="pswp__caption-inner">';
if (item.title.caption)
if (item.title.caption && !self.options.hide_media_caption)
innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
if (item.title.name && item.title.caption || (!item.title.name && item.title.caption && item.title.description) )
innerHTML += '<br>';
if (item.title.name)
innerHTML += '<span class="pswp__name">' + item.title.name.innerHTML + '</span>';
if (item.title.description && item.title.name)
innerHTML += '<br>';
if (item.title.description)
if (item.title.description && !self.options.hide_media_description)
innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
innerHTML += '</div>';
el.innerHTML = innerHTML;
}
el.innerHTML = innerHTML;
});
}
});