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