mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-31 21:48:36 +01:00
Media: avoid page scrolling when opening the media modal.
Moves focus to a proper element within the media modal to avoid the underlying page to scroll to the bottom. Removes the media modal `freeze` option. Props andreiglingeanu, adamsilverstein. Merges [42624] to the 4.9 branch. Fixes #39859. Built from https://develop.svn.wordpress.org/branches/4.9@42627 git-svn-id: http://core.svn.wordpress.org/branches/4.9@42456 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
9201cc33cc
commit
b7df04afe4
@ -4173,10 +4173,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
tagName: 'div',
|
||||
template: wp.template('media-modal'),
|
||||
|
||||
attributes: {
|
||||
tabindex: 0
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
|
||||
'keydown': 'keydown'
|
||||
@ -4188,8 +4184,7 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
_.defaults( this.options, {
|
||||
container: document.body,
|
||||
title: '',
|
||||
propagate: true,
|
||||
freeze: true
|
||||
propagate: true
|
||||
});
|
||||
|
||||
this.focusManager = new wp.media.view.FocusManager({
|
||||
@ -4244,7 +4239,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
*/
|
||||
open: function() {
|
||||
var $el = this.$el,
|
||||
options = this.options,
|
||||
mceEditor;
|
||||
|
||||
if ( $el.is(':visible') ) {
|
||||
@ -4257,13 +4251,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
this.attach();
|
||||
}
|
||||
|
||||
// If the `freeze` option is set, record the window's scroll position.
|
||||
if ( options.freeze ) {
|
||||
this._freeze = {
|
||||
scrollTop: $( window ).scrollTop()
|
||||
};
|
||||
}
|
||||
|
||||
// Disable page scrolling.
|
||||
$( 'body' ).addClass( 'modal-open' );
|
||||
|
||||
@ -4271,7 +4258,7 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
|
||||
// Try to close the onscreen keyboard
|
||||
if ( 'ontouchend' in document ) {
|
||||
if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
|
||||
if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
|
||||
mceEditor.iframeElement.focus();
|
||||
mceEditor.iframeElement.blur();
|
||||
|
||||
@ -4281,7 +4268,8 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
}
|
||||
}
|
||||
|
||||
this.$el.focus();
|
||||
// Set initial focus on the content instead of this view element, to avoid page scrolling.
|
||||
this.$( '.media-modal' ).focus();
|
||||
|
||||
return this.propagate('open');
|
||||
},
|
||||
@ -4291,8 +4279,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
||||
*/
|
||||
close: function( options ) {
|
||||
var freeze = this._freeze;
|
||||
|
||||
if ( ! this.views.attached || ! this.$el.is(':visible') ) {
|
||||
return this;
|
||||
}
|
||||
@ -4312,11 +4298,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
|
||||
|
||||
this.propagate('close');
|
||||
|
||||
// If the `freeze` option is set, restore the container's scroll position.
|
||||
if ( freeze ) {
|
||||
$( window ).scrollTop( freeze.scrollTop );
|
||||
}
|
||||
|
||||
if ( options && options.escape ) {
|
||||
this.propagate('escape');
|
||||
}
|
||||
|
6
wp-includes/js/media-views.min.js
vendored
6
wp-includes/js/media-views.min.js
vendored
File diff suppressed because one or more lines are too long
@ -162,7 +162,7 @@ function wp_print_media_templates() {
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-media-modal">
|
||||
<div class="<?php echo $class; ?>">
|
||||
<div tabindex="0" class="<?php echo $class; ?>">
|
||||
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
|
||||
<div class="media-modal-content"></div>
|
||||
</div>
|
||||
|
@ -4,7 +4,7 @@
|
||||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.9.3-beta1-42626';
|
||||
$wp_version = '4.9.3-beta1-42627';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
Loading…
Reference in New Issue
Block a user