Skip to content

Instantly share code, notes, and snippets.

@rajeebbanstola
Created October 4, 2016 10:36
Show Gist options
  • Save rajeebbanstola/8e5eb9e2eb171d740df2f5bdf886a722 to your computer and use it in GitHub Desktop.
Save rajeebbanstola/8e5eb9e2eb171d740df2f5bdf886a722 to your computer and use it in GitHub Desktop.
Simple Color Palette Control
<?php
class Flash_Color_Palette_Control extends WP_Customize_Control {
public function render_content() {
if ( empty( $this->choices ) )
return;
$name = '_customize-radio-' . $this->id;
?>
<style>
#flash-palette-container .flash-radio-palette {
border: 3px solid #DEDEDE;
margin: 0 5px 5px 0;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#flash-palette-container .flash-radio-palette-selected {
border: 3px solid #AAA;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
input[type=checkbox]:before {
content: '';
margin: -3px 0 0 -4px;
}
span.single-color {
display: inline-block;
width: 40px;
height: 20px;
}
</style>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<ul class="controls" id = 'flash-palette-container'>
<?php
foreach ( $this->choices as $value => $label ) :
$class = ($this->value() == $value)?'flash-radio-palette-selected flash-radio-palette':'flash-radio-palette';
?>
<li class="single-palette">
<label>
<input <?php $this->link(); ?>style = 'display:none' type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> />
<div class="palette-bar <?php echo $class; ?>">
<?php
foreach($label as $palette){ ?>
<span class="single-color" style="background: <?php echo $palette; ?>"></span>
<?php
}
?>
</div>
</label>
</li>
<?php
endforeach;
?>
</ul>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.controls#flash-palette-container li div').click(function(){
$('.controls#flash-palette-container li').each(function(){
$(this).find('div.palette-bar').removeClass ('flash-radio-palette-selected') ;
});
$(this).addClass ('flash-radio-palette-selected') ;
});
});
</script>
<?php
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment