added color picker field type

WebDevStudios · Jan 18, 2012 · 818a252 · 818a252
1 parent 048b729
commit 818a252
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/example-functions.php b/example-functions.php
@@ -62,7 +62,7 @@ function be_sample_metaboxes( array $meta_boxes ) {
 				'name' => 'Test Date/Time Picker Combo (UNIX timestamp)',
 				'desc' => 'field description (optional)',
 				'id'   => $prefix . 'test_datetime_timestamp',
-				'type' => 'text_datetime_timestamp',
+				'type' => 'text_datetime',
 			),
 			array(
 	            'name' => 'Test Time',
@@ -76,6 +76,13 @@ function be_sample_metaboxes( array $meta_boxes ) {
 				'id'   => $prefix . 'test_textmoney',
 				'type' => 'text_money',
 			),
+			array(
+	            'name' => 'Test Color Picker',
+	            'desc' => 'field description (optional)',
+	            'id'   => $prefix . 'test_colorpicker',
+	            'type' => 'colorpicker',
+				'std'  => '#ffffff'
+	        ),
 			array(
 				'name' => 'Test Text Area',
 				'desc' => 'field description (optional)',

diff --git a/init.php b/init.php
@@ -53,15 +53,12 @@ function check_text( $text ) {
 }
 
 /**
- * CMB_META_BOX_URL
- *
  * Defines the url to which is used to load local resources.
- * This may need to be filtered for local Window installtions.
+ * This may need to be filtered for local Window installations.
  * If resources to not load, please check the wiki for details.
  */
 define( 'CMB_META_BOX_URL', apply_filters( 'cmb_meta_box_url', trailingslashit( str_replace( WP_CONTENT_DIR, WP_CONTENT_URL, dirname( __FILE__ ) ) ) ) );
 
-
 /**
  * Create meta boxes
  */
@@ -219,13 +216,15 @@ function show() {
 					echo '<input class="cmb_text_small cmb_datepicker" type="text" name="', $field['id'], '[date]" id="', $field['id'], '_date" value="', '' !== $meta ? date( 'm\/d\/Y', $meta ) : $field['std'], '" />';
 					echo '<input class="cmb_timepicker text_time" type="text" name="', $field['id'], '[time]" id="', $field['id'], '_time" value="', '' !== $meta ? date( 'h:i A', $meta ) : $field['std'], '" /><span class="cmb_metabox_description" >', $field['desc'], '</span>';
 					break;
-
 				case 'text_time':
 					echo '<input class="cmb_timepicker text_time" type="text" name="', $field['id'], '" id="', $field['id'], '" value="', '' !== $meta ? $meta : $field['std'], '" /><span class="cmb_metabox_description">', $field['desc'], '</span>';
 					break;					
 				case 'text_money':
 					echo '$ <input class="cmb_text_money" type="text" name="', $field['id'], '" id="', $field['id'], '" value="', '' !== $meta ? $meta : $field['std'], '" /><span class="cmb_metabox_description">', $field['desc'], '</span>';
 					break;
+				case 'text_colorpicker':
+					echo '<input class="cmb_colorpicker cmb_text_small" type="text" name="', $field['id'], '" id="', $field['id'], '" value="', '' !== $meta ? $meta : $field['std'], '" /><span class="cmb_metabox_description">', $field['desc'], '</span>';
+					break;
 				case 'textarea':
 					echo '<textarea name="', $field['id'], '" id="', $field['id'], '" cols="60" rows="10">', '' !== $meta ? $meta : $field['std'], '</textarea>','<p class="cmb_metabox_description">', $field['desc'], '</p>';
 					break;
@@ -481,10 +480,10 @@ function save( $post_id)  {
 function cmb_scripts( $hook ) {
   	if ( $hook == 'post.php' || $hook == 'post-new.php' || $hook == 'page-new.php' || $hook == 'page.php' ) {
 		wp_register_script( 'cmb-timepicker', CMB_META_BOX_URL . 'js/jquery.timePicker.min.js' );
-		wp_register_script( 'cmb-scripts', CMB_META_BOX_URL . 'js/cmb.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'media-upload', 'thickbox' ) );
+		wp_register_script( 'cmb-scripts', CMB_META_BOX_URL . 'js/cmb.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'media-upload', 'thickbox', 'farbtastic' ) );
 		wp_enqueue_script( 'cmb-timepicker' );
 		wp_enqueue_script( 'cmb-scripts' );
-		wp_register_style( 'cmb-styles', CMB_META_BOX_URL . 'style.css', array( 'thickbox' ) );
+		wp_register_style( 'cmb-styles', CMB_META_BOX_URL . 'style.css', array( 'thickbox', 'farbtastic' ) );
 		wp_enqueue_style( 'cmb-styles' );
   	}
 }

diff --git a/js/cmb.js b/js/cmb.js
@@ -41,6 +41,20 @@ jQuery(document).ready(function ($) {
 	});
 	// Wrap date picker in class to narrow the scope of jQuery UI CSS and prevent conflicts
 	$("#ui-datepicker-div").wrap('<div class="cmb_element" />');
+
+	/**
+	 * Initialize color picker
+	 */
+    $('input:text.cmb_colorpicker').each(function (i) {
+        $(this).after('<div id="picker-' + i + '" style="z-index: 1000; background: #EEE; border: 1px solid #CCC; position: absolute; display: block;"></div>');
+        $('#picker-' + i).hide().farbtastic($(this));
+    })
+    .focus(function() {
+        $(this).next().show();
+    })
+    .blur(function() {
+        $(this).next().hide();
+    });
 
 	/**
 	 * File and image upload handling

diff --git a/readme.md b/readme.md
@@ -28,6 +28,7 @@ Custom Metaboxes and Fields (CMB for short) will create metaboxes with custom fi
 * date picker (unix timestamp)
 * date time picker combo (unix timestamp)
 * time picker
+* color picker
 * textarea
 * textarea small
 * textarea code
@@ -87,6 +88,7 @@ This script is easy to install. If you can't figure it out you probably shouldn'
 * Fixed improper labels on radio and multicheck fields, props @jaredatch
 * Fixed fields not rendering properly when in sidebar, props @jaredatch
 * Added date time combo picker, props @jaredatch
+* Added color picker, props @jaredatch
 
 ### 0.8
 * Added jQuery timepicker, props @norcross