'radio_button_set',
'heading' => esc_attr__( 'Pattern', 'fusion-builder' ),
'param_name' => 'pattern_bg',
'description' => esc_attr__( 'Select pattern.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'subgroup' => [
'name' => 'background_type',
'tab' => 'pattern',
],
'default' => 'none',
'value' => [
'none' => esc_attr__( 'None', 'fusion-builder' ),
'abstract' => esc_attr__( 'Abstract', 'fusion-builder' ),
'bricks' => esc_attr__( 'Bricks', 'fusion-builder' ),
'circles' => esc_attr__( 'Circles', 'fusion-builder' ),
'dots' => esc_attr__( 'Dots', 'fusion-builder' ),
'grid' => esc_attr__( 'Grid', 'fusion-builder' ),
'hexagon' => esc_attr__( 'Hexagon', 'fusion-builder' ),
'half-diamond' => esc_attr__( 'Half Diamond', 'fusion-builder' ),
'half-circle' => esc_attr__( 'Half Circle', 'fusion-builder' ),
'square' => esc_attr__( 'Square', 'fusion-builder' ),
'square-2' => esc_attr__( 'Square 2', 'fusion-builder' ),
'triangle' => esc_attr__( 'Triangle', 'fusion-builder' ),
'triangle-2' => esc_attr__( 'Triangle 2', 'fusion-builder' ),
'triangle-3' => esc_attr__( 'Triangle 3', 'fusion-builder' ),
'pastel' => esc_attr__( 'Pastel', 'fusion-builder' ),
'wave' => esc_attr__( 'Wave', 'fusion-builder' ),
'x' => esc_attr__( 'X', 'fusion-builder' ),
'custom' => esc_attr__( 'Custom', 'fusion-builder' ),
],
'icons' => [
'none' => '',
'abstract' => '',
'bricks' => '',
'circles' => '',
'dots' => '',
'grid' => '',
'hexagon' => '',
'half-diamond' => '',
'half-circle' => '',
'square' => '',
'square-2' => '',
'triangle' => '',
'triangle-2' => '',
'triangle-3' => '',
'pastel' => '',
'wave' => '',
'x' => '',
'custom' => '',
],
'grid_layout' => true,
'back_icons' => true,
'callback' => [
'function' => 'fusion_update_pattern_style',
'args' => [
'selector' => $selector,
],
],
],
[
'type' => 'upload',
'heading' => esc_attr__( 'Custom Pattern', 'fusion-builder' ),
'param_name' => 'pattern_custom_bg',
'description' => esc_attr__( 'Upload your custom pattern.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'subgroup' => [
'name' => 'background_type',
'tab' => 'pattern',
],
'callback' => [
'function' => 'fusion_update_pattern_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'pattern_bg',
'value' => 'custom',
'operator' => '==',
],
],
],
[
'type' => 'colorpickeralpha',
'heading' => esc_attr__( 'Pattern Color', 'fusion-builder' ),
'param_name' => 'pattern_bg_color',
'description' => esc_attr__( 'Set the pattern color.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'default' => 'rgba(0,0,0,0.3)',
'subgroup' => [
'name' => 'background_type',
'tab' => 'pattern',
],
'callback' => [
'function' => 'fusion_update_pattern_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'pattern_bg',
'value' => 'none',
'operator' => '!=',
],
[
'element' => 'pattern_bg',
'value' => 'custom',
'operator' => '!=',
],
],
],
[
'type' => 'radio_button_set',
'heading' => esc_attr__( 'Pattern Style', 'fusion-builder' ),
'param_name' => 'pattern_bg_style',
'description' => esc_attr__( 'Select the pattern 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' => 'pattern',
],
'callback' => [
'function' => 'fusion_update_pattern_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'pattern_bg',
'value' => 'none',
'operator' => '!=',
],
[
'element' => 'pattern_bg',
'value' => 'custom',
'operator' => '!=',
],
],
],
[
'type' => 'range',
'heading' => esc_attr__( 'Pattern Opacity', 'fusion-builder' ),
'param_name' => 'pattern_bg_opacity',
'description' => esc_attr__( 'Set the pattern opacity.', 'fusion-builder' ),
'min' => 0,
'max' => 100,
'value' => 100,
'step' => 1,
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'subgroup' => [
'name' => 'background_type',
'tab' => 'pattern',
],
'callback' => [
'function' => 'fusion_update_pattern_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'pattern_bg',
'value' => 'none',
'operator' => '!=',
],
],
],
[
'type' => 'textfield',
'heading' => esc_attr__( 'Pattern Size', 'fusion-builder' ),
'param_name' => 'pattern_bg_size',
'description' => esc_attr__( 'Set the pattern size. Enter values including any valid CSS unit, ex: 20%.', 'fusion-builder' ),
'group' => esc_attr__( 'Background', 'fusion-builder' ),
'subgroup' => [
'name' => 'background_type',
'tab' => 'pattern',
],
'callback' => [
'function' => 'fusion_update_pattern_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'pattern_bg',
'value' => 'none',
'operator' => '!=',
],
],
],
[
'type' => 'select',
'heading' => esc_attr__( 'Pattern Blend Mode', 'fusion-builder' ),
'param_name' => 'pattern_bg_blend_mode',
'description' => esc_attr__( 'Set how pattern 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' => 'pattern',
],
'callback' => [
'function' => 'fusion_update_pattern_style',
'args' => [
'selector' => $selector,
],
],
'dependency' => [
[
'element' => 'pattern_bg',
'value' => 'none',
'operator' => '!=',
],
],
],
];
}
/**
* Get pattern element.
*
* @since 3.8
* @access public
* @param array $atts The element attributes.
* @return array
*/
public static function get_element( $atts ) {
// Early exit if no pattern selected.
if ( '' === $atts['pattern_bg'] || 'none' === $atts['pattern_bg'] ) {
return;
}
$style = '';
if ( 'custom' === $atts['pattern_bg'] ) {
$style .= 'background-image: url(' . $atts['pattern_custom_bg'] . ');';
} else {
$style .= 'background-image: url(data:image/svg+xml;utf8,' . rawurlencode( self::get_pattern( $atts['pattern_bg'], $atts['pattern_bg_color'], $atts['pattern_bg_style'] ) ) . ');';
}
if ( '' !== $atts['pattern_bg_opacity'] ) {
$style .= 'opacity: ' . ( intval( $atts['pattern_bg_opacity'] ) / 100 ) . ' ;';
}
if ( '' !== $atts['pattern_bg_size'] ) {
$style .= 'background-size:' . $atts['pattern_bg_size'] . ';';
}
if ( '' !== $atts['pattern_bg_blend_mode'] ) {
$style .= 'mix-blend-mode:' . $atts['pattern_bg_blend_mode'] . ';';
}
$element = '';
return $element;
}
/**
* Get pattern.
*
* @since 3.8
* @access public
* @param string $name The mask name.
* @param string $color The mask color.
* @param string $style The mask style.
* @return array
*/
public static function get_pattern( $name, $color = '', $style = '' ) {
$style = '' === $style ? 'default' : $style;
$color = $color ? Fusion_Color::new_color( $color )->toCss( 'rgba' ) : 'rgba(0,0,0,0.3)';
$patterns = [
'abstract' => [
'default' => '',
'inverted' => '',
],
'bricks' => [
'default' => '',
'inverted' => '',
],
'circles' => [
'default' => '',
'inverted' => '',
],
'dots' => [
'default' => '',
'inverted' => '',
],
'grid' => [
'default' => '',
'inverted' => '',
],
'hexagon' => [
'default' => '',
'inverted' => '',
],
'half-diamond' => [
'default' => '',
'inverted' => '',
],
'half-circle' => [
'default' => '',
'inverted' => '',
],
'pastel' => [
'default' => '',
'inverted' => '',
],
'square' => [
'default' => '',
'inverted' => '',
],
'square-2' => [
'default' => '',
'inverted' => '',
],
'triangle' => [
'default' => '',
'inverted' => '',
],
'triangle-2' => [
'default' => '',
'inverted' => '',
],
'triangle-3' => [
'default' => '',
'inverted' => '',
],
'wave' => [
'default' => '',
'inverted' => '',
],
'x' => [
'default' => '',
'inverted' => '',
],
];
return isset( $patterns[ $name ][ $style ] ) ? $patterns[ $name ][ $style ] : '';
}
}