Skip to content

Improvements on multifields #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PhilippSchreiber wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Improvements on multifields #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6ab1430
Always create new media frame to allow multiple upload fields.
Aug 9, 2013
61164d2
Adds field id to display_callback function call to allow custom field…
Aug 11, 2013
3151ea3
Improves multifield cloning / add new feature
Feb 20, 2014
3b09998
Changes variable names, adds possibility to delete first element
Feb 20, 2014
84bff17
Adds sortable functionality
Feb 20, 2014
6811c62
Changes on multifield
Feb 20, 2014
888f4a6
Small style fixes
Feb 20, 2014
3a78713
Small style fixes
Feb 20, 2014
7b53164
Fixes strict standards message in line 1265
Feb 22, 2014
5afce1f
Removes debug alert
Feb 26, 2014
3a4d2ae
Adds new field type sortable-select
Jun 22, 2014
48ee8cb
adds sortable select to field_types array
Jun 23, 2014
23c9cbd
fixes sortable select css
Jun 23, 2014
942db9c
Fixes upload fields on multifield
Nov 4, 2014
0d9d8a4
Fixed small bug with multified images
Nov 4, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 67 additions & 30 deletions css/custom-metadata-manager.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,8 +171,31 @@

/* multifields */
.custom-metadata-multifield {
padding-top: 5px;
padding-top: 15px;
}

.custom-metadata-multifield-label-wrapper {
padding-bottom: 5px;
}

.custom-metadata-multifield-label-wrapper h2 {
float: left;
margin-top: 3px;
line-height: 1;
}

.custom-metadata-multifield-label-wrapper p.description {
float: left;
margin-left: 10px;
margin-bottom: 0;
}

.custom-metadata-multifield-label-wrapper a.custom-metadata-multifield-add {
float: right;
margin-top: -3px;
}


#poststuff .custom-metadata-multifield h2 {
margin: 0;
}
Expand All @@ -182,11 +205,13 @@
margin: 2px;
position: relative;
}

.custom-metadata-multifield-grouping .custom-metadata-field {
float: left;
width: auto;
margin-left: 20px;
margin-right: 20px;
}

.custom-metadata-multifield-grouping .custom-metadata-field:first-child {
margin-left: 0;
}
Expand All @@ -197,36 +222,48 @@
width: 150px;
}

.custom-metadata-multifield-clone,
.custom-metadata-multifield-delete {
position: absolute;
display: block;
top: 50%;
right: 25px;
padding: 0 3px 4px;
font-size: 35px;
line-height: 20px;
text-decoration: none;
border: 1px solid;
border-radius: 50%;
}
.custom-metadata-multifield-clone {
margin-top: -17px;
color: green;
border-color: green;
}
.custom-metadata-multifield-delete ~ .custom-metadata-multifield-clone {
margin-top: -35px;
.custom-metadata-multifield-grouping .sort-handle {
float: left;
width: 30px;
width: 5%;
margin-right: 1%;
height: 23px;
background: url(images/move-drag-icon.png) no-repeat;
background-size: 30px 23px;
margin-top: 31px;
cursor: move;
}

.custom-metadata-multifield-grouping .custom-metadata-multifield-fields {
float: left;
width: 84%;
}

.custom-metadata-multifield-grouping .custom-metadata-multifield-actions {
float: right;
width: 10%;
padding-top: 30px;
text-align: right;
}

.custom-metadata-multifield-grouping .custom-metadata-multifield-actions a {
margin-bottom: 5px;
}

.custom-metadata-multifield-delete {
margin-top: 17px;
padding: 1px 6px 4px;
color: red;
border-color: red;
display: inline-block;
color: #f00;
border-bottom-color: #f00;
margin-right: 3px;
}
.custom-metadata-multifield-clone:hover,
.custom-metadata-multifield-clone:active,

.custom-metadata-multifield-delete:hover,
.custom-metadata-multifield-delete:active {
border-color: #d54e21;
}
color: #fff;
background-color: #f00;
border-bottom-color: #f00;
}

