'radio_button_set',
'heading' => esc_attr__( 'Mask', 'fusion-builder' ),
'param_name' => 'mask_bg',
'description' => esc_attr__( 'Select mask.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'default' => 'none',
'value' => [
'none' => esc_attr__( 'None', 'fusion-builder' ),
'mask-1' => esc_attr__( 'Mask 1', 'fusion-builder' ),
'mask-2' => esc_attr__( 'Mask 2', 'fusion-builder' ),
'mask-3' => esc_attr__( 'Mask 3', 'fusion-builder' ),
'mask-4' => esc_attr__( 'Mask 4', 'fusion-builder' ),
'mask-5' => esc_attr__( 'Mask 5', 'fusion-builder' ),
'mask-6' => esc_attr__( 'Mask 6', 'fusion-builder' ),
'mask-7' => esc_attr__( 'Mask 7', 'fusion-builder' ),
'mask-8' => esc_attr__( 'Mask 8', 'fusion-builder' ),
'mask-9' => esc_attr__( 'Mask 9', 'fusion-builder' ),
'mask-10' => esc_attr__( 'Mask 10', 'fusion-builder' ),
'mask-11' => esc_attr__( 'Mask 11', 'fusion-builder' ),
'mask-12' => esc_attr__( 'Mask 12', 'fusion-builder' ),
'mask-13' => esc_attr__( 'Mask 13', 'fusion-builder' ),
'mask-14' => esc_attr__( 'Mask 14', 'fusion-builder' ),
'mask-15' => esc_attr__( 'Mask 15', 'fusion-builder' ),
'mask-16' => esc_attr__( 'Mask 16', 'fusion-builder' ),
'custom' => esc_attr__( 'Custom', 'fusion-builder' ),
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'icons' => [
'none' => '',
'mask-1' => '',
'mask-2' => '',
'mask-3' => '',
'mask-4' => '',
'mask-5' => '',
'mask-6' => '',
'mask-7' => '',
'mask-8' => '',
'mask-9' => '',
'mask-10' => '',
'mask-11' => '',
'mask-12' => '',
'mask-13' => '',
'mask-14' => '',
'mask-15' => '',
'mask-16' => '',
'custom' => '',
],
'grid_layout' => true,
'back_icons' => true,
],
[
'type' => 'upload',
'heading' => esc_attr__( 'Custom Mask', 'fusion-builder' ),
'param_name' => 'mask_custom_bg',
'description' => esc_attr__( 'Upload your custom mask.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'mask_bg',
'value' => 'custom',
'operator' => '==',
],
],
],
[
'type' => 'colorpickeralpha',
'heading' => esc_attr__( 'Mask Color', 'fusion-builder' ),
'param_name' => 'mask_bg_color',
'description' => esc_attr__( 'Set the mask color.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'default' => 'rgba(255,255,255,1)',
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'mask_bg',
'value' => 'none',
'operator' => '!=',
],
[
'element' => 'mask_bg',
'value' => 'custom',
'operator' => '!=',
],
],
],
[
'type' => 'colorpickeralpha',
'heading' => esc_attr__( 'Mask Accent Color', 'fusion-builder' ),
'param_name' => 'mask_bg_accent_color',
'description' => esc_attr__( 'Set the mask accent color.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'default' => 'rgba(255,255,255,.5)',
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'or' => true,
'dependency' => [
[
'element' => 'mask_bg',
'value' => 'mask-15',
'operator' => '==',
],
[
'element' => 'mask_bg',
'value' => 'mask-16',
'operator' => '==',
],
],
],
[
'type' => 'radio_button_set',
'heading' => esc_attr__( 'Mask Style', 'fusion-builder' ),
'param_name' => 'mask_bg_style',
'description' => esc_attr__( 'Select the mask style.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'default' => 'default',
'value' => [
'default' => esc_attr__( 'Default', 'fusion-builder' ),
'inverted' => esc_attr__( 'Inverted', 'fusion-builder' ),
],
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'mask_bg',
'value' => 'none',
'operator' => '!=',
],
[
'element' => 'mask_bg',
'value' => 'custom',
'operator' => '!=',
],
],
],
[
'type' => 'range',
'heading' => esc_attr__( 'Mask Opacity', 'fusion-builder' ),
'param_name' => 'mask_bg_opacity',
'description' => esc_attr__( 'Set the mask opacity.', 'fusion-builder' ),
'min' => 0,
'max' => 100,
'value' => 100,
'step' => 1,
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'mask_bg',
'value' => 'none',
'operator' => '!=',
],
],
],
[
'type' => 'checkbox_button_set',
'heading' => esc_attr__( 'Mask Transform', 'fusion-builder' ),
'param_name' => 'mask_bg_transform',
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'default' => 'left',
'value' => [
'flip-vertical' => esc_attr__( 'Flip Vertical', 'fusion-builder' ),
'flip-Horizontal' => esc_attr__( 'Flip Horizontal', 'fusion-builder' ),
],
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'mask_bg',
'value' => 'none',
'operator' => '!=',
],
],
],
[
'type' => 'select',
'heading' => esc_attr__( 'Mask Blend Mode', 'fusion-builder' ),
'param_name' => 'mask_bg_blend_mode',
'description' => esc_attr__( 'Set how mask will blend with element background.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'value' => [
'normal' => esc_attr__( 'Normal', 'fusion-builder' ),
'multiply' => esc_attr__( 'Multiply', 'fusion-builder' ),
'screen' => esc_attr__( 'Screen', 'fusion-builder' ),
'overlay' => esc_attr__( 'Overlay', 'fusion-builder' ),
'darken' => esc_attr__( 'Darken', 'fusion-builder' ),
'lighten' => esc_attr__( 'Lighten', 'fusion-builder' ),
'color-dodge' => esc_attr__( 'Color Dodge', 'fusion-builder' ),
'hard-light' => esc_attr__( 'Hard Light', 'fusion-builder' ),
'soft-light' => esc_attr__( 'Soft Light', 'fusion-builder' ),
'difference' => esc_attr__( 'Difference', 'fusion-builder' ),
'exclusion' => esc_attr__( 'Exclusion', 'fusion-builder' ),
'hue' => esc_attr__( 'Hue', 'fusion-builder' ),
'saturation' => esc_attr__( 'Saturation', 'fusion-builder' ),
'color' => esc_attr__( 'Color', 'fusion-builder' ),
'luminosity' => esc_attr__( 'Luminosity', 'fusion-builder' ),
'plus-lighter' => esc_attr__( 'Plus Lighter', 'fusion-builder' ),
],
'default' => 'normal',
'subgroup' => [
'name' => 'background_type',
'tab' => 'mask',
],
'callback' => [
'function' => 'fusion_update_mask_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'mask_bg',
'value' => 'none',
'operator' => '!=',
],
],
],
];
}
/**
* Get mask element.
*
* @since 3.8
* @access public
* @param array $atts The placeholder arguments.
* @return array
*/
public static function get_element( $atts ) {
// Early exit if no mask selected.
if ( '' === $atts['mask_bg'] || 'none' === $atts['mask_bg'] ) {
return;
}
$style = '';
if ( 'custom' === $atts['mask_bg'] ) {
$style .= 'background-image: url(' . $atts['mask_custom_bg'] . ');';
} else {
$style .= 'background-image: url(data:image/svg+xml;utf8,' . rawurlencode( self::get_mask( $atts['mask_bg'], $atts['mask_bg_color'], $atts['mask_bg_style'], $atts['mask_bg_accent_color'] ) ) . ');';
}
if ( '' !== $atts['mask_bg_opacity'] ) {
$style .= 'opacity: ' . ( intval( $atts['mask_bg_opacity'] ) / 100 ) . ' ;';
}
if ( '' !== $atts['mask_bg_transform'] ) {
$transform = $atts['mask_bg_transform'];
$scale_x = 1;
$scale_y = 1;
if ( false !== strpos( $transform, 'flip-Horizontal' ) ) {
$scale_x = -1;
}
if ( false !== strpos( $transform, 'flip-vertical' ) ) {
$scale_y = -1;
}
$style .= 'transform: scale(' . $scale_x . ', ' . $scale_y . ');';
}
if ( '' !== $atts['mask_bg_blend_mode'] ) {
$style .= 'mix-blend-mode:' . $atts['mask_bg_blend_mode'] . ';';
}
$element = '';
return $element;
}
/**
* Get mask.
*
* @since 3.8
* @access public
* @param string $name The mask name.
* @param string $color The mask color.
* @param string $style The mask style.
* @param string $accent_color The accent color.
* @return array
*/
public static function get_mask( $name, $color = '', $style = '', $accent_color = '' ) {
$style = '' === $style ? 'default' : $style;
$color = $color ? Fusion_Color::new_color( $color )->toCss( 'rgba' ) : 'rgba(255,255,255,1)';
$accent_color = $accent_color ? Fusion_Color::new_color( $accent_color )->toCss( 'rgba' ) : $color;
$masks = [
'mask-1' => [
'default' => '',
'inverted' => '',
],
'mask-2' => [
'default' => '',
'inverted' => '',
],
'mask-3' => [
'default' => '',
'inverted' => '',
],
'mask-4' => [
'default' => '',
'inverted' => '',
],
'mask-5' => [
'default' => '',
'inverted' => '',
],
'mask-6' => [
'default' => '',
'inverted' => '',
],
'mask-7' => [
'default' => '',
'inverted' => '',
],
'mask-8' => [
'default' => '',
'inverted' => '',
],
'mask-9' => [
'default' => '',
'inverted' => '',
],
'mask-10' => [
'default' => '',
'inverted' => '',
],
'mask-11' => [
'default' => '',
'inverted' => '',
],
'mask-12' => [
'default' => '',
'inverted' => '',
],
'mask-13' => [
'default' => '',
'inverted' => '',
],
'mask-14' => [
'default' => '',
'inverted' => '',
],
'mask-15' => [
'default' => '',
'inverted' => '',
],
'mask-16' => [
'default' => '',
'inverted' => '',
],
];
return isset( $masks[ $name ][ $style ] ) ? $masks[ $name ][ $style ] : '';
}
}