public function typography($args)
{
extract($args);
$selected_value = is_array(option::get($id)) ? option::get($id) : array();
$out .= '<div class="zoom-typography">';
$out .= "<label>{$name}</label>";
/* fonts */
$font_families = ui::recognized_font_families($id);
$google_font_families = ui::recognized_google_webfonts_families($id);
$font_family = isset($selected_value['font-family']) ? $selected_value['font-family'] : '';
$out .= '<select name="' . $id . '[font-family]" id="' . $id . '-family" class="zoom-typography-family">';
$out .= '<optgroup label="Web Safe Fonts">';
$out .= '<option value="">font-family</option>';
foreach ($font_families as $key => $value) {
$out .= '<option value="' . esc_attr($key) . '" ' . selected($font_family, $key, false) . '>' . esc_attr($value) . '</option>';
}
$out .= '</optgroup>';
$out .= '<optgroup label="Google Web Fonts">';
foreach ($google_font_families as $value) {
if (isset($value['separator'])) {
$out .= '<option value="" disabled="disabled">' . $value['separator'] . '</option>';
continue;
}
$key = str_replace(' ', '-', strtolower($value['name']));
$out .= '<option value="' . esc_attr($key) . '" ' . selected($font_family, $key, false) . '>' . esc_attr($value['name']) . '</option>';
}
$out .= '</optgroup>';
$out .= '</select>';
/* style */
$font_styles = ui::recognized_font_styles($id);
$font_style = isset($selected_value['font-style']) ? $selected_value['font-style'] : '';
$out .= '<select name="' . $id . '[font-style]" id="' . $id . '-style" class="zoom-typography-style">';
$out .= '<option value="">font-style</option>';
foreach ($font_styles as $key => $value) {
$out .= '<option value="' . esc_attr($key) . '" ' . selected($font_style, $key, false) . '>' . esc_attr($value) . '</option>';
}
$out .= '</select>';
/* sizing */
$font_size = isset($selected_value['font-size']) ? $selected_value['font-size'] : '';
$out .= '<select name="' . $id . '[font-size]" id="' . $id . '-size" class="zoom-typography-size">';
$out .= '<option value="">size</option>';
for ($i = 8; $i <= 72; $i++) {
$size = $i . 'px';
$out .= '<option value="' . esc_attr($size) . '" ' . selected($font_size, $size, false) . '>' . esc_attr($size) . '</option>';
}
$out .= '</select>';
/* color */
$font_color = isset($selected_value['font-color']) ? $selected_value['font-color'] : '';
$out .= '<div class="colorSelector"><div></div></div><input name="' . $id . '[font-color]" id="' . $id . '-color" class="txt input-text input-colourpicker zoom-typography-color" type="text" value="' . $font_color . '"></input>';
$out .= "<p>{$desc}</p>";
$out .= '</div><!-- /div.zoom-typography -->';
return $out;
}
