'; // Generate icon output if defined. if ( vcex_validate_att_boolean( 'show_icon', $atts, false ) && $icon_safe = vcex_get_icon_html( $atts, 'icon' ) ) { $has_icon = true; $icon_class = 'vcex-icon-wrap wpex-inline-flex wpex-items-center'; $icon_margin_safe = ! empty( $atts['icon_margin'] ) ? sanitize_html_class( (string) absint( $atts['icon_margin'] ) ) : '10'; if ( $icon_margin_safe ) { $icon_class .= " wpex-mr-{$icon_margin_safe}"; } $icon_output = ''; $icon_output .= $icon_safe; $icon_output .= ''; } // Generate percent output. if ( vcex_validate_att_boolean( 'show_percent', $atts, true ) ) { $percentage_class = [ 'vcex-skill-bar-percent', 'wpex-absolute', 'wpex-top-50', '-wpex-translate-y-50', '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; } $percent_output = '
' . $percent_intval . '%
'; } /* * Title (outside of skillbar). */ if ( 'alt-1' === $style ) { $label_class = [ 'vcex-skillbar-title', 'wpex-font-semibold', 'wpex-mb-5', ]; if ( $has_icon ) { $label_class[] = 'wpex-flex'; $label_class[] = 'wpex-items-center'; } $output .= '
'; if ( ! empty( $icon_output ) ) { $output .= $icon_output; } $output .= $title_safe; $output .= '
'; } /* * Inner wrap open. * */ $inner_class = [ 'vcex-skillbar', ]; if ( $animate_percent ) { $inner_class[] = 'vcex-skillbar--animated'; } $inner_class[] = 'wpex-block'; $inner_class[] = 'wpex-relative'; switch ( $title_position ) { case 'inside': $inner_class[] = 'wpex-surface-2'; if ( vcex_validate_att_boolean( 'box_shadow', $atts, true ) ) { $inner_class[] = 'wpex-shadow-inner'; } if ( ! empty( $atts['color'] ) ) { $inner_class[] = 'wpex-text-white'; } else { $inner_class[] = 'wpex-text-on-accent'; } break; case 'outside': $inner_class[] = 'wpex-surface-3'; $inner_class[] = 'wpex-text-3'; $inner_class[] = 'wpex-font-semibold'; break; } if ( $border_radius_class ) { $inner_class[] = $border_radius_class; $inner_class[] = 'wpex-overflow-hidden'; } $inner_attrs = [ 'class' => $inner_class, ]; if ( $animate_percent ) { wp_enqueue_script( 'vcex-skillbar' ); $inner_attrs['data-percent'] = "{$percent_intval}%"; if ( vcex_validate_att_boolean( 'animate_percent_onscroll', $atts, false ) ) { $inner_attrs['data-animate-on-scroll'] = 'true'; } } $output .= ''; /* * Percentage. */ $bar_class = 'vcex-skillbar-bar wpex-relative wpex-w-0 wpex-h-100 wpex-bg-accent'; if ( ! empty( $atts['color'] ) ) { $bar_class .= ' wpex-text-white'; } if ( $animate_percent ) { $bar_class .= ' wpex-transition-width wpex-duration-700'; } if ( $border_radius_class ) { $bar_class .= " {$border_radius_class}"; } $output .= '
'; if ( 'inside' === $title_position && ! empty( $percent_output ) ) { $output .= $percent_output; } $output .= '
'; /* * Title */ if ( 'inside' === $title_position ) { $output .= '
'; $title_inner_class = [ 'vcex-skillbar-title-inner', 'wpex-px-15', ]; if ( $has_icon ) { $title_inner_class[] = 'wpex-flex'; $title_inner_class[] = 'wpex-items-center'; } $output .= '
'; // Display Icon. if ( ! empty( $icon_output ) ) { $output .= $icon_output; } // Title. if ( 'default' === $style ) { $output .= $title_safe; } $output .= '
'; $output .= '
'; } // Display percent outside of colored background. if ( 'outside' === $title_position && ! empty( $percent_output ) ) { $output .= $percent_output; } $output .= ''; $output .= ''; // @codingStandardsIgnoreLine echo $output;