createFontScript() public static method

Creates the Javascript for running the font option
Since: 1.4
public static createFontScript ( ) : void
return void
        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>";
        }
Exemplo n.º 2
0
		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>";
		}