├── cmb2-field-order.php
├── css
    └── order.css
├── example.gif
├── js
    └── order.js
└── readme.md


/cmb2-field-order.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * @package      CMB2\Field_Order
  4 |  * @author       Tsunoa
  5 |  * @copyright    Copyright (c) Tsunoa
  6 |  *
  7 |  * Plugin Name: CMB2 Field Type: Order
  8 |  * Plugin URI: https://github.com/rubengc/cmb2-field-order
  9 |  * GitHub Plugin URI: https://github.com/rubengc/cmb2-field-order
 10 |  * Description: CMB2 field type to allow pick an order of predefined options.
 11 |  * Version: 1.0.1
 12 |  * Author: Tsunoa
 13 |  * Author URI: https://tsunoa.com/
 14 |  * License: GPLv2+
 15 |  */
 16 | 
 17 | 
 18 | // Exit if accessed directly
 19 | if( !defined( 'ABSPATH' ) ) exit;
 20 | 
 21 | if( !class_exists( 'CMB2_Field_Order' ) ) {
 22 |     /**
 23 |      * Class CMB2_Field_Order
 24 |      */
 25 |     class CMB2_Field_Order {
 26 | 
 27 |         /**
 28 |          * Current version number
 29 |          */
 30 |         const VERSION = '1.0.0';
 31 | 
 32 |         /**
 33 |          * Initialize the plugin by hooking into CMB2
 34 |          */
 35 |         public function __construct() {
 36 |             add_action( 'admin_enqueue_scripts', array( $this, 'setup_admin_scripts' ) );
 37 |             add_action( 'cmb2_render_order', array( $this, 'render' ), 10, 5 );
 38 |             add_action( 'cmb2_sanitize_order', array( $this, 'sanitize' ), 10, 4 );
 39 |         }
 40 | 
 41 |         /**
 42 |          * Render field
 43 |          */
 44 |         public function render( $field, $value, $object_id, $object_type, $field_type ) {
 45 |             $field_name = $field->_name();
 46 | 
 47 |             $options = (array) $field->args( 'options' );
 48 | 
 49 |             if ( is_callable( $field->args( 'options_cb' ) ) ) {
 50 |                 $options_cb = call_user_func( $field->args( 'options_cb' ), $field );
 51 | 
 52 |                 if ( $options_cb && is_array( $options_cb ) ) {
 53 |                     $options = $options_cb + $options;
 54 |                 }
 55 |             }
 56 | 
 57 |             if( $options && is_array( $options ) ) {
 58 | 
 59 |                 if( ! isset( $value ) || empty( $value ) || ! is_array( $value ) ) {
 60 |                     $value = array();
 61 | 
 62 |                     // Initialize value if not exists or is empty
 63 |                     foreach( $options as $key => $option) {
 64 |                         $value[] = $key;
 65 |                     }
 66 |                 } else {
 67 |                     // Check if all options exists in $value
 68 |                     foreach( $options as $key => $option) {
 69 |                         if( ! in_array( $key, $value ) ) {
 70 |                             $value[] = $key;
 71 |                         }
 72 |                     }
 73 |                 } ?>
 74 | 
 75 |                 <ul class="cmb-order-items <?php echo ( $field->args( 'inline' ) ? 'cmb-order-inline' : '' ); ?>" id="<?php echo $field_name; ?>_items">
 76 | 
 77 |                 <?php foreach( $value as $key ) :
 78 |                     if( isset( $options[$key] ) ) : ?>
 79 |                         <li>
 80 |                             <input type="hidden" name="<?php echo $field_name ; ?>[]" value="<?php echo $key; ?>"><span><?php echo $options[$key]; ?></span>
 81 |                         </li>
 82 |                     <?php endif;
 83 |                 endforeach; ?>
 84 | 
 85 |                 </ul>
 86 | 
 87 |                 <?php
 88 |             }
 89 | 
 90 |             $field_type->_desc( true, true );
 91 | 
 92 |         }
 93 | 
 94 |         public function sanitize( $override_value, $value, $object_id, $field_args ) {
 95 |             $fid = $field_args['id'];
 96 | 
 97 |             if( $field_args['render_row_cb'][0]->data_to_save[$fid] ) {
 98 |                 $value = $field_args['render_row_cb'][0]->data_to_save[$fid];
 99 |             } else {
100 |                 $value = false;
101 |             }
102 | 
103 |             return $value;
104 |         }
105 | 
106 |         /**
107 |          * Enqueue scripts and styles
108 |          */
109 |         public function setup_admin_scripts() {
110 |             wp_register_script( 'cmb-field-order', plugins_url( 'js/order.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), self::VERSION, true );
111 |             wp_enqueue_script( 'cmb-field-order' );
112 | 
113 |             wp_enqueue_style( 'cmb-field-order', plugins_url( 'css/order.css', __FILE__ ), array(), self::VERSION );
114 |             wp_enqueue_style( 'cmb-field-order' );
115 | 
116 |         }
117 | 
118 |     }
119 | 
120 |     $cmb2_field_order = new CMB2_Field_Order();
121 | }
122 | 


--------------------------------------------------------------------------------
/css/order.css:
--------------------------------------------------------------------------------
 1 | .cmb-order-items { width: 30em; padding: 0 1px; box-sizing: border-box; margin-bottom: 5px; }
 2 | .cmb-order-items li { margin: 0; border-bottom: 1px solid #f4f4f4; background: #fff; }
 3 | .cmb-order-items:not(.cmb-order-inline) li:last-child { border-bottom: none; }
 4 | .cmb-order-items li span { display: block; padding: 7px 5px; cursor:n-resize; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
 5 | .cmb-order-items .ui-state-highlight { background: #f4f4f4; }
 6 | 
 7 | .columns-2 #postbox-container-1 .cmb-order-items:not(.cmb-order-inline) { width: 100%; }
 8 | 
 9 | .cmb-order-items.cmb-order-inline { padding: 0; }
10 | .cmb-order-items.cmb-order-inline li { display: inline-block; border: 1px solid #f4f4f4; padding: 0; }
11 | .cmb-order-items.cmb-order-inline li:not(:last-child) { border-right: 0; }
12 | .cmb-order-items.cmb-order-inline li span { cursor:move; padding: 7px 10px; white-space: nowrap; }
13 | .cmb-order-items.cmb-order-inline .ui-state-highlight { display: inline-block; margin: 0; vertical-align: bottom; }
14 | 


--------------------------------------------------------------------------------
/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rubengc/cmb2-field-order/e38f352846a78941cdfb96e7b85675e51ec28dff/example.gif


--------------------------------------------------------------------------------
/js/order.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 |     $('.cmb-order-items').sortable({
 3 |         handle: 'span',
 4 |         placeholder: 'ui-state-highlight',
 5 |         forcePlaceholderSize: true,
 6 |     });
 7 | 
 8 |     $(document).on('widget-updated widget-added', function() {
 9 |         $('.cmb-order-items').sortable({
10 |             handle: 'span',
11 |             placeholder: 'ui-state-highlight',
12 |             forcePlaceholderSize: true,
13 |         });
14 |     });
15 | })(jQuery);


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # CMB2 custom field "order"
 2 | 
 3 | Custom field for [CMB2](https://github.com/WebDevStudios/CMB2) to store custom order of options.
 4 | 
 5 | ![example](example.gif)
 6 | 
 7 | ```php
 8 | add_action( 'cmb2_admin_init', 'cmb2_order_metabox' );
 9 | function cmb2_order_metabox() {
10 | 
11 | 	$prefix = 'your_prefix_demo_';
12 | 
13 | 	$cmb_demo = new_cmb2_box( array(
14 | 		'id'            => $prefix . 'metabox',
15 | 		'title'         => __( 'Test Metabox', 'cmb2' ),
16 | 		'object_types'  => array( 'page', 'post' ), // Post type
17 | 		// 'show_on_cb' => 'your_prefix_show_if_front_page', // function should return a bool value
18 | 		// 'context'    => 'normal',
19 | 		// 'priority'   => 'high',
20 | 		// 'show_names' => true, // Show field names on the left
21 | 		// 'cmb_styles' => false, // false to disable the CMB stylesheet
22 | 		// 'closed'     => true, // true to keep the metabox closed by default
23 | 	) );
24 | 
25 | 	$cmb_demo->add_field( array(
26 | 		'name'          => __( 'Test Order', 'cmb2' ),
27 | 		'desc'          => __( 'field description (optional)', 'cmb2' ),
28 | 		'id'            => $prefix . '_order',
29 | 		'type'          => 'order',
30 | 		// 'inline'        => true,
31 | 		'options'       => array(
32 | 			'option-1'  => __('Option 1', 'cmb2'),
33 | 			'option-2'  => __('Option 2', 'cmb2'),
34 | 			'option-3'  => __('Option 3', 'cmb2'),
35 | 		),
36 | 	) );
37 | 
38 | }
39 | ```
40 | 
41 | ## Changelog
42 | 
43 | ### 1.0.1
44 | * Sortable now works on Appearance >> Widgets
45 | 
46 | ### 1.0.0
47 | * Initial commit


--------------------------------------------------------------------------------