wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-25 03:08:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

iOS browser menu bar tap stealing hack for bottom contexts

Browse source 
Change-Id: I7607bef4253fde894e307bcecaac6bd342864c0c
This commit is contained in:
Bartosz Dziewoński 2019-06-11 20:08:20 +02:00
parent df8feb6faf
commit 600e369347
2 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
modules/ve-mw/init/styles/ve.init.mw.MobileArticleTarget.less
View file

@ -171,3 +171,11 @@
.ve-init-mw-mobileArticleTarget-pageToolbar-hidden {
display: none;
}
.ve-init-mw-mobileArticleTarget-iosScreenMeasure {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 1px;
}

32
modules/ve-mw/init/targets/ve.init.mw.MobileArticleTarget.js
View file

@ -117,6 +117,34 @@ ve.init.mw.MobileArticleTarget.prototype.activateSurfaceForToolbar = function ()
}
};
ve.init.mw.MobileArticleTarget.prototype.updateIosContextPadding = function () {
var browserMenuCollapsedHeight, currentHeight;
if ( !this.$screenMeasure ) {
this.$screenMeasure = $( '<div>' ).addClass( 've-init-mw-mobileArticleTarget-iosScreenMeasure' );
}
this.$screenMeasure.appendTo( document.body );
// This element is sized using 'vh' units, which iOS does not actually update to match the
// viewport when viewport size changes due to browser menu bar collapsing/expanding.
browserMenuCollapsedHeight = this.$screenMeasure.height();
this.$screenMeasure.detach();
currentHeight = window.innerHeight;
if ( browserMenuCollapsedHeight === currentHeight ) {
// Looks like the browser menu bar is collapsed. Tapping near the bottom of the screen will not
// trigger any events on our widgets, but instead it will expand the browser menu bar. Reserve
// some space where the browser menu bar will appear.
this.surface.getContext().$element.css( 'padding-bottom', 44 );
} else {
// Looks like the browser menu is expanded, so we can remove the silly padding. Even if our
// check here breaks in future versions of iOS, that's okay, the user will just need to tap
// things in this area twice.
this.surface.getContext().$element.css( 'padding-bottom', 0 );
}
};
/**
* @inheritdoc
*/
@ -126,6 +154,10 @@ ve.init.mw.MobileArticleTarget.prototype.onContainerScroll = function () {
surfaceView = this.surface && this.surface.getView();
isActiveWithKeyboard = surfaceView && surfaceView.isFocused() && !surfaceView.isDeactivated();
if ( ve.init.platform.constructor.static.isIos() && ve.newMobileContext ) {
this.updateIosContextPadding();
}
$header = this.overlay.$el.find( '.overlay-header-container' );
$overlaySurface = this.$overlaySurface;