name = 'Typography'; /* * label (string) Multiple words, can include spaces, visible when selecting a field type */ $this->label = __( 'Typography', 'acf-typography-field' ); /* * category (string) basic | content | choice | relational | jquery | layout | CUSTOM GROUP NAME */ $this->category = 'content'; /* * defaults (array) Array of default settings which are merged into the field object. These are used later in settings */ $this->defaults = array( 'display_properties' => array(), 'required_properties' => array(), 'font_size' => 15, 'font_weight' => '400', 'font_family' => 'Arial, Helvetica, sans-serif', 'font_style' => 'normal', 'font_variant' => 'normal', 'font_stretch' => 'normal', 'line_height' => '', // no default: a number here would change what existing field groups render 'text_align' => 'left', 'letter_spacing' => 0, 'text_decoration' => 'none', 'text_color' => '#000', 'text_transform' => 'none', ); $this->font_family = array( 'Arial, Helvetica, sans-serif' => 'Arial, Helvetica, sans-serif', '"Arial Black", Gadget, sans-serif' => '"Arial Black", Gadget, sans-serif', '"Bookman Old Style", serif' => '"Bookman Old Style", serif', '"Comic Sans MS", cursive' => '"Comic Sans MS", cursive', 'Courier, monospace' => 'Courier, monospace', 'Garamond, serif' => 'Garamond, serif', 'Georgia, serif' => 'Georgia, serif', 'Impact, Charcoal, sans-serif' => 'Impact, Charcoal, sans-serif', '"Lucida Console", Monaco, monospace' => '"Lucida Console", Monaco, monospace', '"Lucida Sans Unicode", "Lucida Grande", sans-serif' => '"Lucida Sans Unicode", "Lucida Grande", sans-serif', '"MS Sans Serif", Geneva, sans-serif' => '"MS Sans Serif", Geneva, sans-serif', '"MS Serif", "New York", sans-serif' => '"MS Serif", "New York", sans-serif', '"Palatino Linotype", "Book Antiqua", Palatino, serif' => '"Palatino Linotype", "Book Antiqua", Palatino, serif', 'Tahoma, Geneva, sans-serif' => 'Tahoma, Geneva, sans-serif', '"Times New Roman", Times, serif' => '"Times New Roman", Times, serif', '"Trebuchet MS", Helvetica, sans-serif' => '"Trebuchet MS", Helvetica, sans-serif', 'Verdana, Geneva, sans-serif' => 'Verdana, Geneva, sans-serif', ); $this->font_weight = array( '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900', ); $this->font_style = array( 'normal' => 'normal', 'italic' => 'italic', 'oblique' => 'oblique', ); $this->font_variant = array( 'normal' => 'normal', 'small-caps' => 'small-caps', 'initial' => 'initial', 'inherit' => 'inherit', ); $this->font_stretch = array( 'ultra-condensed' => 'ultra-condensed', 'extra-condensed' => 'extra-condensed', 'condensed' => 'condensed', 'semi-condensed' => 'semi-condensed', 'normal' => 'normal', 'semi-expanded' => 'semi-expanded', 'expanded' => 'expanded', 'extra-expanded' => 'extra-expanded', 'ultra-expanded' => 'ultra-expanded', 'initial' => 'initial', 'inherit' => 'inherit', ); $this->text_align = array( 'inherit' => 'inherit', 'left' => 'left', 'right' => 'right', 'center' => 'center', 'justify' => 'justify', 'initial' => 'initial', ); $this->text_decoration = array( 'none' => 'none', 'underline' => 'underline', 'overline' => 'overline', 'line-through' => 'line-through', 'initial' => 'initial', 'inherit' => 'inherit', ); $this->text_transform = array( 'none' => 'none', 'capitalize' => 'capitalize', 'uppercase' => 'uppercase', 'lowercase' => 'lowercase', 'initial' => 'initial', 'inherit' => 'inherit', ); /* * l10n (array) Array of strings that are used in JavaScript. This allows JS strings to be translated in PHP and loaded via: * var message = acf._e('FIELD_NAME', 'error'); */ $this->l10n = array( 'error' => __( 'Error! Please enter a higher value', 'acf-typography-field' ), ); /* * settings (array) Store plugin settings (url, path, version) as a reference for later use with assets */ $this->settings = $settings; // do not delete! parent::__construct(); } /* * load_font_family() * * Adds the Google fonts, sorted, to the Font Family choices. Called where the * choices are shown, not in the constructor: ACF builds field types on every * request, and reading the cached list is only needed here. * * @since 3.3.0 */ public function load_font_family() { if ( $this->font_family_loaded ) { return; } $this->font_family_loaded = true; $google_font_family = acft_get_google_font_family(); // get google fonts from the cached list // merge web-safe-fonts and google fonts arrays if ( is_array( $google_font_family ) ) { $this->font_family = array_merge( $this->font_family, $google_font_family ); } // sort array by array key ksort( $this->font_family ); // add 'initial' and 'inherit' property values to top of the array $this->font_family = array_merge( array( 'initial' => 'initial', 'inherit' => 'inherit', ), $this->font_family ); } /* * render_field_settings() * * Create extra settings for your field. These are visible when editing a field * * @type action * @since 3.6 * @date 23/01/13 * * @param $field (array) the $field being edited * @return n/a */ function render_field_settings( $field ) { $this->load_font_family(); /* * acf_render_field_setting * * This function will create a setting for your field. Simply pass the $field parameter and an array of field settings. * The array of settings does not require a `value` or `prefix`; These settings are found from the $field array. * * More than one setting can be added by copy/paste the above code. * Please note that you must also have a matching $defaults value for the field name (font_size) */ acf_render_field_setting( $field, array( 'label' => __( 'Display Properties', 'acf-typography-field' ), 'instructions' => __( 'Select fields to display on edit page', 'acf-typography-field' ), 'type' => 'checkbox', 'name' => 'display_properties', 'choices' => acft_typography_property_labels(), 'layout' => 'vertical', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Required Properties', 'acf-typography-field' ), 'instructions' => __( 'Select fields which are required on edit page', 'acf-typography-field' ), 'type' => 'checkbox', 'name' => 'required_properties', 'choices' => acft_typography_property_labels(), 'layout' => 'vertical', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Font Size', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'number', 'name' => 'font_size', 'append' => 'px', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Font Family', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'font_family', 'choices' => acft_typography_font_family_choices( $this->font_family, isset( $field['font_family'] ) ? $field['font_family'] : '' ), 'layout' => 'horizontal', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Font Weight', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'font_weight', 'choices' => $this->font_weight, 'layout' => 'horizontal', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Font Style', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'font_style', 'choices' => $this->font_style, 'layout' => 'horizontal', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Font Variant', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'font_variant', 'choices' => $this->font_variant, 'layout' => 'horizontal', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Font Stretch', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'font_stretch', 'choices' => $this->font_stretch, 'layout' => 'horizontal', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Line Height', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'number', 'name' => 'line_height', 'append' => 'px', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Letter Spacing', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'number', 'name' => 'letter_spacing', 'append' => 'px', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Text Align', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'text_align', 'choices' => $this->text_align, 'layout' => 'horizontal', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Text Color', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'text', 'name' => 'text_color', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Text Decoration', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'text_decoration', 'choices' => $this->text_decoration, 'layout' => 'horizontal', ) ); acf_render_field_setting( $field, array( 'label' => __( 'Text Transform', 'acf-typography-field' ), 'instructions' => __( 'Default', 'acf-typography-field' ), 'type' => 'select', 'name' => 'text_transform', 'choices' => $this->text_transform, 'layout' => 'horizontal', ) ); } /* * render_field() * * Create the HTML interface for your field * * @param $field (array) the $field being rendered * * @type action * @since 3.6 * @date 23/01/13 * * @param $field (array) the $field being edited * @return n/a */ function render_field( $field ) { $this->load_font_family(); $field = array_merge( $this->defaults, $field ); $key = $field['key']; // ACF gives each field a unique id, also in repeaters and blocks; the inputs build theirs from it $id_prefix = empty( $field['id'] ) ? 'acf-field' : $field['id']; // create Field HTML $display_properties = acft_typography_property_list( $field['display_properties'] ); if ( $display_properties ) { foreach ( $display_properties as $f ) { $numbers = $selects = array(); $data_required = false; $required = ''; if ( is_array( $field['required_properties'] ) && in_array( $f, $field['required_properties'] ) ) { $required = 'required'; $data_required = true; } $input_id = $id_prefix . '-' . $f; if ( $f == 'font_size' || $f == 'line_height' || $f == 'letter_spacing' ) { $numbers[] = $f; } elseif ( $f == 'font_family' || $f == 'font_weight' || $f == 'font_style' || $f == 'font_variant' || $f == 'font_stretch' || $f == 'text_align' || $f == 'text_decoration' || $f == 'text_transform' ) { $selects[] = $f; } if ( in_array( $f, $numbers ) ) { ?>