Ejemplo n.º 1
0
    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 
    }
Ejemplo n.º 2
0
    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 
    }
Ejemplo n.º 3
0
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));
}