/**
* Creates the Javascript for running the font option
*
* @return void
* @since 1.4
*/
public static function createFontScript()
{
if (!self::$firstLoad) {
return;
}
self::$firstLoad = false;
?>
<script>
jQuery(document).ready(function($) {
"use strict";
var _tf_select_font_throttle = null;
// Initialize color pickers
$('.tf-font .tf-font-sel-color, .tf-font .tf-font-sel-shadow-color').wpColorPicker({
change: function ( event, ui ) {
// update the preview, but throttle it to prevent fast loading
if ( _tf_select_font_throttle != null ) {
clearTimeout( _tf_select_font_throttle );
_tf_select_font_throttle = null;
}
var $this = $(this);
_tf_select_font_throttle = setTimeout( function() {
tf_select_font_update_preview( $this.parents('.tf-font:eq(0)'), true );
}, 300 );
}
});
// Initialize the option
$('.tf-font').each(function() {
// Update save field on change
$(this).find('select,.tf-font-sel-dark').change(function() {
tf_select_font_update_preview( $(this).parents('.tf-font:eq(0)'), true );
});
// Trigger for toggling light/dark preview backgrounds
$(this).find('.btn-dark').click(function() {
var darkInput = $(this).parent().find('.tf-font-sel-dark');
if ( darkInput.val() == '' ) {
darkInput.val('dark').trigger('change');
} else {
darkInput.val('').trigger('change');
}
})
// initialize preview
tf_select_font_update_preview( $(this), true );
// We have to do this after 1ms for the theme customizer, or else the field's value
// gets changed to a weird value
var $this = $(this);
setTimeout( function() {
tf_select_font_update_preview( $this, false )
}, 1 );
});
$('body.wp-customizer').on('click', function(e) {
$('.tf-font .wp-color-result').each(function() {
if ( $(this).hasClass('wp-picker-open') ) {
$(this).parents('label:eq(0)').addClass('tf-picker-open');
} else {
if ( $(this).parents('label:eq(0)').hasClass('tf-picker-open') ) {
$(this).parents('label:eq(0)').removeClass('tf-picker-open');
}
}
});
});
});
// Updates the option elements
function tf_select_font_update_preview( $container, doTrigger ) {
"use strict";
var $ = jQuery;
// Show / hide shadow fields
if ( $container.find(".tf-font-sel-location").val() == 'none'
|| $container.find('.tf-font-sel-location').parents('label:eq(0)').attr('data-visible') == 'false' ) {
$container.find(".tf-font-sel-distance").parents('label:eq(0)').fadeOut();
$container.find(".tf-font-sel-blur").parents('label:eq(0)').fadeOut();
$container.find(".tf-font-sel-shadow-color").parents('label:eq(0)').fadeOut();
$container.find(".tf-font-sel-opacity").parents('label:eq(0)').fadeOut();
} else {
$container.find(".tf-font-sel-distance").parents('label:eq(0)').fadeIn();
$container.find(".tf-font-sel-blur").parents('label:eq(0)').fadeIn();
$container.find(".tf-font-sel-shadow-color").parents('label:eq(0)').fadeIn();
$container.find(".tf-font-sel-opacity").parents('label:eq(0)').fadeIn();
}
var family = $container.find('.tf-font-sel-family').val();
// These are all our parameters
var params = {
'font-family': family,
'font-type': $container.find(".tf-font-sel-family option[value='" + family + "']").parent().attr('class'),
'color': $container.find(".tf-font-sel-color").val(),
'font-size': $container.find(".tf-font-sel-size").val(),
'font-weight': $container.find(".tf-font-sel-weight").val(),
'font-style': $container.find(".tf-font-sel-style").val(),
'line-height': $container.find(".tf-font-sel-height").val(),
'letter-spacing': $container.find(".tf-font-sel-spacing").val(),
'text-transform': $container.find(".tf-font-sel-transform").val(),
'font-variant': $container.find(".tf-font-sel-variant").val(),
'text-shadow-location': $container.find(".tf-font-sel-location").val(),
'text-shadow-distance': $container.find(".tf-font-sel-distance").val(),
'text-shadow-blur': $container.find(".tf-font-sel-blur").val(),
'text-shadow-color': $container.find(".tf-font-sel-shadow-color").val(),
'text-shadow-opacity': $container.find(".tf-font-sel-opacity").val(),
'dark': $container.find(".tf-font-sel-dark").val(),
'text': $container.find("iframe").attr('data-preview-text')
}
// Update preview
if ( $container.find('iframe').is(':not([data-visible=false])') ) {
$container.find('iframe').attr('src', '<?php
echo TitanFramework::getURL('iframe-font-preview.php?', __FILE__);
?>
' + $.param(params) );
}
// Update hidden save field
$container.find('.tf-for-saving').val(serialize(params));
if ( doTrigger ) {
$container.find('.tf-for-saving').trigger('change');
}
}
</script>
<?php
}
public function render_content()
{
$this->params['show_preview'] = false;
TitanFrameworkOptionFont::createFontScript();
?>
<div class='tf-font'>
<span class="customize-control-title"><?php
echo esc_html($this->label);
?>
</span>
<?php
// Get the current value and merge with defaults
$value = $this->value();
if (is_serialized($value)) {
$value = unserialize($value);
}
if (!is_array($value)) {
$value = array();
}
$value = array_merge(TitanFrameworkOptionFont::$defaultStyling, $value);
/*
* Create all the fields
*/
$visibilityAttrs = '';
if (!$this->params['show_font_family']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<div>
<label <?php
echo $visibilityAttrs;
?>
>
Font Family
<select class='tf-font-sel-family'>
<option value='inherit'>inherit</option>
<optgroup label="Web Safe Fonts" class='safe'>
<?php
foreach (TitanFrameworkOptionFont::$webSafeFonts as $family => $label) {
printf("<option value='%s'%s>%s</option>", $family, selected($value['font-family'], $family, false), $label);
}
?>
</optgroup>
<optgroup label="Google WebFonts" class='google'>
<?php
$allFonts = titan_get_googlefonts();
foreach ($allFonts as $key => $fontStuff) {
printf("<option value='%s'%s>%s</option>", esc_attr($fontStuff['name']), selected($value['font-family'], $fontStuff['name'], false), $fontStuff['name']);
}
?>
</optgroup>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_color']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Color
<input class='tf-font-sel-color' type="text" value="<?php
echo esc_attr($value['color']);
?>
" data-default-color="<?php
echo esc_attr($value['color']);
?>
"/>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_font_size']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Font Size
<select class='tf-font-sel-size'>
<option value='inherit'>inherit</option>
<?php
for ($i = 1; $i <= 150; $i++) {
printf("<option value='%s'%s>%s</option>", esc_attr($i . 'px'), selected($value['font-size'], $i . 'px', false), $i . 'px');
}
?>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_font_weight']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Font Weight
<select class='tf-font-sel-weight'>
<option value='inherit'>inherit</option>
<?php
$options = array('normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900');
foreach ($options as $option) {
printf("<option value='%s'%s>%s</option>", esc_attr($option), selected($value['font-weight'], $option, false), $option);
}
?>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_font_style']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Font Style
<select class='tf-font-sel-style'>
<?php
$options = array('normal', 'italic');
foreach ($options as $option) {
printf("<option value='%s'%s>%s</option>", esc_attr($option), selected($value['font-style'], $option, false), $option);
}
?>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_line_height']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Line Height
<select class='tf-font-sel-height'>
<?php
for ($i = 0.5; $i <= 3; $i += 0.1) {
printf("<option value='%s'%s>%s</option>", esc_attr($i . 'em'), selected($value['line-height'], $i . 'em', false), $i . 'em');
}
?>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_letter_spacing']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Letter Spacing
<select class='tf-font-sel-spacing'>
<option value='normal'>normal</option>
<?php
for ($i = -20; $i <= 20; $i++) {
printf("<option value='%s'%s>%s</option>", esc_attr($i . 'px'), selected($value['letter-spacing'], $i . 'px', false), $i . 'px');
}
?>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_text_transform']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Text Transform
<select class='tf-font-sel-transform'>
<?php
$options = array('none', 'capitalize', 'uppercase', 'lowercase');
foreach ($options as $option) {
printf("<option value='%s'%s>%s</option>", esc_attr($option), selected($value['text-transform'], $option, false), $option);
}
?>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_font_variant']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Font Variant
<select class='tf-font-sel-variant'>
<?php
$options = array('normal', 'small-caps');
foreach ($options as $option) {
printf("<option value='%s'%s>%s</option>", esc_attr($option), selected($value['font-variant'], $option, false), $option);
}
?>
</select>
</label>
<?php
$visibilityAttrs = '';
if (!$this->params['show_text_shadow']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<label <?php
echo $visibilityAttrs;
?>
>
Shadow Location
<select class='tf-font-sel-location'>
<?php
$options = array('none', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right');
foreach ($options as $option) {
printf("<option value='%s'%s>%s</option>", esc_attr($option), selected($value['text-shadow-location'], $option, false), $option);
}
?>
</select>
</label>
<label style='display: none'>
Shadow Distance
<select class='tf-font-sel-distance'>
<?php
for ($i = 0; $i <= 10; $i++) {
printf("<option value='%s'%s>%s</option>", esc_attr($i . 'px'), selected($value['text-shadow-distance'], $i . 'px', false), $i . 'px');
}
?>
</select>
</label>
<label style='display: none'>
Shadow Blur
<select class='tf-font-sel-blur'>
<?php
$options = array('0px', '1px', '2px', '3px', '4px', '5px', '10px', '20px');
foreach ($options as $option) {
printf("<option value='%s'%s>%s</option>", esc_attr($option), selected($value['text-shadow-blur'], $option, false), $option);
}
?>
</select>
</label>
<label style='display: none'>
Shadow Color
<input class="tf-font-sel-shadow-color" type="text" value="<?php
echo esc_attr($value['text-shadow-color']);
?>
" data-default-color="<?php
echo esc_attr($value['text-shadow-color']);
?>
"/>
</label>
<label style='display: none'>
Shadow Opacity
<select class='tf-font-sel-opacity'>
<?php
$options = array('1', '0.9', '0.8', '0.7', '0.6', '0.5', '0.4', '0.3', '0.2', '0.1', '0');
foreach ($options as $option) {
printf("<option value='%s'%s>%s</option>", esc_attr($option), selected($value['text-shadow-opacity'], $option, false), $option);
}
?>
</select>
</label>
</div>
<?php
$visibilityAttrs = '';
if (!$this->params['show_preview']) {
$visibilityAttrs = "data-visible='false' style='display: none'";
}
?>
<div <?php
echo $visibilityAttrs;
?>
>
<iframe></iframe>
<i class='dashicons dashicons-admin-appearance btn-dark'></i>
<input type='hidden' class='tf-font-sel-dark' value='<?php
echo esc_attr($value['dark'] ? 'dark' : '');
?>
'/>
</div>
<?php
if (!is_serialized($value)) {
$value = serialize($value);
}
?>
<input type='hidden' class='tf-for-saving' <?php
$this->link();
?>
value='<?php
echo esc_attr($value);
?>
'/>
</div>
<?php
echo "<p class='description'>{$this->description}</p>";
}