Permalink
Browse files

added color picker field type

  • Loading branch information...
jaredatch
jaredatch committed Jan 18, 2012
1 parent 048b729 commit 818a2524c904d0200579bf6c74d94cc49f5955a6
Showing with 30 additions and 8 deletions.
  1. +8 −1 example-functions.php
  2. +6 −7 init.php
  3. +14 −0 js/cmb.js
  4. +2 −0 readme.md
View
@@ -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)',
View
@@ -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' );
}
}
View
@@ -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
View
@@ -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

0 comments on commit 818a252

Please sign in to comment.