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