Extend existing color picker to support alpha channel

includes/class-options-framework-admin.php

@@ -200,12 +200,20 @@ function enqueue_admin_scripts( $hook ) {
 		if ( $this->options_screen != $hook ) {
 			return;
 		}
+
+        	// Enqueue alpha color picker
+        	wp_enqueue_script( 
+            		'wp-color-picker-alpha', 
+            		plugin_dir_url( dirname(__FILE__) ) . 'js/wp-color-picker-alpha.min.js', 
+            		array( 'wp-color-picker' ), 
+            		Options_Framework::VERSION
+        	);
 
 		// Enqueue custom option panel JS
 		wp_enqueue_script(
 			'options-custom',
 			plugin_dir_url( dirname(__FILE__) ) . 'js/options-custom.js',
-			array( 'jquery','wp-color-picker' ),
+			array( 'jquery','wp-color-picker-alpha' ),
 			Options_Framework::VERSION
 		);
 

includes/class-options-framework.php

@@ -15,7 +15,7 @@ class Options_Framework {
 	 * @since 1.7.0
 	 * @type string
 	 */
-	const VERSION = '1.8.6';
+	const VERSION = '1.9.1';
 
 	/**
 	 * Initialize the plugin.

includes/class-options-interface.php

@@ -206,7 +206,7 @@ static function optionsframework_fields() {
 					if ( $val !=  $value['std'] )
 						$default_color = ' data-default-color="' .$value['std'] . '" ';
 				}
-				$output .= '<input name="' . esc_attr( $option_name . '[' . $value['id'] . ']' ) . '" id="' . esc_attr( $value['id'] ) . '" class="of-color"  type="text" value="' . esc_attr( $val ) . '"' . $default_color .' />';
+				$output .= '<input name="' . esc_attr( $option_name . '[' . $value['id'] . ']' ) . '" id="' . esc_attr( $value['id'] ) . '" class="of-color color-picker" data-alpha="true"  type="text" value="' . esc_attr( $val ) . '"' . $default_color .' />';
 
 				break;
 
@@ -279,7 +279,7 @@ static function optionsframework_fields() {
 						if ( $val !=  $value['std']['color'] )
 							$default_color = ' data-default-color="' .$value['std']['color'] . '" ';
 					}
-					$font_color = '<input name="' . esc_attr( $option_name . '[' . $value['id'] . '][color]' ) . '" id="' . esc_attr( $value['id'] . '_color' ) . '" class="of-color of-typography-color  type="text" value="' . esc_attr( $typography_stored['color'] ) . '"' . $default_color .' />';
+					$font_color = '<input name="' . esc_attr( $option_name . '[' . $value['id'] . '][color]' ) . '" id="' . esc_attr( $value['id'] . '_color' ) . '" class="of-color of-typography-color color-picker" data-alpha="true"  type="text" value="' . esc_attr( $typography_stored['color'] ) . '"' . $default_color .' />';
 				}
 
 				// Allow modification/injection of typography fields

includes/class-options-sanitization.php

@@ -187,7 +187,7 @@ function of_sanitize_background( $input ) {
 		'attachment' => 'scroll'
 	) );
 
-	$output['color'] = apply_filters( 'of_sanitize_hex', $input['color'] );
+	$output['color'] = apply_filters( 'of_sanitize_color', $input['color'] );
 	$output['image'] = apply_filters( 'of_sanitize_upload', $input['image'] );
 	$output['repeat'] = apply_filters( 'of_background_repeat', $input['repeat'] );
 	$output['position'] = apply_filters( 'of_background_position', $input['position'] );
@@ -366,7 +366,26 @@ function of_sanitize_hex( $hex, $default = '' ) {
 	}
 	return $default;
 }
-add_filter( 'of_sanitize_color', 'of_sanitize_hex' );
+add_filter( 'of_sanitize_hex', 'of_sanitize_hex' );
+
+/**
+ * Sanitize a color
+ *
+ * @param    string    Color in hexadecimal, rgba, or rgba notation. "#" may or may not be prepended to the hexadecimal
+ * @param    string    The value that this function should return if it cannot be recognized as a color.
+ * @return   string
+ */
+
+function of_sanitize_color( $color, $default = '' ) {
+	if ( of_validate_hex( $color ) ) {
+		return $color;
+	}
+    elseif ( of_validate_rgba_hsla( $color ) ) {
+        return $color;
+    }
+	return $default;
+}
+add_filter( 'of_sanitize_color', 'of_sanitize_color' );
 
 /**
  * Get recognized font sizes.
@@ -450,3 +469,15 @@ function of_validate_hex( $hex ) {
 		return true;
 	}
 }
+
+/**
+ * Is a given string a color formatted in rgb(a) or hsl(a) notation?
+ *
+ * @param    string    Color in rgb(a) or hsl(a) notation.
+ * @return   bool
+ */
+function of_validate_rgba_hsla ( $color ) {
+    $color = trim( $color );
+
+    return preg_match( '/^(rgb|hsl)a?\((-?\d+%?(deg|rad|grad|turn)?[,\s]+){2,3}[\s\/]*[\d\.]+%?\)$/i', $color );
+}

options-framework.php

@@ -12,7 +12,7 @@
  * Plugin Name: Options Framework
  * Plugin URI:  http://wptheming.com
  * Description: A framework for building theme options.
- * Version:     1.8.6
+ * Version:     1.9.1
  * Author:      Devin Price
  * Author URI:  http://wptheming.com
  * License:     GPL-2.0+