Add single value select box. Improved JS consistency. Blend in better…

… with WordPress 3.8 design refresh. Support CMB 1.0.1. Basic documentation.

README.md

@@ -1,4 +1,61 @@
-cmb-field-select2
-=================
+# CMB Field Type: Select2
 
-Select2 field type for Custom Metaboxes and Fields for WordPress
+## Description
+
+[Select2](http://ivaynberg.github.io/select2/) field type for [Custom Metaboxes and Fields for WordPress](https://github.com/WebDevStudios/Custom-Metaboxes-and-Fields-for-WordPress).
+
+This plugin gives you two CMB field types based on the Select2 script:
+
+1. The `pw_select` field acts much like the default `select` field. However, it adds typeahead-style search allowing you to quickly make a selection from a large list
+2. The `pw_multiselect` field allows you to select multiple values with typeahead-style search. The values can be dragged and dropped to reorder
+
+## Usage
+
+`pw_select` - Select box with with typeahead-style search. Example:
+```php
+array(
+	'name' => 'Cooking time',
+	'id' => $prefix . 'ingredients',
+	'desc' => 'Cooking time',
+	'options' => array(
+		'5' => '5 minutes',
+		'10' => '10 minutes',
+		'30' => 'Half an hour',
+		'60' => '1 hour',
+	),
+	'type' => 'pw_select',
+	'sanitization_cb' => 'pw_select2_sanitise',
+),
+```
+
+`pw_multiselect` - Multi-value select box with drag and drop reordering. Example:
+```php
+array(
+	'name' => 'Ingredients',
+	'id' => $prefix . 'ingredients',
+	'desc' => 'Select ingredients. Drag to reorder.',
+	'options' => array(
+		'flour' => 'Flour',
+		'salt' => 'Salt',
+		'eggs' => 'Eggs',
+		'milk' => 'Milk',
+		'butter' => 'Butter',
+	),
+	'type' => 'pw_multiselect',
+	'sanitization_cb' => 'pw_select2_sanitise',
+),
+```
+
+## Screenshots
+
+### Select box
+
+![Image](screenshot-1.png?raw=true)
+
+### Multi-value select box
+
+![Image](screenshot-2.png?raw=true)
+
+![Image](screenshot-3.png?raw=true)
+
+![Image](screenshot-4.png?raw=true)

cmb-field-select2.php

@@ -1,58 +1,86 @@
 <?php
-
-	/*
-		Plugin Name: CMB Field Type: Select2
-		Plugin URI: https://github.com/mustardBees/cmb-field-select2
-		Description: Select2 field type for Custom Metaboxes and Fields for WordPress
-		Version: 0.1
-		Author: Phil Wylie
-		Author URI: http://www.philwylie.co.uk/
-	*/
-
-
-
-	/**
-	 * Render our interface
-	 */
-	function pw_select2_field( $field, $meta ) {
-		wp_enqueue_script( 'pw-select2-field-js', plugin_dir_url( __FILE__ ) . 'js/select2/select2.min.js', array( 'jquery-ui-sortable' ), '3.2' );
-		wp_enqueue_script( 'pw-select2-field-init', plugin_dir_url( __FILE__ ) . 'js/select2-init.js', array( 'pw-select2-field-js' ), '1.0' );
-		wp_enqueue_style( 'pw-select2-field-css', plugin_dir_url( __FILE__ ) . 'js/select2/select2.css' );
-		wp_enqueue_style( 'pw-select2-field-mods', plugin_dir_url( __FILE__ ) . 'css/select2.css' );
-
-		$options = array();
-
-		if ( isset( $field['options'] ) && ! empty( $field['options'] ) ) {
-			foreach ( $field['options'] as $option ) {
-				$options[] = array(
-					'id' => $option['value'],
-					'text' => $option['name']
-				);
-			}
+/*
+Plugin Name: CMB Field Type: Select2
+Plugin URI: https://github.com/mustardBees/cmb-field-select2
+Description: Select2 field type for Custom Metaboxes and Fields for WordPress
+Version: 0.2
+Author: Phil Wylie
+Author URI: http://www.philwylie.co.uk/
+License: GPLv2+
+*/
+
+// Useful global constants
+define( 'PW_SELECT2_URL', plugin_dir_url( __FILE__ ) );
+
+/**
+ * Enqueue scripts and styles, call requested select box field
+ */
+function pw_select2( $field, $meta ) {
+	wp_enqueue_script( 'pw-select2-field-js', PW_SELECT2_URL . 'js/select2/select2.min.js', array( 'jquery-ui-sortable' ), '3.4.5' );
+	wp_enqueue_script( 'pw-select2-field-init', PW_SELECT2_URL . 'js/select2-init.js', array( 'pw-select2-field-js' ), null );
+	wp_enqueue_style( 'pw-select2-field-css', PW_SELECT2_URL . 'js/select2/select2.css', array(), '3.4.5' );
+	wp_enqueue_style( 'pw-select2-field-mods', PW_SELECT2_URL . 'css/select2.css', array(), null );
+
+	call_user_func( $field['type'], $field, $meta );
+
+	echo ( isset( $field['desc'] ) && ! empty( $meta ) ? '<p class="cmb_metabox_description">' . $field['desc'] . '</p>' : '' );
+}
+add_filter( 'cmb_render_pw_select', 'pw_select2', 10, 2 );
+add_filter( 'cmb_render_pw_multiselect', 'pw_select2', 10, 2 );
+
+/**
+ * Render select box field
+ */
+function pw_select( $field, $meta ) {
+	echo '<select name="', $field['id'], '" id="', $field['id'], '" data-placeholder="' . $field['desc'] . '" class="select2">';
+	echo '<option></option>';
+	if ( isset( $field['options'] ) && ! empty( $field['options'] ) ) {
+		foreach ( $field['options'] as $option_key => $option ) {
+			$label = isset( $option['name'] ) ? $option['name'] : $option;
+			$value = isset( $option['value'] ) ? $option['value'] : $option_key;
+
+			echo '<option value="', $value, '" ', selected( $meta == $value ) ,'>', $label, '</option>';
 		}
-
-		wp_localize_script( 'pw-select2-field-init', $field['id'] . '_data', $options );
-
-		if ( ! empty( $meta ) ) {
-			$meta = implode( ',', $meta );
-		}
-
-		echo '<input type="hidden" name="' . $field['id'] . '" id="' . $field['id'] . '" data-placeholder="' . $field['desc'] . '" class="select2" value="' . $meta . '" />';
 	}
-	add_filter( 'cmb_render_select2', 'pw_select2_field', 10, 2 );
-
-
-	/**
-	 * Split latitude/longitude values into two meta fields
-	 */
-	function pw_select2_field_validation( $new ) {
-		if ( empty( $new ) ) {
-			$new = '';
-		} else {
-			$new = explode( ',', $new );
+	echo '</select>';
+}
+
+/**
+ * Render multi-value select box field
+ */
+function pw_multiselect( $field, $meta ) {
+	$options = array();
+
+	if ( isset( $field['options'] ) && ! empty( $field['options'] ) ) {
+		foreach ( $field['options'] as $option_key => $option ) {
+			$label = isset( $option['name'] ) ? $option['name'] : $option;
+			$value = isset( $option['value'] ) ? $option['value'] : $option_key;
+
+			$options[] = array(
+				'id' => $value,
+				'text' => $label
+			);
 		}
-
-		return $new;
 	}
-	add_filter( 'cmb_validate_select2', 'pw_select2_field_validation', 10, 3 );
-
+
+	wp_localize_script( 'pw-select2-field-init', $field['id'] . '_data', $options );
+
+	if ( ! empty( $meta ) ) {
+		$meta = implode( ',', $meta );
+	}
+
+	echo '<input type="hidden" name="' . $field['id'] . '" id="' . $field['id'] . '" data-placeholder="' . $field['desc'] . '" class="select2" value="' . $meta . '" />';
+}
+
+/**
+ * Handle saving of single and multi-value select fields
+ */
+function pw_select2_sanitise( $meta_value, $field ) {
+	if ( empty( $meta_value ) ) {
+		$meta_value = '';
+	} elseif ( 'pw_multiselect' == $field['type'] ) {
+		$meta_value = explode( ',', $meta_value );
+	}
+
+	return $meta_value;
+}

css/select2.css

@@ -1,37 +1,55 @@
-.select2 {
+.select2-results .select2-highlighted {
+	background-color: #e0e0e0;
+	color: #444;
+}
+.select2-no-results {
+	padding: 3px 7px 4px;
+}
+.select2-container.select2-allowclear abbr.select2-search-choice-close {
+	top: 6px;
+}
+.select2-search .select2-input {
+	min-height: 24px;
+	height: 24px !important;
+}
+.select2-drop-active,
+.select2-container-active .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choice {
+	border-color: #999;
+}
+.select2-container-multi {
 	width: 97%;
 }
 .select2-container-multi .select2-choices .select2-search-field input {
-	height: 25px;
+	height: 29px;
 }
-.select2-container-multi .select2-choices {
-	border-color: #dfdfdf;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	background: #fff;
+.select2-container-multi .select2-search-choice-close {
+	top: 5px;
+	left: 5px;
+	-moz-transition: none;
+	-webkit-transition: none;
+	-o-transition: color 0 ease-in;
+	transition: none;
 }
 .select2-container-multi .select2-choices .select2-search-choice {
-	padding: 4px 5px 2px 18px;
+	padding: 5px 6px 5px 19px;
+	cursor: move;
+}
+.select2-container-multi .select2-choices {
+	border-color: #DDD;
+	background-image: none;
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
 }
 .select2-container-multi.select2-container-active .select2-choices {
-	border-color: #AAA;
-	-webkit-border-bottom-right-radius: 0;
-	-webkit-border-bottom-left-radius: 0;
-	-moz-border-radius-bottomright: 0;
-	-moz-border-radius-bottomleft: 0;
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
-
-	-webkit-box-shadow:: none;
-	-moz-box-shadow: none;
-	-o-box-shadow: none;
-	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-
-}
-.select2-search-choice-close {
-	top: 3px;
+	background-color: #FFFFF8;
+	border-color: #999;
+	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-.select2-results .select2-highlighted {
-	background-color: #eaf2fa;
-	color: #000;
+.select2-drop-multi.select2-drop-active {
+	background-color: #FFFFF8;
+	border-color: #999;
+	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	border-radius: 0;
 }

js/select2-init.js

@@ -1,44 +1,51 @@
-jQuery(document).ready(function ($) {
-
-	$('.select2').each(function() {
-		var instance = $(this).attr('id');
-
-		var instance_data = window[instance + '_data']
-
-		$(this).select2({
-			multiple : true,
+(function( $ ) {
+
+	$( '.cmb-type-pw_select .select2' ).each(function() {
+		$( this ).select2({
+			allowClear: true
+		});
+	});
+
+	$( '.cmb-type-pw_multiselect .select2' ).each(function() {
+		var instance = $( this ).attr( 'id' ),
+			instance_data = window[ instance + '_data' ];
+
+		$( this ).select2({
+			multiple: true,
 			data: instance_data,
-			initSelection: function(element, callback) {
+			initSelection: function( element, callback ) {
 				var data = [];
-				
-				$(element.val().split(",")).each(function() {
-					text = select2_find_text(this, instance_data);
-					
-					if('undefined' != typeof text) {
+
+				$( element.val().split( ',' ) ).each(function() {
+					var text = pw_select2_find_text( this, instance_data );
+
+					if ( text != null ) {
 						data.push({
 							id: this,
 							text: text
 						});
 					}
 				});
-				
-				callback(data);
+
+				callback( data );
 			}
 		});
-		
-		$(this).select2("container").find("ul.select2-choices").sortable({
+
+		$( this ).select2( 'container' ).find( 'ul.select2-choices' ).sortable({
 			containment: 'parent',
-			start: function() { $(".select2").select2("onSortStart"); },
-			update: function() { $(".select2").select2("onSortEnd"); }
+			start: function() { $( '.select2' ).select2( 'onSortStart' ); },
+			update: function() { $( '.select2' ).select2( 'onSortEnd' ); }
 		});
 	});
-
-	function select2_find_text(id, instance_data) {
-		for(var i = 0; i < instance_data.length; i++) {
-			if(id == instance_data[i].id) {
-				return instance_data[i].text;
+
+	function pw_select2_find_text( id, instance_data ) {
+		var i, l;
+
+		for ( i = 0, l = instance_data.length; i < l; i++ ) {
+			if ( id == instance_data[ i ].id ) {
+				return instance_data[ i ].text;
 			}
 		}
 	}
-	
-});
+
+})(jQuery);