Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: devinsays/options-framework-plugin
base: master
...
head fork: blobaugh/options-framework-plugin
compare: master
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 2 files changed
  • 1 commit comment
  • 1 contributor
Showing with 33 additions and 5 deletions.
  1. +21 −1 js/options-custom.js
  2. +12 −4 options-interface.php
View
22 js/options-custom.js
@@ -106,5 +106,25 @@ jQuery(document).ready(function($) {
$('.of-radio-img-label').hide();
$('.of-radio-img-img').show();
$('.of-radio-img-radio').hide();
+
+
-});
+});
+
+function options_font_preview(select_id, example_id, style) {
+ var id = '#'+select_id;
+ var ex = '#'+example_id;
+ // Extra conditions for setting the style to bold
+ // I hate this hack. Is there a better way?
+ if( jQuery(id).val() == 'bold' ) {
+ style = 'font-weight';
+ jQuery(ex).css('font-style', 'normal');
+
+ } else if( jQuery(id).val() == 'bold italic' ) {
+ jQuery(ex).css('font-weight', 'bold');
+ jQuery(id).val('italic');
+ } else {
+ jQuery(ex).css('font-weight', 'normal');
+ }
+ jQuery(ex).css( style, jQuery(id).val() );
+}
View
16 options-interface.php
@@ -229,7 +229,8 @@ function optionsframework_fields() {
// Font Size
if ( $typography_options['sizes'] ) {
- $font_size = '<select class="of-typography of-typography-size" name="' . esc_attr( $option_name . '[' . $value['id'] . '][size]' ) . '" id="' . esc_attr( $value['id'] . '_size' ) . '">';
+ $font_size = '<select class="of-typography of-typography-size" name="' . esc_attr( $option_name . '[' . $value['id'] . '][size]' ) . '" id="' . esc_attr( $value['id'] . '_size' ) . '"
+ onchange="options_font_preview(\'' . esc_attr( $value['id'] . '_size' ) . '\', \'' . esc_attr($value['id']) . '_preview'. '\', \'font-size\');return true;">';
$sizes = $typography_options['sizes'];
foreach ( $sizes as $i ) {
$size = $i . 'px';
@@ -240,7 +241,8 @@ function optionsframework_fields() {
// Font Face
if ( $typography_options['faces'] ) {
- $font_face = '<select class="of-typography of-typography-face" name="' . esc_attr( $option_name . '[' . $value['id'] . '][face]' ) . '" id="' . esc_attr( $value['id'] . '_face' ) . '">';
+ $font_face = '<select class="of-typography of-typography-face" name="' . esc_attr( $option_name . '[' . $value['id'] . '][face]' ) . '" id="' . esc_attr( $value['id'] . '_face' ) . '"
+ onchange="options_font_preview(\'' . esc_attr( $value['id'] . '_face' ) . '\', \'' . esc_attr($value['id']) . '_preview'. '\', \'font-family\');return true;">';
$faces = $typography_options['faces'];
foreach ( $faces as $key => $face ) {
$font_face .= '<option value="' . esc_attr( $key ) . '" ' . selected( $typography_stored['face'], $key, false ) . '>' . esc_html( $face ) . '</option>';
@@ -250,7 +252,8 @@ function optionsframework_fields() {
// Font Styles
if ( $typography_options['styles'] ) {
- $font_style = '<select class="of-typography of-typography-style" name="'.$option_name.'['.$value['id'].'][style]" id="'. $value['id'].'_style">';
+ $font_style = '<select class="of-typography of-typography-style" name="'.$option_name.'['.$value['id'].'][style]" id="'. $value['id'].'_style"
+ onchange="options_font_preview(\'' . esc_attr( $value['id'] . '_style' ) . '\', \'' . esc_attr($value['id']) . '_preview'. '\', \'font-style\');return true;">';
$styles = $typography_options['styles'];
foreach ( $styles as $key => $style ) {
$font_style .= '<option value="' . esc_attr( $key ) . '" ' . selected( $typography_stored['style'], $key, false ) . '>'. $style .'</option>';
@@ -262,13 +265,18 @@ function optionsframework_fields() {
if ( $typography_options['color'] ) {
$font_color = '<div id="' . esc_attr( $value['id'] ) . '_color_picker" class="colorSelector"><div style="' . esc_attr( 'background-color:' . $typography_stored['color'] ) . '"></div></div>';
$font_color .= '<input class="of-color of-typography of-typography-color" name="' . esc_attr( $option_name . '[' . $value['id'] . '][color]' ) . '" id="' . esc_attr( $value['id'] . '_color' ) . '" type="text" value="' . esc_attr( $typography_stored['color'] ) . '" />';
+ //onkeypress="options_face_preview(\'' . esc_attr( $value['id'] . '_size' ) . '\', \'' . esc_attr($value['id']) . '_color'. '\', \'color\');return true;"/>';
}
// Allow modification/injection of typography fields
$typography_fields = compact( 'font_size', 'font_face', 'font_style', 'font_color' );
$typography_fields = apply_filters( 'of_typography_fields', $typography_fields, $typography_stored, $option_name, $value );
$output .= implode( '', $typography_fields );
-
+
+
+ $output .= '<p style="font-family: ' . $typography_stored['face'] . 'margin: 7px 0 10px 5px;display:block;width:200px; font-size: ' . $typography_stored['size'] . '" id="' . esc_attr($value['id']) . '_preview' . '">Font Preview</p>';
+
+
break;
// Background

Showing you all comments on commits in this comparison.

@Firestorm-Graphics

awesome thanks for the share :+1:

Something went wrong with that request. Please try again.