ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / sothebankuab.com / wp-content / themes / sinatra / inc / customizer / controls / typography

<?php
/**
 * Sinatra Customizer custom typography control class.
 *
 * @package     Sinatra
 * @author      Sinatra Team <hello@sinatrawp.com>
 * @since       1.0.0
 */

/**
 * Do not allow direct script access.
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! class_exists( 'Sinatra_Customizer_Control_Typography' ) ) :
	/**
	 * Sinatra Customizer custom typography control class.
	 */
	class Sinatra_Customizer_Control_Typography extends Sinatra_Customizer_Control {

/**
		 * The control type.
		 *
		 * @var string
		 */
		public $type = 'sinatra-typography';

/**
		 * The control type.
		 *
		 * @var string
		 */
		public $display = array();

/**
		 * Set the default typography options.
		 *
		 * @since 1.0.8
		 * @param WP_Customize_Manager $manager Customizer bootstrap instance.
		 * @param string               $id      Control ID.
		 * @param array                $args    Default parent's arguments.
		 */
		public function __construct( $manager, $id, $args = array() ) {

$this->display = array(
				'font-family'     => array(),
				'font-subsets'    => array(),
				'font-weight'     => array(),
				'font-style'      => array(),
				'text-transform'  => array(),
				'letter-spacing'  => array(),
				'text-decoration' => array(),
				'font-size'       => array(),
				'line-height'     => array(),
			);

parent::__construct( $manager, $id, $args );
		}

/**
		 * Enqueue control related scripts/styles.
		 *
		 * @access public
		 */
		public function enqueue() {

parent::enqueue();

wp_localize_script(
				$this->type . '-js',
				'sinatra_typography_vars',
				array(
					'fonts'   => sinatra()->fonts->get_fonts(),
					'default' => sinatra()->fonts->get_default_system_font(),
				)
			);

// Script debug.
			$sinatra_suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';

/**
			 * Enqueue select2 stylesheet.
			 */
			wp_enqueue_style(
				'sinatra-select2-style',
				SINATRA_THEME_URI . '/inc/admin/assets/css/select2' . $sinatra_suffix . '.css',
				false,
				SINATRA_THEME_VERSION,
				'all'
			);

/**
			 * Enqueue select2 script.
			 */
			wp_enqueue_script(
				'sinatra-select2-js',
				SINATRA_THEME_URI . '/inc/admin/assets/js/libs/select2' . $sinatra_suffix . '.js',
				array( 'jquery' ),
				SINATRA_THEME_VERSION,
				true
			);
		}

/**
		 * Refresh the parameters passed to the JavaScript via JSON.
		 *
		 * @see WP_Customize_Control::to_json()
		 */
		public function to_json() {
			parent::to_json();

$this->json['display'] = $this->display;

$this->json['l10n'] = array(
				'advanced'        => esc_html__( 'Advanced', 'sinatra' ),
				'font-family'     => esc_html__( 'Font Family', 'sinatra' ),
				'font-subsets'    => esc_html__( 'Languages', 'sinatra' ),
				'font-weight'     => esc_html__( 'Weight', 'sinatra' ),
				'font-size'       => esc_html__( 'Size', 'sinatra' ),
				'font-style'      => esc_html__( 'Style', 'sinatra' ),
				'text-transform'  => esc_html__( 'Transform', 'sinatra' ),
				'text-decoration' => esc_html__( 'Decoration', 'sinatra' ),
				'line-height'     => esc_html__( 'Line Height', 'sinatra' ),
				'letter-spacing'  => esc_html__( 'Letter Spacing', 'sinatra' ),
				'inherit'         => esc_html__( 'Inherit', 'sinatra' ),
				'default'         => esc_html__( 'Default System Font', 'sinatra' ),
				'weights'         => array(
					'inherit'   => esc_html__( 'Inherit', 'sinatra' ),
					'100'       => esc_html__( 'Thin 100', 'sinatra' ),
					'100italic' => esc_html__( 'Thin 100 Italic', 'sinatra' ),
					'200'       => esc_html__( 'Extra-Thin 200', 'sinatra' ),
					'200italic' => esc_html__( 'Extra-Thin 200 Italic', 'sinatra' ),
					'300'       => esc_html__( 'Light 300', 'sinatra' ),
					'300italic' => esc_html__( 'Light 300 Italic', 'sinatra' ),
					'400'       => esc_html__( 'Normal 400', 'sinatra' ),
					'400italic' => esc_html__( 'Normal 400 Italic', 'sinatra' ),
					'500'       => esc_html__( 'Medium 500', 'sinatra' ),
					'500italic' => esc_html__( 'Medium 500 Italic', 'sinatra' ),
					'600'       => esc_html__( 'Semi-Bold 600', 'sinatra' ),
					'600italic' => esc_html__( 'Semi-Bold 600 Italic', 'sinatra' ),
					'700'       => esc_html__( 'Bold 700', 'sinatra' ),
					'700italic' => esc_html__( 'Bold 700 Italic', 'sinatra' ),
					'800'       => esc_html__( 'Extra-Bold 800', 'sinatra' ),
					'800italic' => esc_html__( 'Extra-Bold 800 Italic', 'sinatra' ),
					'900'       => esc_html__( 'Black 900', 'sinatra' ),
					'900italic' => esc_html__( 'Black 900 Italic', 'sinatra' ),
				),
				'subsets'         => sinatra()->fonts->get_google_font_subsets(),
				'transforms'      => array(
					'inherit'    => esc_html__( 'Inherit', 'sinatra' ),
					'uppercase'  => esc_html__( 'Uppercase', 'sinatra' ),
					'lowercase'  => esc_html__( 'Lowercase', 'sinatra' ),
					'capitalize' => esc_html__( 'Capitalize', 'sinatra' ),
					'none'       => esc_html__( 'None', 'sinatra' ),
				),
				'decorations'     => array(
					'inherit'      => esc_html__( 'Inherit', 'sinatra' ),
					'underline'    => esc_html__( 'Underline', 'sinatra' ),
					'overline'     => esc_html__( 'Overline', 'sinatra' ),
					'line-through' => esc_html__( 'Line Through', 'sinatra' ),
					'none'         => esc_html__( 'None', 'sinatra' ),
				),
				'styles'          => array(
					'inherit' => esc_html__( 'Inherit', 'sinatra' ),
					'normal'  => esc_html__( 'Normal', 'sinatra' ),
					'italic'  => esc_html__( 'Italic', 'sinatra' ),
					'oblique' => esc_html__( 'Oblique', 'sinatra' ),
				),
			);

$default_units = array(
				'font-size'      => array(
					array(
						'id'   => 'px',
						'name' => 'px',
						'min'  => 8,
						'max'  => 50,
						'step' => 1,
					),
					array(
						'id'   => 'em',
						'name' => 'em',
						'min'  => 0.5,
						'max'  => 3.5,
						'step' => 0.01,
					),
					array(
						'id'   => 'rem',
						'name' => 'rem',
						'min'  => 0.5,
						'max'  => 3.5,
						'step' => 0.01,
					),
				),
				'letter-spacing' => array(
					array(
						'id'   => 'px',
						'name' => 'px',
						'min'  => -10,
						'max'  => 10,
						'step' => 1,
					),
				),
				'line-height'    => array(
					array(
						'id'   => '',
						'name' => '',
						'min'  => 1,
						'max'  => 10,
						'step' => 0.1,
					),
				),
			);

$this->json['units'] = array();

foreach ( array( 'font-size', 'letter-spacing', 'line-height' ) as $key ) {
				if ( isset( $this->display[ $key ] ) && isset( $this->display[ $key ]['unit'] ) ) {
					$this->json['units'][ $key ] = $this->display[ $key ]['unit'];
				}
			}

$this->json['units'] = wp_parse_args( $this->json['units'], $default_units );

$this->json['responsive'] = array(
				'desktop' => array(
					'title' => esc_html__( 'Desktop', 'sinatra' ),
					'icon'  => 'dashicons dashicons-desktop',
				),
				'tablet'  => array(
					'title' => esc_html__( 'Tablet', 'sinatra' ),
					'icon'  => 'dashicons dashicons-tablet',
				),
				'mobile'  => array(
					'title' => esc_html__( 'Mobile', 'sinatra' ),
					'icon'  => 'dashicons dashicons-smartphone',
				),
			);
		}

/**
		 * An Underscore (JS) template for this control's content (but not its container).
		 *
		 * Class variables for this control class are available in the `data` JS object;
		 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
		 *
		 * @see WP_Customize_Control::print_template()
		 */
		protected function content_template() {
			?>
			<div class="sinatra-typography-wrapper sinatra-popup-options sinatra-control-wrapper">

<div class="sinatra-typography-heading">
					<# if ( data.label ) { #>
						<div class="customize-control-title">
							<span>{{{ data.label }}}</span>

<# if ( data.description ) { #>
								<i class="sinatra-info-icon">
									<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle">
										<circle cx="12" cy="12" r="10"></circle>
										<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
										<line x1="12" y1="17" x2="12" y2="17"></line>
									</svg>
									<span class="sinatra-tooltip">{{{ data.description }}}</span>
								</i>
							<# } #>
					</div>
					<# } #>
				</div>

<# if ( 'font-family' in data.display ) { #>
						
						<div class="sinatra-select-wrapper sinatra-typography-font-family">
							<label for="font-family-{{ data.id }}">{{{ data.l10n['font-family'] }}}</label>
							<select data-option="font-family" id="font-family-{{ data.id }}" data-default="{{ data.default['font-family'] }}">
								<option value="{{ data.value['font-family'] }}" selected="selected">
									<# if ( 'default' === data.value['font-family'] ) { #>
										{{{ data.l10n['default'] }}}
									<# } else if ( 'inherit' === data.value['font-family'] ) { #>
										{{{ data.l10n['inherit'] }}}
									<# } else { #>
										{{{ data.value['font-family'] }}}
									<# } #>
								</option> 
							</select>
						</div>
					<# } #>

<# if ( 'font-subsets' in data.display ) { #>
						
						<div class="sinatra-select-wrapper sinatra-typography-font-subsets">
							<label for="font-subsets-{{ data.id }}">{{{ data.l10n['font-subsets'] }}}</label>
							<select data-option="font-subsets" id="font-subsets-{{ data.id }}" multiple="multiple">
								<# _.each( data.value['font-subsets'], function( subsets ){ #>
									<option value="{{ subsets }}" selected="selected">{{{ data.l10n['subsets'][ subsets ] }}}</option>
								<# }); #>
							</select>
						</div>
					<# } #>

<# if ( 'font-size' in data.display ) { #>
						
						<div class="sinatra-range-wrapper sinatra-typography-font-size sinatra-control-responsive" data-option-id="font-size">
							<label for="font-size-{{ data.id }}">
								<span>{{{ data.l10n['font-size'] }}}</span>
								<?php $this->responsive_devices(); ?>
							</label>

<# } ); #>
							</div>
						</div>
					<# } #>

<# if ( 'font-weight' in data.display ) { #>
						
						<div class="sinatra-select-wrapper sinatra-typography-font-weight">
							<label for="font-weight-{{ data.id }}">{{{ data.l10n['font-weight'] }}}</label>
							<select data-option="font-weight" id="font-weight-{{ data.id }}" data-default="{{ data.default['font-weight'] }}">
								<option value="{{ data.value['font-weight'] }}" selected="selected">{{{ data.l10n.weights[ data.value['font-weight'] ] }}}</option> 
							</select>
						</div>
					<# } #>

<# if ( 'font-style' in data.display ) { #>
						
						<div class="sinatra-select-wrapper sinatra-typography-font-style">
							<label for="font-style-{{ data.id }}">{{{ data.l10n['font-style'] }}}</label>
							<select data-option="font-style" id="font-style-{{ data.id }}" data-default="{{ data.default['font-style'] }}">
								<# _.each( data.l10n['styles'], function( value, key ){ #>
									<option value="{{ key }}" <# if ( key === data.value['font-style'] ) { #> selected="selected"<# } #>>{{{ value }}}</option>
								<# }); #>
							</select>
						</div>
					<# } #>

<# if ( 'text-transform' in data.display ) { #>
						
						<div class="sinatra-select-wrapper sinatra-typography-text-transform">
							<label for="text-transform-{{ data.id }}">{{{ data.l10n['text-transform'] }}}</label>
							<select data-option="text-transform" id="text-transform-{{ data.id }}" data-default="{{ data.default['text-transform'] }}">
								<# _.each( data.l10n['transforms'], function( value, key ){ #>
									<option value="{{ key }}" <# if ( key === data.value['text-transform'] ) { #> selected="selected"<# } #>>{{{ value }}}</option>
								<# }); #>
							</select>
						</div>
					<# } #>

<# if ( 'text-decoration' in data.display ) { #>
						
						<div class="sinatra-select-wrapper sinatra-typography-text-decoration">
							<label for="text-decoration-{{ data.id }}">{{{ data.l10n['text-decoration'] }}}</label>
							<select data-option="text-decoration" id="text-decoration-{{ data.id }}" data-default="{{ data.default['text-decoration'] }}">
								<# _.each( data.l10n['decorations'], function( value, key ){ #>
									<option value="{{ key }}" <# if ( key === data.value['text-decoration'] ) { #> selected="selected"<# } #>>{{{ value }}}</option>
								<# }); #>
							</select>
						</div>
					<# } #>

<# if ( 'line-height' in data.display ) { #>
						
						<div class="sinatra-range-wrapper sinatra-typography-line-height sinatra-control-responsive" data-option-id="line-height">
							<label for="line-height-{{ data.id }}">
								<span>{{{ data.l10n['line-height'] }}}</span>
								<?php $this->responsive_devices(); ?>
							</label>

<# } ); #>
							</div>
						</div>
					<# } #>

<# if ( 'letter-spacing' in data.display ) { #>
						
						<div class="sinatra-range-wrapper sinatra-typography-letter-spacing sinatra-control-responsive" data-option-id="letter-spacing">
							<label for="letter-spacing-{{ data.id }}">
								<span>{{{ data.l10n['letter-spacing'] }}}</span>
							</label>

</div>
			<?php
		}
	}
endif;

[-] typography.js [edit]
[-] typography.min.css [edit]
[+] ..
[-] typography.min.js [edit]
[-] typography.css [edit]
[-] typography.scss [edit]
[-] class-sinatra-customizer-control-typography.php [edit]