'triangle', 'divider_position' => 'center', 'hide_on_mobile' => fusion_builder_default_visibility( 'string' ), 'class' => '', 'id' => '', 'backgroundcolor' => $fusion_settings->get( 'section_sep_bg' ), 'bordersize' => $fusion_settings->get( 'section_sep_border_size' ), 'bordercolor' => $fusion_settings->get( 'section_sep_border_color' ), 'divider_candy' => 'top', 'icon' => '', 'icon_color' => $fusion_settings->get( 'icon_color' ), 'divider_height' => '', 'divider_height_medium' => '', 'divider_height_small' => '', 'divider_repeat' => 1, 'divider_repeat_medium' => 1, 'divider_repeat_small' => 1, 'margin_bottom' => '', 'margin_left' => '', 'margin_right' => '', 'margin_top' => '', 'custom_svg' => '', ]; } /** * Maps settings to param variables. * * @static * @access public * @since 2.0.0 * @return array */ public static function settings_to_params() { return [ 'section_sep_bg' => 'backgroundcolor', 'section_sep_border_size' => 'bordersize', 'section_sep_border_color' => 'bordercolor', 'icon_color' => 'icon_color', ]; } /** * Used to set any other variables for use on front-end editor template. * * @static * @access public * @since 2.0.0 * @return array */ public static function get_element_extras() { $fusion_settings = awb_get_fusion_settings(); return [ 'container_padding_100' => $fusion_settings->get( 'container_padding_100' ), 'layout' => fusion_get_option( 'layout' ), 'site_width' => esc_attr( $fusion_settings->get( 'site_width' ) ), 'header_position' => esc_attr( fusion_get_option( 'header_position' ) ), 'side_header_width' => $fusion_settings->get( 'side_header_width' ), 'hundredp_padding' => esc_attr( $fusion_settings->get( 'hundredp_padding' ) ), 'visibility_large' => $fusion_settings->get( 'visibility_large' ), 'visibility_medium' => $fusion_settings->get( 'visibility_medium' ), 'visibility_small' => $fusion_settings->get( 'visibility_small' ), ]; } /** * Maps settings to extra variables. * * @static * @access public * @since 2.0.0 * @return array */ public static function settings_to_extras() { return [ 'container_padding_100' => 'container_padding_100', 'layout' => 'layout', 'site_width' => 'site_width', 'header_position' => 'header_position', 'side_header_width' => 'side_header_width', 'hundredp_padding' => 'hundredp_padding', ]; } /** * Change args to valid values based on other options. * * @access public * @since 3.4 * @return void */ public function validate_args() { $this->args['bordersize'] = FusionBuilder::validate_shortcode_attr_value( $this->args['bordersize'], 'px' ); $this->args['backgroundcolor'] = esc_attr( $this->args['backgroundcolor'] ); } /** * Render the shortcode * * @access public * @since 1.0 * @param array $args Shortcode parameters. * @param string $content Content between shortcode. * @return string HTML output. */ public function render( $args, $content = '' ) { global $fusion_fwc_type, $fusion_col_type; $this->defaults = self::get_element_defaults(); $this->args = FusionBuilder::set_shortcode_defaults( self::get_element_defaults(), $args, 'fusion_section_separator' ); $this->validate_args(); $candy = ''; $icon = ''; if ( 'triangle' === $this->args['divider_type'] ) { if ( $this->args['icon'] ) { if ( ! $this->args['icon_color'] ) { $this->args['icon_color'] = $this->args['bordercolor']; } $icon = '
'; } $candy = '
'; if ( false !== strpos( $this->args['divider_candy'], 'top' ) && false !== strpos( $this->args['divider_candy'], 'bottom' ) ) { $candy = '
'; } $candy = $icon . $candy; } elseif ( 'bigtriangle' === $this->args['divider_type'] ) { $candy = ''; if ( 'top' === $this->args['divider_candy'] ) { if ( 'right' === $this->args['divider_position'] ) { $candy .= ''; } elseif ( 'left' === $this->args['divider_position'] ) { $candy .= ''; } else { $candy .= ''; } } else { if ( 'right' === $this->args['divider_position'] ) { $candy .= ''; } elseif ( 'left' === $this->args['divider_position'] ) { $candy .= ''; } else { $candy .= ''; } } $candy .= ''; } elseif ( 'slant' === $this->args['divider_type'] ) { $candy = ''; if ( 'left' === $this->args['divider_position'] && 'top' === $this->args['divider_candy'] ) { $candy .= ''; } elseif ( 'right' === $this->args['divider_position'] && 'top' === $this->args['divider_candy'] ) { $candy .= ''; } elseif ( 'right' === $this->args['divider_position'] && 'bottom' === $this->args['divider_candy'] ) { $candy .= ''; } else { $candy .= ''; } $candy .= ''; } elseif ( 'rounded-split' === $this->args['divider_type'] ) { $candy = sprintf( '
', FusionBuilder::attributes( 'section-separator-shortcode-divider-rounded-split' ) ); } elseif ( 'big-half-circle' === $this->args['divider_type'] ) { $candy = ''; if ( 'top' === $this->args['divider_candy'] ) { $candy .= ''; } else { $candy .= ''; } $candy .= ''; } elseif ( 'curved' === $this->args['divider_type'] ) { $candy = ''; if ( 'left' === $this->args['divider_position'] ) { if ( 'top' === $this->args['divider_candy'] ) { $candy .= ''; } else { $candy .= ''; } } else { if ( 'top' === $this->args['divider_candy'] ) { $candy .= ''; } else { $candy .= ''; } } $candy .= ''; } elseif ( 'clouds' === $this->args['divider_type'] ) { $candy = ''; $candy .= ' '; $candy .= ''; } elseif ( 'horizon' === $this->args['divider_type'] ) { $y_min = ( 'top' === $this->args['divider_candy'] ) ? '-0.5' : '0'; $candy = ''; if ( 'top' === $this->args['divider_candy'] ) { $candy .= ' '; } else { $candy .= ' '; } $candy .= ''; } elseif ( 'hills' === $this->args['divider_type'] ) { if ( 'top' === $this->args['divider_candy'] ) { $candy = ''; $candy .= ''; } else { $candy = ''; $candy .= ''; } $candy .= ''; } elseif ( 'hills_opacity' === $this->args['divider_type'] ) { $y_min = ( 'top' === $this->args['divider_candy'] ) ? '-0.5' : '0'; $candy = ''; if ( 'top' === $this->args['divider_candy'] ) { $candy .= ' '; } else { $candy .= ' '; } $candy .= ''; } elseif ( 'waves' === $this->args['divider_type'] ) { $y_min = ( 'top' === $this->args['divider_candy'] ) ? '54' : '1'; $candy = ''; if ( 'left' === $this->args['divider_position'] ) { if ( 'top' === $this->args['divider_candy'] ) { $candy .= ''; } else { $candy .= ''; } } else { if ( 'top' === $this->args['divider_candy'] ) { $candy .= ''; } else { $candy .= ''; } } $candy .= ''; } elseif ( 'waves_opacity' === $this->args['divider_type'] ) { $y_min = ( 'top' === $this->args['divider_candy'] ) ? '0' : '1'; $candy = ''; if ( 'left' === $this->args['divider_position'] ) { if ( 'top' === $this->args['divider_candy'] ) { $candy .= ' '; } else { $candy .= ' '; } } else { if ( 'top' === $this->args['divider_candy'] ) { $candy .= ' '; } else { $candy .= ' '; } } $candy .= ''; } elseif ( 'grunge' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '43px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ''; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'music' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '297px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ' '; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'waves_brush' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '124px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ' '; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'paper' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '102px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ''; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'circles' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '164px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ' '; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'squares' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '140px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ' '; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'paint' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '80px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ''; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'grass' === $this->args['divider_type'] ) { // Apply default height. $this->args['default_divider_height'] = '195px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ' '; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'splash' === $this->args['divider_type'] ) { $this->args['default_divider_height'] = '65px'; $this->args['svg_element'] = ''; $this->args['svg_element'] .= ''; $this->args['svg_element'] .= ''; $candy = '
'; } elseif ( 'custom' === $this->args['divider_type'] && '' !== $this->args['custom_svg'] ) { $custom_svg_data = fusion_get_svg_from_file( $this->args['custom_svg'], [ 'background-color' => $this->args['backgroundcolor'] ] ); $this->args['default_divider_height'] = ! empty( $custom_svg_data['height'] ) ? $custom_svg_data['height'] . 'px' : '65px'; $this->args['svg_element'] = ! empty( $custom_svg_data['svg'] ) ? $custom_svg_data['svg'] : ''; $candy = '
'; } $helper = $helper_close = ''; if ( ! empty( $fusion_fwc_type ) && isset( $fusion_col_type['type'] ) ) { // 100% width template && 1/1 column. if ( $fusion_fwc_type['width_100_percent'] && '1_1' === $fusion_col_type['type'] ) { if ( 'boxed' === fusion_get_option( 'layout' ) ) { $helper = '
'; $helper_close = '
'; } } } $html = '
'; $html .= $helper . '
' . $candy . '
' . $helper_close; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; $this->element_counter++; $this->on_render(); return apply_filters( 'fusion_element_section_separator_content', $html, $args ); } /** * Builds the attributes array. * * @access public * @since 1.0 * @return array */ public function attr() { $attr = fusion_builder_visibility_atts( $this->args['hide_on_mobile'], [ 'class' => 'fusion-section-separator section-separator ' . esc_attr( str_replace( '_', '-', $this->args['divider_type'] ) ) . ' fusion-section-separator-' . $this->element_counter, 'style' => $this->get_style_vars(), ] ); if ( 'rounded-split' === $this->args['divider_type'] ) { $attr['class'] .= ' rounded-split-separator'; } if ( $this->args['class'] ) { $attr['class'] .= ' ' . $this->args['class']; } if ( $this->args['id'] ) { $attr['id'] = $this->args['id']; } if ( class_exists( 'Avada_Studio' ) && false !== strpos( $this->args['backgroundcolor'], '--' ) ) { $attr['data-var'] = $this->args['backgroundcolor']; $attr['data-color'] = Fusion_Color::new_color( $this->args['backgroundcolor'] )->toCss( 'rgba' ); } return $attr; } /** * Get the style css vars. * * @since 3.9 * @return string */ private function get_style_vars() { global $fusion_fwc_type, $fusion_col_type; $fusion_settings = awb_get_fusion_settings(); $custom_css_vars = []; // Border. if ( 'triangle' === $this->args['divider_type'] ) { if ( $this->args['bordercolor'] ) { if ( 'bottom' === $this->args['divider_candy'] || 'top' === $this->args['divider_candy'] ) { $custom_css_vars[ 'border_' . $this->args['divider_candy'] ] = $this->args['bordersize'] . ' solid ' . $this->args['bordercolor']; } elseif ( false !== strpos( $this->args['divider_candy'], 'top' ) && false !== strpos( $this->args['divider_candy'], 'bottom' ) ) { $custom_css_vars['border'] = $this->args['bordersize'] . ' solid ' . $this->args['bordercolor']; } } } // Spacer height/padding-top. $hundred_px_separators = [ 'slant', 'bigtriangle', 'curved', 'big-half-circle', 'clouds' ]; if ( in_array( $this->args['divider_type'], $hundred_px_separators, true ) ) { $custom_css_vars['spacer-height'] = '99px'; } elseif ( 'triangle' === $this->args['divider_type'] ) { if ( $this->args['bordercolor'] ) { if ( 'bottom' === $this->args['divider_candy'] || 'top' === $this->args['divider_candy'] ) { $custom_css_vars['spacer-height'] = $this->args['bordersize']; } elseif ( false !== strpos( $this->args['divider_candy'], 'top' ) && false !== strpos( $this->args['divider_candy'], 'bottom' ) ) { $custom_css_vars['spacer-height'] = 'calc( ' . $this->args['bordersize'] . ' * 2 )'; } } } elseif ( 'rounded-split' === $this->args['divider_type'] ) { $custom_css_vars['spacer-height'] = '71px'; } elseif ( 'hills_opacity' === $this->args['divider_type'] ) { $custom_css_vars['spacer-padding-top'] = ( 182 / 1024 * 100 ) . '%'; } elseif ( 'hills' === $this->args['divider_type'] ) { $custom_css_vars['spacer-padding-top'] = ( 107 / 1024 * 100 ) . '%'; } elseif ( 'horizon' === $this->args['divider_type'] ) { $custom_css_vars['spacer-padding-top'] = ( 178 / 1024 * 100 ) . '%'; } elseif ( 'waves_opacity' === $this->args['divider_type'] ) { $custom_css_vars['spacer-padding-top'] = ( 216 / 1024 * 100 ) . '%'; } elseif ( 'waves' === $this->args['divider_type'] ) { $custom_css_vars['spacer-padding-top'] = ( 162 / 1024 * 100 ) . '%'; } elseif ( in_array( $this->args['divider_type'], $this->bg_image_separators, true ) && isset( $this->args['default_divider_height'] ) ) { $height = '' === $this->args['divider_height'] && 1 < $this->args['divider_repeat'] ? ( intval( $this->args['default_divider_height'] ) / $this->args['divider_repeat'] ) . 'px' : $this->args['default_divider_height']; // Aspect ratio height. $custom_css_vars['spacer-height'] = $height; } // Hide spacer if 100% width template && 1/1 column. if ( ! empty( $fusion_fwc_type ) && isset( $fusion_col_type['type'] ) && $fusion_fwc_type['width_100_percent'] && '1_1' === $fusion_col_type['type'] && 'wide' !== fusion_get_option( 'layout' ) ) { $custom_css_vars['spacer-display'] = 'none'; } // Decrease margin if needed for the container, to make section go full width. if ( ! empty( $fusion_fwc_type ) && isset( $fusion_col_type['type'] ) ) { if ( $fusion_fwc_type['width_100_percent'] && '1_1' === $fusion_col_type['type'] ) { if ( 'boxed' === fusion_get_option( 'layout' ) ) { $custom_css_vars['section-separator-pos'] = 'relative'; foreach ( $fusion_fwc_type['padding_flex'] as $size => $paddings ) { if ( ! empty( $fusion_fwc_type['padding_flex'][ $size ]['left'] ) || ! empty( $fusion_fwc_type['padding_flex'][ $size ]['right'] ) ) { $var_size = ( 'large' === $size ? '' : '-' . $size ); if ( ! empty( $fusion_fwc_type['padding_flex'][ $size ]['left'] ) && ! empty( $fusion_fwc_type['padding_flex'][ $size ]['right'] ) && false !== strpos( $fusion_fwc_type['padding_flex'][ $size ]['left'], '%' ) && false !== strpos( $fusion_fwc_type['padding_flex'][ $size ]['right'], '%' ) ) { $margin = (float) $fusion_fwc_type['padding_flex'][ $size ]['left'] + (float) $fusion_fwc_type['padding_flex'][ $size ]['right']; $scale = ( 100 - $margin ) / 100; $padding = $fusion_settings->get( 'hundredp_padding' ); $custom_css_vars['svg-wrapper-margin'] = '0 ' . $padding; $custom_css_vars[ 'svg-margin-left' . $var_size ] = 'calc(-' . ( (float) $fusion_fwc_type['padding_flex'][ $size ]['left'] / $scale ) . '% - ' . $padding . ')'; $custom_css_vars[ 'svg-margin-right' . $var_size ] = 'calc(-' . ( (float) $fusion_fwc_type['padding_flex'][ $size ]['right'] / $scale ) . '% - ' . $padding . ')'; } else { if ( ! empty( $fusion_fwc_type['padding_flex'][ $size ]['left'] ) ) { $custom_css_vars[ 'svg-margin-left' . $var_size ] = '-' . $fusion_fwc_type['padding_flex'][ $size ]['left']; } if ( ! empty( $fusion_fwc_type['padding_flex'][ $size ]['right'] ) ) { $custom_css_vars[ 'svg-margin-right' . $var_size ] = '-' . $fusion_fwc_type['padding_flex'][ $size ]['right']; } } } } } } else { // Flex container. if ( isset( $fusion_col_type['margin'] ) ) { foreach ( $fusion_col_type['margin'] as $size => $margins ) { if ( ! empty( $fusion_col_type['margin'][ $size ]['left'] ) || ! empty( $fusion_col_type['margin'][ $size ]['right'] ) ) { $var_size = ( 'large' === $size ? '' : '-' . $size ); if ( ! empty( $fusion_col_type['margin'][ $size ]['left'] ) ) { $custom_css_vars[ 'svg-margin-left' . $var_size ] = $fusion_col_type['margin'][ $size ]['left']; } if ( ! empty( $fusion_col_type['margin'][ $size ]['right'] ) ) { $custom_css_vars[ 'svg-margin-right' . $var_size ] = $fusion_col_type['margin'][ $size ]['right']; } } } } else { $custom_css_vars['svg-margin-left'] = '0'; $custom_css_vars['svg-margin-right'] = '0'; } } } // Check for custom height. $is_flex_container = fusion_element_rendering_is_flex(); $divider_height_arr = []; foreach ( [ 'large', 'medium', 'small' ] as $responsive_size ) { $var_size = ( 'large' === $responsive_size ? '' : '_' . $responsive_size ); $key = 'divider_height' . $var_size; // Skip for specific type. if ( 'triangle' === $this->args['divider_type'] || 'rounded-split' === $this->args['divider_type'] ) { continue; } // Check for flex. if ( ! $is_flex_container && 'large' !== $responsive_size ) { continue; } $divider_height = $this->args[ $key ]; if ( empty( $divider_height ) && in_array( $this->args['divider_type'], $hundred_px_separators, true ) && 'large' === $responsive_size ) { $divider_height = '99px'; } // Check for empty value. if ( '' === $divider_height ) { continue; } $divider_height_arr[ $key ] = $divider_height; $custom_css_vars[ $key ] = $divider_height; $custom_css_vars[ 'spacer-height' . $var_size ] = $divider_height; $custom_css_vars['spacer-padding-top'] = 'inherit'; } foreach ( [ 'large', 'medium', 'small' ] as $responsive_size ) { $var_prefix = ( 'large' === $responsive_size ? '' : '_' . $responsive_size ); $key = 'divider_repeat' . $var_prefix; $key_divider_h = 'divider_height' . $var_prefix; // Only allow for SVG Background type. if ( ! in_array( $this->args['divider_type'], $this->bg_image_separators, true ) ) { continue; } // Check for flex. if ( ! $is_flex_container && 'large' !== $responsive_size ) { continue; } // Check for empty value. if ( '' === $this->args[ $key ] ) { continue; } if ( isset( $this->args['svg_element'] ) ) { $height = '' !== $this->args[ $key_divider_h ] ? $this->args[ $key_divider_h ] : $this->get_divider_height_responsive( $key_divider_h, $divider_height_arr ); $height = '' === $this->args[ $key_divider_h ] && 1 < $this->args[ $key ] ? ( intval( $height ) / $this->args[ $key ] ) . 'px' : $height; // Aspect ratio height. if ( 0 < strpos( $height, '%' ) ) { $custom_css_vars[ 'bg-size' . $var_prefix ] = floatval( 100 / $this->args[ $key ] ) . '% 100%'; } else { $height = 0 < intval( $height ) ? $height : '100%'; $value = floatval( 100 / $this->args[ $key ] ) . '% ' . $height; $custom_css_vars[ 'bg-size' . $var_prefix ] = $value; } } } $margin_vars = Fusion_Builder_Margin_Helper::get_margin_vars( $this->args ); if ( 'bigtriangle' === $this->args['divider_type'] || 'slant' === $this->args['divider_type'] || 'big-half-circle' === $this->args['divider_type'] || 'clouds' === $this->args['divider_type'] || 'curved' === $this->args['divider_type'] ) { $custom_css_vars['sep-padding'] = '0'; $custom_css_vars['svg-padding'] = '0'; } elseif ( 'horizon' === $this->args['divider_type'] || 'waves' === $this->args['divider_type'] || 'waves_opacity' === $this->args['divider_type'] || 'hills' === $this->args['divider_type'] || 'hills_opacity' === $this->args['divider_type'] ) { $custom_css_vars['sep-font-size'] = '0'; $custom_css_vars['sep-line-height'] = '0'; } if ( 'slant' === $this->args['divider_type'] && 'bottom' === $this->args['divider_candy'] ) { $custom_css_vars['svg-tag-margin-bottom'] = '-3px'; $custom_css_vars['sep-svg-display'] = 'block'; } if ( 'triangle' === $this->args['divider_type'] ) { $custom_css_vars['icon_color'] = $this->args['icon_color']; if ( FusionBuilder::strip_unit( $this->args['bordersize'] ) > 1 ) { if ( 'bottom' === $this->args['divider_candy'] ) { $custom_css_vars['icon-top'] = 'auto'; $custom_css_vars['icon-bottom'] = '-' . ( FusionBuilder::strip_unit( $this->args['bordersize'] ) + 10 ) . 'px'; } elseif ( 'top' === $this->args['divider_candy'] ) { $custom_css_vars['icon-top'] = '-' . ( FusionBuilder::strip_unit( $this->args['bordersize'] ) + 10 ) . 'px'; } } } return $this->get_custom_css_vars( $custom_css_vars ) . $margin_vars; } /** * Builds the attributes array for the svg wrapper. * * @access public * @since 3.0 * @return array */ public function svg_wrapper_attr() { global $fusion_fwc_type, $fusion_col_type; $attr = [ 'class' => 'fusion-section-separator-svg', ]; // 100% width template && 1/1 column. if ( ! empty( $fusion_fwc_type ) && isset( $fusion_col_type['type'] ) && $fusion_fwc_type['width_100_percent'] && '1_1' === $fusion_col_type['type'] && 'boxed' !== fusion_get_option( 'layout' ) ) { $attr['class'] .= ' fusion-section-separator-fullwidth'; } return $attr; } /** * Builds the attributes array for the spacer. * * @access public * @since 3.0 * @return array */ public function spacer_attr() { global $fusion_fwc_type, $fusion_col_type; $attr['class'] = 'fusion-section-separator-spacer'; // 100% width template && 1/1 column. if ( ! empty( $fusion_fwc_type ) && isset( $fusion_col_type['type'] ) && $fusion_fwc_type['width_100_percent'] && '1_1' === $fusion_col_type['type'] && 'wide' === fusion_get_option( 'layout' ) ) { $attr['class'] .= ' fusion-section-separator-fullwidth'; } return $attr; } /** * Builds the rounded split attributes array. * * @access public * @since 1.0 * @return array */ public function divider_svg_attr() { $attr = []; $attr['fill'] = Fusion_Color::new_color( $this->args['backgroundcolor'] )->toCss( 'rgba' ); return $attr; } /** * Builds the rounded split attributes array. * * @access public * @since 1.0 * @return array */ public function divider_rounded_split_attr() { return [ 'class' => 'rounded-split ' . $this->args['divider_candy'], 'style' => 'background-color:' . $this->args['backgroundcolor'] . ';', ]; } /** * Builds the icon attributes array. * * @access public * @since 1.0 * @return array */ public function icon_attr() { $attr = [ 'class' => 'section-separator-icon icon ' . fusion_font_awesome_name_handler( $this->args['icon'] ), 'aria-hidden' => 'true', ]; return $attr; } /** * Builds the divider attributes array. * * @access public * @since 1.0 * @param array $args The arguments array. * @return array */ public function divider_candy_attr( $args ) { $attr = [ 'class' => 'divider-candy', ]; $divider_candy = ( $args ) ? $args['divider_candy'] : $this->args['divider_candy']; if ( 'bottom' === $divider_candy ) { $attr['class'] .= ' bottom'; $attr['style'] = 'bottom:-' . ( FusionBuilder::strip_unit( $this->args['bordersize'] ) + 20 ) . 'px;border-bottom:1px solid ' . $this->args['bordercolor'] . ';border-left:1px solid ' . $this->args['bordercolor'] . ';'; } elseif ( 'top' === $divider_candy ) { $attr['class'] .= ' top'; $attr['style'] = 'top:-' . ( FusionBuilder::strip_unit( $this->args['bordersize'] ) + 20 ) . 'px;border-bottom:1px solid ' . $this->args['bordercolor'] . ';border-left:1px solid ' . $this->args['bordercolor'] . ';'; // Modern setup, that won't work in IE8. } elseif ( false !== strpos( $this->args['divider_candy'], 'top' ) && false !== strpos( $this->args['divider_candy'], 'bottom' ) ) { $attr['class'] .= ' both'; $attr['style'] = 'background-color:' . $this->args['backgroundcolor'] . ';border:1px solid ' . $this->args['bordercolor'] . ';'; } return $attr; } /** * Builds the divider-arrow attributes array. * * @access public * @since 1.0 * @param array $args The arguments array. * @return array */ public function divider_candy_arrow_attr( $args ) { $attr = [ 'class' => 'divider-candy-arrow', ]; $divider_candy = ( $args ) ? $args['divider_candy'] : $this->args['divider_candy']; // For borders of size 1, we need to hide the border line on the arrow, thus we set it to 0. $arrow_position = FusionBuilder::strip_unit( $this->args['bordersize'] ); if ( '1' == $arrow_position ) { // phpcs:ignore Universal.Operators.StrictComparisons $arrow_position = 0; } if ( 'bottom' === $divider_candy ) { $attr['class'] .= ' bottom'; $attr['style'] = 'top:' . $arrow_position . 'px;border-top-color: ' . $this->args['backgroundcolor'] . ';'; } elseif ( 'top' === $divider_candy ) { $attr['class'] .= ' top'; $attr['style'] = 'bottom:' . $arrow_position . 'px;border-bottom-color: ' . $this->args['backgroundcolor'] . ';'; } return $attr; } /** * Builds the background image SVG attributes array. * * @access public * @since 3.2 * @return array */ public function divider_svg_bg_image_attr() { $attr = [ 'class' => 'fusion-' . $this->args['divider_type'] . '-candy-sep fusion-section-separator-svg-bg', ]; $transform = []; if ( $this->args['svg_element'] ) { $attr['style'] = sprintf( 'background-image:url( data:image/svg+xml;utf8,%s );', rawurlencode( $this->args['svg_element'] ) ); if ( '' === $this->args['divider_height'] ) { $height = $this->args['default_divider_height']; if ( 1 < $this->args['divider_repeat'] ) { $height = ( intval( $this->args['default_divider_height'] ) / $this->args['divider_repeat'] ) . 'px'; } $attr['style'] .= sprintf( 'height:%s;', $height ); } if ( 'right' === $this->args['divider_position'] ) { $transform[] = 'rotateY(180deg)'; } if ( 'bottom' === $this->args['divider_candy'] ) { $transform[] = 'rotateX(180deg)'; } if ( 0 < count( $transform ) ) { $attr['style'] .= sprintf( 'transform: %s;', implode( ' ', $transform ) ); } if ( 'custom' === $this->args['divider_type'] ) { if ( '' === $this->args['divider_height'] ) { $height = '' === $this->args['divider_height'] && 1 < $this->args['divider_repeat'] ? ( intval( $this->args['default_divider_height'] ) / $this->args['divider_repeat'] ) . 'px' : $this->args['default_divider_height']; // Aspect ratio height. $attr['style'] .= sprintf( 'height:%s;', $height ); } if ( 1 >= $this->args['divider_repeat'] ) { $attr['style'] .= 'background-size:cover;'; } } } return $attr; } /** * Load base CSS. * * @access public * @since 3.0 * @return void */ public function add_css_files() { FusionBuilder()->add_element_css( FUSION_BUILDER_PLUGIN_DIR . 'assets/css/shortcodes/section-separator.min.css' ); Fusion_Media_Query_Scripts::$media_query_assets[] = [ 'avada-section-separator-md', FUSION_BUILDER_PLUGIN_DIR . 'assets/css/media/section-separator-md.min.css', [], FUSION_BUILDER_VERSION, Fusion_Media_Query_Scripts::get_media_query_from_key( 'fusion-max-medium' ), ]; Fusion_Media_Query_Scripts::$media_query_assets[] = [ 'avada-section-separator-sm', FUSION_BUILDER_PLUGIN_DIR . 'assets/css/media/section-separator-sm.min.css', [], FUSION_BUILDER_VERSION, Fusion_Media_Query_Scripts::get_media_query_from_key( 'fusion-max-small' ), ]; } /** * Adds settings to element options panel. * * @access public * @since 1.1 * @return array $sections Section Separator settings. */ public function add_options() { return [ 'section_separator_shortcode_section' => [ 'label' => esc_html__( 'Section Separator', 'fusion-builder' ), 'description' => '', 'id' => 'section_separator_shortcode_section', 'type' => 'accordion', 'icon' => 'fusiona-ellipsis', 'fields' => [ 'section_sep_border_size' => [ 'label' => esc_html__( 'Section Separator Border Size', 'fusion-builder' ), 'description' => esc_html__( 'Controls the border size of the section separator.', 'fusion-builder' ), 'id' => 'section_sep_border_size', 'default' => '1', 'type' => 'slider', 'transport' => 'postMessage', 'choices' => [ 'min' => '0', 'max' => '50', 'step' => '1', ], ], 'section_sep_bg' => [ 'label' => esc_html__( 'Section Separator Background Color', 'fusion-builder' ), 'description' => esc_html__( 'Controls the background color of the section separator style.', 'fusion-builder' ), 'id' => 'section_sep_bg', 'default' => 'var(--awb-color2)', 'type' => 'color-alpha', 'transport' => 'postMessage', ], 'section_sep_border_color' => [ 'label' => esc_html__( 'Section Separator Border Color', 'fusion-builder' ), 'description' => esc_html__( 'Controls the border color of the separator.', 'fusion-builder' ), 'id' => 'section_sep_border_color', 'default' => 'var(--awb-color3)', 'type' => 'color-alpha', 'transport' => 'postMessage', ], ], ], ]; } /** * Get divider height responsive. * * @access public * @param string $key string array key. * @param array $hash array height array. * @since 3.2 * @return array $height. */ public function get_divider_height_responsive( $key, $hash = [] ) { $keys = array_keys( $hash ); $found_index = array_search( $key, $keys, true ); if ( false === $found_index || 0 === $found_index ) { return ''; } return $keys[ $found_index - 1 ]; } } } new FusionSC_SectionSeparator(); } /** * Map shortcode to Avada Builder. * * @since 1.0 */ function fusion_element_section_separator() { $fusion_settings = awb_get_fusion_settings(); fusion_builder_map( fusion_builder_frontend_data( 'FusionSC_SectionSeparator', [ 'name' => esc_attr__( 'Section Separator', 'fusion-builder' ), 'shortcode' => 'fusion_section_separator', 'icon' => 'fusiona-ellipsis', 'preview' => FUSION_BUILDER_PLUGIN_DIR . 'inc/templates/previews/fusion-section-separator-preview.php', 'preview_id' => 'fusion-builder-block-module-section-separator-preview-template', 'help_url' => 'https://avada.com/documentation/section-separator-element/', 'params' => [ [ 'type' => 'select', 'heading' => esc_attr__( 'Style', 'fusion-builder' ), 'description' => esc_attr__( 'Select the type of the separator', 'fusion-builder' ), 'param_name' => 'divider_type', 'value' => [ 'triangle' => esc_attr__( 'Triangle', 'fusion-builder' ), 'slant' => esc_attr__( 'Slant', 'fusion-builder' ), 'bigtriangle' => esc_attr__( 'Big Triangle', 'fusion-builder' ), 'rounded-split' => esc_attr__( 'Rounded Split', 'fusion-builder' ), 'curved' => esc_attr__( 'Curved', 'fusion-builder' ), 'big-half-circle' => esc_attr__( 'Big Half Circle', 'fusion-builder' ), 'clouds' => esc_attr__( 'Clouds', 'fusion-builder' ), 'horizon' => esc_attr__( 'Horizon', 'fusion-builder' ), 'waves' => esc_attr__( 'Waves', 'fusion-builder' ), 'waves_opacity' => esc_attr__( 'Waves Opacity', 'fusion-builder' ), 'waves_brush' => esc_attr__( 'Waves Brush', 'fusion-builder' ), 'hills' => esc_attr__( 'Hills', 'fusion-builder' ), 'hills_opacity' => esc_attr__( 'Hills Opacity', 'fusion-builder' ), 'grunge' => esc_attr__( 'Grunge', 'fusion-builder' ), 'music' => esc_attr__( 'Music', 'fusion-builder' ), 'paper' => esc_attr__( 'Paper', 'fusion-builder' ), 'squares' => esc_attr__( 'Squares', 'fusion-builder' ), 'circles' => esc_attr__( 'Circles', 'fusion-builder' ), 'paint' => esc_attr__( 'Paint', 'fusion-builder' ), 'grass' => esc_attr__( 'Grass', 'fusion-builder' ), 'splash' => esc_attr__( 'Splash', 'fusion-builder' ), 'custom' => esc_attr__( 'Custom', 'fusion-builder' ), ], 'default' => 'triangle', ], [ 'type' => 'upload', 'heading' => esc_attr__( 'Custom SVG File', 'fusion-builder' ), 'description' => esc_attr__( 'Upload your custom SVG separator. SVG file should include attribute preserveAspectRatio="none" for best work in combination with custom height or repeat option.', 'fusion-builder' ), 'param_name' => 'custom_svg', 'value' => '', 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'custom', 'operator' => '==', ], ], ], [ 'type' => 'textfield', 'heading' => esc_attr__( 'Height', 'fusion-builder' ), 'description' => esc_attr__( 'Controls the height of the separator. Enter value including any valid CSS unit, ex: 200px. Leave empty for auto.', 'fusion-builder' ), 'param_name' => 'divider_height', 'value' => '', 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'triangle', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'rounded-split', 'operator' => '!=', ], ], 'responsive' => [ 'state' => 'large', ], ], [ 'type' => 'range', 'heading' => esc_attr__( 'Repeat', 'fusion-builder' ), 'description' => esc_attr__( 'Choose how many times the Separator should repeat horizontally.', 'fusion-builder' ), 'param_name' => 'divider_repeat', 'value' => '1', 'min' => '1', 'max' => '20', 'step' => '1', 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'triangle', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'slant', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'bigtriangle', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'rounded-split', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'curved', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'big-half-circle', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'clouds', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'horizon', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'waves', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'waves_opacity', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'hills', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'hills_opacity', 'operator' => '!=', ], ], 'responsive' => [ 'state' => 'large', ], ], [ 'type' => 'radio_button_set', 'heading' => esc_attr__( 'Horizontal Position', 'fusion-builder' ), 'description' => esc_attr__( 'Select the horizontal position of the separator.', 'fusion-builder' ), 'param_name' => 'divider_position', 'value' => [ 'left' => esc_attr__( 'Left', 'fusion-builder' ), 'center' => esc_attr__( 'Center', 'fusion-builder' ), 'right' => esc_attr__( 'Right', 'fusion-builder' ), ], 'default' => 'center', 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'triangle', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'rounded-split', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'big-half-circle', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'clouds', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'horizon', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'hills', 'operator' => '!=', ], [ 'element' => 'divider_type', 'value' => 'hills_opacity', 'operator' => '!=', ], ], ], [ 'type' => 'radio_button_set', 'heading' => esc_attr__( 'Vertical Position', 'fusion-builder' ), 'description' => esc_attr__( 'Select the vertical position of the separator.', 'fusion-builder' ), 'param_name' => 'divider_candy', 'value' => [ 'top' => esc_attr__( 'Top', 'fusion-builder' ), 'bottom' => esc_attr__( 'Bottom', 'fusion-builder' ), 'bottom,top' => esc_attr__( 'Top and Bottom', 'fusion-builder' ), ], 'default' => 'top', 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'clouds', 'operator' => '!=', ], ], ], [ 'type' => 'iconpicker', 'heading' => esc_attr__( 'Icon', 'fusion-builder' ), 'param_name' => 'icon', 'value' => '', 'description' => esc_attr__( 'Click an icon to select, click again to deselect.', 'fusion-builder' ), 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'triangle', 'operator' => '==', ], ], ], [ 'type' => 'colorpickeralpha', 'heading' => esc_attr__( 'Icon Color', 'fusion-builder' ), 'description' => '', 'param_name' => 'icon_color', 'value' => '', 'default' => $fusion_settings->get( 'icon_color' ), 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'triangle', 'operator' => '==', ], [ 'element' => 'icon', 'value' => '', 'operator' => '!=', ], ], ], [ 'type' => 'range', 'heading' => esc_attr__( 'Border', 'fusion-builder' ), 'description' => esc_attr__( 'In pixels.', 'fusion-builder' ), 'param_name' => 'bordersize', 'value' => '', 'min' => '0', 'max' => '50', 'step' => '1', 'default' => $fusion_settings->get( 'section_sep_border_size' ), 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'triangle', 'operator' => '==', ], ], ], [ 'type' => 'colorpickeralpha', 'heading' => esc_attr__( 'Border Color', 'fusion-builder' ), 'description' => esc_attr__( 'Controls the border color. ', 'fusion-builder' ), 'param_name' => 'bordercolor', 'value' => '', 'default' => $fusion_settings->get( 'section_sep_border_color' ), 'dependency' => [ [ 'element' => 'divider_type', 'value' => 'triangle', 'operator' => '==', ], [ 'element' => 'bordersize', 'value' => '0', 'operator' => '!=', ], ], ], [ 'type' => 'dimension', 'remove_from_atts' => true, 'heading' => esc_attr__( 'Margin', 'fusion-builder' ), 'description' => esc_attr__( 'In pixels or percentage, ex: 10px or 10%.', 'fusion-builder' ), 'param_name' => 'margin', 'value' => [ 'margin_top' => '', 'margin_right' => '', 'margin_bottom' => '', 'margin_left' => '', ], 'group' => esc_attr__( 'Design', 'fusion-builder' ), ], [ 'type' => 'colorpickeralpha', 'heading' => esc_attr__( 'Background Color', 'fusion-builder' ), 'description' => esc_attr__( 'Controls the background color of the separator style.', 'fusion-builder' ), 'param_name' => 'backgroundcolor', 'value' => '', 'default' => $fusion_settings->get( 'section_sep_bg' ), 'group' => esc_attr__( 'Design', 'fusion-builder' ), ], [ 'type' => 'checkbox_button_set', 'heading' => esc_attr__( 'Element Visibility', 'fusion-builder' ), 'param_name' => 'hide_on_mobile', 'value' => fusion_builder_visibility_options( 'full' ), 'default' => fusion_builder_default_visibility( 'array' ), 'description' => esc_attr__( 'Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.', 'fusion-builder' ), ], [ 'type' => 'textfield', 'heading' => esc_attr__( 'CSS Class', 'fusion-builder' ), 'description' => esc_attr__( 'Add a class to the wrapping HTML element.', 'fusion-builder' ), 'param_name' => 'class', 'value' => '', ], [ 'type' => 'textfield', 'heading' => esc_attr__( 'CSS ID', 'fusion-builder' ), 'description' => esc_attr__( 'Add an ID to the wrapping HTML element.', 'fusion-builder' ), 'param_name' => 'id', 'value' => '', ], ], ] ) ); } add_action( 'fusion_builder_before_init', 'fusion_element_section_separator' );