diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 45a8a8f278..e042f5fbfa 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -628,6 +628,8 @@ span.wp-media-buttons-icon:before { top: 50%; left: 0; right: 0; + -webkit-transform: translateY( -50% ); + -ms-transform: translateY( -50% ); transform: translateY( -50% ); font-size: 40px; color: #fff; diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 547cd6d63a..4bd36d84f0 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -235,33 +235,41 @@ .find-box { background-color: #fff; width: 600px; - max-width: 100%; overflow: hidden; margin-left: -300px; position: fixed; top: 30px; + bottom: 30px; left: 50%; z-index: 160000; } .find-box-head { - cursor: move; background: #fcfcfc; border-bottom: 1px solid #dfdfdf; - height: 40px; + height: 56px; font-size: 22px; font-weight: 600; - line-height: 40px; + line-height: 56px; padding: 0 40px 0 16px; - overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; } .find-box-inside { overflow: auto; padding: 16px; background-color: #fff; - max-height: 300px; + position: absolute; + top: 57px; + bottom: 57px; overflow-y: scroll; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .find-box-search { @@ -272,7 +280,7 @@ float: none; left: 125px; position: absolute; - top: 9px; + top: 18px; } #find-posts-input, @@ -286,7 +294,8 @@ margin: 0 4px 0 0; } -.found-radio { +.widefat .found-radio { + padding-right: 0; width: 16px; } @@ -315,15 +324,29 @@ } .find-box-buttons { - padding: 6px 16px; + padding: 14px 16px; background: #fcfcfc; border-top: 1px solid #dfdfdf; + position: absolute; + bottom: 0; + left: 0; + right: 0; } -.find-box #resize-se { - position: absolute; - right: 1px; - bottom: 1px; +@media screen and ( max-width: 660px ) { + + .find-box { + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: 0; + width: 100%; + } + + .find-box-inside { + bottom: 69px; + } } .ui-find-overlay { diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php index 7f00fb9781..d89de1a06b 100644 --- a/src/wp-admin/includes/ajax-actions.php +++ b/src/wp-admin/includes/ajax-actions.php @@ -1465,11 +1465,7 @@ function wp_ajax_find_posts() { $html .= ''; - $x = new WP_Ajax_Response(); - $x->add( array( - 'data' => $html - )); - $x->send(); + wp_send_json_success( $html ); } function wp_ajax_widgets_order() { diff --git a/src/wp-admin/js/media.js b/src/wp-admin/js/media.js index a427658a44..f9fc6508af 100644 --- a/src/wp-admin/js/media.js +++ b/src/wp-admin/js/media.js @@ -1,11 +1,10 @@ -/* global ajaxurl, wpAjax */ +/* global ajaxurl, attachMediaBoxL10n */ var findPosts; -(function($){ +( function( $ ){ findPosts = { - open : function(af_name, af_val) { - var st = document.documentElement.scrollTop || $(document).scrollTop(), - overlay = $( '.ui-find-overlay' ); + open: function( af_name, af_val ) { + var overlay = $( '.ui-find-overlay' ); if ( overlay.length === 0 ) { $( 'body' ).append( '
' ); @@ -15,18 +14,15 @@ var findPosts; overlay.show(); if ( af_name && af_val ) { - $('#affected').attr('name', af_name).val(af_val); + $( '#affected' ).attr( 'name', af_name ).val( af_val ); } - $('#find-posts').show().draggable({ - handle: '#find-posts-head' - }); - $('.find-box-inside').css({ - 'max-height': $( window ).height() - ( ( 30 + 40 + 1 + 16 ) * 2 ) + 'px' - }); + $( '#find-posts' ).show(); - $('#find-posts-input').focus().keyup(function(e){ - if (e.which == 27) { findPosts.close(); } // close on Escape + $('#find-posts-input').focus().keyup( function( event ){ + if ( event.which == 27 ) { + findPosts.close(); + } // close on Escape }); // Pull some results up by default @@ -35,21 +31,21 @@ var findPosts; return false; }, - close : function() { + close: function() { $('#find-posts-response').html(''); - $('#find-posts').draggable('destroy').hide(); + $('#find-posts').hide(); $( '.ui-find-overlay' ).hide(); }, - overlay : function() { + overlay: function() { $( '.ui-find-overlay' ).on( 'click', function () { findPosts.close(); }); }, - send : function() { + send: function() { var post = { - ps: $('#find-posts-input').val(), + ps: $( '#find-posts-input' ).val(), action: 'find_posts', _ajax_nonce: $('#_ajax_nonce').val() }, @@ -57,73 +53,49 @@ var findPosts; spinner.show(); - $.ajax({ - type : 'POST', - url : ajaxurl, - data : post, - success : function(x) { findPosts.show(x); spinner.hide(); }, - error : function(r) { findPosts.error(r); spinner.hide(); } + $.ajax( ajaxurl, { + type: 'POST', + data: post, + dataType: 'json' + }).always( function() { + spinner.hide(); + }).done( function( x ) { + if ( ! x.success ) { + $( '#find-posts-response' ).text( attachMediaBoxL10n.error ); + } + + $( '#find-posts-response' ).html( x.data ); + }).fail( function() { + $( '#find-posts-response' ).text( attachMediaBoxL10n.error ); }); - }, - - show : function(x) { - - if ( typeof(x) == 'string' ) { - this.error({'responseText': x}); - return; - } - - var r = wpAjax.parseAjaxResponse(x); - - if ( r.errors ) { - this.error({'responseText': wpAjax.broken}); - } - r = r.responses[0]; - $('#find-posts-response').html(r.data); - - // Enable whole row to be clicked - $( '.found-posts td' ).on( 'click', function () { - $( this ).parent().find( '.found-radio input' ).prop( 'checked', true ); - }); - }, - - error : function(r) { - var er = r.statusText; - - if ( r.responseText ) { - er = r.responseText.replace( /<.[^<>]*?>/g, '' ); - } - if ( er ) { - $('#find-posts-response').html(er); - } } }; - $(document).ready(function() { - $('#find-posts-submit').click(function(e) { - if ( '' === $('#find-posts-response').html() ) - e.preventDefault(); + $( document ).ready( function() { + $( '#find-posts-submit' ).click( function( event ) { + if ( ! $( '#find-posts-response input[type="radio"]:checked' ).length ) + event.preventDefault(); }); $( '#find-posts .find-box-search :input' ).keypress( function( event ) { if ( 13 == event.which ) { findPosts.send(); return false; } - } ); + }); $( '#find-posts-search' ).click( findPosts.send ); $( '#find-posts-close' ).click( findPosts.close ); - $('#doaction, #doaction2').click(function(e){ - $('select[name^="action"]').each(function(){ - if ( $(this).val() == 'attach' ) { - e.preventDefault(); + $( '#doaction, #doaction2' ).click( function( event ) { + $( 'select[name^="action"]' ).each( function() { + if ( $(this).val() === 'attach' ) { + event.preventDefault(); findPosts.open(); } }); }); - }); - $(window).resize(function() { - $('.find-box-inside').css({ - 'max-height': $( window ).height() - ( ( 30 + 40 + 1 + 16 ) * 2 ) + 'px' + + // Enable whole row to be clicked + $( '.find-box-inside' ).on( 'click', 'tr', function() { + $( this ).find( '.found-radio input' ).prop( 'checked', true ); }); }); -})(jQuery); +})( jQuery ); diff --git a/src/wp-admin/upload.php b/src/wp-admin/upload.php index 7629e6b7b4..8b93f825a0 100644 --- a/src/wp-admin/upload.php +++ b/src/wp-admin/upload.php @@ -141,12 +141,8 @@ $wp_list_table->prepare_items(); $title = __('Media Library'); $parent_file = 'upload.php'; -wp_enqueue_script( 'wp-ajax-response' ); -wp_enqueue_script( 'jquery-ui-draggable' ); wp_enqueue_script( 'media' ); -add_action( 'admin_print_footer_scripts', 'find_posts_div' ); - add_screen_option( 'per_page', array('label' => _x( 'Media items', 'items per page (screen options)' )) ); get_current_screen()->add_help_tab( array( @@ -240,10 +236,10 @@ if ( !empty($message) ) { ?> display(); ?> +
+ -
- add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" ); - $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery-ui-draggable' ), false, 1 ); + $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery' ), false, 1 ); + did_action( 'init' ) && $scripts->localize( 'media', 'attachMediaBoxL10n', array( + 'error' => __( 'An error has occured. Please reload the page and try again.' ) + )); $scripts->add( 'image-edit', "/wp-admin/js/image-edit$suffix.js", array('jquery', 'json2', 'imgareaselect'), false, 1 ); did_action( 'init' ) && $scripts->localize( 'image-edit', 'imageEditL10n', array(