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

Adds option to toggle light color scheme. #548.

This commit is contained in:
mateuswetah 2022-03-17 17:06:41 -03:00
parent 71f4eb7a77
commit a54a81fa41
8 changed files with 73 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -291,9 +291,15 @@
cursor: pointer; }
.tainacan-photoswipe-layer {
--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); }
--pswp-bg: var(--tainacan-lightbox-background, #1d1d1d);
--pswp-error-text-color: var(--tainacan-lightbox-text-color, #fafafa);
--pswp-icon-color: var(--tainacan-lightbox-text-color, #fafafa);
--pswp-icon-color-secondary: var(--tainacan-lightbox-background-contrast, #4f4f4f);
--pswp-icon-stroke-color: var(--tainacan-lightbox-background-contrast, #4f4f4f); }
.tainacan-photoswipe-layer.has-light-color-scheme {
--tainacan-lightbox-background: #fafafa;
--tainacan-lightbox-text-color: #1d1d1d;
--tainacan-lightbox-background-contrast: #dbdbdb; }
.tainacan-photoswipe-layer .pswp__counter {
min-width: 50px; }
.tainacan-photoswipe-layer .pswp__name {

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

File diff suppressed because one or more lines are too long

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

@ -1126,7 +1126,8 @@ class Theme_Helper {
* @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
* @type bool $lightboxHasLightBackground Show a light background instead of dark in the lightbox
@return string The HTML div to be used for rendering the item galery component
*/
public function get_tainacan_item_gallery($args = []) {
@ -1144,7 +1145,8 @@ class Theme_Helper {
'hideFileCaptionLightbox' => false,
'hideFileDescriptionLightbox' => false,
'openLightboxOnClick' => true,
'showDownloadButtonMain' => true
'showDownloadButtonMain' => true,
'lightboxHasLightBackground' => false
);
$args = wp_parse_args($args, $defaults);
@ -1169,6 +1171,7 @@ class Theme_Helper {
$hide_file_description_lightbox = $args['hideFileDescriptionLightbox'];
$open_lightbox_on_click = $args['openLightboxOnClick'];
$show_download_button_main = $args['showDownloadButtonMain'];
$lightbox_has_light_background = $args['lightboxHasLightBackground'];
// Prefils arrays with proper values to avoid messsy IFs
$layout_elements = array(
@ -1343,7 +1346,8 @@ class Theme_Helper {
'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
'hide_media_description' => $hide_file_description_lightbox,
'lightbox_has_light_background' => $lightbox_has_light_background
)
);
}

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

@ -1095,6 +1095,7 @@ function tainacan_has_related_items($item_id = false) {
* @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
* @type bool $lightboxHasLightBackground Show a light background instead of dark in the lightbox
* @return void
*/
function tainacan_the_item_gallery($args = []) {

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

@ -112,6 +112,10 @@
"showDownloadButtonMain": {
"type": "boolean",
"default": false
},
"lightboxHasLightBackground": {
"type": "boolean",
"default": false
}
},
"supports": {

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

@ -1,6 +1,6 @@
const { __ } = wp.i18n;
const { Button, Placeholder, RangeControl, ToggleControl, PanelBody } = wp.components;
const { Button, ButtonGroup, BaseControl, Placeholder, RangeControl, ToggleControl, PanelBody } = wp.components;
const ServerSideRender = wp.serverSideRender;
const { InspectorControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
@ -31,7 +31,8 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
mainSliderWidth,
thumbnailsCarouselWidth,
thumbnailsCarouselItemSize,
showDownloadButtonMain
showDownloadButtonMain,
lightboxHasLightBackground
} = attributes;
// Gets blocks props from hook
@ -253,6 +254,30 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
title={__('Lightbox settings', 'tainacan')}
initialOpen={ true }
>
<BaseControl
id="lightbox-color-scheme"
label={ __('Background color scheme', 'tainacan') }>
<ButtonGroup id="lightbox-color-scheme">
<Button
onClick={ () => {
lightboxHasLightBackground = false;
setAttributes({ lightboxHasLightBackground: lightboxHasLightBackground });
}
}
variant={ lightboxHasLightBackground ? 'secondary' : 'primary' }>
{ __('Dark', 'tainacan') }
</Button>
<Button
onClick={ () => {
lightboxHasLightBackground = true;
setAttributes({ lightboxHasLightBackground: lightboxHasLightBackground });
}
}
variant={ lightboxHasLightBackground ? 'primary' : 'secondary' }>
{ __('Light', 'tainacan') }
</Button>
</ButtonGroup>
</BaseControl>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameLightbox }

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

@ -379,9 +379,17 @@
// Photoswip zoom ---------------------------------
.tainacan-photoswipe-layer {
--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);
--pswp-bg: var(--tainacan-lightbox-background, #1d1d1d);
--pswp-error-text-color: var(--tainacan-lightbox-text-color, #fafafa);
--pswp-icon-color: var(--tainacan-lightbox-text-color, #fafafa);
--pswp-icon-color-secondary: var(--tainacan-lightbox-background-contrast, #4f4f4f);
--pswp-icon-stroke-color: var(--tainacan-lightbox-background-contrast, #4f4f4f);
&.has-light-color-scheme {
--tainacan-lightbox-background: #fafafa;
--tainacan-lightbox-text-color: #202020;
--tainacan-lightbox-background-contrast: #dbdbdb;
}
.pswp__counter {
min-width: 50px;

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

@ -17,17 +17,18 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
/**
* Constructor initializes the instance. Options are Snake Case because they come from PHP side
* @param {String} thumbs_gallery_selector html element to be queried containing the thumbnails list
* @param {String} main_gallery_selector html element to be queried containing the main list
* @param {Object} options several options to be tweaked
* @param {Object} options.swiper_thumbs_options object with SwiperJS options for the thumbnails list (https://swiperjs.com/swiper-api)
* @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
* @param {String} thumbs_gallery_selector html element to be queried containing the thumbnails list
* @param {String} main_gallery_selector html element to be queried containing the main list
* @param {Object} options several options to be tweaked
* @param {Object} options.swiper_thumbs_options object with SwiperJS options for the thumbnails list (https://swiperjs.com/swiper-api)
* @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 lightbox
* @param {Boolean} options.lightbox_has_light_background shows a light instead of dark background color scheme on the lightbox
*
* @return {Object} TainacanMediaGallery instance
*/
@ -120,7 +121,7 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
let photoswipeOptions = {
loop: false,
preloadFirstSlide: false,
mainClass: 'tainacan-photoswipe-layer',
mainClass: 'tainacan-photoswipe-layer' + (this.options.lightbox_has_light_background ? ' has-light-color-scheme' : ''),
bgOpacity: 0.85,
clickToCloseNonZoomable: false,
closeTitle: __( 'Close lightbox', 'tainacan'),