/** * 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 }