Give the option to use a rgba colorpicker

sshyran · Nov 23, 2017 · 6fce2e7 · 6fce2e7
1 parent 4b53f2a
commit 6fce2e7
Show file tree

Hide file tree

Showing 6 changed files with 570 additions and 6 deletions.
diff --git a/example-functions.php b/example-functions.php
@@ -260,6 +260,9 @@ function yourprefix_register_demo_metabox() {
 		'id'      => $prefix . 'colorpicker',
 		'type'    => 'colorpicker',
 		'default' => '#ffffff',
+		// 'options' => array(
+		// 	'alpha' => true, // Make this a rgba color picker.
+		// ),
 		// 'attributes' => array(
 		// 	'data-colorpicker' => json_encode( array(
 		// 		'palettes' => array( '#3dd0cc', '#ff834c', '#4fa2c0', '#0bc991', ),

diff --git a/includes/CMB2.php b/includes/CMB2.php
@@ -1446,6 +1446,12 @@ public function add_field( array $field, $position = 0 ) {
 					$field['render_row_cb'] = array( $this, 'render_group_callback' );
 				}
 				break;
+			case 'colorpicker':
+				// https://github.com/JayWood/CMB2_RGBa_Picker
+				// Dequeue the rgba_colorpicker custom field script if it is used,
+				// since we now enqueue our own more current version.
+				add_action( 'admin_enqueue_scripts', array( 'CMB2_Type_Colorpicker', 'dequeue_rgba_colorpicker_script' ), 99 );
+				break;
 		}
 
 		if ( isset( $field['column'] ) && false !== $field['column'] ) {

diff --git a/includes/CMB2_JS.php b/includes/CMB2_JS.php
@@ -63,8 +63,14 @@ public static function enqueue() {
 		$min = $debug ? '' : '.min';
 
 		// if colorpicker
-		if ( ! is_admin() && isset( $dependencies['wp-color-picker'] ) ) {
-			self::colorpicker_frontend();
+		if ( isset( $dependencies['wp-color-picker'] ) ) {
+			if ( ! is_admin() ) {
+				self::colorpicker_frontend();
+			}
+
+			if ( isset( $dependencies['wp-color-picker-alpha'] ) ) {
+				self::register_colorpicker_alpha();
+			}
 		}
 
 		// if file/file_list
@@ -75,7 +81,7 @@ public static function enqueue() {
 
 		// if timepicker
 		if ( isset( $dependencies['jquery-ui-datetimepicker'] ) ) {
-			wp_register_script( 'jquery-ui-datetimepicker', CMB2_Utils::url( 'js/jquery-ui-timepicker-addon.min.js' ), array( 'jquery-ui-slider' ), CMB2_VERSION );
+			self::register_datetimepicker();
 		}
 
 		// if cmb2-wysiwyg
@@ -95,6 +101,36 @@ public static function enqueue() {
 		do_action( 'cmb2_footer_enqueue' );
 	}
 
+	/**
+	 * Register or enqueue the wp-color-picker-alpha script.
+	 *
+	 * @since  2.2.7
+	 *
+	 * @param  boolean $enqueue
+	 *
+	 * @return void
+	 */
+	public static function register_colorpicker_alpha( $enqueue = false ) {
+		// Only use minified files if SCRIPT_DEBUG is off
+		$min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
+		$func = $enqueue ? 'wp_enqueue_script' : 'wp_register_script';
+		$func( 'wp-color-picker-alpha', CMB2_Utils::url( "js/wp-color-picker-alpha{$min}.js" ), array( 'wp-color-picker' ), '2.1.3' );
+	}
+
+	/**
+	 * Register or enqueue the jquery-ui-datetimepicker script.
+	 *
+	 * @since  2.2.7
+	 *
+	 * @param  boolean $enqueue
+	 *
+	 * @return void
+	 */
+	public static function register_datetimepicker( $enqueue = false ) {
+		$func = $enqueue ? 'wp_enqueue_script' : 'wp_register_script';
+		$func( 'jquery-ui-datetimepicker', CMB2_Utils::url( 'js/jquery-ui-timepicker-addon.min.js' ), array( 'jquery-ui-slider' ), '1.5.0' );
+	}
+
 	/**
 	 * We need to register colorpicker on the front-end
 	 *

diff --git a/includes/types/CMB2_Type_Colorpicker.php b/includes/types/CMB2_Type_Colorpicker.php
@@ -46,13 +46,25 @@ public function render() {
 
 		wp_enqueue_style( 'wp-color-picker' );
 
-		$args = wp_parse_args( $this->args, array(
+		$args = array(
 			'class'           => 'cmb2-colorpicker cmb2-text-small',
 			'value'           => $meta_value,
-			'js_dependencies' => 'wp-color-picker',
-		) );
+			'js_dependencies' => array( 'wp-color-picker' ),
+		);
+
+		if ( $this->field->options( 'alpha' ) ) {
+			$args['js_dependencies'][] = 'wp-color-picker-alpha';
+			$args['data-alpha'] = 'true';
+		}
+
+		$args = wp_parse_args( $this->args, $args );
 
 		return parent::render( $args );
 	}
 
+	public static function dequeue_rgba_colorpicker_script() {
+		wp_dequeue_script( 'jw-cmb2-rgba-picker-js' );
+		CMB2_JS::register_colorpicker_alpha( true );
+	}
+
 }