Customize Control: Color Palette

customize-control-palette.php

<?php
/**
 * Customize control class to handle color palettes.
 *
 * @package    Hybrid
 * @subpackage Classes
 * @author     Justin Tadlock <justin@justintadlock.com>
 * @copyright  Copyright (c) 2008 - 2015, Justin Tadlock
 * @link       http://themehybrid.com/hybrid-core
 * @license    http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 */

class Hybrid_Customize_Control_Palette extends WP_Customize_Control {

	/**
	 * The type of customize control being rendered.
	 *
	 * @since 3.0.0
	 * @var   string
	 */
	public $type = 'palette';

	/**
	 * Displays the control content.
	 *
	 * @since  3.0.0
	 * @access public
	 * @return void
	 */
	public function render_content() {

		/* If no choices are provided, bail. */
		if ( empty( $this->choices ) )
			return; ?>

		<?php if ( !empty( $this->label ) ) : ?>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
		<?php endif; ?>

		<?php if ( !empty( $this->description ) ) : ?>
			<span class="description customize-control-description"><?php echo $this->description; ?></span>
		<?php endif; ?>

		<div id="<?php echo esc_attr( "wrap-{$this->type}-{$this->id}" ); ?>">

			<?php foreach ( $this->choices as $value => $palette ) : ?>

				<label>
					<input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( "_customize-{$this->type}-{$this->id}" ); ?>" id="<?php echo esc_attr( "{$this->id}-{$value}" ); ?>" <?php $this->link(); ?> <?php checked( $this->value(), $value ); ?> />

					<span class="palette-label"><?php echo esc_html( $palette['label'] ); ?></span>

					<?php $width = 100 / count( $palette['colors'] ); ?>

					<div class="palette-block">

					<?php foreach ( $palette['colors'] as $color ) : ?>

						<span class="palette-color" style="background-color: <?php echo esc_attr( maybe_hash_hex_color( $color ) ); ?>">&nbsp;</span>

					<?php endforeach; ?>

					</div>
				</label>

			<?php endforeach; ?>
		</div>

		<script type="text/javascript">
			jQuery( document ).ready( function() {

				jQuery( '#<?php echo esc_attr( "wrap-{$this->type}-{$this->id}" ); ?> input:radio:checked' ).parent( 'label' ).addClass( 'selected' );

				jQuery( '#<?php echo esc_attr( "wrap-{$this->type}-{$this->id}" ); ?> input:radio' ).change(
					function() {
						jQuery( '#<?php echo esc_attr( "wrap-{$this->type}-{$this->id}" ); ?> label.selected' ).removeClass( 'selected' );
						jQuery( this ).parent( 'label' ).addClass( 'selected' );
					}
				);
			} );
		</script>
	<?php }

	/**
	 * Enqueue scripts/styles.
	 *
	 * @since  3.0.0
	 * @access public
	 * @return void
	 */
	public function enqueue() {
		add_action( 'customize_controls_print_styles', array( $this, 'print_styles' ) );
	}

	/**
	 * Outputs custom styles to give the selected palette a visible border.
	 *
	 * @note Add to customize-controls.css.
	 *
	 * @since  3.0.0
	 * @access public
	 * @return void
	 */
	public function print_styles() { ?>

		<style type="text/css" id="hybrid-customize-palette-css">
			.customize-control-palette label { display: block; padding: 5px 10px; }
			.customize-control-palette label.selected { padding-bottom: 10px; background-color: #ddd; }
			.customize-control-palette .palette-label { line-height: 28px; }
			.customize-control-palette .palette-block { display: table; width: 100%; height: 45px; }
			.customize-control-palette .palette-color { display: table-cell; height: 100%; }
		</style>
	<?php }
}