{"action":"created","issue":{"url":"https://api.github.com/repos/Codestar/codestar-framework/issues/61","labels_url":"https://api.github.com/repos/Codestar/codestar-framework/issues/61/labels{/name}","comments_url":"https://api.github.com/repos/Codestar/codestar-framework/issues/61/comments","events_url":"https://api.github.com/repos/Codestar/codestar-framework/issues/61/events","html_url":"https://github.com/Codestar/codestar-framework/issues/61","id":66460652,"number":61,"title":"font size, line height & color field in typography","user":{"login":"sabuz","id":7956101,"avatar_url":"https://avatars.githubusercontent.com/u/7956101?v=3","gravatar_id":"","url":"https://api.github.com/users/sabuz","html_url":"https://github.com/sabuz","followers_url":"https://api.github.com/users/sabuz/followers","following_url":"https://api.github.com/users/sabuz/following{/other_user}","gists_url":"https://api.github.com/users/sabuz/gists{/gist_id}","starred_url":"https://api.github.com/users/sabuz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sabuz/subscriptions","organizations_url":"https://api.github.com/users/sabuz/orgs","repos_url":"https://api.github.com/users/sabuz/repos","events_url":"https://api.github.com/users/sabuz/events{/privacy}","received_events_url":"https://api.github.com/users/sabuz/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Codestar/codestar-framework/labels/noted","name":"noted","color":"207de5"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-04-05T17:10:35Z","updated_at":"2015-05-01T19:22:52Z","closed_at":"2015-04-05T19:20:36Z","body":"Hi, I found no font size, line height & font color field in typography option. These are very useful. You may consider to add these fields in typography"},"comment":{"url":"https://api.github.com/repos/Codestar/codestar-framework/issues/comments/98211466","html_url":"https://github.com/Codestar/codestar-framework/issues/61#issuecomment-98211466","issue_url":"https://api.github.com/repos/Codestar/codestar-framework/issues/61","id":98211466,"user":{"login":"sabuz","id":7956101,"avatar_url":"https://avatars.githubusercontent.com/u/7956101?v=3","gravatar_id":"","url":"https://api.github.com/users/sabuz","html_url":"https://github.com/sabuz","followers_url":"https://api.github.com/users/sabuz/followers","following_url":"https://api.github.com/users/sabuz/following{/other_user}","gists_url":"https://api.github.com/users/sabuz/gists{/gist_id}","starred_url":"https://api.github.com/users/sabuz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sabuz/subscriptions","organizations_url":"https://api.github.com/users/sabuz/orgs","repos_url":"https://api.github.com/users/sabuz/repos","events_url":"https://api.github.com/users/sabuz/events{/privacy}","received_events_url":"https://api.github.com/users/sabuz/received_events","type":"User","site_admin":false},"created_at":"2015-05-01T19:22:52Z","updated_at":"2015-05-01T19:22:52Z","body":"How is this?\r\n\r\n<?php if ( ! defined( 'ABSPATH' ) ) { die; } // Cannot access pages directly.\r\n/**\r\n *\r\n * Field: Typography Extended\r\n *\r\n * @since 1.0.0\r\n * @version 1.0.0\r\n *\r\n */\r\nclass CSFramework_Option_typography_extended extends CSFramework_Options {\r\n\r\n  public function __construct( $field, $value = '', $unique = '' ) {\r\n    parent::__construct( $field, $value, $unique );\r\n  }\r\n\r\n  public function output() {\r\n\r\n    echo $this->element_before();\r\n\r\n    $defaults_value = array(\r\n      'family'  => 'Arial',\r\n      'variant' => 'regular',\r\n      'font'    => 'websafe',\r\n      'size'    => '',\r\n      'height'  => '',\r\n    );\r\n\r\n    $default_variants = apply_filters( 'cs_websafe_fonts_variants', array(\r\n      'regular',\r\n      'italic',\r\n      '700',\r\n      '700italic',\r\n      'inherit'\r\n    ));\r\n\r\n    $websafe_fonts = apply_filters( 'cs_websafe_fonts', array(\r\n      'Arial',\r\n      'Arial Black',\r\n      'Comic Sans MS',\r\n      'Impact',\r\n      'Lucida Sans Unicode',\r\n      'Tahoma',\r\n      'Trebuchet MS',\r\n      'Verdana',\r\n      'Courier New',\r\n      'Lucida Console',\r\n      'Georgia, serif',\r\n      'Palatino Linotype',\r\n      'Times New Roman'\r\n    ));\r\n\r\n    $value         = wp_parse_args( $this->element_value(), $defaults_value );\r\n    $family_value  = $value['family'];\r\n    $variant_value = $value['variant'];\r\n    $is_variant    = ( isset( $this->field['variant'] ) && $this->field['variant'] === false ) ? false : true;\r\n    $is_chosen     = ( isset( $this->field['chosen'] ) && $this->field['chosen'] === false ) ? '' : 'chosen ';\r\n    $google_json   = json_decode( cs_filesystem()->get_contents( CS_URI .'/fields/typography/google-fonts.json' ) );\r\n    $chosen_rtl    = ( is_rtl() && ! empty( $is_chosen ) ) ? 'chosen-rtl ' : '';\r\n\r\n    if( ! empty( $google_json ) ) {\r\n\r\n      $googlefonts = array();\r\n\r\n      foreach ( $google_json->items as $key => $font ) {\r\n        $googlefonts[$font->family] = $font->variants;\r\n      }\r\n\r\n      $is_google = ( array_key_exists( $family_value, $googlefonts ) ) ? true : false;\r\n\r\n      echo '<label class=\"cs-typography-family\">';\r\n      echo '<select name=\"'. $this->element_name( '[family]' ) .'\" class=\"'. $is_chosen . $chosen_rtl .'cs-typo-family\" data-atts=\"family\"'. $this->element_attributes() .'>';\r\n\r\n      do_action( 'cs_typography_family', $family_value, $this );\r\n\r\n      echo '<optgroup label=\"'. __( 'Web Safe Fonts', CS_TEXTDOMAIN ) .'\">';\r\n      foreach ( $websafe_fonts as $websafe_value ) {\r\n        echo '<option value=\"'. $websafe_value .'\" data-variants=\"'. implode( '|', $default_variants ) .'\" data-type=\"websafe\"'. selected( $websafe_value, $family_value, true ) .'>'. $websafe_value .'</option>';\r\n      }\r\n      echo '</optgroup>';\r\n\r\n      echo '<optgroup label=\"'. __( 'Google Fonts', CS_TEXTDOMAIN ) .'\">';\r\n      foreach ( $googlefonts as $google_key => $google_value ) {\r\n        echo '<option value=\"'. $google_key .'\" data-variants=\"'. implode( '|', $google_value ) .'\" data-type=\"google\"'. selected( $google_key, $family_value, true ) .'>'. $google_key .'</option>';\r\n      }\r\n      echo '</optgroup>';\r\n\r\n      echo '</select>';\r\n      echo '</label>';\r\n\r\n      if( ! empty( $is_variant ) ) {\r\n\r\n        $variants = ( $is_google ) ? $googlefonts[$family_value] : $default_variants;\r\n        $variants = ( $value['font'] === 'google' || $value['font'] === 'websafe' ) ? $variants : array( 'regular' );\r\n\r\n        echo '<label class=\"cs-typography-variant\">';\r\n        echo '<select name=\"'. $this->element_name( '[variant]' ) .'\" class=\"'. $is_chosen . $chosen_rtl .'cs-typo-variant\" data-atts=\"variant\">';\r\n        foreach ( $variants as $variant ) {\r\n          echo '<option value=\"'. $variant .'\"'. $this->checked( $variant_value, $variant, 'selected' ) .'>'. $variant .'</option>';\r\n        }\r\n        echo '</select>';\r\n        echo '</label>';\r\n\r\n      }\r\n\r\n      echo '<label class=\"cs-typography-size\">';\r\n      echo '<input type=\"number\" name=\"'. $this->element_name( '[size]' ) .'\" value=\"'. $value['size'] .'\" placeholder=\"size\" style=\"width: 80px;height: 28px;vertical-align: middle;\" />';\r\n      echo '</label>';\r\n\r\n      echo '<label class=\"cs-typography-height\">';\r\n      echo '<input type=\"number\" name=\"'. $this->element_name( '[height]' ) .'\" value=\"'. $value['height'] .'\" placeholder=\"height\" style=\"width: 80px;height: 28px;vertical-align: middle;\" />';\r\n      echo '</label>';\r\n\r\n      echo '<input type=\"text\" name=\"'. $this->element_name( '[font]' ) .'\" class=\"cs-typo-font hidden\" data-atts=\"font\" value=\"'. $value['font'] .'\" />';\r\n\r\n    } else {\r\n\r\n      _e( 'Error! Can not load json file.', CS_TEXTDOMAIN );\r\n\r\n    }\r\n\r\n    echo $this->element_after();\r\n\r\n  }\r\n\r\n}\r\n\r\nAnd the parser:\r\nfunction cs_typography_parser( $typography ) {\r\n\r\n  $out  = array();\r\n  $font = cs_get_option( $typography );\r\n\r\n  // family\r\n  $out['family'] = $font['family'];\r\n\r\n  // weight\r\n  $weight = preg_replace( '/\\D/', '', $font['variant'] );\r\n  $out['weight'] = ( ! empty( $weight ) ) ? $weight : 'normal';\r\n\r\n  // style\r\n  $style = preg_replace( '/[0-9]/', '', $font['variant'] );\r\n  $out['style'] = ( ! empty( $style ) && $style !== 'regular' ) ? $style : 'normal';\r\n\r\n  // size\r\n  $out['size'] = $font['size'].'px';\r\n\r\n  // line height\r\n  $out['line-height'] = $font['height'].'px';\r\n\r\n  return $out;\r\n}"}}