<?php if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access directly.

/**

 *

 * Field: slider

 *

 * @since 1.0.0

 * @version 1.0.0

 *

 */

if ( ! class_exists( 'CGPS_Field_slider' ) ) {

  class CGPS_Field_slider extends CGPS_Fields {



    public function __construct( $field, $value = '', $unique = '', $where = '', $parent = '' ) {

      parent::__construct( $field, $value, $unique, $where, $parent );

    }



    public function render() {



      $args = wp_parse_args( $this->field, array(

        'max'  => 100,

        'min'  => 0,

        'step' => 1,

        'unit' => '',

      ) );



      $is_unit = ( ! empty( $args['unit'] ) ) ? ' cgps--is-unit' : '';



      echo $this->field_before();



      echo '<div class="cgps--wrap">';

      echo '<div class="cgps-slider-ui"></div>';

      echo '<div class="cgps--input">';

      echo '<input type="number" name="'. esc_attr( $this->field_name() ) .'" value="'. esc_attr( $this->value ) .'"'. $this->field_attributes( array( 'class' => 'cgps-input-number'. esc_attr( $is_unit ) ) ) .' data-min="'. esc_attr( $args['min'] ) .'" data-max="'. esc_attr( $args['max'] ) .'" data-step="'. esc_attr( $args['step'] ) .'" step="any" />';

      echo ( ! empty( $args['unit'] ) ) ? '<span class="cgps--unit">'. esc_attr( $args['unit'] ) .'</span>' : '';

      echo '</div>';

      echo '</div>';



      echo $this->field_after();



    }



    public function enqueue() {



      if ( ! wp_script_is( 'jquery-ui-slider' ) ) {

        wp_enqueue_script( 'jquery-ui-slider' );

      }



    }



    public function output() {



      $output    = '';

      $elements  = ( is_array( $this->field['output'] ) ) ? $this->field['output'] : array_filter( (array) $this->field['output'] );

      $important = ( ! empty( $this->field['output_important'] ) ) ? '!important' : '';

      $mode      = ( ! empty( $this->field['output_mode'] ) ) ? $this->field['output_mode'] : 'width';

      $unit      = ( ! empty( $this->field['unit'] ) ) ? $this->field['unit'] : 'px';



      if ( ! empty( $elements ) && isset( $this->value ) && $this->value !== '' ) {

        foreach ( $elements as $key_property => $element ) {

          if ( is_numeric( $key_property ) ) {

            if ( $mode ) {

              $output = implode( ',', $elements ) .'{'. $mode .':'. $this->value . $unit . $important .';}';

            }

            break;

          } else {

            $output .= $element .'{'. $key_property .':'. $this->value . $unit . $important .'}';

          }

        }

      }



      $this->parent->output_css .= $output;



      return $output;



    }



  }

}

