class-wp-customize-color-control.php 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <?php
  2. /**
  3. * Customize API: WP_Customize_Color_Control class
  4. *
  5. * @package WordPress
  6. * @subpackage Customize
  7. * @since 4.4.0
  8. */
  9. /**
  10. * Customize Color Control class.
  11. *
  12. * @since 3.4.0
  13. *
  14. * @see WP_Customize_Control
  15. */
  16. class WP_Customize_Color_Control extends WP_Customize_Control {
  17. /**
  18. * Type.
  19. *
  20. * @access public
  21. * @var string
  22. */
  23. public $type = 'color';
  24. /**
  25. * Statuses.
  26. *
  27. * @access public
  28. * @var array
  29. */
  30. public $statuses;
  31. /**
  32. * Mode.
  33. *
  34. * @since 4.7.0
  35. * @access public
  36. * @var string
  37. */
  38. public $mode = 'full';
  39. /**
  40. * Constructor.
  41. *
  42. * @since 3.4.0
  43. * @uses WP_Customize_Control::__construct()
  44. *
  45. * @param WP_Customize_Manager $manager Customizer bootstrap instance.
  46. * @param string $id Control ID.
  47. * @param array $args Optional. Arguments to override class property defaults.
  48. */
  49. public function __construct( $manager, $id, $args = array() ) {
  50. $this->statuses = array( '' => __('Default') );
  51. parent::__construct( $manager, $id, $args );
  52. }
  53. /**
  54. * Enqueue scripts/styles for the color picker.
  55. *
  56. * @since 3.4.0
  57. */
  58. public function enqueue() {
  59. wp_enqueue_script( 'wp-color-picker' );
  60. wp_enqueue_style( 'wp-color-picker' );
  61. }
  62. /**
  63. * Refresh the parameters passed to the JavaScript via JSON.
  64. *
  65. * @since 3.4.0
  66. * @uses WP_Customize_Control::to_json()
  67. */
  68. public function to_json() {
  69. parent::to_json();
  70. $this->json['statuses'] = $this->statuses;
  71. $this->json['defaultValue'] = $this->setting->default;
  72. $this->json['mode'] = $this->mode;
  73. }
  74. /**
  75. * Don't render the control content from PHP, as it's rendered via JS on load.
  76. *
  77. * @since 3.4.0
  78. */
  79. public function render_content() {}
  80. /**
  81. * Render a JS template for the content of the color picker control.
  82. *
  83. * @since 4.1.0
  84. */
  85. public function content_template() {
  86. ?>
  87. <# var defaultValue = '#RRGGBB', defaultValueAttr = '',
  88. isHueSlider = data.mode === 'hue';
  89. if ( data.defaultValue && ! isHueSlider ) {
  90. if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
  91. defaultValue = '#' + data.defaultValue;
  92. } else {
  93. defaultValue = data.defaultValue;
  94. }
  95. defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
  96. } #>
  97. <label>
  98. <# if ( data.label ) { #>
  99. <span class="customize-control-title">{{{ data.label }}}</span>
  100. <# } #>
  101. <# if ( data.description ) { #>
  102. <span class="description customize-control-description">{{{ data.description }}}</span>
  103. <# } #>
  104. <div class="customize-control-content">
  105. <# if ( isHueSlider ) { #>
  106. <input class="color-picker-hue" type="text" data-type="hue" />
  107. <# } else { #>
  108. <input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
  109. <# } #>
  110. </div>
  111. </label>
  112. <?php
  113. }
  114. }