From 92fdb5717138a78165a552f53fa442e89d972ab6 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Mon, 6 Sep 2021 11:59:15 -0300 Subject: [PATCH] Adds option to use light scheme on the media component gallery. --- src/assets/scss/style.scss | 12 ++-- src/functions/customizer.php | 103 +++++++++++++++++++++++++++++++++++ 2 files changed, 109 insertions(+), 6 deletions(-) diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 4724a11..8218490 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -44,22 +44,22 @@ body{ h6:not(.has-text-color) { color: #1d1d1d; } - h1:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label) { + h1:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label):not(.label) { font-size: 1.802rem; } - h2:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label) { + h2:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label):not(.label) { font-size: 1.602rem; } - h3:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label) { + h3:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label):not(.label) { font-size: 1.424rem; } - h4:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label) { + h4:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label):not(.label) { font-size: 1.266rem; } - h5:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label) { + h5:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label):not(.label) { font-size: 1.125rem; } - h6:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label) { + h6:not(.has-huge-font-size):not(.has-large-font-size):not(.has-medium-font-size):not(.has-normal-font-size):not(.has-small-font-size):not(.metadata-label):not(.label) { font-size: 1rem; } pre:not(.wp-block-code) { diff --git a/src/functions/customizer.php b/src/functions/customizer.php index 1fc74d9..dd417b8 100644 --- a/src/functions/customizer.php +++ b/src/functions/customizer.php @@ -1051,6 +1051,24 @@ function tainacan_customize_register( $wp_customize ) { 'label' => __( 'Hide the attachments description (on the main slider)', 'tainacan-interface' ), 'description' => __( 'Toggle to not display the document and attachments description.', 'tainacan-interface' ) ) ); + + /** + * Light color palette to the media component gallery + */ + $wp_customize->add_setting( 'tainacan_single_item_gallery_color_scheme', array( + 'type' => 'theme_mod', + 'capability' => 'edit_theme_options', + 'default' => 'dark', + 'transport' => 'refresh', + 'sanitize_callback' => 'tainacan_sanitize_single_item_gallery_color_scheme_options', + ) ); + $wp_customize->add_control( 'tainacan_single_item_gallery_color_scheme', array( + 'type' => 'select', + 'priority' => 4, // Within the section. + 'section' => 'tainacan_single_item_page_document', + 'label' => __( 'Color scheme of the media gallery modal', 'tainacan-interface' ), + 'choices' => tainacan_get_single_item_gallery_color_scheme_options() + ) ); } @@ -2237,6 +2255,52 @@ endif; // tainacan_sanitize_single_item_navigation_links_options + +if ( ! function_exists( 'tainacan_get_single_item_gallery_color_scheme_options' ) ) : + /** + * Retrieves an array of options for single item page gallery color scheme options for Tainacan Theme. + * + * Create your own tainacan_get_single_item_gallery_color_scheme_options() function to override + * in a child theme. + * + * @since Tainacan Theme + * + * @return array $option - a string with options for the color scheme. + */ + function tainacan_get_single_item_gallery_color_scheme_options() { + $color_scheme = array( + 'dark' => __('Dark', 'tainacan-interface'), + 'light' => __('Light', 'tainacan-interface') + ); + return $color_scheme; + } +endif; // tainacan_get_single_item_gallery_color_scheme_options + +if ( ! function_exists( 'tainacan_sanitize_single_item_gallery_color_scheme_options' ) ) : + /** + * Handles sanitization for Tainacan Theme item page gallery color scheme options for Tainacan Theme + * + * Create your own tainacan_sanitize_single_item_gallery_color_scheme_options() function to override + * in a child theme. + * + * @since Tainacan Theme + * + * @param string $option - a string with options for the color scheme. + * @return string the selected option. + */ + function tainacan_sanitize_single_item_gallery_color_scheme_options( $option ) { + $color_scheme = tainacan_get_single_item_gallery_color_scheme_options(); + + if ( ! array_key_exists( $option, $color_scheme ) ) { + return 'dark'; + } + + return $option; + } +endif; // tainacan_sanitize_single_item_gallery_color_scheme_options + + + if ( ! function_exists( 'tainacan_get_header_alignment_options' ) ) : /** * Retrieves an array of options for header alignment options for Tainacan Theme. @@ -3071,3 +3135,42 @@ function tainacan_items_page_filters_fixed_on_scroll_output() { } add_action( 'wp_head', 'tainacan_items_page_filters_fixed_on_scroll_output'); + +/** + * Enqueues front-end CSS for the light scheme of the photoswipe layer + */ +if ( !function_exists('tainacan_blocksy_gallery_light_color_scheme') ) { + function tainacan_blocksy_gallery_light_color_scheme() { + + $has_light_dark_color_scheme = get_theme_mod( 'tainacan_single_item_gallery_color_scheme', 'dark' ) == 'light'; + + if (!$has_light_dark_color_scheme) + return; + + $css = ' + /* Photoswipe layer for the gallery dark */ + .tainacan-photoswipe-layer .pswp__bg { + background-color: rgba(255, 255, 255, 0.85) !important; + } + .tainacan-photoswipe-layer .pswp__ui--fit .pswp__top-bar, + .tainacan-photoswipe-layer .pswp__ui--fit .pswp__caption { + background-color: rgba(255, 255, 255, 0.7) !important; + } + .tainacan-photoswipe-layer .pswp__top-bar .pswp__name, + .tainacan-photoswipe-layer .pswp__caption__center { + color: black !important; + } + .tainacan-photoswipe-layer .pswp__button, + .tainacan-photoswipe-layer .pswp__button--arrow--left::before, + .tainacan-photoswipe-layer .pswp__button--arrow--right::before { + filter: invert(100) !important; + } + .tainacan-photoswipe-layer .pswp--css_animation .pswp__preloader__donut { + border: 2px solid #000000 !important; + } + '; + echo ''; + + } +} +add_action( 'wp_head', 'tainacan_blocksy_gallery_light_color_scheme'); \ No newline at end of file