';
// Generate icon output if defined
if ( vcex_validate_boolean( $show_icon ) ) {
$icon = vcex_get_icon_class( $atts, 'icon' );
if ( $icon ) {
vcex_enqueue_icon_font( $icon_type, $icon );
$icon_class = 'vcex-icon-wrap';
$icon_margin = $icon_margin ? $icon_margin : 10;
if ( $icon_margin ) {
$icon_class .= ' wpex-mr-' . sanitize_html_class( absint( $icon_margin ) );
}
$icon_output = '';
$icon_output .= '';
$icon_output .= '';
}
}
// Generate percent output
if ( vcex_validate_boolean( $show_percent ) ) {
$percentage_class = array(
'vcex-skill-bar-percent',
'wpex-absolute',
'wpex-right-0',
);
switch ( $title_position ) {
case 'inside':
$percentage_class[] = 'wpex-mr-15';
break;
case 'outside':
$percentage_class[] = 'wpex-text-sm';
$percentage_class[] = 'wpex-top-50';
$percentage_class[] = '-wpex-translate-y-50';
$percentage_class[] = 'wpex-mr-10';
break;
}
$percentage_style = vcex_inline_style( array(
'color' => $percentage_color,
'font_size' => $percentage_font_size,
) );
$percent_output = '' . intval( $percentage ) . '%
';
}
/*
* Title (outside of skillbar)
*/
if ( 'alt-1' == $style ) {
$label_class = array(
'vcex-skillbar-title',
'wpex-font-semibold',
'wpex-mb-5',
);
$label_style = array();
$label_style = vcex_inline_style( array(
'font_size' => $font_size,
'color' => $label_color,
) );
$output .= '';
if ( ! empty( $icon_output ) ) {
$output .= $icon_output;
}
$output .= wp_kses_post( do_shortcode( $title ) );
$output .= '
';
}
/*
* Inner wrap open
*
*/
$inner_class = array(
'vcex-skillbar',
'wpex-block',
'wpex-relative',
);
switch ( $title_position ) {
case 'inside':
$inner_class[] = 'wpex-bg-gray-100';
if ( vcex_validate_boolean( $box_shadow ) ) {
$inner_class[] = 'wpex-shadow-inner';
}
$inner_class[] = 'wpex-text-white';
break;
case 'outside':
$inner_class[] = 'wpex-bg-gray-200';
$inner_class[] = 'wpex-text-gray-600';
$inner_class[] = 'wpex-font-semibold';
break;
}
$inner_style = array(
'background' => $background,
'height_px' => $container_height,
'line_height_px' => $container_height,
);
if ( 'inside' == $title_position ) {
$inner_style['font_size'] = $font_size;
}
$inner_style = vcex_inline_style( $inner_style, false );
$inner_attrs = array(
'class' => $inner_class,
'style' => $inner_style,
);
if ( 'true' === $animate_percent && $percentage ) {
$this->enqueue_scripts();
$inner_attrs['data-percent'] = intval( $percentage ) . '%';
}
$output .= '';
/*
* Percentage
*/
if ( $percentage ) {
$bar_style = vcex_inline_style( array(
'background' => $color,
'width' => ( 'true' !== $animate_percent ) ? intval( $percentage ) . '%' : '',
) );
$output .= '';
if ( 'inside' == $title_position && ! empty( $percent_output ) ) {
$output .= $percent_output;
}
$output .= '
';
}
/*
* Title
*/
if ( 'inside' === $title_position ) {
$dir = is_rtl() ? 'right' : 'left';
$title_style = vcex_inline_style( array(
'background' => $color,
'padding_' . $dir => $container_padding_left,
'color' => $label_color,
) );
$output .= '';
$output .= '
';
// Display Icon
if ( ! empty( $icon_output ) ) {
$output .= $icon_output;
}
// Title
if ( 'default' == $style ) {
$output .= wp_kses_post( do_shortcode( $title ) );
}
$output .= '
';
$output .= '