field_before(); $args = wp_parse_args( $this->field, array( 'font_family' => true, 'font_weight' => true, 'font_style' => true, 'font_size' => true, 'line_height' => true, 'letter_spacing' => true, 'text_align' => true, 'text_transform' => true, 'color' => true, 'chosen' => true, 'preview' => true, 'subset' => true, 'multi_subset' => false, 'extra_styles' => false, 'backup_font_family' => false, 'font_variant' => false, 'word_spacing' => false, 'text_decoration' => false, 'custom_style' => false, 'compact' => false, 'exclude' => '', 'unit' => 'px', 'line_height_unit' => '', 'preview_text' => 'The quick brown fox jumps over the lazy dog', ) ); if ( $args['compact'] ) { $args['text_transform'] = false; $args['text_align'] = false; $args['font_size'] = false; $args['line_height'] = false; $args['letter_spacing'] = false; $args['preview'] = false; $args['color'] = false; } $default_value = array( 'font-family' => '', 'font-weight' => '', 'font-style' => '', 'font-variant' => '', 'font-size' => '', 'line-height' => '', 'letter-spacing' => '', 'word-spacing' => '', 'text-align' => '', 'text-transform' => '', 'text-decoration' => '', 'backup-font-family' => '', 'color' => '', 'custom-style' => '', 'type' => '', 'subset' => '', 'extra-styles' => array(), ); $default_value = ( ! empty( $this->field['default'] ) ) ? wp_parse_args( $this->field['default'], $default_value ) : $default_value; $this->value = wp_parse_args( $this->value, $default_value ); $this->chosen = $args['chosen']; $chosen_class = ( $this->chosen ) ? ' csf--chosen' : ''; $line_height_unit = ( ! empty( $args['line_height_unit'] ) ) ? $args['line_height_unit'] : $args['unit']; echo '
'; echo '
'; // // Font Family if ( ! empty( $args['font_family'] ) ) { echo '
'; echo '
'. esc_html__( 'Font Family', 'sakurairo_csf' ) .'
'; echo $this->create_select( array( $this->value['font-family'] => $this->value['font-family'] ), 'font-family', esc_html__( 'Select a font', 'sakurairo_csf' ) ); echo '
'; } // // Backup Font Family if ( ! empty( $args['backup_font_family'] ) ) { echo ''; } // // Font Style and Extra Style Select if ( ! empty( $args['font_weight'] ) || ! empty( $args['font_style'] ) ) { // // Font Style Select echo ''; } // // Subset if ( ! empty( $args['subset'] ) ) { echo ''; } // // Text Align if ( ! empty( $args['text_align'] ) ) { echo '
'; echo '
'. esc_html__( 'Text Align', 'sakurairo_csf' ) .'
'; echo $this->create_select( array( 'inherit' => esc_html__( 'Inherit', 'sakurairo_csf' ), 'left' => esc_html__( 'Left', 'sakurairo_csf' ), 'center' => esc_html__( 'Center', 'sakurairo_csf' ), 'right' => esc_html__( 'Right', 'sakurairo_csf' ), 'justify' => esc_html__( 'Justify', 'sakurairo_csf' ), 'initial' => esc_html__( 'Initial', 'sakurairo_csf' ) ), 'text-align', esc_html__( 'Default', 'sakurairo_csf' ) ); echo '
'; } // // Font Variant if ( ! empty( $args['font_variant'] ) ) { echo '
'; echo '
'. esc_html__( 'Font Variant', 'sakurairo_csf' ) .'
'; echo $this->create_select( array( 'normal' => esc_html__( 'Normal', 'sakurairo_csf' ), 'small-caps' => esc_html__( 'Small Caps', 'sakurairo_csf' ), 'all-small-caps' => esc_html__( 'All Small Caps', 'sakurairo_csf' ) ), 'font-variant', esc_html__( 'Default', 'sakurairo_csf' ) ); echo '
'; } // // Text Transform if ( ! empty( $args['text_transform'] ) ) { echo '
'; echo '
'. esc_html__( 'Text Transform', 'sakurairo_csf' ) .'
'; echo $this->create_select( array( 'none' => esc_html__( 'None', 'sakurairo_csf' ), 'capitalize' => esc_html__( 'Capitalize', 'sakurairo_csf' ), 'uppercase' => esc_html__( 'Uppercase', 'sakurairo_csf' ), 'lowercase' => esc_html__( 'Lowercase', 'sakurairo_csf' ) ), 'text-transform', esc_html__( 'Default', 'sakurairo_csf' ) ); echo '
'; } // // Text Decoration if ( ! empty( $args['text_decoration'] ) ) { echo '
'; echo '
'. esc_html__( 'Text Decoration', 'sakurairo_csf' ) .'
'; echo $this->create_select( array( 'none' => esc_html__( 'None', 'sakurairo_csf' ), 'underline' => esc_html__( 'Solid', 'sakurairo_csf' ), 'underline double' => esc_html__( 'Double', 'sakurairo_csf' ), 'underline dotted' => esc_html__( 'Dotted', 'sakurairo_csf' ), 'underline dashed' => esc_html__( 'Dashed', 'sakurairo_csf' ), 'underline wavy' => esc_html__( 'Wavy', 'sakurairo_csf' ), 'underline overline' => esc_html__( 'Overline', 'sakurairo_csf' ), 'line-through' => esc_html__( 'Line-through', 'sakurairo_csf' ) ), 'text-decoration', esc_html__( 'Default', 'sakurairo_csf' ) ); echo '
'; } echo '
'; echo '
'; // // Font Size if ( ! empty( $args['font_size'] ) ) { echo '
'; echo '
'. esc_html__( 'Font Size', 'sakurairo_csf' ) .'
'; echo '
'; echo ''; echo ''. esc_attr( $args['unit'] ) .''; echo '
'; echo '
'; } // // Line Height if ( ! empty( $args['line_height'] ) ) { echo '
'; echo '
'. esc_html__( 'Line Height', 'sakurairo_csf' ) .'
'; echo '
'; echo ''; echo ''. esc_attr( $line_height_unit ) .''; echo '
'; echo '
'; } // // Letter Spacing if ( ! empty( $args['letter_spacing'] ) ) { echo '
'; echo '
'. esc_html__( 'Letter Spacing', 'sakurairo_csf' ) .'
'; echo '
'; echo ''; echo ''. esc_attr( $args['unit'] ) .''; echo '
'; echo '
'; } // // Word Spacing if ( ! empty( $args['word_spacing'] ) ) { echo '
'; echo '
'. esc_html__( 'Word Spacing', 'sakurairo_csf' ) .'
'; echo '
'; echo ''; echo ''. esc_attr( $args['unit'] ) .''; echo '
'; echo '
'; } echo '
'; // // Font Color if ( ! empty( $args['color'] ) ) { $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="'. esc_attr( $default_value['color'] ) .'"' : ''; echo '
'; echo '
'. esc_html__( 'Font Color', 'sakurairo_csf' ) .'
'; echo '
'; echo ''; echo '
'; echo '
'; } // // Custom style if ( ! empty( $args['custom_style'] ) ) { echo '
'; echo '
'. esc_html__( 'Custom Style', 'sakurairo_csf' ) .'
'; echo ''; echo '
'; } // // Preview $always_preview = ( $args['preview'] !== 'always' ) ? ' hidden' : ''; if ( ! empty( $args['preview'] ) ) { echo '
'; echo '
'; echo '
'. esc_attr( $args['preview_text'] ) .'
'; echo '
'; } echo ''; echo ''; echo '
'; echo $this->field_after(); } public function create_select( $options, $name, $placeholder = '', $is_multiple = false ) { $multiple_name = ( $is_multiple ) ? '[]' : ''; $multiple_attr = ( $is_multiple ) ? ' multiple data-multiple="true"' : ''; $chosen_rtl = ( $this->chosen && is_rtl() ) ? ' chosen-rtl' : ''; $output = ''; return $output; } public function enqueue() { if ( ! wp_script_is( 'csf-webfontloader' ) ) { Sakurairo_CSF::include_plugin_file( 'fields/typography/google-fonts.php' ); wp_enqueue_script( 'csf-webfontloader', 'https://lib.baomitu.com/webfont/1.6.28/webfontloader.js', array( 'sakurairo_csf' ), '1.6.28', true ); $webfonts = array(); $customwebfonts = apply_filters( 'csf_field_typography_customwebfonts', array() ); if ( ! empty( $customwebfonts ) ) { $webfonts['custom'] = array( 'label' => esc_html__( 'Custom Web Fonts', 'sakurairo_csf' ), 'fonts' => $customwebfonts ); } $webfonts['safe'] = array( 'label' => esc_html__( 'Safe Web Fonts', 'sakurairo_csf' ), 'fonts' => apply_filters( 'csf_field_typography_safewebfonts', array( 'Arial', 'Arial Black', 'Helvetica', 'Times New Roman', 'Courier New', 'Tahoma', 'Verdana', 'Impact', 'Trebuchet MS', 'Comic Sans MS', 'Lucida Console', 'Lucida Sans Unicode', 'Georgia, serif', 'Palatino Linotype' ) ) ); $webfonts['google'] = array( 'label' => esc_html__( 'Google Web Fonts', 'sakurairo_csf' ), 'fonts' => apply_filters( 'csf_field_typography_googlewebfonts', csf_get_google_fonts() ) ); $defaultstyles = apply_filters( 'csf_field_typography_defaultstyles', array( 'normal', 'italic', '700', '700italic' ) ); $googlestyles = apply_filters( 'csf_field_typography_googlestyles', array( '100' => 'Thin 100', '100italic' => 'Thin 100 Italic', '200' => 'Extra-Light 200', '200italic' => 'Extra-Light 200 Italic', '300' => 'Light 300', '300italic' => 'Light 300 Italic', 'normal' => 'Normal 400', 'italic' => 'Normal 400 Italic', '500' => 'Medium 500', '500italic' => 'Medium 500 Italic', '600' => 'Semi-Bold 600', '600italic' => 'Semi-Bold 600 Italic', '700' => 'Bold 700', '700italic' => 'Bold 700 Italic', '800' => 'Extra-Bold 800', '800italic' => 'Extra-Bold 800 Italic', '900' => 'Black 900', '900italic' => 'Black 900 Italic' ) ); $webfonts = apply_filters( 'csf_field_typography_webfonts', $webfonts ); wp_localize_script( 'sakurairo_csf', 'csf_typography_json', array( 'webfonts' => $webfonts, 'defaultstyles' => $defaultstyles, 'googlestyles' => $googlestyles ) ); } } public function enqueue_google_fonts( $method = 'enqueue' ) { $is_google = false; if ( ! empty( $this->value['type'] ) ) { $is_google = ( $this->value['type'] === 'google' ) ? true : false; } else { Sakurairo_CSF::include_plugin_file( 'fields/typography/google-fonts.php' ); $is_google = ( array_key_exists( $this->value['font-family'], csf_get_google_fonts() ) ) ? true : false; } if ( $is_google ) { // set style $font_family = ( ! empty( $this->value['font-family'] ) ) ? $this->value['font-family'] : ''; $font_weight = ( ! empty( $this->value['font-weight'] ) ) ? $this->value['font-weight'] : ''; $font_style = ( ! empty( $this->value['font-style'] ) ) ? $this->value['font-style'] : ''; if ( $font_weight || $font_style ) { $style = $font_weight . $font_style; if ( ! empty( $style ) ) { $style = ( $style === 'normal' ) ? '400' : $style; Sakurairo_CSF::$webfonts[$method][$font_family][$style] = $style; } } else { Sakurairo_CSF::$webfonts[$method][$font_family] = array(); } // set extra styles if ( ! empty( $this->value['extra-styles'] ) ) { foreach ( $this->value['extra-styles'] as $extra_style ) { if ( ! empty( $extra_style ) ) { $extra_style = ( $extra_style === 'normal' ) ? '400' : $extra_style; Sakurairo_CSF::$webfonts[$method][$font_family][$extra_style] = $extra_style; } } } // set subsets if ( ! empty( $this->value['subset'] ) ) { $this->value['subset'] = ( is_array( $this->value['subset'] ) ) ? $this->value['subset'] : array_filter( (array) $this->value['subset'] ); foreach ( $this->value['subset'] as $subset ) { if( ! empty( $subset ) ) { Sakurairo_CSF::$subsets[$subset] = $subset; } } } return true; } return false; } public function output() { $output = ''; $bg_image = array(); $important = ( ! empty( $this->field['output_important'] ) ) ? '!important' : ''; $element = ( is_array( $this->field['output'] ) ) ? join( ',', $this->field['output'] ) : $this->field['output']; $font_family = ( ! empty( $this->value['font-family'] ) ) ? $this->value['font-family'] : ''; $backup_family = ( ! empty( $this->value['backup-font-family'] ) ) ? ', '. $this->value['backup-font-family'] : ''; if ( $font_family ) { $output .= 'font-family:"'. $font_family .'"'. $backup_family . $important .';'; } // Common font properties $properties = array( 'color', 'font-weight', 'font-style', 'font-variant', 'text-align', 'text-transform', 'text-decoration', ); foreach ( $properties as $property ) { if ( isset( $this->value[$property] ) && $this->value[$property] !== '' ) { $output .= $property .':'. $this->value[$property] . $important .';'; } } $properties = array( 'font-size', 'line-height', 'letter-spacing', 'word-spacing', ); $unit = ( ! empty( $this->value['unit'] ) ) ? $this->value['unit'] : 'px'; $line_height_unit = ( ! empty( $this->value['line_height_unit'] ) ) ? $this->value['line_height_unit'] : $unit; foreach ( $properties as $property ) { if ( isset( $this->value[$property] ) && $this->value[$property] !== '' ) { $unit = ( $property === 'line-height' ) ? $line_height_unit : $unit; $output .= $property .':'. $this->value[$property] . $unit . $important .';'; } } $custom_style = ( ! empty( $this->value['custom-style'] ) ) ? $this->value['custom-style'] : ''; if ( $output ) { $output = $element .'{'. $output . $custom_style .'}'; } $this->parent->output_css .= $output; return $output; } } }