<?php

if ( ! defined( 'ABSPATH' ) ) exit;

if( !class_exists( 'UT_Probar_Thin' ) ) {
    
    class UT_Probar_Thin {
        
        private $shortcode;
            
        function __construct() {
            
            /* shortcode base */
            $this->shortcode = 'ut_probar_thin';
            
            add_action( 'init', array( $this, 'ut_map_shortcode' ) );
            add_shortcode( $this->shortcode, array( $this, 'ut_create_shortcode' ) );    
            
        }
        
        function ut_map_shortcode( $atts, $content = NULL ) {
            
            if( function_exists( 'vc_map' ) ) {
                                
                vc_map(
                    array(
                        'name'            => esc_html__( 'Progress Bar Thin', 'ut_shortcodes' ),
                        'base'            => $this->shortcode,
                        'icon'            => UT_SHORTCODES_URL . '/admin/img/vc_icons/probar-thin.png',
                        'category'        => 'Information',
                        'class'           => 'ut-vc-icon-module ut-information-module',
                        'content_element' => true,
                        'params'          => array(
                            
                            array(
                                'type'              => 'textfield',
                                'heading'           => esc_html__( 'Bar Description', 'ut_shortcodes' ),
                                'param_name'        => 'info',
                                'admin_label'       => true,
                                'group'             => 'General'
                            ),
                    
                            array(
								'type'              => 'dropdown',
								'heading'           => esc_html__( 'Bar Description Alignment', 'ut_shortcodes' ),
								'param_name'        => 'info_align',
								'group'             => 'General',
                                'value'             => array(
                                    esc_html__( 'left' , 'ut_shortcodes' ) => 'left',
                                    esc_html__( 'center', 'ut_shortcodes' ) => 'center',
                                    esc_html__( 'right', 'ut_shortcodes' ) => 'right',
                                ),
						  	),
                    
                            array(
								'type'              => 'dropdown',
								'heading'           => esc_html__( 'Bar Description Position', 'ut_shortcodes' ),
								'param_name'        => 'info_position',
								'group'             => 'General',
                                'value'             => array(
                                    esc_html__( 'above' , 'ut_shortcodes' ) => 'above',
                                    esc_html__( 'below', 'ut_shortcodes' ) => 'below',
                                ),
						  	),
                    
                            array(
								'type'              => 'range_slider',
								'heading'           => esc_html__( 'Bar Description Spacing', 'ut_shortcodes' ),
                                'description'       => esc_html__( 'The spacing between Bar Description and the bar itself.', 'ut_shortcodes' ),
								'param_name'        => 'info_spacing',
                                'value'             => array(
                                    'default'   => '10',
                                    'min'       => '6',
                                    'max'       => '40',
                                    'step'      => '1',
                                    'unit'      => 'px'
                                ),
								'group'             => 'General'
						  	),
                    
                            array(
                                'type'              => 'range_slider',
                                'heading'           => esc_html__( 'Percentage', 'ut_shortcodes' ),
                                'param_name'        => 'width',
                                'value'             => array(
                                    'min'   => '0',
                                    'max'   => '100',
                                    'step'  => '1',
                                    'unit'  => '%'
                                ),
                                'group'             => 'General'
                            ),
                            
                            array(
								'type'              => 'range_slider',
								'heading'           => esc_html__( 'Fill Up Speed', 'ut_shortcodes' ),
                                'param_name'        => 'speed',
                                'group'             => 'General',
                                'value'             => array(
                                    'default'   => '1000',
                                    'min'       => '100',
                                    'max'       => '3000',
                                    'step'      => '50',
                                    'unit'      => 'ms'
                                ),								
						  	), 
                            
                            array(
                                'type'              => 'dropdown',
                                'heading'           => esc_html__( 'Animate Bar Once?', 'ut_shortcodes' ),
                                'param_name'        => 'animate_once',
                                'group'             => 'General',
                                'value'             => array(
                                    esc_html__( 'no' , 'ut_shortcodes' ) => 'no',
                                    esc_html__( 'yes', 'ut_shortcodes' ) => 'yes'                                    
                                ),
                              ),
                                                      
                            /* Bar Colors */
                            array(
                                'type'              => 'colorpicker',
                                'heading'           => esc_html__( 'Bar Description Color', 'ut_shortcodes' ),
                                'param_name'        => 'info_color',
                                'group'             => 'Bar Styling'
                            ), 
                            array(
                                'type'              => 'gradient_picker',
                                'heading'           => esc_html__( 'Bar Color', 'ut_shortcodes' ),
                                'param_name'        => 'color',
                                'group'             => 'Bar Styling'
                            ),
                            array(
                                'type'              => 'colorpicker',
                                'heading'           => esc_html__( 'Bar Percentage Color', 'ut_shortcodes' ),
                                'param_name'        => 'percentage_color',
                                'group'             => 'Bar Styling'
                            ),
                            array(
                                'type'              => 'colorpicker',
                                'heading'           => esc_html__( 'Bar Percentage Background Color', 'ut_shortcodes' ),
                                'param_name'        => 'percentage_bg_color',
                                'group'             => 'Bar Styling'
                            ),
                            array(
                                'type'              => 'range_slider',
                                'heading'           => esc_html__( 'Bar Percentage Background Color Opacity', 'ut_shortcodes' ),
                                'param_name'        => 'percentage_bg_color_opacity',
                                'value'             => array(
                                    'default' => '1',
                                    'min'     => '0',
                                    'max'     => '1',
                                    'step'    => '0.1',
                                    'unit'    => ''
                                ),
                                'group'             => 'Bar Styling'
                            ),
                            
                            /* Font Settings */
                            array(
                                'type'              => 'range_slider',
                                'heading'           => esc_html__( 'Description Font Size', 'ut_shortcodes' ),
                                'param_name'        => 'info_font_size',
                                'value'             => array(
                                    'min'   => '12',
                                    'min'   => '0',
                                    'max'   => '100',
                                    'step'  => '1',
                                    'unit'  => 'px'
                                ),
                                'group'             => 'Font'
                              ),
                            array(
                                'type'              => 'dropdown',
                                'heading'           => esc_html__( 'Description Font Weight', 'ut_shortcodes' ),
                                'description'       => esc_html__( 'You can additionally style H3 tags inside the theme options panel.', 'ut_shortcodes' ),
                                'param_name'        => 'info_font_weight',
                                'group'             => 'Font',
                                'value'             => array(
                                    esc_html__( 'Select Font Weight' , 'ut_shortcodes' ),
                                    100,
                                    200,
                                    300,
                                    400,
                                    500,
                                    600,
                                    700,
                                    800,
                                    900,
                                    
                                ),
                              ),
                            array(
                                'type'              => 'range_slider',
                                'heading'           => esc_html__( 'Description Letter Spacing', 'ut_shortcodes' ),
                                'param_name'        => 'info_letter_spacing',
                                'value'             => array(
                                    'default' => '0',
                                    'min'     => '-10',
                                    'max'     => '10',
                                    'step'    => '1',
                                    'unit'    => 'px'
                                ),
                                'group'             => 'Font'
                              ),
                            array(
                                'type'              => 'dropdown',
                                'heading'           => esc_html__( 'Description Text Transform', 'ut_shortcodes' ),
                                'param_name'        => 'info_text_transform',
                                'group'             => 'Font',
                                'value'             => array(
                                    esc_html__( 'Select Text Transform' , 'ut_shortcodes' ) => '',
                                    esc_html__( 'capitalize' , 'ut_shortcodes' ) => 'capitalize',
                                    esc_html__( 'uppercase', 'ut_shortcodes' ) => 'uppercase',
                                    esc_html__( 'lowercase', 'ut_shortcodes' ) => 'lowercase'                                    
                                ),
                              ),
                                                        
                            /* css */
                            array(
                                'type'              => 'css_editor',
                                'param_name'        => 'css',
                                'group'             => esc_html__( 'Design Options', 'ut_shortcodes' ),
                            ), 
                            array(
                                'type'              => 'textfield',
                                'heading'           => esc_html__( 'CSS Class', 'ut_shortcodes' ),
                                'description'       => esc_html__( 'Style particular content element differently - add a class name and refer to it in custom CSS.', 'ut_shortcodes' ),
                                'param_name'        => 'class',
                                'group'             => 'General'
                              )
                                                      
                            
                        )                        
                        
                    )
                
                ); /* end mapping */
                
            } 
        
        }
        
        function ut_create_shortcode( $atts, $content = NULL ) {
            
            extract( shortcode_atts( array (
                'color'                       => '',
                'info'                        => '',
                'info_align'                  => '',
                'info_position'               => 'above',
                'info_spacing'                => '',
                'info_color'                  => '',
                'info_font_size'              => '',
                'info_font_weight'            => '',
                'info_letter_spacing'         => '',
                'info_text_transform'         => '',
                'width'                       => '50',
                'speed'                       => '1000',
                'percentage_color'            => '',
                'percentage_bg_color'         => '',
                'percentage_bg_color_opacity' => '1',
                'animate_once'                => 'no',
                'css'                         => '',
                'class'                       => '',  
            ), $atts ) ); 
            
            // classes
            $classes   = array();
            $classes[] = $class;            
            $classes[] = 'ut-progress-bar-module-2';
            $classes[] = 'ut-progress-bar-percentage-digits-' . strlen((string)$width);
            
            if( $info_position == 'below' ) {
                $classes[] = 'ut-skill-name-below';    
            }
            
            // strip % if user has entered it
            $width = str_replace('%' , '' , $width); /* deprecated */
            
            /* inline css */
            $id = uniqid("ut_pb_");
            
            $css_style = '<style type="text/css" scoped>';
                
                if( $info_color ) {
                    $css_style .= '#' . $id . ' .ut-skill-name { color: ' . $info_color . '; }';  
                } 
            
                if( $info_align ) {
                    $css_style .= '#' . $id . ' .ut-skill-name { text-align: ' . $info_align . '; }';    
                }
            
                if( ( $info_spacing || $info_spacing == 0 ) && $info_position == 'above' ){
                    $css_style .= '#' . $id . ' .ut-skill-name { margin-bottom: ' . $info_spacing . 'px; }';
                }
            
                if( ( $info_spacing || $info_spacing == 0 ) && $info_position == 'below' ){
                    $css_style .= '#' . $id . ' .ut-skill-name { margin-top: ' . $info_spacing . 'px; }';
                }
            
                if( $info_font_size ) {
                    $css_style .= '#' . $id . ' .ut-skill-name { font-size: ' . $info_font_size . 'px; }';  
                } 
                
                if( $info_font_weight ) {
                    $css_style .= '#' . $id . ' .ut-skill-name { font-weight: ' . $info_font_weight . '; }';  
                } 
                
                if( $info_letter_spacing ) {
                    $css_style .= '#' . $id . ' .ut-skill-name { letter-spacing: ' . $info_letter_spacing . 'px; }';  
                } 
                
                if( $info_text_transform ) {
                    $css_style .= '#' . $id . ' .ut-skill-name { text-transform: ' . $info_text_transform . '; }';  
                } 
                
                if( $color && function_exists("ut_create_gradient_css") && ut_create_gradient_css( $color ) ) {
            
                    // add background image
                    $css_style .= ut_create_gradient_css( $color, '#' . $id . ' .ut-skill-progress-thin' ); 

                } elseif( $color )  {
                    
                    $css_style .= '#' . $id . ' .ut-skill-progress-thin { background: ' . $color . '; }';       
                    
                }
            
                if( $percentage_color ) {
                    $css_style .= '#' . $id . ' .ut-skill-tooltip { color: ' . $percentage_color . '; }';  
                }
            
                if( $percentage_bg_color )  {
                    
                    $css_style .= '#' . $id . ' .ut-skill-tooltip { background: rgba(' . ut_hex_to_rgb( $percentage_bg_color ) . ', ' . $percentage_bg_color_opacity . '); }';
                    $css_style .= '#' . $id . ' .ut-skill-tooltip::after { border-color: rgba(' . ut_hex_to_rgb( $percentage_bg_color ) . ', ' . $percentage_bg_color_opacity . ') transparent; }';       
                    
                }
                
            $css_style .= '</style>'; 
            
            /* start output */
            $output = '';
            
            /* add css */ 
            $output .= ut_minify_inline_css( $css_style );            
            
            $output .= '<div id="' . esc_attr( $id ) . '" class="' . esc_attr( implode( ' ', $classes ) ) . '">';
            
                if( !empty( $info ) && $info_position == 'above' ) {
                    $output .= '<h3 class="ut-skill-name">' . $info . '</h3>';
                }
                
                $output .= '<div class="ut-skill-bar-thin">';
                    
                    $output .= '<div class="ut-skill-progress-thin ut-skill-active" data-speed="' . esc_attr( $speed ) . '" data-animateonce="' . esc_attr( $animate_once ) . '" data-effecttype="skillbar" data-width="' . esc_attr( $width ) . '">';
                        
                        $output .= '<span class="ut-skill-tooltip">' . $width . '%</span>';
            
                    $output .= '</div>';
            
                $output .= '</div>';
            
                if( !empty( $info ) && $info_position == 'below' ) {
                    $output .= '<h3 class="ut-skill-name">' . $info . '</h3>';
                }
            
            $output .= '</div>';
                
            if( defined( 'WPB_VC_VERSION' ) ) { 
                
                return '<div class="wpb_content_element ' . apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, vc_shortcode_custom_css_class( $css, ' ' ), $this->shortcode, $atts ) . '">' . $output . '</div>'; 
            
            }
            
            return $output;
        
        }
            
    }

}

new UT_Probar_Thin;