.custom-metadata-field.sortable_select .select2-container {
width: 65%;
}
Binary file added css/images/move-drag-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 61 additions & 17 deletions custom_metadata.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ class custom_metadata_manager {
var $_column_types = array( 'posts', 'pages', 'users', 'comments' );

// field types
var $_field_types = array( 'text', 'textarea', 'password', 'number', 'email', 'telephone', 'checkbox', 'radio', 'select', 'multi_select', 'upload', 'wysiwyg', 'datepicker', 'datetimepicker', 'timepicker', 'taxonomy_select', 'taxonomy_radio', 'taxonomy_checkbox', 'link' );
var $_field_types = array( 'text', 'textarea', 'password', 'number', 'email', 'telephone', 'checkbox', 'radio', 'select', 'multi_select', 'upload', 'wysiwyg', 'datepicker', 'datetimepicker', 'timepicker', 'taxonomy_select', 'taxonomy_radio', 'taxonomy_checkbox', 'link', 'sortable_select' );

// field types that are cloneable
var $_cloneable_field_types = array( 'text', 'textarea', 'upload', 'password', 'number', 'email', 'tel' );
Expand All @@ -67,7 +67,7 @@ class custom_metadata_manager {

// field types that support being part of a multifield group
// @todo: workarounds needed for other field types
var $_field_types_that_support_multifield = array( 'text', 'textarea', 'password', 'number', 'email', 'tel', 'select' );
var $_field_types_that_support_multifield = array( 'text', 'textarea', 'password', 'number', 'email', 'tel', 'select', 'checkbox', 'datepicker', 'datetimepicker', 'timepicker', 'link', 'upload' );

// taxonomy types
var $_taxonomy_fields = array( 'taxonomy_select', 'taxonomy_radio', 'taxonomy_checkbox', 'taxonomy_multi_select' );
Expand Down Expand Up @@ -684,8 +684,14 @@ function save_metadata_multifield( $slug, $multifield, $object_type, $object_id
foreach ( $fields as $field_slug => $field ) {
if ( ! empty( $grouping[$field_slug] ) ) {
$grouping_values[$field_slug] = $this->_sanitize_field_value( $field_slug, $field, $object_type, $object_id, $grouping[$field_slug] );
if ( $field->field_type == 'upload' ) {
$grouping_values[$field_slug . '_attachment_id'] = $this->_sanitize_field_value( $field_slug . '_attachment_id', $field, $object_type, $object_id, $grouping[$field_slug . '_attachment_id'] );
}
} else {
$grouping_values[$field_slug] = '';
if ( $field->field_type == 'upload' ) {
$grouping_values[$field_slug . '_attachment_id'] = '';
}
}
}
$multifield_value[] = $grouping_values;
Expand All @@ -712,15 +718,15 @@ function save_metadata_field( $field_slug, $field, $object_type, $object_id ) {
$value = $this->_sanitize_field_value( $field_slug, $field, $object_type, $object_id, $_POST[$field_slug] );
$this->_save_field_value( $field_slug, $field, $object_type, $object_id, $value );


// save the attachment ID of the upload field as well
if ( $field->field_type == 'upload' && isset( $_POST[$field_slug . '_attachment_id'] ) )
if ( $field->field_type == 'upload' && isset( $_POST[$field_slug . '_attachment_id'] ) ) {
$this->_save_field_value( $field_slug . '_attachment_id', $field, $object_type, $object_id, absint( $_POST[$field_slug . '_attachment_id'] ) );
}
} else {
$this->_delete_field_value( $field_slug, $field, $object_type, $object_id );

// delete the attachment ID of the upload field as well
if ( $field->field_type == 'upload' && isset( $_POST[$field_slug . '_attachment_id'] ) )
if ( $field->field_type == 'upload' )
$this->_delete_field_value( $field_slug . '_attachment_id', $field, $object_type, $object_id );
}
}
Expand Down Expand Up @@ -1086,6 +1092,7 @@ function _metadata_column_content( $field_slug, $field, $object_type, $object_id
function _display_metadata_multifield( $slug, $multifield, $object_type, $object_id ) {
echo '<div class="custom-metadata-multifield" data-slug="' . esc_attr( $slug ) . '" id="' . esc_attr( 'custom-metadata-multifield-' . str_replace( '_', '-', str_replace( '_x_multifield_', '', $slug ) ) ) . '">';

echo '<div class="custom-metadata-multifield-label-wrapper">';
if ( ! empty( $multifield->label ) ) {
printf( '<h2>%s</h2>', esc_html( $multifield->label ) );
}
Expand All @@ -1094,6 +1101,13 @@ function _display_metadata_multifield( $slug, $multifield, $object_type, $object
printf( '<p class="description">%s</p>', esc_html( $multifield->description ) );
}

printf( '<a title="%s" class="custom-metadata-multifield-add hide-if-no-js button button-primary" href="#">%s</a>', __( 'Add new' ), __( 'Add new' ) );

echo '<div class="clear"></div>';

echo '</div>';


$fields = $this->get_fields_in_multifield( $multifield->group, $slug, $object_type );

// validate/weed out the fields that can't be part of mulitified
Expand All @@ -1110,20 +1124,37 @@ function _display_metadata_multifield( $slug, $multifield, $object_type, $object
foreach ( $_values as $grouping_of_values ) {
$grouping_count++;
$grouping_id = $slug . '-' . $grouping_count;

printf( '<div id="%s" class="custom-metadata-multifield-grouping">', esc_attr( $grouping_id ) );
echo '<div class="sort-handle"></div>';
echo '<div class="custom-metadata-multifield-fields">';
foreach ( $fields as $field_slug => $field ) {
$value = ( isset( $grouping_of_values[$field_slug] ) ) ? $grouping_of_values[$field_slug] : false;
if( isset($value) ) {
unset($value);
}

if( $field->field_type == 'upload' ) {
$value[] = array(
'url' => ( isset( $grouping_of_values[$field_slug] ) ) ? $grouping_of_values[$field_slug] : false,
'id' => ( isset( $grouping_of_values[$field_slug . '_attachment_id'] ) ) ? $grouping_of_values[$field_slug . '_attachment_id'] : false
);
} else {
$value = ( isset( $grouping_of_values[$field_slug] ) ) ? $grouping_of_values[$field_slug] : false;
}

$field_id = $slug . '[' . ( $grouping_count - 1 ) . ']' . '[' . $field_slug . ']';
$display_field_slug = $field_slug . '-' . $grouping_count;
$this->_display_metadata_field( $display_field_slug, $field, $object_type, $object_id, $field_id, $value );
}
echo '<div class="clear"></div>';
printf( '<a title="%s" class="custom-metadata-multifield-clone hide-if-no-js" href="#">+</a>', __( 'duplicate this set of fields' ) );

if ( $grouping_count > 1 ) {
printf( '<a title="%s" class="custom-metadata-multifield-delete hide-if-no-js" href="#">-</a>', __( 'remove this set of fields' ) );
}
echo '</div>';
echo '<div class="custom-metadata-multifield-actions">';

printf( '<a title="%s" class="button custom-metadata-multifield-clone hide-if-no-js" href="#">%s</a>', __( 'duplicate this set of fields' ), __( 'Clone' ) );

printf( '<br /><a title="%s" class="custom-metadata-multifield-delete hide-if-no-js" href="#">%s</a>', __( 'remove this set of fields' ), __( 'Delete' ) );

echo '</div>';
echo '<div class="clear"></div>';
echo '</div>';
}

Expand All @@ -1143,7 +1174,7 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id,
$callback = $field->display_callback;

if ( $callback && is_callable( $callback ) ) {
call_user_func( $callback, $field_slug, $field, $object_type, $object_id, $value );
call_user_func( $callback, $field_slug, $field, $object_type, $object_id, $field_id, $value );
return;
}

Expand Down Expand Up @@ -1182,6 +1213,7 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id,
$container_class = sanitize_html_class( $field_slug );
$container_class .= ( $cloneable ) ? ' cloneable' : '';
foreach ( $value as $v ) :

$container_id = $field_slug . '-' . $count;
printf( '<div class="%s" id="%s">', esc_attr( $container_class ), esc_attr( $container_id ) );

Expand Down Expand Up @@ -1249,12 +1281,18 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id,
wp_editor( $v, $field_id, $wysiwyg_args );
break;
case 'upload' :
$_attachment_id = $this->get_metadata_field_value( $field_slug . '_attachment_id', $field, $object_type, $object_id );
$attachment_id = array_shift( array_values( $_attachment_id ) ); // get the first value in the array
printf( '<input type="text" name="%s" value="%s" class="custom-metadata-upload-url"%s%s/>', esc_attr( $field_id ), esc_attr( $v ), $readonly_str, $placeholder_str );
if( isset($field->multifield) && $field->multifield != '' ) {
printf( '<input type="text" name="%s" value="%s" class="custom-metadata-upload-url"%s%s/>', esc_attr( $field_id ), esc_attr( $v['url'] ), $readonly_str, $placeholder_str );
printf( '<input type="hidden" name="%s" value="%s" class="custom-metadata-upload-id"/>', esc_attr( str_replace('image]', 'image_attachment_id]', $field_id) ), esc_attr( $v['id'] ) );
} else {
$_attachment_id = $this->get_metadata_field_value( $field_slug . '_attachment_id', $field, $object_type, $object_id );
$_attachment_id_values = array_values( $_attachment_id );
$attachment_id = array_shift( $_attachment_id_values ); // get the first value in the array
printf( '<input type="text" name="%s" value="%s" class="custom-metadata-upload-url"%s%s/>', esc_attr( $field_id ), esc_attr( $v ), $readonly_str, $placeholder_str );
printf( '<input type="hidden" name="%s" value="%s" class="custom-metadata-upload-id"/>', esc_attr( $field_id . '_attachment_id' ), esc_attr( $attachment_id ) );
}
printf( '<input type="button" data-uploader-title="%s" data-uploader-button-text="%s" class="button custom-metadata-upload-button" value="%s"/>', esc_attr( $field->upload_modal_title ), esc_attr( $field->upload_modal_button_text ), esc_attr( $field->upload_modal_title ) );
printf( '<input type="button" class="button custom-metadata-clear-button" value="%s"/>', $field->upload_clear_button_text );
printf( '<input type="hidden" name="%s" value="%s" class="custom-metadata-upload-id"/>', esc_attr( $field_id . '_attachment_id' ), esc_attr( $attachment_id ) );
break;
case 'taxonomy_select' :
$terms = get_terms( $field->taxonomy, array( 'hide_empty' => false ) );
Expand Down Expand Up @@ -1282,6 +1320,12 @@ function _display_metadata_field( $field_slug, $field, $object_type, $object_id,
echo '</label>';
}
break;
case 'sortable_select' :
$container_class = sanitize_html_class( $field_slug );
printf( '<div class="%s" id="%s">', esc_attr( $container_class ), esc_attr( $field_id ) );
printf( '<input type="hidden" id="%s" name="%s" value="%s" data-possible-values="%s" class="select2-sortable" />', esc_attr( $field_slug ), esc_attr( $field_id ), esc_attr( $v ), esc_attr( json_encode($field->values) ) );
echo '</div>';
break;
endswitch;

if ( $cloneable && $count > 1 )
Expand Down
Loading