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'> <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'> <?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'> <?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>"; }
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'> <optgroup label="Web Safe Fonts" class='safe'> <?php $options = array( 'Arial, Helvetica, sans-serif' => 'Arial', '"Arial Black", Gadget, sans-serif' => 'Arial Black', '"Comic Sans MS", cursive, sans-serif' => 'Comic Sans', '"Courier New", Courier, monospace' => 'Courier New', 'Georgia, serif' => 'Geogia', 'Impact, Charcoal, sans-serif' => 'Impact', '"Lucida Console", Monaco, monospace' => 'Lucida Console', '"Lucida Sans Unicode", "Lucida Grande", sans-serif' => 'Lucida Sans', '"Palatino Linotype", "Book Antiqua", Palatino, serif' => 'Palatino', 'Tahoma, Geneva, sans-serif' => 'Tahoma', '"Times New Roman", Times, serif' => 'Times New Roman', '"Trebuchet MS", Helvetica, sans-serif' => 'Trebuchet', 'Verdana, Geneva, sans-serif' => 'Verdana', ); foreach ( $options 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> <label> Font Size <select class='tf-font-sel-size'> <?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'> <?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 = .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='fa fa-adjust 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>"; }