Website: Update modals on mobile safari (#19628)
Related to: https://github.com/fleetdm/fleet/issues/19584 Closes: https://github.com/fleetdm/fleet/issues/19624 Changes: - Updated the modal component to remove a workaround for an ios 11 bug that has been resolved in the versions of IOS that the Fleet website supports
This commit is contained in:
-74
@@ -34,7 +34,6 @@ parasails.registerComponent('modal', {
|
||||
// but still.... better safe than sorry!)
|
||||
_bsModalIsAnimatingOut: false,
|
||||
|
||||
isMobileSafari: false,//« more on this below
|
||||
originalScrollPosition: undefined,//« more on this below
|
||||
};
|
||||
},
|
||||
@@ -60,25 +59,6 @@ parasails.registerComponent('modal', {
|
||||
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
|
||||
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
|
||||
beforeMount: function() {
|
||||
// If this is mobile safari, make note of it.
|
||||
this.isMobileSafari = (typeof bowser !== 'undefined') && bowser.mobile && bowser.safari;
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
// ^^So there's a bug in mobile safari that misplaces the caret when the keyboard opening
|
||||
// causes the page to scroll, so we need to do some special tricks to keep it from getting ugly.
|
||||
// It's only in iOS 11... we think. Hopefully it will be fixed.
|
||||
// In the mean time, we have to get wacky.
|
||||
//
|
||||
// > More info about the bug here:
|
||||
// > https://github.com/twbs/bootstrap/issues/24835#issuecomment-345974819
|
||||
// > https://stackoverflow.com/questions/46567233/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug?rq=1
|
||||
//
|
||||
// FUTURE: maybe the bug will be fixed and we can remove this someday?
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
if(this.isMobileSafari) {
|
||||
// Get our original scroll position before opening the modal and save it for later.
|
||||
this.originalScrollPosition = $(window).scrollTop();
|
||||
}
|
||||
},
|
||||
mounted: function(){
|
||||
// ^^ Note that this is not an `async function`.
|
||||
@@ -100,26 +80,6 @@ parasails.registerComponent('modal', {
|
||||
// the parent logic can use this event to update its scope.)
|
||||
$(this.$el).on('hide.bs.modal', ()=>{
|
||||
|
||||
// Undo any mobile safari workarounds we may have added.
|
||||
// (i.e. shed the wackiness)
|
||||
if(this.isMobileSafari) {
|
||||
// Remove style overrides on our modal dialog.
|
||||
$(this.$el).css({
|
||||
'overflow-y': '',
|
||||
'position': '',
|
||||
'left': '',
|
||||
'top': '',
|
||||
});
|
||||
|
||||
// Beckon to our siblings so they come out of hiding
|
||||
this.$get().parent().children().not(this.$el).css({
|
||||
'display': ''
|
||||
});
|
||||
|
||||
// Scroll to our original position when the modal was summoned.
|
||||
window.scrollTo(0, this.originalScrollPosition);
|
||||
}//fi
|
||||
|
||||
this._bsModalIsAnimatingOut = true;
|
||||
this.$emit('close');
|
||||
|
||||
@@ -131,40 +91,6 @@ parasails.registerComponent('modal', {
|
||||
// us to do cool things like auto-focus the first input in a form modal.
|
||||
$(this.$el).on('shown.bs.modal', ()=>{
|
||||
|
||||
// If this is mobile safari, let's get wacky.
|
||||
if(this.isMobileSafari) {
|
||||
// Scroll to the top of the page.
|
||||
window.scrollTo(0, 0);
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
// ^^FUTURE: Don't actually do this -- instead, try setting `top` of the
|
||||
// modal to whatever the original scrollTop of our window was. This
|
||||
// eliminates the need for auto-scrolling to the top and ripping you out
|
||||
// of the context you were in before the modal opens. It would also allow
|
||||
// us to keep the nice animation when opening/closing modals on iOS.
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
// Hide siblings to lop off any extra space at the bottom.
|
||||
this.$get().parent().children().not(this.$el).css({
|
||||
'display': 'none'
|
||||
});
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
// ^^FUTURE: Instead of just hiding siblings, which isn't perfect and won't
|
||||
// always work for everyone, try grabbing outerHeight of the modal element
|
||||
// and using that to set an explicit height for the body.
|
||||
// (but also be sure to handle the case where the body is short!)
|
||||
// But for now, this should work as long as we have sticky footer styles.
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
// Hard code some style overrides on our modal dialog.
|
||||
// Without these, it gets weird.
|
||||
$(this.$el).css({
|
||||
'overflow-y': 'auto!important',
|
||||
'position': 'absolute',
|
||||
'left': '0',
|
||||
'top': '0',
|
||||
});
|
||||
}//fi
|
||||
|
||||
// Focus our "focus-first" field, if relevant.
|
||||
// (but not on mobile, because it can get weird)
|
||||
if(typeof bowser !== 'undefined' && !bowser.mobile && this.$find('[focus-first]').length > 0) {
|
||||
|
||||
Reference in New Issue
Block a user