| 1 |
<?php |
| 2 |
/** |
| 3 |
* Media component for the settings page |
| 4 |
*/ |
| 5 |
|
| 6 |
$key_option = sanitize_key( $data['name'] ); |
| 7 |
|
| 8 |
if( isset( $key_option, $_POST[ $key_option ] ) ) { |
| 9 |
$raw_value = sanitize_text_field( wp_unslash( $_POST[ $key_option ] ) ); |
| 10 |
$media_ids = array_filter( array_map( 'absint', explode( ',', $raw_value ) ) ); |
| 11 |
update_option( $key_option, implode( ',', $media_ids ) ); |
| 12 |
} |
| 13 |
|
| 14 |
wp_enqueue_media(); |
| 15 |
$is_multiple = isset( $data['multiple'] ) && $data['multiple'] === true ? 'true' : 'false'; |
| 16 |
$image_preview_template = '<img src="%1$s" title="%2$s" class="media-preview-image">'; |
| 17 |
|
| 18 |
$medias_string = isset( $key_option ) ? get_option( $key_option, '' ) : ''; |
| 19 |
$medias = $medias_string ? explode( ',', $medias_string ) : array(); |
| 20 |
?> |
| 21 |
<div class="quickwebp-media-input-container"> |
| 22 |
<div id="<?php echo esc_attr( $key_option ?? '' ); ?>_is_empty" class="quickwebp-media-input--is-empty" style="display: <?php echo esc_attr( ! empty( $medias ) ? 'none' : 'block' ); ?>"> |
| 23 |
<?php _e( 'No image selected', QUICKWEBP_TEXT_DOMAIN ); ?> |
| 24 |
</div> |
| 25 |
<input |
| 26 |
type="hidden" |
| 27 |
name="<?php echo esc_attr( $key_option ?? '' ); ?>" |
| 28 |
id="<?php echo esc_attr( $key_option ?? '' ); ?>" |
| 29 |
value="<?php echo esc_attr( $medias_string ); ?>" |
| 30 |
> |
| 31 |
<div id="<?php echo esc_attr( $key_option ?? '' ); ?>_medias-selected" class="quickwebp-medias-selected-container"> |
| 32 |
<?php |
| 33 |
foreach( $medias as $media_id ) { |
| 34 |
$media_id = absint( $media_id ); |
| 35 |
$media = get_post( $media_id ); |
| 36 |
if( $media ) { |
| 37 |
if( wp_attachment_is_image( $media_id ) ) { |
| 38 |
echo wp_kses_post( sprintf( $image_preview_template, esc_url( wp_get_attachment_image_url( $media_id, 'thumbnail' ) ), esc_attr( $media->post_title ) ) ); |
| 39 |
} else { |
| 40 |
echo wp_kses_post( sprintf( $image_preview_template, esc_url( wp_mime_type_icon( $media->post_mime_type ) ), esc_attr( $media->post_title ) ) ); |
| 41 |
} |
| 42 |
} |
| 43 |
} |
| 44 |
?> |
| 45 |
</div> |
| 46 |
<input type="button" |
| 47 |
name="<?php echo esc_attr( $key_option ?? '' ); ?>_button" |
| 48 |
id="<?php echo esc_attr( $key_option ?? '' ); ?>_button" |
| 49 |
class="button button-secondary" |
| 50 |
value="<?php echo esc_attr( $data['button_text'] ?? __( 'Select media', QUICKWEBP_TEXT_DOMAIN ) ); ?>" |
| 51 |
> |
| 52 |
<input type="button" |
| 53 |
name="<?php echo esc_attr( $key_option ?? '' ); ?>_remove_button" |
| 54 |
id="<?php echo esc_attr( $key_option ?? '' ); ?>_remove_button" |
| 55 |
class="button button-secondary button-remove-media" |
| 56 |
value="<?php echo esc_attr( $data['remove_button_text'] ?? __( 'Remove medias', QUICKWEBP_TEXT_DOMAIN ) ); ?>" |
| 57 |
<?php echo empty( $medias ) ? 'disabled' : ''; ?> |
| 58 |
> |
| 59 |
</div> |
| 60 |
|
| 61 |
<script type="text/javascript"> |
| 62 |
jQuery(document).ready(function($){ |
| 63 |
const id = <?php echo wp_json_encode( $key_option ?? '' ); ?>; |
| 64 |
const media_template_preview = <?php echo wp_json_encode( $image_preview_template ); ?>; |
| 65 |
jQuery( "#" + id + "_button" ).click(function(e) { |
| 66 |
e.preventDefault(); |
| 67 |
var image = wp.media({ |
| 68 |
title: <?php echo wp_json_encode( $data['button_text'] ?? __( 'Select media', QUICKWEBP_TEXT_DOMAIN ) ); ?>, |
| 69 |
multiple: <?php echo esc_attr( $is_multiple ); ?> |
| 70 |
}) |
| 71 |
|
| 72 |
image.on('select', function(e){ |
| 73 |
const medias = image.state().get('selection').toJSON(); |
| 74 |
let selected_medias_preview = ''; |
| 75 |
let medias_ids = ''; |
| 76 |
medias.forEach( media => { |
| 77 |
medias_ids = medias_ids === '' ? media.id : medias_ids + ',' + media.id; |
| 78 |
let preview_image = ''; |
| 79 |
if( media.type === 'image' ) { |
| 80 |
preview_image = media.sizes.thumbnail.url; |
| 81 |
} else { |
| 82 |
preview_image = media.icon; |
| 83 |
} |
| 84 |
selected_medias_preview += media_template_preview.replace( '%s', preview_image ).replace( '%s', media.title ); |
| 85 |
}); |
| 86 |
jQuery( "#" + id + "_medias-selected" ).html( selected_medias_preview ); |
| 87 |
jQuery( "#" + id ).val( medias_ids ); |
| 88 |
|
| 89 |
jQuery( "#" + id + "_remove_button" ).prop( 'disabled', false ); |
| 90 |
jQuery( '#' + id + "_is_empty" ).hide(); |
| 91 |
}); |
| 92 |
|
| 93 |
image.on('open', function(e){ |
| 94 |
const medias_ids = jQuery( "#" + id ).val(); |
| 95 |
if( medias_ids !== '' ) { |
| 96 |
const medias = medias_ids.split(','); |
| 97 |
const selection = image.state().get('selection'); |
| 98 |
medias.forEach( media_id => { |
| 99 |
const media = wp.media.attachment( media_id ); |
| 100 |
media.fetch(); |
| 101 |
selection.add( media ? [ media ] : [] ); |
| 102 |
}); |
| 103 |
} |
| 104 |
}); |
| 105 |
|
| 106 |
image.open(); |
| 107 |
|
| 108 |
}); |
| 109 |
|
| 110 |
jQuery( "#" + id + "_remove_button" ).click(function(e) { |
| 111 |
e.preventDefault(); |
| 112 |
jQuery( "#" + id + "_medias-selected" ).html( '' ); |
| 113 |
jQuery( "#" + id ).val( '' ); |
| 114 |
|
| 115 |
jQuery( "#" + id + "_remove_button" ).attr( 'disabled', 'disabled' ); |
| 116 |
jQuery( '#' + id + "_is_empty" ).show(); |
| 117 |
}); |
| 118 |
}); |
| 119 |
</script> |
