From 70a5b4d61d01a55dc67b5249671778655811e60b Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Wed, 24 Apr 2013 10:52:10 +0100 Subject: [PATCH 01/25] Sortable --- class.cmb-meta-box.php | 3 ++ custom-meta-boxes.php | 5 ++- js/cmb.js | 94 ++++++++++++++++++++++++++++++++++++++++- js/field-wysiwyg.js | 21 ++++++++- js/field.colorpicker.js | 2 +- style.css | 4 +- 6 files changed, 122 insertions(+), 7 deletions(-) diff --git a/class.cmb-meta-box.php b/class.cmb-meta-box.php index 8a221a91..63b12a79 100644 --- a/class.cmb-meta-box.php +++ b/class.cmb-meta-box.php @@ -246,6 +246,9 @@ static function layout_fields( array $fields ) { ?> if ( ! empty( $field->args['repeatable'] ) ) $classes[] = 'repeatable'; + if ( ! empty( $field->args['sortable'] ) ) + $classes[] = 'sortable'; + $classes[] = get_class($field); ?> diff --git a/custom-meta-boxes.php b/custom-meta-boxes.php index c592bc42..abcff44a 100755 --- a/custom-meta-boxes.php +++ b/custom-meta-boxes.php @@ -76,12 +76,13 @@ function cmb_scripts( $hook ) { $cmb_scripts = array( 'jquery', + 'jquery-ui-sortable', 'jquery-ui-core', 'jquery-ui-datepicker', 'media-upload', 'thickbox', 'wp-color-picker', - 'cmb-timepicker' + 'cmb-timepicker' ); $cmb_styles = array( @@ -233,4 +234,4 @@ function cmb_do_meta_boxes( $screen, $context, $object ) { return $i; -} \ No newline at end of file +} diff --git a/js/cmb.js b/js/cmb.js index 80fe3869..7d88fe34 100644 --- a/js/cmb.js +++ b/js/cmb.js @@ -12,6 +12,9 @@ var CMB = { _initCallbacks: [], _clonedFieldCallbacks: [], _deletedFieldCallbacks: [], + + _sortStartCallbacks: [], + _sortEndCallbacks: [], init : function() { @@ -24,6 +27,9 @@ var CMB = { jQuery( document ).on( 'click', '.repeat-field', function(e) { _this.repeatField.call( _this, e, this ); } ); _this.doneInit(); + + jQuery('.field.sortable' ).each( function() { _this.sortableInit.call( _this, this ); } ); + } ); @@ -66,6 +72,8 @@ var CMB = { } ); _this.clonedField( newT ) + + _this.sortableInit( field ); }, @@ -166,8 +174,90 @@ var CMB = { callbacks[a]( el ) }) - } + }, + + sortableInit : function( field ) { + + var _this = this; + + field = jQuery(field); + + var items = field.find('.field-item').not('.hidden'); + + field.find( '.handle' ).remove(); + items.each( function() { + jQuery(this).append( '
' ); + } ); + + field.sortable( { + handle: ".handle" , + cursor: "move", + items: ".field-item", + beforeStop: function( event, ui ) { _this.sortStart( jQuery( ui.item[0] ) ); }, + deactivate: function( event, ui ) { _this.sortEnd( jQuery( ui.item[0] ) ); }, + } ); + + }, + + sortStart : function ( el ) { + + var _this = this; + + // also check child elements + el.add( el.find( 'div[data-class]' ) ).each( function(i, el) { + + el = jQuery( el ) + var callbacks = _this._sortStartCallbacks[el.attr( 'data-class') ] + + if ( callbacks ) + for ( var a = 0; a < callbacks.length; a++ ) + callbacks[a]( el ) + + }) + + }, + + addCallbackForSortStart: function( fieldName, callback ) { + + if ( jQuery.isArray( fieldName ) ) + for ( var i = 0; i < fieldName.length; i++ ) + CMB.addCallbackForSortStart( fieldName[i], callback ); + + this._sortStartCallbacks[fieldName] = this._sortStartCallbacks[fieldName] ? this._sortStartCallbacks[fieldName] : [] + this._sortStartCallbacks[fieldName].push( callback ) + + }, + + sortEnd : function ( el ) { + + var _this = this; + + // also check child elements + el.add( el.find( 'div[data-class]' ) ).each( function(i, el) { + + el = jQuery( el ) + var callbacks = _this._sortEndCallbacks[el.attr( 'data-class') ] + + if ( callbacks ) + for ( var a = 0; a < callbacks.length; a++ ) + callbacks[a]( el ) + + }) + + }, + + addCallbackForSortEnd: function( fieldName, callback ) { + + if ( jQuery.isArray( fieldName ) ) + for ( var i = 0; i < fieldName.length; i++ ) + CMB.addCallbackForSortEnd( fieldName[i], callback ); + + this._sortEndCallbacks[fieldName] = this._sortEndCallbacks[fieldName] ? this._sortEndCallbacks[fieldName] : [] + this._sortEndCallbacks[fieldName].push( callback ) + + }, + } -CMB.init(); \ No newline at end of file +CMB.init(); diff --git a/js/field-wysiwyg.js b/js/field-wysiwyg.js index ceaafb6e..635d0647 100644 --- a/js/field-wysiwyg.js +++ b/js/field-wysiwyg.js @@ -63,4 +63,23 @@ CMB.addCallbackForClonedField( 'CMB_wysiwyg', function( newT ) { } ); -} ); \ No newline at end of file +} ); + + +CMB.addCallbackForSortStart( 'CMB_wysiwyg', function( el ) { + + el.find( '.wp-editor-area' ).each(function(){ + var id = jQuery(this).attr('id'); + tinyMCE.execCommand('mceRemoveControl', false, id); + }); + +} ); + +CMB.addCallbackForSortEnd( 'CMB_wysiwyg', function( el ) { + + el.find( '.wp-editor-area' ).each(function(){ + var id = jQuery(this).attr('id'); + tinyMCE.execCommand('mceAddControl', false, id); + }); + +} ); diff --git a/js/field.colorpicker.js b/js/field.colorpicker.js index 01bd32bc..a064e0db 100644 --- a/js/field.colorpicker.js +++ b/js/field.colorpicker.js @@ -15,4 +15,4 @@ CMB.addCallbackForClonedField( 'CMB_Color_Picker', function( newT ) { newT.find('.wp-color-result').remove(); newT.find('input:text.cmb_colorpicker').wpColorPicker(); -} ); +} ); \ No newline at end of file diff --git a/style.css b/style.css index d1085c77..c6c7ecb7 100644 --- a/style.css +++ b/style.css @@ -372,5 +372,7 @@ button.repeat-field { display: block !important; clear: both; } .CMB_File_Field .cmb-remove-file { position: absolute; top: 5px; right: 5px; z-index: 1; } .CMB_File_Field.repeatable .cmb-remove-file { display: none; } +.CMB_Color_Picker .field-item { float: left; clear: both; } -.CMB_Color_Picker .field-item { float: left; clear: both; } \ No newline at end of file +.sortable .field-item { padding-left: 20px; } +.sortable .handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } From 15b706587e734c28aef53d78cbaf9d30d0a7f14a Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Wed, 24 Apr 2013 11:52:51 +0100 Subject: [PATCH 02/25] file field fixes --- style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style.css b/style.css index c6c7ecb7..77a0ad08 100644 --- a/style.css +++ b/style.css @@ -376,3 +376,5 @@ button.repeat-field { display: block !important; clear: both; } .sortable .field-item { padding-left: 20px; } .sortable .handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } +.CMB_File_Field.sortable .field-item { margin-left: 20px !important; } +.CMB_File_Field.sortable .handle { margin-left: -20px !important; } From a21b2b015e5d1df69135b5fb0e42b422a2acd522 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Wed, 24 Apr 2013 11:53:03 +0100 Subject: [PATCH 03/25] group field fixes --- style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style.css b/style.css index 77a0ad08..1212965c 100644 --- a/style.css +++ b/style.css @@ -376,5 +376,9 @@ button.repeat-field { display: block !important; clear: both; } .sortable .field-item { padding-left: 20px; } .sortable .handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } + .CMB_File_Field.sortable .field-item { margin-left: 20px !important; } .CMB_File_Field.sortable .handle { margin-left: -20px !important; } + +.CMB_Group_Field.sortable > .field-item { position: relative; padding-top: 10px; } +.CMB_Group_Field.sortable > .field-item > .handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } From d4325352a52b2f3fd79e9a9741973c2dac6ec7ac Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Sat, 27 Apr 2013 11:58:44 +0100 Subject: [PATCH 04/25] only do sortable for direct children - avoid issues with sortable groups --- js/cmb.js | 8 ++++---- style.css | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/js/cmb.js b/js/cmb.js index 7d88fe34..6a356231 100644 --- a/js/cmb.js +++ b/js/cmb.js @@ -182,17 +182,17 @@ var CMB = { field = jQuery(field); - var items = field.find('.field-item').not('.hidden'); + var items = field.find(' > .field-item').not('.hidden'); - field.find( '.handle' ).remove(); + field.find( '> .field-item > .handle' ).remove(); items.each( function() { jQuery(this).append( '
' ); } ); field.sortable( { - handle: ".handle" , + handle: "> .handle" , cursor: "move", - items: ".field-item", + items: " > .field-item", beforeStop: function( event, ui ) { _this.sortStart( jQuery( ui.item[0] ) ); }, deactivate: function( event, ui ) { _this.sortEnd( jQuery( ui.item[0] ) ); }, } ); diff --git a/style.css b/style.css index 1212965c..d98ab26d 100644 --- a/style.css +++ b/style.css @@ -374,10 +374,10 @@ button.repeat-field { display: block !important; clear: both; } .CMB_Color_Picker .field-item { float: left; clear: both; } -.sortable .field-item { padding-left: 20px; } +.sortable > .field-item { padding-left: 20px; } .sortable .handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } -.CMB_File_Field.sortable .field-item { margin-left: 20px !important; } +.CMB_File_Field.sortable > .field-item { margin-left: 20px !important; } .CMB_File_Field.sortable .handle { margin-left: -20px !important; } .CMB_Group_Field.sortable > .field-item { position: relative; padding-top: 10px; } From ede4f59b0a3e5c21a3b6a9b66ff35c12d1a30411 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Sun, 28 Apr 2013 16:14:21 +0100 Subject: [PATCH 05/25] bug fix. not unsetting var correctly --- classes.fields.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/classes.fields.php b/classes.fields.php index 06946866..a3b8e417 100644 --- a/classes.fields.php +++ b/classes.fields.php @@ -690,7 +690,7 @@ public function parse_save_values() { // If date is empty, assume delete. If time is empty, assume 00:00. foreach( $this->values as $key => &$value ) { if ( empty( $value['date'] ) ) - unset( $value ); + unset( $this->values[$key] ); else $value = strtotime( $value['date'] . ' ' . $value['time'] ); } From fd1e3daa13d24ef64c8432c72f0818aa5ccdcb1d Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Sun, 28 Apr 2013 16:14:55 +0100 Subject: [PATCH 06/25] button with href??? --- classes.fields.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/classes.fields.php b/classes.fields.php index a3b8e417..cd643814 100644 --- a/classes.fields.php +++ b/classes.fields.php @@ -1308,7 +1308,7 @@ public function display() { - + Date: Sun, 28 Apr 2013 16:34:40 +0100 Subject: [PATCH 07/25] Comprehensive example file --- example-functions.php | 158 ++++++++++++++++++------------------------ 1 file changed, 68 insertions(+), 90 deletions(-) diff --git a/example-functions.php b/example-functions.php index b8cc9014..8278f803 100644 --- a/example-functions.php +++ b/example-functions.php @@ -1,5 +1,4 @@ 'Test Meta Box', - 'pages' => 'post', - 'context' => 'normal', - 'priority' => 'high', - 'show_names' => true, // Show field names on the left - 'fields' => array( + // Example of all available fields + + $fields = array( + + array( 'id' => 'field-1', 'name' => 'Text input field', 'type' => 'text' ), + array( 'id' => 'field-2', 'name' => 'Read-only text input field', 'type' => 'text', 'readonly' => true, 'default' => 'READ ONLY' ), + array( 'id' => 'field-3', 'name' => 'Repeatable text input field', 'type' => 'text', 'repeatable' => true, 'repeatable_min' => 5, 'repeatable_max' => 5 ), - array( 'id' => 'input', 'name' => 'A Normal text input', 'type' => 'text', 'cols' => 12, 'readonly' => true ), - array( 'id' => 'input2', 'name' => 'Test Repeatable Field', 'type' => 'text', 'cols' => 4, 'repeatable' => true ), - array( 'id' => 'input3', 'name' => 'URL Text Field', 'type' => 'url', 'cols' => 8 ), - array( 'id' => 'input4', 'name' => 'File field', 'type' => 'file' ), - - array( 'id' => 'input5', 'name' => 'Image', 'type' => 'image' ), - array( 'id' => 'input6', 'name' => 'Select Category', 'type' => 'taxonomy_select', 'taxonomy' => 'category' ), - array( 'id' => 'input7', 'name' => 'Checkbox 1', 'type' => 'checkbox' ), + array( 'id' => 'field-4', 'name' => 'Small text input field', 'type' => 'text_small' ), + array( 'id' => 'field-5', 'name' => 'URL field', 'type' => 'url' ), + + array( 'id' => 'field-6', 'name' => 'Radio input field', 'type' => 'radio', 'options' => array( 'Option 1', 'Option 2' ) ), + array( 'id' => 'field-7', 'name' => 'Checkbox field', 'type' => 'checkbox' ), + + array( 'id' => 'field-8', 'name' => 'WYSIWYG field', 'type' => 'wysiwyg',), - array( 'id' => 'group-1', 'name' => 'Group of Fields', 'type' => 'group', 'style' => 'background: #f1f1f1; border-radius: 4px; border: 1px solid #e2e2e2; margin-bottom: 10px; padding: 10px', 'repeatable' => false, 'fields' => array( - array( 'id' => 'group-1-1', 'name' => 'A Normal text input', 'type' => 'text' ), - array( 'id' => 'group-1-2', 'name' => 'Image', 'type' => 'image', 'cols' => 3, 'size' => 'width=200&height=120' ), - array( 'id' => 'group-1-3', 'name' => 'Select Category', 'type' => 'taxonomy_select', 'cols' => 5, 'taxonomy' => 'category' ), - array( 'id' => 'group-1-4', 'name' => 'Checkbox 1', 'type' => 'checkbox', 'cols' => 2, 'style' => 'margin-top: 35px; margin-left: 20px;' ), - array( 'id' => 'group-1-5', 'name' => 'Checkbox 2', 'type' => 'checkbox', 'cols' => 2, 'style' => 'margin-top: 35px' ) - ) ) + array( 'id' => 'field-9', 'name' => 'Textarea field', 'type' => 'textarea' ), + array( 'id' => 'field-10', 'name' => 'Code textarea field', 'type' => 'textarea_code' ), - ) + array( 'id' => 'field-11', 'name' => 'File field', 'type' => 'file', 'file_type' => 'image', 'repeatable' => 1, 'sortable' => 1 ), + array( 'id' => 'field-12', 'name' => 'Image upload field', 'type' => 'image', 'repeatable' => false ), + + array( 'id' => 'field-13', 'name' => 'Select field', 'type' => 'select', 'options' => array( 'option-1' => 'Option 1', 'option-2' => 'Option 2', 'option-3' => 'Option 3' ), 'allow_none' => true ), + array( 'id' => 'field-14', 'name' => 'Select field', 'type' => 'select', 'options' => array( 'option-1' => 'Option 1', 'option-2' => 'Option 2', 'option-3' => 'Option 3' ), 'multiple' => true ), + array( 'id' => 'field-15', 'name' => 'Select taxonomy field', 'type' => 'taxonomy_select', 'taxonomy' => 'category' ), + array( 'id' => 'field-16', 'name' => 'Post select field', 'type' => 'post_select', 'use_ajax' => false, 'query' => array( 'showposts' => -1 ) ), + array( 'id' => 'field-17', 'name' => 'Post select field (AJAX)', 'type' => 'post_select', 'use_ajax' => true, 'query' => array( 'showposts' => -1 ) ), + + array( 'id' => 'field-18', 'name' => 'Date input field', 'type' => 'date' ), + array( 'id' => 'field-19', 'name' => 'Time input field', 'type' => 'time' ), + array( 'id' => 'field-20', 'name' => 'Date (unix) input field', 'type' => 'date_unix' ), + array( 'id' => 'field-21', 'name' => 'Date & Time (unix) input field', 'type' => 'datetime_unix' ), + + array( 'id' => 'field-22', 'name' => 'Color', 'type' => 'colorpicker' ), + array( 'id' => 'field-23', 'name' => 'Oembed field', 'type' => 'oembed' ), + + array( 'id' => 'field-24', 'name' => 'Title Field', 'type' => 'title' ), ); - - // Posts Select meta boxe + $meta_boxes[] = array( - 'title' => 'Posts Select', + 'title' => 'CMB Test - all fields', 'pages' => 'post', - 'context' => 'normal', - 'priority' => 'high', - 'show_names' => true, // Show field names on the left - 'fields' => array( - - array( - 'id' => 'select-posts', - 'name' => 'Single Posts Select', - 'type' => 'post_select', - 'cols' => 6, - 'allow_none' => true, - 'multiple' => false, - 'query' => 'showposts=5' - ), + 'fields' => $fields + ); - array( - 'id' => 'select-multiple', - 'name' => 'Multiple Posts Select', - 'type' => 'post_select', - 'cols' => 6, - 'allow_none' => true, - 'multiple' => true - ), + // Examples of Groups and Columns - array( - 'id' => 'select-posts-ajax', - 'name' => 'Single Posts Ajax Select', - 'type' => 'post_select', - 'cols' => 6, - 'allow_none' => true, - 'multiple' => false , - 'use_ajax' => true - ), + $groups_and_cols = array( + array( 'id' => 'gac-1', 'name' => 'Text input field', 'type' => 'text', 'cols' => 4 ), + array( 'id' => 'gac-2', 'name' => 'Text input field', 'type' => 'text', 'cols' => 4 ), + array( 'id' => 'gac-3', 'name' => 'Text input field', 'type' => 'text', 'cols' => 4 ), + array( 'id' => 'gac-4', 'name' => 'Group (4 columns)', 'type' => 'group', 'cols' => 4, 'fields' => array( + array( 'id' => 'gac-4-f-1', 'name' => 'Textarea field', 'type' => 'textarea' ) + ) ), + array( 'id' => 'gac-5', 'name' => 'Group (8 columns)', 'type' => 'group', 'cols' => 8, 'fields' => array( + array( 'id' => 'gac-4-f-1', 'name' => 'Text input field', 'type' => 'text' ), + array( 'id' => 'gac-4-f-2', 'name' => 'Text input field', 'type' => 'text' ), + ) ), + ); - array( - 'id' => 'select-multiple-ajax', - 'name' => 'Mutliple Posts Ajax Select', - 'type' => 'post_select', - 'cols' => 6, - 'allow_none' => true, - 'multiple' => true, - 'use_ajax' => true - ) - ) + $meta_boxes[] = array( + 'title' => 'Groups and Columns', + 'pages' => 'post', + 'fields' => $groups_and_cols ); - // repeatble groups test + // Example of repeatable group. Using all fields. + // For this example, copy fields from $fields, update I + $group_fields = $fields; + foreach ( $group_fields as &$field ) { + $field['id'] = str_replace( 'field', 'gfield', $field['id'] ); + } + $meta_boxes[] = array( - 'title' => 'Repeatable Group', + 'title' => 'CMB Test - group (all fields)', 'pages' => 'post', - 'context' => 'normal', - 'priority' => 'high', - 'show_names' => true, // Show field names on the left 'fields' => array( - array( - 'id' => 'simple-group', - 'name' => 'Simple Repeatable Group', + 'id' => 'gp', + 'name' => 'Repeatable Group', 'type' => 'group', - 'cols' => 12, 'repeatable' => true, - 'fields' => array( - array( - 'id' => 'simple-group-text-1', - 'name' => 'Text Input 1', - 'type' => 'text' - ), - array( - 'id' => 'simple-group-text-2', - 'name' => 'Text Input 2', - 'type' => 'text' - ) - ) + 'sortable' => true, + 'fields' => $group_fields ) ) ); @@ -120,4 +98,4 @@ function cmb_sample_metaboxes( array $meta_boxes ) { return $meta_boxes; } -add_filter( 'cmb_meta_boxes', 'cmb_sample_metaboxes' ); \ No newline at end of file +add_filter( 'cmb_meta_boxes', 'cmb_sample_metaboxes' ); From 3bc3afe8d483fa66517da08fb193c97fd86b6ad1 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Sun, 28 Apr 2013 21:47:19 +0100 Subject: [PATCH 08/25] on load, set value for ajax post select --- classes.fields.php | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/classes.fields.php b/classes.fields.php index 35297c44..bfc34741 100644 --- a/classes.fields.php +++ b/classes.fields.php @@ -915,8 +915,6 @@ public function html() { args['ajax_url'] ) : ?> var query = JSON.parse( 'args['ajax_args'] ? wp_parse_args( $this->args['ajax_args'] ) : (object) array() ); ?>' ); - - options.data = []; args['multiple'] ) : ?> @@ -924,11 +922,29 @@ public function html() { - value ) as $post_id ) : ?> + value ) ) : ?> + + options.initSelection = function( element, callback ) { + + args['multiple'] ) : ?> + + var data = []; + + value as $post_id ) : ?> + data.push = value, get_the_title( $this->value ) ); ?>; + + + + + var data = value, get_the_title( $this->value ) ); ?>; + + + + callback( data ); + + }; - options.data.push( { id: , text: '' } ); - - + options.ajax = { url: 'args['ajax_url'] ); ?>', From cdf45e0bd607bf576002d5b4eb2647a20a12ae9d Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Sun, 28 Apr 2013 21:48:06 +0100 Subject: [PATCH 09/25] example editor height --- example-functions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example-functions.php b/example-functions.php index 8278f803..59c1e2bb 100644 --- a/example-functions.php +++ b/example-functions.php @@ -21,7 +21,7 @@ function cmb_sample_metaboxes( array $meta_boxes ) { array( 'id' => 'field-6', 'name' => 'Radio input field', 'type' => 'radio', 'options' => array( 'Option 1', 'Option 2' ) ), array( 'id' => 'field-7', 'name' => 'Checkbox field', 'type' => 'checkbox' ), - array( 'id' => 'field-8', 'name' => 'WYSIWYG field', 'type' => 'wysiwyg',), + array( 'id' => 'field-8', 'name' => 'WYSIWYG field', 'type' => 'wysiwyg', 'options' => array( 'editor_height' => '100' ) ), array( 'id' => 'field-9', 'name' => 'Textarea field', 'type' => 'textarea' ), array( 'id' => 'field-10', 'name' => 'Code textarea field', 'type' => 'textarea_code' ), From 9932664bbb3519aa692611faad3170f27654de13 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Tue, 30 Apr 2013 09:50:07 +0100 Subject: [PATCH 10/25] don't reinitialise tinyMCE after sorting if the editor is not set to tmce mode --- js/field-wysiwyg.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/js/field-wysiwyg.js b/js/field-wysiwyg.js index 635d0647..b259fc6d 100644 --- a/js/field-wysiwyg.js +++ b/js/field-wysiwyg.js @@ -78,8 +78,13 @@ CMB.addCallbackForSortStart( 'CMB_wysiwyg', function( el ) { CMB.addCallbackForSortEnd( 'CMB_wysiwyg', function( el ) { el.find( '.wp-editor-area' ).each(function(){ - var id = jQuery(this).attr('id'); - tinyMCE.execCommand('mceAddControl', false, id); + + var id = jQuery(this).attr('id'), + mode = jQuery(this).closest('.wp-editor-wrap').hasClass('tmce-active') ? 'tmce' : 'html'; + + if ( 'tmce' === mode ) + tinyMCE.execCommand('mceAddControl', false, id); + }); } ); From 5517d55505ceb7c69d3f00288c7ffd7303618b53 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Thu, 24 Oct 2013 09:09:35 +0100 Subject: [PATCH 11/25] prefix sortable classes --- class.cmb-meta-box.php | 2 +- js/cmb.js | 8 ++++---- style.css | 16 ++++++++-------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/class.cmb-meta-box.php b/class.cmb-meta-box.php index f663beb1..d23f619a 100644 --- a/class.cmb-meta-box.php +++ b/class.cmb-meta-box.php @@ -241,7 +241,7 @@ static function layout_fields( array $fields ) { ?> $classes[] = 'repeatable'; if ( ! empty( $field->args['sortable'] ) ) - $classes[] = 'sortable'; + $classes[] = 'cmb-sortable'; $classes[] = get_class($field); diff --git a/js/cmb.js b/js/cmb.js index 37866d92..5aecb694 100644 --- a/js/cmb.js +++ b/js/cmb.js @@ -38,7 +38,7 @@ var CMB = { _this.doneInit(); - jQuery('.field.sortable' ).each( function() { + jQuery('.field.cmb-sortable' ).each( function() { _this.sortableInit( jQuery(this) ); } ); @@ -235,14 +235,14 @@ var CMB = { var items = field.find(' > .field-item').not('.hidden'); - field.find( '> .field-item > .handle' ).remove(); + field.find( '> .field-item > .cmb-handle' ).remove(); items.each( function() { - jQuery(this).append( '
' ); + jQuery(this).append( '
' ); } ); field.sortable( { - handle: "> .handle" , + handle: "> .cmb-handle" , cursor: "move", items: " > .field-item", beforeStop: function( event, ui ) { _this.sortStart( jQuery( ui.item[0] ) ); }, diff --git a/style.css b/style.css index bda854b0..7950f129 100644 --- a/style.css +++ b/style.css @@ -386,18 +386,18 @@ button.repeat-field { display: block !important; clear: both; } .CMB_File_Field.repeatable .cmb-remove-file, .CMB_Image_Field.repeatable .cmb-remove-file { display: none !important; } +.cmb-sortable > .field-item { padding-left: 20px; } +.cmb-sortable .cmb-handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } -.sortable > .field-item { padding-left: 20px; } -.sortable .handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } +.CMB_File_Field.cmb-sortable > .field-item, +.CMB_Image_Field.cmb-sortable > .field-item { margin-left: 20px !important; margin-right: 28px !important; } -.CMB_File_Field.sortable > .field-item, -.CMB_Image_Field.sortable > .field-item { margin-left: 20px !important; margin-right: 28px !important; } +.CMB_File_Field.cmb-sortable .handle, +.CMB_Image_Field.cmb-sortable .handle { margin-left: -20px !important; } -.CMB_File_Field.sortable .handle, -.CMB_Image_Field.sortable .handle { margin-left: -20px !important; } +.CMB_Group_Field.cmb-sortable > .field-item { position: relative; padding-top: 10px; } +.CMB_Group_Field.cmb-sortable > .field-item > .handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } -.CMB_Group_Field.sortable > .field-item { position: relative; padding-top: 10px; } -.CMB_Group_Field.sortable > .field-item > .handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } .CMB_Color_Picker .field-item { float: left; clear: both; } .loading::before { content: ' '; display: block; background: url( 'images/wpspin.gif' ) no-repeat; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } From a24401f0ff05d1e5a5050e64824da9a2dd7ad0d7 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Thu, 24 Oct 2013 09:09:43 +0100 Subject: [PATCH 12/25] add sortable placeholder --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index 7950f129..27540acf 100644 --- a/style.css +++ b/style.css @@ -398,6 +398,7 @@ button.repeat-field { display: block !important; clear: both; } .CMB_Group_Field.cmb-sortable > .field-item { position: relative; padding-top: 10px; } .CMB_Group_Field.cmb-sortable > .field-item > .handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } +.cmb-sortable .ui-sortable-placeholder { border: 1px dashed #DDD; visibility: visible !important; } .CMB_Color_Picker .field-item { float: left; clear: both; } .loading::before { content: ' '; display: block; background: url( 'images/wpspin.gif' ) no-repeat; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } From 8fecd9d0e07a3166e0e644eb38ae05918d5b687a Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Thu, 24 Oct 2013 09:11:22 +0100 Subject: [PATCH 13/25] missed some classes --- style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 27540acf..19a11365 100644 --- a/style.css +++ b/style.css @@ -392,11 +392,11 @@ button.repeat-field { display: block !important; clear: both; } .CMB_File_Field.cmb-sortable > .field-item, .CMB_Image_Field.cmb-sortable > .field-item { margin-left: 20px !important; margin-right: 28px !important; } -.CMB_File_Field.cmb-sortable .handle, -.CMB_Image_Field.cmb-sortable .handle { margin-left: -20px !important; } +.CMB_File_Field.cmb-sortable .cmb-handle, +.CMB_Image_Field.cmb-sortable .cmb-handle { margin-left: -20px !important; } .CMB_Group_Field.cmb-sortable > .field-item { position: relative; padding-top: 10px; } -.CMB_Group_Field.cmb-sortable > .field-item > .handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } +.CMB_Group_Field.cmb-sortable > .field-item > .cmb-handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } .cmb-sortable .ui-sortable-placeholder { border: 1px dashed #DDD; visibility: visible !important; } From ec85e5a0d3ec0eb27fc2735d7c72ea4a334e6f22 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Thu, 24 Oct 2013 09:20:12 +0100 Subject: [PATCH 14/25] only trigger sortable on repeat for sortable fields --- js/cmb.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/cmb.js b/js/cmb.js index 5aecb694..8f675140 100644 --- a/js/cmb.js +++ b/js/cmb.js @@ -89,8 +89,9 @@ var CMB = { } ); _this.clonedField( newT ); - - _this.sortableInit( field ); + + if ( field.hasClass( 'cmb-sortable' ) ) + _this.sortableInit( field ); }, From cf2ad6e3746074acf7bf00cca849edb8d6eb921f Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Thu, 24 Oct 2013 09:27:39 +0100 Subject: [PATCH 15/25] Image fields don't really need drag handles --- style.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index 19a11365..98530d8e 100644 --- a/style.css +++ b/style.css @@ -389,16 +389,17 @@ button.repeat-field { display: block !important; clear: both; } .cmb-sortable > .field-item { padding-left: 20px; } .cmb-sortable .cmb-handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } -.CMB_File_Field.cmb-sortable > .field-item, -.CMB_Image_Field.cmb-sortable > .field-item { margin-left: 20px !important; margin-right: 28px !important; } +/*.CMB_File_Field.cmb-sortable > .field-item,*/ +/*.CMB_Image_Field.cmb-sortable > .field-item { margin-left: 20px !important; margin-right: 28px !important; }*/ .CMB_File_Field.cmb-sortable .cmb-handle, -.CMB_Image_Field.cmb-sortable .cmb-handle { margin-left: -20px !important; } +.CMB_Image_Field.cmb-sortable .cmb-handle { background: transparent; width: 100%; } +.CMB_Image_Field.cmb-sortable .cmb-file-upload { position: relative; z-index: 1; } .CMB_Group_Field.cmb-sortable > .field-item { position: relative; padding-top: 10px; } .CMB_Group_Field.cmb-sortable > .field-item > .cmb-handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } -.cmb-sortable .ui-sortable-placeholder { border: 1px dashed #DDD; visibility: visible !important; } +.cmb-sortable .ui-sortable-placeholder { border: 1px dashed #DDD; visibility: visible !important; margin-bottom: 6px !important; margin-right: 6px !important; } .CMB_Color_Picker .field-item { float: left; clear: both; } .loading::before { content: ' '; display: block; background: url( 'images/wpspin.gif' ) no-repeat; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } From c66052c9bea6b065aee50b77705b8e86ee348ffa Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Thu, 24 Oct 2013 09:34:09 +0100 Subject: [PATCH 16/25] make all the buttons accessible --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 98530d8e..68af3bfc 100644 --- a/style.css +++ b/style.css @@ -393,8 +393,8 @@ button.repeat-field { display: block !important; clear: both; } /*.CMB_Image_Field.cmb-sortable > .field-item { margin-left: 20px !important; margin-right: 28px !important; }*/ .CMB_File_Field.cmb-sortable .cmb-handle, -.CMB_Image_Field.cmb-sortable .cmb-handle { background: transparent; width: 100%; } -.CMB_Image_Field.cmb-sortable .cmb-file-upload { position: relative; z-index: 1; } +.CMB_Image_Field.cmb-sortable .cmb-handle { background: transparent; width: 100%; z-index: 1; } +.CMB_Image_Field.cmb-sortable .cmb-file-upload { position: relative; z-index: 5; } .CMB_Group_Field.cmb-sortable > .field-item { position: relative; padding-top: 10px; } .CMB_Group_Field.cmb-sortable > .field-item > .cmb-handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } From 123207ed31cbf4e06dde49915a5688948154b136 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Mon, 28 Oct 2013 09:20:23 +0000 Subject: [PATCH 17/25] update sortable styles --- style.css | 83 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 69 insertions(+), 14 deletions(-) diff --git a/style.css b/style.css index 68af3bfc..c2633538 100644 --- a/style.css +++ b/style.css @@ -386,23 +386,78 @@ button.repeat-field { display: block !important; clear: both; } .CMB_File_Field.repeatable .cmb-remove-file, .CMB_Image_Field.repeatable .cmb-remove-file { display: none !important; } -.cmb-sortable > .field-item { padding-left: 20px; } -.cmb-sortable .cmb-handle { height: 100%; width: 10px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.1); cursor: move; } +.CMB_Color_Picker .field-item { float: left; clear: both; } +.loading::before { content: ' '; display: block; background: url( 'images/wpspin.gif' ) no-repeat; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } +@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { + .loading::before { background-image: url( 'images/wpspin-2x.gif'); background-size: 16px 16px; } +} + -/*.CMB_File_Field.cmb-sortable > .field-item,*/ -/*.CMB_Image_Field.cmb-sortable > .field-item { margin-left: 20px !important; margin-right: 28px !important; }*/ +.cmb-sortable > .field-item { + padding-left: 20px; +} + +.cmb-sortable .cmb-handle { + height: 100%; + width: 10px; + position: absolute; + top: 0; + left: 0; + background: rgba(0,0,0,0.1); + cursor: move; +} + +.cmb-sortable .ui-sortable-helper:before { + content: ' '; + position: absolute; + width: 100%; + height: 100%; + top: -6px; + left: -6px; + background-color: #F8F8F8; + border: 1px solid #DEDEDE; + padding: 5px; + z-index: -1; +} + +.cmb-sortable .ui-sortable-placeholder { + border: 1px dashed #DDD; + visibility: visible !important; + margin-bottom: 6px !important; + margin-right: 6px !important; +} .CMB_File_Field.cmb-sortable .cmb-handle, -.CMB_Image_Field.cmb-sortable .cmb-handle { background: transparent; width: 100%; z-index: 1; } -.CMB_Image_Field.cmb-sortable .cmb-file-upload { position: relative; z-index: 5; } +.CMB_Image_Field.cmb-sortable .cmb-handle { + background: transparent; + width: 100%; + z-index: 1; +} -.CMB_Group_Field.cmb-sortable > .field-item { position: relative; padding-top: 10px; } -.CMB_Group_Field.cmb-sortable > .field-item > .cmb-handle { top: -1px; left: -1px; right: -1px; height: 11px; width: auto; } +.CMB_File_Field.cmb-sortable .cmb-file-upload, +.CMB_Image_Field.cmb-sortable .cmb-file-upload { + position: relative; + z-index: 5; +} -.cmb-sortable .ui-sortable-placeholder { border: 1px dashed #DDD; visibility: visible !important; margin-bottom: 6px !important; margin-right: 6px !important; } +.CMB_File_Field.cmb-sortable .ui-sortable-helper:before, +.CMB_Image_Field.cmb-sortable .ui-sortable-helper:before { + top: 0; + left: 0; + padding: 0; + border: none; + background: #FFF; +} -.CMB_Color_Picker .field-item { float: left; clear: both; } -.loading::before { content: ' '; display: block; background: url( 'images/wpspin.gif' ) no-repeat; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } -@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { - .loading::before { background-image: url( 'images/wpspin-2x.gif'); background-size: 16px 16px; } -} \ No newline at end of file +.CMB_Group_Field.cmb-sortable > .field-item { + position: relative; + padding-top: 10px; +} + +.CMB_Group_Field.cmb-sortable > .field-item > .cmb-handle { + top: -1px; + left: -1px; + right: -1px; + height: 11px; + width: auto; +} From 90615a37c756ffa7719c7bcc7fdbe8451147f0d3 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Fri, 1 Nov 2013 19:33:13 +0000 Subject: [PATCH 18/25] lost in the merge --- style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 9c84e170..8bffad6f 100644 --- a/style.css +++ b/style.css @@ -467,10 +467,10 @@ button.repeat-field { display: block !important; clear: both; } .cmb-file-holder.type-img::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); overflow: hidden; z-index: 1; } .cmb-file-name { position: absolute; left: 0; right: 0; bottom: 0; line-height: 1.4; overflow: hidden; max-height: 100%; word-wrap: break-word; text-align: center; font-weight: bold; background: rgba(255,255,255,0.8); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } .cmb-file-name strong { padding: 5px 10px; display: block;} -.CMB_File_Field .cmb_element .ui-icon.delete-field, -.CMB_Image_Field .cmb_element .ui-icon.delete-field { z-index: 10; top: 10px; right: 10px; } +.CMB_File_Field .cmb-delete-field, +.CMB_Image_Field .cmb-delete-field { z-index: 10; top: 10px; right: 10px; } .CMB_File_Field .cmb-remove-file, -.CMB_Image_Field .cmb-remove-file { position: absolute; top: 5px; right: 5px; z-index: 1; } +.CMB_Image_Field .cmb-remove-file { position: absolute; top: -5px; right: -5px; z-index: 10; } .CMB_File_Field.repeatable .cmb-remove-file, .CMB_Image_Field.repeatable .cmb-remove-file { display: none !important; } From 1db4c82701fb0206aaf0c7e09baeaad37c8e8815 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Fri, 1 Nov 2013 19:37:09 +0000 Subject: [PATCH 19/25] more examples --- example-functions.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example-functions.php b/example-functions.php index 700486cc..69f61b73 100644 --- a/example-functions.php +++ b/example-functions.php @@ -21,7 +21,7 @@ function cmb_sample_metaboxes( array $meta_boxes ) { array( 'id' => 'field-6', 'name' => 'Radio input field', 'type' => 'radio', 'options' => array( 'Option 1', 'Option 2' ) ), array( 'id' => 'field-7', 'name' => 'Checkbox field', 'type' => 'checkbox' ), - array( 'id' => 'field-8', 'name' => 'WYSIWYG field', 'type' => 'wysiwyg', 'options' => array( 'editor_height' => '100' ) ), + array( 'id' => 'field-8', 'name' => 'WYSIWYG field', 'type' => 'wysiwyg', 'options' => array( 'editor_height' => '100' ), 'repeatable' => true, 'sortable' => true ), array( 'id' => 'field-9', 'name' => 'Textarea field', 'type' => 'textarea' ), array( 'id' => 'field-10', 'name' => 'Code textarea field', 'type' => 'textarea_code' ), @@ -29,7 +29,7 @@ function cmb_sample_metaboxes( array $meta_boxes ) { array( 'id' => 'field-11', 'name' => 'File field', 'type' => 'file', 'file_type' => 'image', 'repeatable' => 1, 'sortable' => 1 ), array( 'id' => 'field-12', 'name' => 'Image upload field', 'type' => 'image', 'repeatable' => true, 'show_size' => true ), - array( 'id' => 'field-13', 'name' => 'Select field', 'type' => 'select', 'options' => array( 'option-1' => 'Option 1', 'option-2' => 'Option 2', 'option-3' => 'Option 3' ), 'allow_none' => true ), + array( 'id' => 'field-13', 'name' => 'Select field', 'type' => 'select', 'options' => array( 'option-1' => 'Option 1', 'option-2' => 'Option 2', 'option-3' => 'Option 3' ), 'allow_none' => true, 'sortable' => true, 'repeatable' => true ), array( 'id' => 'field-14', 'name' => 'Select field', 'type' => 'select', 'options' => array( 'option-1' => 'Option 1', 'option-2' => 'Option 2', 'option-3' => 'Option 3' ), 'multiple' => true ), array( 'id' => 'field-15', 'name' => 'Select taxonomy field', 'type' => 'taxonomy_select', 'taxonomy' => 'category' ), array( 'id' => 'field-15b', 'name' => 'Select taxonomy field', 'type' => 'taxonomy_select', 'taxonomy' => 'category', 'multiple' => true ), From 6f14c87392c3cb7f260064f2bc40f881e7500e86 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Fri, 8 Nov 2013 12:44:58 +0000 Subject: [PATCH 20/25] style optimisations --- style.css | 68 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 56 insertions(+), 12 deletions(-) diff --git a/style.css b/style.css index 8bffad6f..6370bad0 100644 --- a/style.css +++ b/style.css @@ -413,9 +413,9 @@ button.repeat-field { display: block !important; clear: both; } .CMB_Datetime_Timestamp_Field input + input { margin-left: 4px; } #poststuff .CMB_Group_Field h2 { padding: 0; margin: 8px 5px; } -.CMB_Group_Field.repeatable > .field-item { padding: 0 9px; margin-bottom: 16px ; border: 1px solid #DDD; background: #ECECEC; border-radius: 3px; } -.CMB_Group_Field .cmb_element { display: block; height: 0; } -.CMB_Group_Field .cmb_element .ui-state-default { /*display: none;*/ margin-right: -3px; margin-top: -5px; } +.CMB_Group_Field.repeatable > .field-item { padding: 0 9px; margin-bottom: 16px ; border: 1px solid #DDD; background: #F9F9F9; border-radius: 3px; } + +.CMB_Group_Field.repeatable > .field-item.ui-sortable-placeholder { margin-bottom: 16px !important; } .CMB_Group_Field > .field-title { margin-top: 20px; @@ -429,12 +429,10 @@ button.repeat-field { display: block !important; clear: both; } font-weight: lighter; } - .CMB_Group_Field.repeatable > .field-item { padding: 0 9px; margin-bottom: 16px; border: 1px solid #DDD; - background: #ECECEC; border-radius: 3px; } @@ -482,19 +480,40 @@ button.repeat-field { display: block !important; clear: both; } .cmb-sortable > .field-item { - padding-left: 20px; + padding-left: 16px; } .cmb-sortable .cmb-handle { height: 100%; - width: 10px; + width: 2px; position: absolute; top: 0; left: 0; - background: rgba(0,0,0,0.1); + background: transparent; + cursor: move; + border-left: 2px solid #DFDFDF; + border-right: 2px solid #DFDFDF; +} + +.cmb-sortable .cmb-handle:after { + position: absolute; + content: ' '; + height: 100%; + width: 0; + position: absolute; + top: 0; + left: 100%; + margin-left: 4px; + background: transparent; cursor: move; + border-left: 2px solid #DFDFDF; } +.cmb-sortable .ui-sortable-helper { + opacity: 0.75; +} + + .cmb-sortable .ui-sortable-helper:before { content: ' '; position: absolute; @@ -509,7 +528,8 @@ button.repeat-field { display: block !important; clear: both; } } .cmb-sortable .ui-sortable-placeholder { - border: 1px dashed #DDD; + border: 1px dashed #DDD !important; + background: transparent !important; visibility: visible !important; margin-bottom: 6px !important; margin-right: 6px !important; @@ -534,18 +554,42 @@ button.repeat-field { display: block !important; clear: both; } left: 0; padding: 0; border: none; - background: #FFF; + background: #F9F9F9; } .CMB_Group_Field.cmb-sortable > .field-item { position: relative; - padding-top: 10px; + padding-top: 30px; } .CMB_Group_Field.cmb-sortable > .field-item > .cmb-handle { top: -1px; left: -1px; right: -1px; - height: 11px; + height: 30px; width: auto; + border: 1px solid #dfdfdf; + border-radius: 3px 3px 0 0; + background: #f1f1f1; + background-image: -webkit-gradient(linear,left bottom,left top,from(#ececec),to(#f9f9f9)); + background-image: -webkit-linear-gradient(bottom,#ececec,#f9f9f9); + background-image: -moz-linear-gradient(bottom,#ececec,#f9f9f9); + background-image: -o-linear-gradient(bottom,#ececec,#f9f9f9); + background-image: linear-gradient(to top,#ececec,#f9f9f9); } + +.cmb-sortable .cmb-handle:after { + display: none; +} + +.CMB_Group_Field.cmb-sortable .group > .cmb-delete-field { + top: -33px; + right: -5px; + width: auto; + height: auto; + padding: 2px 5px 2px 20px; + text-indent: 0; + font-size: 12px; + line-height: 14px; + z-index: 1; +} \ No newline at end of file From e731cf729d5bdb6f635c5ab9b87e7c30160ecfca Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Fri, 8 Nov 2013 12:45:55 +0000 Subject: [PATCH 21/25] more specific labelling --- classes.fields.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/classes.fields.php b/classes.fields.php index ff335a27..3932457b 100644 --- a/classes.fields.php +++ b/classes.fields.php @@ -1341,7 +1341,7 @@ public function display() { - + Date: Mon, 11 Nov 2013 10:06:46 +0000 Subject: [PATCH 22/25] style should be specific for group. --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 340ebfbd..6f43b85f 100644 --- a/style.css +++ b/style.css @@ -579,7 +579,7 @@ button.repeat-field { display: block !important; clear: both; } background-image: linear-gradient(to top,#ececec,#f9f9f9); } -.cmb-sortable .cmb-handle:after { +.CMB_Group_Field.cmb-sortable .cmb-handle:after { display: none; } From 1244fcf5907542c7738e3a73b18e89e313bab208 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Tue, 3 Dec 2013 00:13:38 +0000 Subject: [PATCH 23/25] fix version compare --- class.cmb-meta-box.php | 2 +- custom-meta-boxes.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/class.cmb-meta-box.php b/class.cmb-meta-box.php index cd8b90c6..8c2415fe 100644 --- a/class.cmb-meta-box.php +++ b/class.cmb-meta-box.php @@ -119,7 +119,7 @@ function enqueue_styles() { $suffix = CMB_DEV ? '' : '.min'; - if ( version_compare( get_bloginfo( 'version' ), '3.7', '>' ) ) + if ( version_compare( get_bloginfo( 'version' ), '3.7.1', '>' ) ) wp_enqueue_style( 'cmb-styles', trailingslashit( CMB_URL ) . "css/dist/cmb$suffix.css" ); else wp_enqueue_style( 'cmb-styles', trailingslashit( CMB_URL ) . 'css/legacy.css' ); diff --git a/custom-meta-boxes.php b/custom-meta-boxes.php index e66aa938..bab4ccbe 100755 --- a/custom-meta-boxes.php +++ b/custom-meta-boxes.php @@ -168,5 +168,5 @@ function cmb_fix_meta_query_order($query) { } -if ( version_compare( get_bloginfo( 'version' ), '3.7', '<=' ) ) +if ( version_compare( get_bloginfo( 'version' ), '3.7.1', '<=' ) ) add_filter( 'query', 'cmb_fix_meta_query_order', 1 ); \ No newline at end of file From 8c2f853ab6ccfa49ee65b3a1f4f326309e40b189 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Tue, 3 Dec 2013 00:14:19 +0000 Subject: [PATCH 24/25] Sortable MP6 styles --- css/dist/cmb.css | 1 + css/dist/cmb.min.css | 4 ++-- css/src/file.css | 24 ++++++++++++++++++++++++ css/src/group.css | 29 +++++++++++++++++++++++++++++ css/src/sortable.css | 40 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 css/src/sortable.css diff --git a/css/dist/cmb.css b/css/dist/cmb.css index d28ab5cc..305a295f 100644 --- a/css/dist/cmb.css +++ b/css/dist/cmb.css @@ -10,6 +10,7 @@ /** Features **/ @import '../src/repeatable.css'; +@import '../src/sortable.css'; /** Fields **/ @import '../src/group.css'; diff --git a/css/dist/cmb.min.css b/css/dist/cmb.min.css index 6068eeab..5230ed3d 100644 --- a/css/dist/cmb.min.css +++ b/css/dist/cmb.min.css @@ -1,6 +1,6 @@ /** - * Custom-Meta-Boxes - v0.1.0-beta - 2013-12-01 + * Custom-Meta-Boxes - v0.1.0-beta - 2013-12-03 * https://github.com/humanmade/Custom-Meta-Boxes/ * Copyright (c) 2013 Human Made Limited; License: GPL */ -.cmb_metabox .field{padding:16px 0;border-bottom:1px solid #DFDFDF}.cmb-row:last-child>[class*=cmb-cell-]>.field{border-bottom:0}.postbox>.inside>.cmb_metabox{margin:-10px 0}.cmb_metabox .cmb-row{overflow:hidden;margin:0 -5px;zoom:1}.cmb_metabox .cmb-row:after,.cmb_metabox .cmb-row:before{content:"";display:table}.cmb_metabox .cmb-row:after{clear:both}.cmb_metabox [class*=cmb-cell-]{float:left;padding:0 5px;-moz-box-sizing:border-box;box-sizing:border-box}.cmb_metabox .cmb-cell-1{width:8.333333333%}.cmb_metabox .cmb-cell-2{width:16.666666667%}.cmb_metabox .cmb-cell-3{width:25%}.cmb_metabox .cmb-cell-4{width:33.333333333%}.cmb_metabox .cmb-cell-5{width:41.666666667%}.cmb_metabox .cmb-cell-6{width:50%}.cmb_metabox .cmb-cell-7{width:58.333333333%}.cmb_metabox .cmb-cell-8{width:66.666666667%}.cmb_metabox .cmb-cell-9{width:75%}.cmb_metabox .cmb-cell-10{width:83.333333333%}.cmb_metabox .cmb-cell-11{width:91.666666667%}.cmb_metabox .cmb-cell-12{width:100%}@media all and (max-width:850px){.cmb_metabox [class*=cmb-cell-]{width:100%}}.cmb_metabox .field-item{position:relative}.cmb_metabox_description{color:#AAA;font-style:italic;margin:0 0 16px!important}.cmb_metabox input[type=text],.cmb_metabox select,.cmb_metabox textarea{width:100%}.cmb_metabox input.cmb_text_small{width:100px}.cmb_metabox input.cmb_text_medium{width:230px;margin-right:15px}.cmb_metabox input[type=checkbox],.cmb_metabox input[type=radio]{margin:0 5px 0 0;padding:0}.cmb_metabox .field-title{margin-bottom:16px;margin-top:0;font-weight:700}.cmb_metabox .field-title label{vertical-align:baseline}.cmb_metabox .field.repeatable>.field-item{padding-right:30px;margin-bottom:10px}.cmb_metabox .repeat-field{display:block!important;clear:both}.CMB_Date_Field.repeatable .field-item,.CMB_Date_Timestamp_Field.repeatable .field-item,.CMB_Datetime_Timestamp_Field.repeatable .field-item,.CMB_Text_Small_Field.repeatable .field-item,.CMB_Time_Field.repeatable .field-item{float:left;clear:both}.cmb-delete-field{display:inline-block;text-decoration:none;font-size:11px;line-height:20px;height:22px;width:22px;margin:0;padding:0;cursor:pointer;border-width:1px;border-style:solid;-webkit-border-radius:3px;-webkit-appearance:none;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#555;border-color:#ccc;background:#f7f7f7;-webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);vertical-align:top;position:absolute;top:3px;right:0;text-indent:100%;overflow:hidden;white-space:nowrap}.cmb-delete-field:active,.cmb-delete-field:focus,.cmb-delete-field:hover{background:#fafafa;border-color:#999;color:#222}.cmb-delete-field .cmb-delete-field-icon{content:' ';display:block;position:absolute;height:8px;width:8px;top:50%;left:50%;margin-top:-4px;margin-left:-4px;background-image:url( '../../images/cmb-icon-remove.png');background-repeat:no-repeat;text-indent:8px;overflow:hidden}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-delete-field .cmb-delete-field-icon{background-image:url( '../../images/cmb-icon-remove@2x.png');background-size:8px 8px}}* Group **/ .cmb_metabox .CMB_Group_Field>.field-title{font-size:1.5em;clear:left;color:#464646;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",sans-serif;font-weight:lighter}.cmb_metabox .CMB_Group_Field>.field-title h2{margin:8px 5px!important}.cmb_metabox .CMB_Group_Field.repeatable>.field-item{padding:30px 10px 0;margin-bottom:16px;border:1px solid #DDD;background:#FAFAFA;position:relative}.cmb_metabox .CMB_Group_Field.repeatable>.field-item:before{content:' ';display:block;position:absolute;top:0;left:0;right:0;height:33px;border-bottom:1px solid #DDD}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field{top:5px;right:5px;width:auto;text-indent:0;padding-left:24px;padding-right:8px;height:22px;line-height:20px;font-size:11px}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field .cmb-delete-field-icon{left:12px}.CMB_File_Field .field-item,.CMB_Image_Field .field-item{float:left;margin:0 16px 16px 0!important;text-align:center;padding:0!important;z-index:1}.cmb-file-wrap{position:relative;overflow:hidden;width:150px;height:150px;line-height:150px}.cmb-file-wrap-placeholder{content:' ';position:absolute;top:0;left:0;display:block;height:142px;width:142px;border:4px dashed #DDD;z-index:-1}.cmb-file-wrap-placeholder .dimensions{line-height:normal;position:absolute;bottom:10px;right:10px;font-size:18px;font-weight:700;opacity:.2}.cmb-file-holder{position:relative;overflow:hidden;box-shadow:inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);background:#eee;width:100%;height:100%}.cmb-file-holder.type-file img{position:absolute;top:43%;margin-top:-30px;left:50%;margin-left:-23px}.cmb-file-holder.type-img img{width:100%;height:auto;margin-top:0;vertical-align:top}.cmb-file-holder.type-img::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden;z-index:1}.cmb-file-name{position:absolute;left:0;right:0;bottom:0;line-height:1.4;overflow:hidden;max-height:100%;word-wrap:break-word;text-align:center;font-weight:700;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.cmb-file-name strong{padding:5px 10px;display:block}.CMB_File_Field .cmb-delete-field,.CMB_Image_Field .cmb-delete-field{z-index:10;top:10px;right:10px}.CMB_File_Field .cmb-remove-file,.CMB_Image_Field .cmb-remove-file{position:absolute;z-index:1;top:5px;right:5px}.CMB_File_Field.repeatable .cmb-remove-file,.CMB_Image_Field.repeatable .cmb-remove-file{display:none!important}.cmb-file-wrap .cmb-file-upload{vertical-align:middle}.cmb-loading::before{content:' ';display:block;background:url( '../../images/wpspin.gif' ) no-repeat;width:16px;height:16px;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-loading::before{background-image:url( '../../images/wpspin-2x.gif');background-size:16px 16px}}.CMB_Title .field-title{margin:8px 0!important}.CMB_Title h2{margin:0!important;padding:0!important}.CMB_Color_Picker .field-item{float:left;clear:both}.CMB_Color_Picker:after,.CMB_Color_Picker:before{content:"";display:table}.CMB_Color_Picker:after{clear:both}.CMB_Color_Picker{zoom:1}div.time-picker{position:absolute;height:191px;width:4em;overflow:auto;background:#fff;border:1px solid #aaa;z-index:99;margin:0}div.time-picker-12hours{width:6em}div.time-picker ul{list-style-type:none;margin:0;padding:0}div.time-picker li{cursor:pointer;height:10px;font:12px/1 Helvetica,Arial,sans-serif;padding:4px 3px}div.time-picker li.selected{background:#0063CE;color:#fff}.cmb_metabox input.cmb_timepicker{width:100px;margin-right:0}.CMB_Datetime_Timestamp_Field input+input{margin-left:4px}.cmb_select{width:100%}.select2-offscreen{display:none} \ No newline at end of file +.cmb_metabox .field{padding:16px 0;border-bottom:1px solid #DFDFDF}.cmb-row:last-child>[class*=cmb-cell-]>.field{border-bottom:0}.postbox>.inside>.cmb_metabox{margin:-10px 0}.cmb_metabox .cmb-row{overflow:hidden;margin:0 -5px;zoom:1}.cmb_metabox .cmb-row:after,.cmb_metabox .cmb-row:before{content:"";display:table}.cmb_metabox .cmb-row:after{clear:both}.cmb_metabox [class*=cmb-cell-]{float:left;padding:0 5px;-moz-box-sizing:border-box;box-sizing:border-box}.cmb_metabox .cmb-cell-1{width:8.333333333%}.cmb_metabox .cmb-cell-2{width:16.666666667%}.cmb_metabox .cmb-cell-3{width:25%}.cmb_metabox .cmb-cell-4{width:33.333333333%}.cmb_metabox .cmb-cell-5{width:41.666666667%}.cmb_metabox .cmb-cell-6{width:50%}.cmb_metabox .cmb-cell-7{width:58.333333333%}.cmb_metabox .cmb-cell-8{width:66.666666667%}.cmb_metabox .cmb-cell-9{width:75%}.cmb_metabox .cmb-cell-10{width:83.333333333%}.cmb_metabox .cmb-cell-11{width:91.666666667%}.cmb_metabox .cmb-cell-12{width:100%}@media all and (max-width:850px){.cmb_metabox [class*=cmb-cell-]{width:100%}}.cmb_metabox .field-item{position:relative}.cmb_metabox_description{color:#AAA;font-style:italic;margin:0 0 16px!important}.cmb_metabox input[type=text],.cmb_metabox select,.cmb_metabox textarea{width:100%}.cmb_metabox input.cmb_text_small{width:100px}.cmb_metabox input.cmb_text_medium{width:230px;margin-right:15px}.cmb_metabox input[type=checkbox],.cmb_metabox input[type=radio]{margin:0 5px 0 0;padding:0}.cmb_metabox .field-title{margin-bottom:16px;margin-top:0;font-weight:700}.cmb_metabox .field-title label{vertical-align:baseline}.cmb_metabox .field.repeatable>.field-item{padding-right:30px;margin-bottom:10px}.cmb_metabox .repeat-field{display:block!important;clear:both}.CMB_Date_Field.repeatable .field-item,.CMB_Date_Timestamp_Field.repeatable .field-item,.CMB_Datetime_Timestamp_Field.repeatable .field-item,.CMB_Text_Small_Field.repeatable .field-item,.CMB_Time_Field.repeatable .field-item{float:left;clear:both}.cmb-delete-field{display:inline-block;text-decoration:none;font-size:11px;line-height:20px;height:22px;width:22px;margin:0;padding:0;cursor:pointer;border-width:1px;border-style:solid;-webkit-border-radius:3px;-webkit-appearance:none;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#555;border-color:#ccc;background:#f7f7f7;-webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);vertical-align:top;position:absolute;top:3px;right:0;text-indent:100%;overflow:hidden;white-space:nowrap}.cmb-delete-field:active,.cmb-delete-field:focus,.cmb-delete-field:hover{background:#fafafa;border-color:#999;color:#222}.cmb-delete-field .cmb-delete-field-icon{content:' ';display:block;position:absolute;height:8px;width:8px;top:50%;left:50%;margin-top:-4px;margin-left:-4px;background-image:url( '../../images/cmb-icon-remove.png');background-repeat:no-repeat;text-indent:8px;overflow:hidden}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-delete-field .cmb-delete-field-icon{background-image:url( '../../images/cmb-icon-remove@2x.png');background-size:8px 8px}}* Group **/ .cmb_metabox .CMB_Group_Field>.field-title{font-size:1.5em;clear:left;color:#464646;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",sans-serif;font-weight:lighter}.cmb_metabox .CMB_Group_Field>.field-title h2{margin:8px 5px!important}.cmb_metabox .CMB_Group_Field.repeatable>.field-item{padding:30px 10px 0;margin-bottom:16px;border:1px solid #DDD;background:#FAFAFA;position:relative}.cmb_metabox .CMB_Group_Field.repeatable>.field-item:before{content:' ';display:block;position:absolute;top:0;left:0;right:0;height:33px;border-bottom:1px solid #DDD}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field{top:5px;right:5px;width:auto;text-indent:0;padding-left:24px;padding-right:8px;height:22px;line-height:20px;font-size:11px;z-index:1}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field .cmb-delete-field-icon{left:12px}.CMB_Group_Field.cmb-sortable>.field-item{position:relative;padding-top:30px}.CMB_Group_Field.cmb-sortable>.field-item>.cmb-handle{top:-1px;left:-1px;right:-1px;height:34px;width:auto;border:0;border-bottom:1px solid #DDD}.CMB_Group_Field.cmb-sortable>.field-item.ui-sortable-helper>.cmb-handle{padding:0 5px}.cmb_metabox .CMB_Group_Field.repeatable.cmb-sortable>.field-item:before{display:none!important}.CMB_Group_Field.cmb-sortable>.ui-sortable-placeholder{margin-bottom:16px!important}.CMB_File_Field .field-item,.CMB_Image_Field .field-item{float:left;margin:0 16px 16px 0!important;text-align:center;padding:0!important;z-index:1}.cmb-file-wrap{position:relative;overflow:hidden;width:150px;height:150px;line-height:150px}.cmb-file-wrap-placeholder{content:' ';position:absolute;top:0;left:0;display:block;height:142px;width:142px;border:4px dashed #DDD;z-index:-1}.cmb-file-wrap-placeholder .dimensions{line-height:normal;position:absolute;bottom:10px;right:10px;font-size:18px;font-weight:700;opacity:.2}.cmb-file-holder{position:relative;overflow:hidden;box-shadow:inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);background:#eee;width:100%;height:100%}.cmb-file-holder.type-file img{position:absolute;top:43%;margin-top:-30px;left:50%;margin-left:-23px}.cmb-file-holder.type-img img{width:100%;height:auto;margin-top:0;vertical-align:top}.cmb-file-holder.type-img::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden;z-index:1}.cmb-file-name{position:absolute;left:0;right:0;bottom:0;line-height:1.4;overflow:hidden;max-height:100%;word-wrap:break-word;text-align:center;font-weight:700;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.cmb-file-name strong{padding:5px 10px;display:block}.CMB_File_Field .cmb-delete-field,.CMB_Image_Field .cmb-delete-field{z-index:10;top:10px;right:10px}.CMB_File_Field .cmb-remove-file,.CMB_Image_Field .cmb-remove-file{position:absolute;z-index:1;top:5px;right:5px}.CMB_File_Field.repeatable .cmb-remove-file,.CMB_Image_Field.repeatable .cmb-remove-file{display:none!important}.cmb-file-wrap .cmb-file-upload{vertical-align:middle}.cmb-loading::before{content:' ';display:block;background:url( '../../images/wpspin.gif' ) no-repeat;width:16px;height:16px;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-loading::before{background-image:url( '../../images/wpspin-2x.gif');background-size:16px 16px}}.CMB_File_Field.cmb-sortable .cmb-handle,.CMB_Image_Field.cmb-sortable .cmb-handle{border:0;background:0 0;height:100%;width:100%;z-index:1}.CMB_File_Field.cmb-sortable .cmb-file-upload,.CMB_Image_Field.cmb-sortable .cmb-file-upload{position:relative;z-index:5}.CMB_File_Field.cmb-sortable .ui-sortable-helper:before,.CMB_Image_Field.cmb-sortable .ui-sortable-helper:before{top:0;left:0;padding:0;border:0;background:#F9F9F9}.CMB_Title .field-title{margin:8px 0!important}.CMB_Title h2{margin:0!important;padding:0!important}.CMB_Color_Picker .field-item{float:left;clear:both}.CMB_Color_Picker:after,.CMB_Color_Picker:before{content:"";display:table}.CMB_Color_Picker:after{clear:both}.CMB_Color_Picker{zoom:1}div.time-picker{position:absolute;height:191px;width:4em;overflow:auto;background:#fff;border:1px solid #aaa;z-index:99;margin:0}div.time-picker-12hours{width:6em}div.time-picker ul{list-style-type:none;margin:0;padding:0}div.time-picker li{cursor:pointer;height:10px;font:12px/1 Helvetica,Arial,sans-serif;padding:4px 3px}div.time-picker li.selected{background:#0063CE;color:#fff}.cmb_metabox input.cmb_timepicker{width:100px;margin-right:0}.CMB_Datetime_Timestamp_Field input+input{margin-left:4px}.cmb_select{width:100%}.select2-offscreen{display:none} \ No newline at end of file diff --git a/css/src/file.css b/css/src/file.css index 9ba796e5..ce5f8d4d 100644 --- a/css/src/file.css +++ b/css/src/file.css @@ -139,4 +139,28 @@ background-size: 16px 16px; } +} + +.CMB_File_Field.cmb-sortable .cmb-handle, +.CMB_Image_Field.cmb-sortable .cmb-handle { + border: none; + background: transparent; + height: 100%; + width: 100%; + z-index: 1; +} + +.CMB_File_Field.cmb-sortable .cmb-file-upload, +.CMB_Image_Field.cmb-sortable .cmb-file-upload { + position: relative; + z-index: 5; +} + +.CMB_File_Field.cmb-sortable .ui-sortable-helper:before, +.CMB_Image_Field.cmb-sortable .ui-sortable-helper:before { + top: 0; + left: 0; + padding: 0; + border: none; + background: #F9F9F9; } \ No newline at end of file diff --git a/css/src/group.css b/css/src/group.css index 79af3332..7988c516 100644 --- a/css/src/group.css +++ b/css/src/group.css @@ -41,8 +41,37 @@ height: 22px; line-height: 20px; font-size: 11px; + z-index: 1; } .cmb_metabox .CMB_Group_Field.repeatable > .field-item > .cmb-delete-field .cmb-delete-field-icon { left: 12px; +} + + +.CMB_Group_Field.cmb-sortable > .field-item { + position: relative; + padding-top: 30px; +} + +.CMB_Group_Field.cmb-sortable > .field-item > .cmb-handle { + top: -1px; + left: -1px; + right: -1px; + height: 34px; + width: auto; + border: none; + border-bottom: 1px solid #DDDDDD; +} + +.CMB_Group_Field.cmb-sortable > .field-item.ui-sortable-helper > .cmb-handle { + padding: 0 5px; +} + +.cmb_metabox .CMB_Group_Field.repeatable.cmb-sortable > .field-item:before { + display: none !important; +} + +.CMB_Group_Field.cmb-sortable > .ui-sortable-placeholder { + margin-bottom: 16px !important; } \ No newline at end of file diff --git a/css/src/sortable.css b/css/src/sortable.css new file mode 100644 index 00000000..adc9844c --- /dev/null +++ b/css/src/sortable.css @@ -0,0 +1,40 @@ + +.cmb-sortable > .field-item { + padding-left: 15px; +} + +.cmb-sortable .cmb-handle { + height: 100%; + width: 3px; + position: absolute; + top: 0; + left: 0; + background: transparent; + cursor: move; + border-left: 3px solid #DFDFDF; + border-right: 3px solid #DFDFDF; +} + +.cmb-sortable .ui-sortable-helper { + opacity: 0.75; +} + +.cmb-sortable .ui-sortable-helper:before { + content: ' '; + position: absolute; + width: 100%; + height: 100%; + top: -6px; + left: -6px; + background-color: #F8F8F8; + border: 1px solid #DEDEDE; + padding: 5px; + z-index: -1; +} + +.cmb-sortable > .ui-sortable-placeholder { + border: 1px dashed #DDD !important; + background: transparent !important; + visibility: visible !important; + margin-bottom: 8px !important; +} \ No newline at end of file From 99a6b779bfba4a6735e83aa4b25307507bf43ff8 Mon Sep 17 00:00:00 2001 From: Matth_eu Date: Tue, 3 Dec 2013 20:05:42 +0000 Subject: [PATCH 25/25] Recompile --- Gruntfile.js | 10 +++++++++- css/dist/cmb.min.css | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index e38d7f50..9914b156 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -16,7 +16,15 @@ module.exports = function(grunt) { banner: '<%= banner %>' }, files: { - 'css/dist/cmb.min.css': [ 'css/src/layout.css', 'css/src/generic.css', 'css/src/repeatable.css', 'css/src/group.css', 'css/src/file.css', 'css/src/misc-fields.css' ] + 'css/dist/cmb.min.css': [ + 'css/src/layout.css', + 'css/src/generic.css', + 'css/src/repeatable.css', + 'css/src/sortable.css', + 'css/src/group.css', + 'css/src/file.css', + 'css/src/misc-fields.css' + ] } } } diff --git a/css/dist/cmb.min.css b/css/dist/cmb.min.css index 5230ed3d..c3c639bd 100644 --- a/css/dist/cmb.min.css +++ b/css/dist/cmb.min.css @@ -3,4 +3,4 @@ * https://github.com/humanmade/Custom-Meta-Boxes/ * Copyright (c) 2013 Human Made Limited; License: GPL */ -.cmb_metabox .field{padding:16px 0;border-bottom:1px solid #DFDFDF}.cmb-row:last-child>[class*=cmb-cell-]>.field{border-bottom:0}.postbox>.inside>.cmb_metabox{margin:-10px 0}.cmb_metabox .cmb-row{overflow:hidden;margin:0 -5px;zoom:1}.cmb_metabox .cmb-row:after,.cmb_metabox .cmb-row:before{content:"";display:table}.cmb_metabox .cmb-row:after{clear:both}.cmb_metabox [class*=cmb-cell-]{float:left;padding:0 5px;-moz-box-sizing:border-box;box-sizing:border-box}.cmb_metabox .cmb-cell-1{width:8.333333333%}.cmb_metabox .cmb-cell-2{width:16.666666667%}.cmb_metabox .cmb-cell-3{width:25%}.cmb_metabox .cmb-cell-4{width:33.333333333%}.cmb_metabox .cmb-cell-5{width:41.666666667%}.cmb_metabox .cmb-cell-6{width:50%}.cmb_metabox .cmb-cell-7{width:58.333333333%}.cmb_metabox .cmb-cell-8{width:66.666666667%}.cmb_metabox .cmb-cell-9{width:75%}.cmb_metabox .cmb-cell-10{width:83.333333333%}.cmb_metabox .cmb-cell-11{width:91.666666667%}.cmb_metabox .cmb-cell-12{width:100%}@media all and (max-width:850px){.cmb_metabox [class*=cmb-cell-]{width:100%}}.cmb_metabox .field-item{position:relative}.cmb_metabox_description{color:#AAA;font-style:italic;margin:0 0 16px!important}.cmb_metabox input[type=text],.cmb_metabox select,.cmb_metabox textarea{width:100%}.cmb_metabox input.cmb_text_small{width:100px}.cmb_metabox input.cmb_text_medium{width:230px;margin-right:15px}.cmb_metabox input[type=checkbox],.cmb_metabox input[type=radio]{margin:0 5px 0 0;padding:0}.cmb_metabox .field-title{margin-bottom:16px;margin-top:0;font-weight:700}.cmb_metabox .field-title label{vertical-align:baseline}.cmb_metabox .field.repeatable>.field-item{padding-right:30px;margin-bottom:10px}.cmb_metabox .repeat-field{display:block!important;clear:both}.CMB_Date_Field.repeatable .field-item,.CMB_Date_Timestamp_Field.repeatable .field-item,.CMB_Datetime_Timestamp_Field.repeatable .field-item,.CMB_Text_Small_Field.repeatable .field-item,.CMB_Time_Field.repeatable .field-item{float:left;clear:both}.cmb-delete-field{display:inline-block;text-decoration:none;font-size:11px;line-height:20px;height:22px;width:22px;margin:0;padding:0;cursor:pointer;border-width:1px;border-style:solid;-webkit-border-radius:3px;-webkit-appearance:none;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#555;border-color:#ccc;background:#f7f7f7;-webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);vertical-align:top;position:absolute;top:3px;right:0;text-indent:100%;overflow:hidden;white-space:nowrap}.cmb-delete-field:active,.cmb-delete-field:focus,.cmb-delete-field:hover{background:#fafafa;border-color:#999;color:#222}.cmb-delete-field .cmb-delete-field-icon{content:' ';display:block;position:absolute;height:8px;width:8px;top:50%;left:50%;margin-top:-4px;margin-left:-4px;background-image:url( '../../images/cmb-icon-remove.png');background-repeat:no-repeat;text-indent:8px;overflow:hidden}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-delete-field .cmb-delete-field-icon{background-image:url( '../../images/cmb-icon-remove@2x.png');background-size:8px 8px}}* Group **/ .cmb_metabox .CMB_Group_Field>.field-title{font-size:1.5em;clear:left;color:#464646;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",sans-serif;font-weight:lighter}.cmb_metabox .CMB_Group_Field>.field-title h2{margin:8px 5px!important}.cmb_metabox .CMB_Group_Field.repeatable>.field-item{padding:30px 10px 0;margin-bottom:16px;border:1px solid #DDD;background:#FAFAFA;position:relative}.cmb_metabox .CMB_Group_Field.repeatable>.field-item:before{content:' ';display:block;position:absolute;top:0;left:0;right:0;height:33px;border-bottom:1px solid #DDD}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field{top:5px;right:5px;width:auto;text-indent:0;padding-left:24px;padding-right:8px;height:22px;line-height:20px;font-size:11px;z-index:1}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field .cmb-delete-field-icon{left:12px}.CMB_Group_Field.cmb-sortable>.field-item{position:relative;padding-top:30px}.CMB_Group_Field.cmb-sortable>.field-item>.cmb-handle{top:-1px;left:-1px;right:-1px;height:34px;width:auto;border:0;border-bottom:1px solid #DDD}.CMB_Group_Field.cmb-sortable>.field-item.ui-sortable-helper>.cmb-handle{padding:0 5px}.cmb_metabox .CMB_Group_Field.repeatable.cmb-sortable>.field-item:before{display:none!important}.CMB_Group_Field.cmb-sortable>.ui-sortable-placeholder{margin-bottom:16px!important}.CMB_File_Field .field-item,.CMB_Image_Field .field-item{float:left;margin:0 16px 16px 0!important;text-align:center;padding:0!important;z-index:1}.cmb-file-wrap{position:relative;overflow:hidden;width:150px;height:150px;line-height:150px}.cmb-file-wrap-placeholder{content:' ';position:absolute;top:0;left:0;display:block;height:142px;width:142px;border:4px dashed #DDD;z-index:-1}.cmb-file-wrap-placeholder .dimensions{line-height:normal;position:absolute;bottom:10px;right:10px;font-size:18px;font-weight:700;opacity:.2}.cmb-file-holder{position:relative;overflow:hidden;box-shadow:inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);background:#eee;width:100%;height:100%}.cmb-file-holder.type-file img{position:absolute;top:43%;margin-top:-30px;left:50%;margin-left:-23px}.cmb-file-holder.type-img img{width:100%;height:auto;margin-top:0;vertical-align:top}.cmb-file-holder.type-img::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden;z-index:1}.cmb-file-name{position:absolute;left:0;right:0;bottom:0;line-height:1.4;overflow:hidden;max-height:100%;word-wrap:break-word;text-align:center;font-weight:700;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.cmb-file-name strong{padding:5px 10px;display:block}.CMB_File_Field .cmb-delete-field,.CMB_Image_Field .cmb-delete-field{z-index:10;top:10px;right:10px}.CMB_File_Field .cmb-remove-file,.CMB_Image_Field .cmb-remove-file{position:absolute;z-index:1;top:5px;right:5px}.CMB_File_Field.repeatable .cmb-remove-file,.CMB_Image_Field.repeatable .cmb-remove-file{display:none!important}.cmb-file-wrap .cmb-file-upload{vertical-align:middle}.cmb-loading::before{content:' ';display:block;background:url( '../../images/wpspin.gif' ) no-repeat;width:16px;height:16px;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-loading::before{background-image:url( '../../images/wpspin-2x.gif');background-size:16px 16px}}.CMB_File_Field.cmb-sortable .cmb-handle,.CMB_Image_Field.cmb-sortable .cmb-handle{border:0;background:0 0;height:100%;width:100%;z-index:1}.CMB_File_Field.cmb-sortable .cmb-file-upload,.CMB_Image_Field.cmb-sortable .cmb-file-upload{position:relative;z-index:5}.CMB_File_Field.cmb-sortable .ui-sortable-helper:before,.CMB_Image_Field.cmb-sortable .ui-sortable-helper:before{top:0;left:0;padding:0;border:0;background:#F9F9F9}.CMB_Title .field-title{margin:8px 0!important}.CMB_Title h2{margin:0!important;padding:0!important}.CMB_Color_Picker .field-item{float:left;clear:both}.CMB_Color_Picker:after,.CMB_Color_Picker:before{content:"";display:table}.CMB_Color_Picker:after{clear:both}.CMB_Color_Picker{zoom:1}div.time-picker{position:absolute;height:191px;width:4em;overflow:auto;background:#fff;border:1px solid #aaa;z-index:99;margin:0}div.time-picker-12hours{width:6em}div.time-picker ul{list-style-type:none;margin:0;padding:0}div.time-picker li{cursor:pointer;height:10px;font:12px/1 Helvetica,Arial,sans-serif;padding:4px 3px}div.time-picker li.selected{background:#0063CE;color:#fff}.cmb_metabox input.cmb_timepicker{width:100px;margin-right:0}.CMB_Datetime_Timestamp_Field input+input{margin-left:4px}.cmb_select{width:100%}.select2-offscreen{display:none} \ No newline at end of file +.cmb_metabox .field{padding:16px 0;border-bottom:1px solid #DFDFDF}.cmb-row:last-child>[class*=cmb-cell-]>.field{border-bottom:0}.postbox>.inside>.cmb_metabox{margin:-10px 0}.cmb_metabox .cmb-row{overflow:hidden;margin:0 -5px;zoom:1}.cmb_metabox .cmb-row:after,.cmb_metabox .cmb-row:before{content:"";display:table}.cmb_metabox .cmb-row:after{clear:both}.cmb_metabox [class*=cmb-cell-]{float:left;padding:0 5px;-moz-box-sizing:border-box;box-sizing:border-box}.cmb_metabox .cmb-cell-1{width:8.333333333%}.cmb_metabox .cmb-cell-2{width:16.666666667%}.cmb_metabox .cmb-cell-3{width:25%}.cmb_metabox .cmb-cell-4{width:33.333333333%}.cmb_metabox .cmb-cell-5{width:41.666666667%}.cmb_metabox .cmb-cell-6{width:50%}.cmb_metabox .cmb-cell-7{width:58.333333333%}.cmb_metabox .cmb-cell-8{width:66.666666667%}.cmb_metabox .cmb-cell-9{width:75%}.cmb_metabox .cmb-cell-10{width:83.333333333%}.cmb_metabox .cmb-cell-11{width:91.666666667%}.cmb_metabox .cmb-cell-12{width:100%}@media all and (max-width:850px){.cmb_metabox [class*=cmb-cell-]{width:100%}}.cmb_metabox .field-item{position:relative}.cmb_metabox_description{color:#AAA;font-style:italic;margin:0 0 16px!important}.cmb_metabox input[type=text],.cmb_metabox select,.cmb_metabox textarea{width:100%}.cmb_metabox input.cmb_text_small{width:100px}.cmb_metabox input.cmb_text_medium{width:230px;margin-right:15px}.cmb_metabox input[type=checkbox],.cmb_metabox input[type=radio]{margin:0 5px 0 0;padding:0}.cmb_metabox .field-title{margin-bottom:16px;margin-top:0;font-weight:700}.cmb_metabox .field-title label{vertical-align:baseline}.cmb_metabox .field.repeatable>.field-item{padding-right:30px;margin-bottom:10px}.cmb_metabox .repeat-field{display:block!important;clear:both}.CMB_Date_Field.repeatable .field-item,.CMB_Date_Timestamp_Field.repeatable .field-item,.CMB_Datetime_Timestamp_Field.repeatable .field-item,.CMB_Text_Small_Field.repeatable .field-item,.CMB_Time_Field.repeatable .field-item{float:left;clear:both}.cmb-delete-field{display:inline-block;text-decoration:none;font-size:11px;line-height:20px;height:22px;width:22px;margin:0;padding:0;cursor:pointer;border-width:1px;border-style:solid;-webkit-border-radius:3px;-webkit-appearance:none;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#555;border-color:#ccc;background:#f7f7f7;-webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(0,0,0,.08);vertical-align:top;position:absolute;top:3px;right:0;text-indent:100%;overflow:hidden;white-space:nowrap}.cmb-delete-field:active,.cmb-delete-field:focus,.cmb-delete-field:hover{background:#fafafa;border-color:#999;color:#222}.cmb-delete-field .cmb-delete-field-icon{content:' ';display:block;position:absolute;height:8px;width:8px;top:50%;left:50%;margin-top:-4px;margin-left:-4px;background-image:url( '../../images/cmb-icon-remove.png');background-repeat:no-repeat;text-indent:8px;overflow:hidden}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-delete-field .cmb-delete-field-icon{background-image:url( '../../images/cmb-icon-remove@2x.png');background-size:8px 8px}}.cmb-sortable>.field-item{padding-left:15px}.cmb-sortable .cmb-handle{height:100%;width:3px;position:absolute;top:0;left:0;background:0 0;cursor:move;border-left:3px solid #DFDFDF;border-right:3px solid #DFDFDF}.cmb-sortable .ui-sortable-helper{opacity:.75}.cmb-sortable .ui-sortable-helper:before{content:' ';position:absolute;width:100%;height:100%;top:-6px;left:-6px;background-color:#F8F8F8;border:1px solid #DEDEDE;padding:5px;z-index:-1}.cmb-sortable>.ui-sortable-placeholder{border:1px dashed #DDD!important;background:transparent!important;visibility:visible!important;margin-bottom:8px!important}* Group **/ .cmb_metabox .CMB_Group_Field>.field-title{font-size:1.5em;clear:left;color:#464646;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",sans-serif;font-weight:lighter}.cmb_metabox .CMB_Group_Field>.field-title h2{margin:8px 5px!important}.cmb_metabox .CMB_Group_Field.repeatable>.field-item{padding:30px 10px 0;margin-bottom:16px;border:1px solid #DDD;background:#FAFAFA;position:relative}.cmb_metabox .CMB_Group_Field.repeatable>.field-item:before{content:' ';display:block;position:absolute;top:0;left:0;right:0;height:33px;border-bottom:1px solid #DDD}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field{top:5px;right:5px;width:auto;text-indent:0;padding-left:24px;padding-right:8px;height:22px;line-height:20px;font-size:11px;z-index:1}.cmb_metabox .CMB_Group_Field.repeatable>.field-item>.cmb-delete-field .cmb-delete-field-icon{left:12px}.CMB_Group_Field.cmb-sortable>.field-item{position:relative;padding-top:30px}.CMB_Group_Field.cmb-sortable>.field-item>.cmb-handle{top:-1px;left:-1px;right:-1px;height:34px;width:auto;border:0;border-bottom:1px solid #DDD}.CMB_Group_Field.cmb-sortable>.field-item.ui-sortable-helper>.cmb-handle{padding:0 5px}.cmb_metabox .CMB_Group_Field.repeatable.cmb-sortable>.field-item:before{display:none!important}.CMB_Group_Field.cmb-sortable>.ui-sortable-placeholder{margin-bottom:16px!important}.CMB_File_Field .field-item,.CMB_Image_Field .field-item{float:left;margin:0 16px 16px 0!important;text-align:center;padding:0!important;z-index:1}.cmb-file-wrap{position:relative;overflow:hidden;width:150px;height:150px;line-height:150px}.cmb-file-wrap-placeholder{content:' ';position:absolute;top:0;left:0;display:block;height:142px;width:142px;border:4px dashed #DDD;z-index:-1}.cmb-file-wrap-placeholder .dimensions{line-height:normal;position:absolute;bottom:10px;right:10px;font-size:18px;font-weight:700;opacity:.2}.cmb-file-holder{position:relative;overflow:hidden;box-shadow:inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);background:#eee;width:100%;height:100%}.cmb-file-holder.type-file img{position:absolute;top:43%;margin-top:-30px;left:50%;margin-left:-23px}.cmb-file-holder.type-img img{width:100%;height:auto;margin-top:0;vertical-align:top}.cmb-file-holder.type-img::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);overflow:hidden;z-index:1}.cmb-file-name{position:absolute;left:0;right:0;bottom:0;line-height:1.4;overflow:hidden;max-height:100%;word-wrap:break-word;text-align:center;font-weight:700;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.cmb-file-name strong{padding:5px 10px;display:block}.CMB_File_Field .cmb-delete-field,.CMB_Image_Field .cmb-delete-field{z-index:10;top:10px;right:10px}.CMB_File_Field .cmb-remove-file,.CMB_Image_Field .cmb-remove-file{position:absolute;z-index:1;top:5px;right:5px}.CMB_File_Field.repeatable .cmb-remove-file,.CMB_Image_Field.repeatable .cmb-remove-file{display:none!important}.cmb-file-wrap .cmb-file-upload{vertical-align:middle}.cmb-loading::before{content:' ';display:block;background:url( '../../images/wpspin.gif' ) no-repeat;width:16px;height:16px;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-8px}@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5){.cmb-loading::before{background-image:url( '../../images/wpspin-2x.gif');background-size:16px 16px}}.CMB_File_Field.cmb-sortable .cmb-handle,.CMB_Image_Field.cmb-sortable .cmb-handle{border:0;background:0 0;height:100%;width:100%;z-index:1}.CMB_File_Field.cmb-sortable .cmb-file-upload,.CMB_Image_Field.cmb-sortable .cmb-file-upload{position:relative;z-index:5}.CMB_File_Field.cmb-sortable .ui-sortable-helper:before,.CMB_Image_Field.cmb-sortable .ui-sortable-helper:before{top:0;left:0;padding:0;border:0;background:#F9F9F9}.CMB_Title .field-title{margin:8px 0!important}.CMB_Title h2{margin:0!important;padding:0!important}.CMB_Color_Picker .field-item{float:left;clear:both}.CMB_Color_Picker:after,.CMB_Color_Picker:before{content:"";display:table}.CMB_Color_Picker:after{clear:both}.CMB_Color_Picker{zoom:1}div.time-picker{position:absolute;height:191px;width:4em;overflow:auto;background:#fff;border:1px solid #aaa;z-index:99;margin:0}div.time-picker-12hours{width:6em}div.time-picker ul{list-style-type:none;margin:0;padding:0}div.time-picker li{cursor:pointer;height:10px;font:12px/1 Helvetica,Arial,sans-serif;padding:4px 3px}div.time-picker li.selected{background:#0063CE;color:#fff}.cmb_metabox input.cmb_timepicker{width:100px;margin-right:0}.CMB_Datetime_Timestamp_Field input+input{margin-left:4px}.cmb_select{width:100%}.select2-offscreen{display:none} \ No newline at end of file