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; } } }