public function render_content()
{
$output = '';
$options = evolve_options();
$optionname = mb_substr($this->id, 13);
$typography_stored = $options[$optionname];
$value['id'] = $optionname;
$name = "evolve-theme[{$optionname}]";
$value = $this->value();
?>
<input style = 'display:none' class = 'typography-font' name =<?php
echo $name;
?>
<?php
$this->link();
?>
value = '' />
<!-- Font Size -->
<label>
<span class="customize-control-title"><?php
echo esc_html($this->label);
?>
</span>
<select class="t4p-typography t4p-typography-size">
<?php
for ($i = 9; $i < 71; $i++) {
$size = $i . 'px';
printf('<option value="%s" %s>%s</option>', esc_attr($size), selected($value['size'], $size, false), esc_attr($size));
?>
<?php
}
?>
</select>
</label >
<label >
<!-- Font Face -->
<?php
$faces = evolve_recognized_font_faces();
//print_r ($faces) ;
?>
<select class="t4p-typography t4p-typography-face">
<?php
foreach ($faces as $key => $face) {
printf('<option value="%s" %s>%s</option>', esc_attr($key), selected($value['face'], $key, false), esc_attr($face));
?>
<?php
}
?>
</select>
</label >
<label >
<!-- Font Weight -->
<?php
$styles = evolve_recognized_font_styles();
?>
<select class="t4p-typography t4p-typography-style">
<?php
foreach ($styles as $key => $style) {
printf('<option value="%s" %s>%s</option>', strtolower(esc_attr($style)), selected(strtolower($value['style']), strtolower($key), false), esc_attr($style));
?>
<?php
}
?>
</select>
<!-- Color -->
<!--
$output .= '<div id="' . esc_attr( $value['id'] ) . '_color_picker" class="colorSelector"><div style="' . esc_attr( 'background-color:' . $typography_stored['color'] ) . '"></div></div>';
$output .= '<input class="t4p-color t4p-typography t4p-typography-color" name="' . esc_attr( $option_name . '[' . $value['id'] . '][color]' ) . '" id="' . esc_attr( $value['id'] . '_color' ) . '" type="text" value="' . esc_attr( $typography_stored['color'] ) . '" />';
-->
</label >
<label >
<div id="" class="colorSelector"><div style="background:<?php
echo $value['color'];
?>
"></div></div>
<input style = 'width:80%;float:left;margin-left:10px;' class="t4p-typography-color" id="" type="text" value="<?php
echo $value['color'];
?>
">
</label>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.t4p-typography').change(function(){
var p = $(this).parent().parent();
set_json (p) ;
});
var set_json = function(p){
var size = p.find('.t4p-typography-size').val();
var face = p.find('.t4p-typography-face').val();
var style = p.find('.t4p-typography-style').val();
var color = p.find('.t4p-typography-color').val();
var json = '{"size":"'+size+'","face":"'+face+'","style":"'+style+'","color":"'+color+'"}';
p.find('input.typography-font').val(json);
p.find('input.typography-font').keyup();
};
$('.colorSelector').each(function(){
var Othis = this; //cache a copy of the this variable for use inside nested function
var initialColor = $(Othis).next('input').attr('value');
$(this).ColorPicker({
color: initialColor,
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
var p = $(Othis).parent ().parent () ;
set_json (p) ;
return false;
},
onChange: function (hsb, hex, rgb) {
$(Othis).children('div').css('backgroundColor', '#' + hex);
$(Othis).next('input').attr('value','#' + hex);
}
});
});
});
</script>
<style>
.colorpicker{z-index: 1111111111111111111;}
.t4p-typography{width:100%;}
</style>
<?php
}
public function render_content()
{
$output = '';
$options = evolve_options();
$optionname = mb_substr($this->id, 13);
$typography_stored = $options[$optionname];
$value['id'] = $optionname;
$name = "evolve-theme[{$optionname}]";
$value = $this->value();
?>
<!--This hidden input is important, do not remove-->
<input style='display:none' class='typography-font' name='<?php
echo $name;
?>
' <?php
$this->link();
?>
value='' />
<!-- Font Size -->
<label>
<span class="customize-control-title"><?php
echo esc_html($this->label);
?>
</span>
<select class="t4p-typography t4p-typography-size">
<?php
for ($i = 9; $i < 71; $i++) {
$size = $i . 'px';
printf('<option value="%s" %s>%s</option>', esc_attr($size), selected($value['size'], $size, false), esc_attr($size));
}
?>
</select>
</label >
<!-- Font Face -->
<label >
<?php
$faces = evolve_recognized_font_faces();
?>
<select class="t4p-typography t4p-typography-face">
<?php
foreach ($faces as $key => $face) {
printf('<option value="%s" %s>%s</option>', esc_attr($key), selected($value['face'], $key, false), esc_attr($face));
}
?>
</select>
</label >
<!-- Font Weight -->
<label >
<?php
$styles = evolve_recognized_font_styles();
?>
<select class="t4p-typography t4p-typography-style">
<?php
foreach ($styles as $key => $style) {
printf('<option value="%s" %s>%s</option>', strtolower(esc_attr($style)), selected(strtolower($value['style']), strtolower($key), false), esc_attr($style));
}
?>
</select>
</label>
<!--wpColorPicker input-->
<div style='margin-top:10px'></div>
<label>
<input class="t4p-typography-color" id="" type="text" value="<?php
echo $value['color'];
?>
">
</label>
<script type="text/javascript">
jQuery(document).ready(function($) {
//mod by Denzel, wpColorPicker option
var myOptions = {
//a callback to fire whenever the color changes to a valid color
change: function(event, ui){
//find the very grandparent of this set of options.
var p = $(this).parent().parent().parent().parent();
//run the set_json run to grab all values.
set_json(p);
}
};
//run wpColorPicker
$('.t4p-typography-color').wpColorPicker(myOptions);
//typography code by ddo
$('.t4p-typography').change(function(){
var p = $(this).parent().parent();
set_json (p) ;
});
//create a set_json function by ddo,
//this function grabs all the values of typography size, fontface, style, and color
//and insert back the data to input class='typography-font' as it's value, which I think will be pick up by WordPress customizer
var set_json = function(p){
var size = p.find('.t4p-typography-size').val();
var face = p.find('.t4p-typography-face').val();
var style = p.find('.t4p-typography-style').val();
var colorpicker = p.find('.t4p-typography-color');
//this is the colorpicker selected color.
var color = colorpicker.wpColorPicker('color');
//construct json variable
var json = '{"size":"'+size+'","face":"'+face+'","style":"'+style+'","color":"'+color+'"}';
//inset back json data as value to hidden input at line 67 above.
p.find('input.typography-font').val(json);
//manually trigger a keyup event on the hidden input, I think this will tigger WordPress customizer to pick up value.
p.find('input.typography-font').keyup();
};
});
</script>
<style>
.t4p-typography{width:100%;}
</style>
<?php
}
function evolve_sanitize_font_face($value)
{
$recognized = evolve_recognized_font_faces();
if (array_key_exists($value, $recognized)) {
return $value;
}
return apply_filters('evolve_default_font_face', current($recognized));
}
