Skip to content

Commit

Permalink
fix scrollTop jump issue for fw.Modal (#2388)
Browse files Browse the repository at this point in the history
  • Loading branch information
andreiglingeanu authored and moldcraft committed Feb 8, 2017
1 parent a86da9a commit 0f41ea4
Showing 1 changed file with 61 additions and 0 deletions.
61 changes: 61 additions & 0 deletions framework/static/js/fw.js
Original file line number Diff line number Diff line change
Expand Up @@ -730,6 +730,8 @@ fw.getQueryString = function(name) {
uploader: false
});

patchMediaFramesModalToDoTheFocusCorrectly( this.frame );

var modal = this;

this.frame.once('ready', function(){
Expand Down Expand Up @@ -977,6 +979,65 @@ fw.getQueryString = function(name) {
$frame.css('overflow-y', 'hidden');
}
});

// https://github.com/WordPress/WordPress/blob/4ca4ff999aba05892c05d26cddf3af540f47b93b/wp-includes/js/media-views.js#L6800
// When you execute frame.modal.open() - the modal tries to switch focus
// to its $el. Actually, this switches the scrollTop property for window.
//
// In order to prevent that we'll have to monkey patch the frame.modal.open
// method and do the focus properly - that's what this function does
function patchMediaFramesModalToDoTheFocusCorrectly (frame) {
if (! frame.modal) return;

frame.modal.open = function () {
var $el = this.$el,
options = this.options,
mceEditor;

if ( $el.is(':visible') ) {
return this;
}

this.clickedOpenerEl = document.activeElement;

if ( ! this.views.attached ) {
this.attach();
}

// If the `freeze` option is set, record the window's scroll position.
if ( options.freeze ) {
this._freeze = {
scrollTop: jQuery( window ).scrollTop()
};
}

// Disable page scrolling.
jQuery( 'body' ).addClass( 'modal-open' );

$el.show();

// Try to close the onscreen keyboard
if ( 'ontouchend' in document ) {
if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
mceEditor.iframeElement.focus();
mceEditor.iframeElement.blur();

setTimeout( function() {
mceEditor.iframeElement.blur();
}, 100 );
}
}

// this part is changed from the original method
// this.$el.focus();
// http://stackoverflow.com/a/11676673/3220977
var initialX = window.scrollX, initialY = window.scrollY;
this.$el.focus();
window.scrollTo(initialX, initialY);

return this.propagate('open');
}
}
})();

/**
Expand Down

0 comments on commit 0f41ea4

Please sign in to comment.