Skip to content

Commit

Permalink
Moved part of the inline event handlers related to media in the admin…
Browse files Browse the repository at this point in the history 
… area
  • Loading branch information
@enricocarraro
enricocarraro committed Sep 16, 2020
1 parent 44d5f95 commit 06bd714
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 8 deletions.
25 changes: 17 additions & 8 deletions src/wp-admin/includes/media.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1638,8 +1638,9 @@ function get_media_item( $attachment_id, $args = null ) {
$image_edit_button = '';

if ( wp_attachment_is_image( $post->ID ) && wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
wp_enqueue_script( 'media-events' );
$nonce = wp_create_nonce( "image_editor-$post->ID" );
$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' onclick='imageEdit.open( $post->ID, \"$nonce\" )' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
$image_edit_button = "<input type='button' class='imgedit-open-btn' id='imgedit-open-btn-$post->ID' data-post-id='$post->ID' data-nonce='$nonce' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
}

$attachment_url = get_permalink( $attachment_id );
Expand Down Expand Up @@ -1693,12 +1694,13 @@ function get_media_item( $attachment_id, $args = null ) {
if ( ! EMPTY_TRASH_DAYS ) {
$delete = "<a href='" . wp_nonce_url( "post.php?action=delete&amp;post=$attachment_id", 'delete-post_' . $attachment_id ) . "' id='del[$attachment_id]' class='delete-permanently'>" . __( 'Delete Permanently' ) . '</a>';
} elseif ( ! MEDIA_TRASH ) {
$delete = "<a href='#' class='del-link' onclick=\"document.getElementById('del_attachment_$attachment_id').style.display='block';return false;\">" . __( 'Delete' ) . "</a>
wp_enqueue_script( 'media-events' );
$delete = "<a href='#' class='del-link' data-attachment-id='$attachment_id'>" . __( 'Delete' ) . "</a>
<div id='del_attachment_$attachment_id' class='del-attachment' style='display:none;'>" .
/* translators: %s: File name. */
'<p>' . sprintf( __( 'You are about to delete %s.' ), '<strong>' . $filename . '</strong>' ) . "</p>
<a href='" . wp_nonce_url( "post.php?action=delete&amp;post=$attachment_id", 'delete-post_' . $attachment_id ) . "' id='del[$attachment_id]' class='button'>" . __( 'Continue' ) . "</a>
<a href='#' class='button' onclick=\"this.parentNode.style.display='none';return false;\">" . __( 'Cancel' ) . '</a>
<a href='#' class='button cancel-del-link'>" . __( 'Cancel' ) . '</a>
</div>';
} else {
$delete = "<a href='" . wp_nonce_url( "post.php?action=trash&amp;post=$attachment_id", 'trash-post_' . $attachment_id ) . "' id='del[$attachment_id]' class='delete'>" . __( 'Move to Trash' ) . "</a>
Expand All @@ -1722,12 +1724,13 @@ function get_media_item( $attachment_id, $args = null ) {
&& post_type_supports( get_post_type( $calling_post_id ), 'thumbnail' )
&& get_post_thumbnail_id( $calling_post_id ) != $attachment_id
) {
wp_enqueue_script( 'media-events' );

$calling_post = get_post( $calling_post_id );
$calling_post_type_object = get_post_type_object( $calling_post->post_type );

$ajax_nonce = wp_create_nonce( "set_post_thumbnail-$calling_post_id" );
$thumbnail = "<a class='wp-post-thumbnail' id='wp-post-thumbnail-" . $attachment_id . "' href='#' onclick='WPSetAsThumbnail(\"$attachment_id\", \"$ajax_nonce\");return false;'>" . esc_html( $calling_post_type_object->labels->use_featured_image ) . '</a>';
$thumbnail = "<a class='wp-post-thumbnail' id='wp-post-thumbnail-" . $attachment_id . "' data-attachment-id='$attachment_id' data-ajax-nonce='$ajax_nonce' href='#'>" . esc_html( $calling_post_type_object->labels->use_featured_image ) . '</a>';
}

if ( ( $parsed_args['send'] || $thumbnail || $delete ) && ! isset( $form_fields['buttons'] ) ) {
Expand Down Expand Up @@ -2225,10 +2228,13 @@ function media_upload_form( $errors = null ) {
<label class="screen-reader-text" for="async-upload"><?php _e( 'Upload' ); ?></label>
<input type="file" name="async-upload" id="async-upload" />
<?php submit_button( __( 'Upload' ), 'primary', 'html-upload', false ); ?>
<a href="#" onclick="try{top.tb_remove();}catch(e){}; return false;"><?php _e( 'Cancel' ); ?></a>
<a href="#" id="cancel-async-upload"><?php _e( 'Cancel' ); ?></a>
</p>
<div class="clear"></div>
<?php

wp_enqueue_script( 'media-events' );

/**
* Fires after the upload button in the media upload interface.
*
Expand Down Expand Up @@ -2502,6 +2508,8 @@ function media_upload_type_url_form( $type = null, $errors = null, $id = null )
function media_upload_gallery_form( $errors ) {
global $redir_tab, $type;

wp_enqueue_script( 'media-events' );

$redir_tab = 'gallery';
media_upload_header();

Expand Down Expand Up @@ -2643,8 +2651,8 @@ function media_upload_gallery_form( $errors ) {
</tbody></table>

<p class="ml-submit">
<input type="button" class="button" style="display:none;" onMouseDown="wpgallery.update();" name="insert-gallery" id="insert-gallery" value="<?php esc_attr_e( 'Insert gallery' ); ?>" />
<input type="button" class="button" style="display:none;" onMouseDown="wpgallery.update();" name="update-gallery" id="update-gallery" value="<?php esc_attr_e( 'Update gallery settings' ); ?>" />
<input type="button" class="button" style="display:none;" name="insert-gallery" id="insert-gallery" value="<?php esc_attr_e( 'Insert gallery' ); ?>" />
<input type="button" class="button" style="display:none;" name="update-gallery" id="update-gallery" value="<?php esc_attr_e( 'Update gallery settings' ); ?>" />
</p>
</div>
</form>
Expand Down Expand Up @@ -3097,8 +3105,9 @@ function edit_form_image_editor( $post ) {
if ( wp_attachment_is_image( $post->ID ) ) :
$image_edit_button = '';
if ( wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
wp_enqueue_script( 'media-events' );
$nonce = wp_create_nonce( "image_editor-$post->ID" );
$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' onclick='imageEdit.open( $post->ID, \"$nonce\" )' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
$image_edit_button = "<input type='button' class='imgedit-open-btn' id='imgedit-open-btn-$post->ID' data-post-id='$post->ID' data-nonce='$nonce' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
}

$open_style = '';
Expand Down
66 changes: 66 additions & 0 deletions src/wp-admin/js/media-events.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/**
* @output wp-includes/js/admin-media.js
*/
/**
* Admin media event handlers.
*
* @since 5.3.1
*
* @param {Object} document The document object.
* @param {Object} window The window object.

This comment has been minimized.

Sign in to view

Copy link
@vrana

vrana Sep 16, 2020

These are not used. Why they are passed?
* @param {Object} navigator The navigator object.
*
* @return {void}
*/
( function( document, window, navigator ) {
document.addEventListener( 'DOMContentLoaded', function() {
document.querySelectorAll( '.imgedit-open-btn' ).forEach( function (item) {

This comment has been minimized.

Sign in to view

Copy link
@vrana

vrana Sep 16, 2020

The indentation seems off for this whole block.
item.addEventListener( 'click', function() {
imageEdit.open( parseInt( item.dataset.postId ), item.dataset.nonce );
} );
} );

document.querySelectorAll( '.del-link' ).forEach( function (item) {
item.addEventListener( 'click', function() {

document.getElementById( 'del_attachment_' + item.dataset.attachmentId ).style.display = 'block';
return false;

This comment has been minimized.

Sign in to view

Copy link
@vrana

vrana Sep 16, 2020

return false does nothing inside addEventListener. You need to call event.preventDefault() where event is the callback's parameter.
} );
} );

document.querySelectorAll( '.cancel-del-link' ).forEach( function (item) {
item.addEventListener( 'click', function() {
this.parentNode.style.display = 'none';
return false;
} );
} );


document.querySelectorAll( '.wp-post-thumbnail' ).forEach( function (item) {
item.addEventListener( 'click', function() {
WPSetAsThumbnail( item.dataset.attachmentId, item.dataset.ajaxNonce );
return false;
} );
} );


document.getElementById( 'cancel-async-upload' ).addEventListener( 'click' , function () {
try{

This comment has been minimized.

Sign in to view

Copy link
@vrana

vrana Sep 16, 2020

Missing space.
top.tb_remove();

This comment has been minimized.

Sign in to view

Copy link
@vrana

vrana Sep 16, 2020

Since you pass window, this should probably be window.top.
} catch(e) {};
return false;
});

[ document.getElementById( 'update-gallery' ), document.getElementById( 'insert-gallery' )]

This comment has been minimized.

Sign in to view

Copy link
@vrana

vrana Sep 16, 2020 •
edited
Loading

Is this guaranteed to be always there? I'd probably be defensive and check if item is set before accessing it. Or you can assign the same class to these elements and use querySelectorAll.
.forEach( function (item) {
item.addEventListener( 'mousedown' , function () {
wpgallery.update();
});
});


} );



} )( document, window, navigator );
2 changes: 2 additions & 0 deletions src/wp-includes/script-loader.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1302,6 +1302,8 @@ function wp_default_scripts( $scripts ) {
$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
$scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array( 'jquery' ), false, 1 );

$scripts->add( 'media-events', "/wp-admin/js/media-events$suffix.js", array(), false, 1);

$scripts->add( 'svg-painter', '/wp-admin/js/svg-painter.js', array( 'jquery' ), false, 1 );
}
}
Expand Down

0 comments on commit 06bd714

Please sign in to comment.