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
}
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
}
/**
* Generates the options fields that are used in the form.
*/
function evolve_fields()
{
global $allowedtags;
$evolve_settings = get_option('evolve');
// Get the theme name so we can display it up top
$themename = wp_get_theme();
$themename = $themename['Name'];
// Gets the unique option id
if (isset($evolve_settings['id'])) {
$option_name = $evolve_settings['id'];
} else {
$option_name = 'evolve';
}
$settings = get_option($option_name);
$options = evolve_options();
$counter = 0;
$menu = '';
$output = '';
foreach ($options as $value) {
$value['type'] = isset($value['type']) ? $value['type'] : '';
$counter++;
$val = '';
$select_value = '';
$checked = '';
// Wrap all options
if ($value['type'] != "heading" && $value['type'] != "info") {
// Keep all ids lowercase with no spaces
$value['id'] = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($value['id']));
$id = 'section-' . $value['id'];
$class = 'section ';
if (isset($value['type'])) {
$class .= ' section-' . $value['type'];
}
if (isset($value['class'])) {
$class .= ' ' . $value['class'];
}
$output .= '<div id="' . esc_attr($id) . '" class="' . esc_attr($class) . '">' . "\n";
if ($value['type'] == "open-tab" || $value['type'] == "close-tab") {
} else {
$output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n";
}
$output .= '<div class="option">' . "\n" . '<div class="controls">' . "\n";
}
// Set default value to $val
if (isset($value['std'])) {
$val = $value['std'];
}
// If the option is already saved, ovveride $val
if ($value['type'] != 'heading' && $value['type'] != 'info') {
if (isset($settings[$value['id']])) {
$val = $settings[$value['id']];
// Striping slashes of non-array options
if (!is_array($val)) {
$val = stripslashes($val);
}
}
}
// If there is a description save it for labels
$explain_value = '';
if (isset($value['desc'])) {
$explain_value = $value['desc'];
}
switch ($value['type']) {
// Basic text input
case 'text':
$output .= '<input id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" type="text" value="' . esc_attr($val) . '" />';
break;
// Textarea
// Textarea
case 'textarea':
$cols = '8';
$ta_value = '';
if (isset($value['options'])) {
$ta_options = $value['options'];
if (isset($ta_options['cols'])) {
$cols = $ta_options['cols'];
} else {
$cols = '8';
}
}
$val = stripslashes($val);
$output .= '<textarea id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" cols="' . esc_attr($cols) . '" rows="8">' . esc_textarea($val) . '</textarea>';
break;
// Select Box
// Select Box
case $value['type'] == 'select':
$output .= '<select class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '">';
foreach ($value['options'] as $key => $option) {
$selected = '';
if ($val != '') {
if ($val == $key) {
$selected = ' selected="selected"';
}
}
$output .= '<option' . $selected . ' value="' . esc_attr($key) . '">' . esc_html($option) . '</option>';
}
$output .= '</select>';
break;
// Radio Box
// Radio Box
case "radio":
$name = $option_name . '[' . $value['id'] . ']';
foreach ($value['options'] as $key => $option) {
$id = $option_name . '-' . $value['id'] . '-' . $key;
$output .= '<input class="of-input of-radio" type="radio" name="' . esc_attr($name) . '" id="' . esc_attr($id) . '" value="' . esc_attr($key) . '" ' . checked($val, $key, false) . ' /><label for="' . esc_attr($id) . '">' . esc_html($option) . '</label>';
}
break;
// Image Selectors
// Image Selectors
case "images":
$name = $option_name . '[' . $value['id'] . ']';
foreach ($value['options'] as $key => $option) {
$selected = '';
$checked = '';
if ($val != '') {
if ($val == $key) {
$selected = ' t4p-radio-img-selected';
$checked = ' checked="checked"';
}
}
$output .= '<input type="radio" id="' . esc_attr($value['id'] . '_' . $key) . '" class="t4p-radio-img-radio" value="' . esc_attr($key) . '" name="' . esc_attr($name) . '" ' . $checked . ' />';
$output .= '<div class="t4p-radio-img-label">' . esc_html($key) . '</div>';
$output .= '<img src="' . esc_url($option) . '" alt="' . $option . '" class="t4p-radio-img-img' . $selected . '" onclick="document.getElementById(\'' . esc_attr($value['id'] . '_' . $key) . '\').checked=true;" />';
}
break;
// Checkbox
// Checkbox
case "checkbox":
$output .= '<input id="' . esc_attr($value['id']) . '" class="checkbox t4p-input" type="checkbox" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" ' . checked($val, 1, false) . ' />';
$output .= '<div class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</div>';
break;
// Multicheck
// Multicheck
case "multicheck":
foreach ($value['options'] as $key => $option) {
$checked = '';
$label = $option;
$option = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($key));
$id = $option_name . '-' . $value['id'] . '-' . $option;
$name = $option_name . '[' . $value['id'] . '][' . $option . ']';
if (isset($val[$option])) {
$checked = checked($val[$option], 1, false);
}
$output .= '<input id="' . esc_attr($id) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($name) . '" ' . $checked . ' /><label for="' . esc_attr($id) . '">' . esc_html($label) . '</label>';
}
break;
// Color picker
// Color picker
case "color":
$output .= '<div id="' . esc_attr($value['id'] . '_picker') . '" class="colorSelector"><div style="' . esc_attr('background-color:' . $val) . '"></div></div>';
$output .= '<input class="t4p-color" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '" type="text" value="' . esc_attr($val) . '" />';
break;
// Uploader
// Uploader
case "upload":
$output .= evolve_Framework_Media_Uploader::evolve_uploader($value['id'], $val, null);
break;
// Typography
// Typography
case 'typography':
$typography_stored = $val;
// Font Size
$output .= '<select class="t4p-typography t4p-typography-size" name="' . esc_attr($option_name . '[' . $value['id'] . '][size]') . '" id="' . esc_attr($value['id'] . '_size') . '">';
for ($i = 9; $i < 71; $i++) {
$size = $i . 'px';
$output .= '<option value="' . esc_attr($size) . '" ' . selected($typography_stored['size'], $size, false) . '>' . esc_html($size) . '</option>';
}
$output .= '</select>';
// Font Face
$output .= '<select class="t4p-typography t4p-typography-face" name="' . esc_attr($option_name . '[' . $value['id'] . '][face]') . '" id="' . esc_attr($value['id'] . '_face') . '">';
$faces = evolve_recognized_font_faces1();
// $faces = $typography_mixed_fonts;
foreach ($faces as $key => $face) {
$output .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['face'], $key, false) . '>' . esc_html($face) . '</option>';
}
$faces2 = evolve_recognized_font_faces2();
// $faces = $typography_mixed_fonts;
$output .= '<optgroup label="----- Google Font ------">';
foreach ($faces2 as $key => $face2) {
$output .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['face'], $key, false) . '>' . esc_html($face2) . '</option>';
}
$output .= '</optgroup>';
$output .= '</select>';
// Font Weight
$output .= '<select class="t4p-typography t4p-typography-style" name="' . $option_name . '[' . $value['id'] . '][style]" id="' . $value['id'] . '_style">';
/* Font Style */
$styles = evolve_recognized_font_styles();
foreach ($styles as $key => $style) {
$output .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['style'], $key, false) . '>' . $style . '</option>';
}
$output .= '</select>';
// Font 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']) . '" />';
break;
// Background
// Background
case 'background':
$background = $val;
// Background Color
$output .= '<div id="' . esc_attr($value['id']) . '_color_picker" class="colorSelector"><div style="' . esc_attr('background-color:' . $background['color']) . '"></div></div>';
$output .= '<input class="of-color of-background of-background-color" name="' . esc_attr($option_name . '[' . $value['id'] . '][color]') . '" id="' . esc_attr($value['id'] . '_color') . '" type="text" value="' . esc_attr($background['color']) . '" />';
// Background Image - New AJAX Uploader using Media Library
if (!isset($background['image'])) {
$background['image'] = '';
}
$output .= evolve_Framework_Media_Uploader::evolve_uploader($value['id'], $background['image'], null, esc_attr($option_name . '[' . $value['id'] . '][image]'));
$class = 'of-background-properties';
if ('' == $background['image']) {
$class .= ' hide';
}
$output .= '<div class="' . esc_attr($class) . '">';
// Background Repeat
$output .= '<select class="of-background of-background-repeat" name="' . esc_attr($option_name . '[' . $value['id'] . '][repeat]') . '" id="' . esc_attr($value['id'] . '_repeat') . '">';
$repeats = evolve_recognized_background_repeat();
foreach ($repeats as $key => $repeat) {
$output .= '<option value="' . esc_attr($key) . '" ' . selected($background['repeat'], $key, false) . '>' . esc_html($repeat) . '</option>';
}
$output .= '</select>';
// Background Position
$output .= '<select class="of-background of-background-position" name="' . esc_attr($option_name . '[' . $value['id'] . '][position]') . '" id="' . esc_attr($value['id'] . '_position') . '">';
$positions = evolve_recognized_background_position();
foreach ($positions as $key => $position) {
$output .= '<option value="' . esc_attr($key) . '" ' . selected($background['position'], $key, false) . '>' . esc_html($position) . '</option>';
}
$output .= '</select>';
// Background Attachment
$output .= '<select class="of-background of-background-attachment" name="' . esc_attr($option_name . '[' . $value['id'] . '][attachment]') . '" id="' . esc_attr($value['id'] . '_attachment') . '">';
$attachments = evolve_recognized_background_attachment();
foreach ($attachments as $key => $attachment) {
$output .= '<option value="' . esc_attr($key) . '" ' . selected($background['attachment'], $key, false) . '>' . esc_html($attachment) . '</option>';
}
$output .= '</select>';
$output .= '</div>';
break;
// Info
// Info
case "info":
$class = 'section';
if (isset($value['type'])) {
$class .= ' section-' . $value['type'];
}
if (isset($value['class'])) {
$class .= ' ' . $value['class'];
}
$output .= '<div class="' . esc_attr($class) . '">' . "\n";
if (isset($value['name'])) {
$output .= '<h3 class="heading">' . esc_html($value['name']) . '</h3>' . "\n";
}
if ($value['desc']) {
$output .= apply_filters('evolve_sanitize_info', $value['desc']) . "\n";
}
$output .= '<div class="clear"></div></div>' . "\n";
break;
// Heading
// Heading
case "heading":
if ($counter >= 2) {
$output .= '</div>' . "\n";
}
$jquery_click_hook = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($value['name']));
$jquery_click_hook = "section-" . $jquery_click_hook;
$menu .= '<a id="' . esc_attr($jquery_click_hook) . '-tab" class="nav-tab" title="' . esc_attr($value['name']) . '" href="' . esc_attr('#' . $jquery_click_hook) . '">' . esc_html($value['name']) . '</a>';
$output .= '<div class="group" id="' . esc_attr($jquery_click_hook) . '">';
break;
// Backup
// Backup
case "backup":
$output .= 'Please visit <a href="' . admin_url() . 'themes.php?page=evolve-options-backup">this page</a> to import / export your theme options';
break;
case "open-tab":
$output .= '<div id="' . $value['id'] . '">';
break;
case "close-tab":
$output .= '<br /></div>';
break;
}
if ($value['type'] != "heading" && $value['type'] != "info") {
if ($value['type'] != "checkbox") {
$output .= '<br/>';
}
$output .= '</div>';
if ($value['type'] != "checkbox") {
$output .= '<div class="explain">' . wp_kses($explain_value, $allowedtags) . '</div>' . "\n";
}
$output .= '<div class="clear"></div></div></div>' . "\n";
}
}
$output .= '</div>';
return array($output, $menu);
}
function evolve_sanitize_font_style($value)
{
$recognized = evolve_recognized_font_styles();
if (array_key_exists($value, $recognized)) {
return $value;
}
return apply_filters('evolve_default_font_style', current($recognized));
}