JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/115337
Change subject: Fix overlay header shifting on iOS in VE
......................................................................
Fix overlay header shifting on iOS in VE
Calculate header position in JS when virtual keyboard is open. Hide
header when scrolling starts and show it when it ends (unfortunately
mobile Safari sends scroll events only when scrolling finishes).
Bug: 61240
Change-Id: Id9c56586bb27d2798e35e76614423d103a775d3c
---
M javascripts/common/OverlayNew.js
M javascripts/modules/editor/VisualEditorOverlay.js
M less/common/OverlayNew.less
M templates/OverlayNew.html
M templates/modules/editor/EditorOverlayBase.html
M templates/modules/search/SearchOverlay.html
6 files changed, 43 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/37/115337/1
diff --git a/javascripts/common/OverlayNew.js b/javascripts/common/OverlayNew.js
index 07d72da..6cdb23a 100644
--- a/javascripts/common/OverlayNew.js
+++ b/javascripts/common/OverlayNew.js
@@ -1,5 +1,5 @@
// FIXME: merge with Overlay and remove when OverlayNew gets to stable
-( function( M ) {
+( function( M, $ ) {
var Overlay = M.require( 'Overlay' ), OverlayNew;
/**
@@ -17,18 +17,32 @@
},
postRender: function( options ) {
- var self = this;
this._super( options );
+ this._fixIosHeader( 'textarea, input' );
+ },
+
+ _fixIosHeader: function( el ) {
+ var $header = this.$( '.overlay-header-container' ),
$window = $( window );
// This is used to avoid position: fixed weirdness in
mobile Safari when
// the keyboard is visible
if ( ( /ipad|iphone/i ).test( navigator.userAgent ) ) {
- this.$( 'textarea, input' ).
+ this.$( el ).
on( 'focus', function() {
- self.$(
'.overlay-header-container' ).removeClass( 'position-fixed' );
+ $header.css( 'top',
$window.scrollTop() ).removeClass( 'position-fixed' );
+ $window.on(
'scroll.fixIosHeader', function() {
+ $header.css( 'top',
$window.scrollTop() ).addClass( 'visible' );
+ } );
+ $window.on(
'touchmove.fixIosHeader', function() {
+ // don't hide header if
we're at the top
+ if (
$window.scrollTop() > 0 ) {
+
$header.removeClass( 'visible' );
+ }
+ } );
} ).
on( 'blur', function() {
- self.$(
'.overlay-header-container' ).addClass( 'position-fixed' );
+ $header.css( 'top', 0
).addClass( 'position-fixed visible' );
+ $window.off( '.fixIosHeader' );
} );
}
}
@@ -36,4 +50,4 @@
M.define( 'OverlayNew', OverlayNew );
-}( mw.mobileFrontend ) );
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/editor/VisualEditorOverlay.js
b/javascripts/modules/editor/VisualEditorOverlay.js
index 2b662aa..52a826d 100644
--- a/javascripts/modules/editor/VisualEditorOverlay.js
+++ b/javascripts/modules/editor/VisualEditorOverlay.js
@@ -108,6 +108,13 @@
this.clearSpinner();
this.target.surface.getModel().getDocument().connect(
this, { 'transact': 'onTransact' } );
this.target.surface.$element.addClass( 'content' );
+
+ // for some reason the first time contenteditables are
focused, focus
+ // event doesn't fire if we don't blur them first
+ this.$( '[contenteditable]' ).blur();
+ // we have to do it here because contenteditable
elements still do not
+ // exist when postRender is executed
+ this._fixIosHeader( '[contenteditable]' );
},
onTransact: function () {
this.hasChanged = true;
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 915ea4c..80c708e 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -205,6 +205,19 @@
position: absolute;
top: 0;
white-space: nowrap;
+ // has to be here in case has no position: fixed but is
positioned using
+ // JS on iOS
+ z-index: 5;
+ // prevent horizontal scrollbar when no position: fixed
+ overflow: hidden;
+ // make header reappearing less abrupt when scrolling on iOS
with open
+ // keyboard
+ opacity: 0;
+
+ &.visible {
+ opacity: 1;
+ .transition( opacity .2s );
+ }
&.position-fixed {
// both top and left required for Android 2 for the
element to be visible
diff --git a/templates/OverlayNew.html b/templates/OverlayNew.html
index b501761..6ba27aa 100644
--- a/templates/OverlayNew.html
+++ b/templates/OverlayNew.html
@@ -1,4 +1,4 @@
-<div class="overlay-header-container{{#fixedHeader}}
position-fixed{{/fixedHeader}}">
+<div class="overlay-header-container visible {{#fixedHeader}}
position-fixed{{/fixedHeader}}">
<div class="overlay-header">
<ul class="v-border bottom-border">
<li><button class="cancel
icon">{{closeMsg}}</button></li>
diff --git a/templates/modules/editor/EditorOverlayBase.html
b/templates/modules/editor/EditorOverlayBase.html
index 8c04466..fb84279 100644
--- a/templates/modules/editor/EditorOverlayBase.html
+++ b/templates/modules/editor/EditorOverlayBase.html
@@ -1,4 +1,4 @@
-<div class="overlay-header-container position-fixed">
+<div class="overlay-header-container visible position-fixed">
{{>header}}
<div class="overlay-header save-header hideable hidden">
<ul class="v-border bottom-border">
diff --git a/templates/modules/search/SearchOverlay.html
b/templates/modules/search/SearchOverlay.html
index 9dbc954..cadf096 100644
--- a/templates/modules/search/SearchOverlay.html
+++ b/templates/modules/search/SearchOverlay.html
@@ -1,4 +1,4 @@
-<div class="overlay-header-container position-fixed">
+<div class="overlay-header-container visible position-fixed">
<div class="overlay-header">
<ul class="v-border bottom-border">
<li><button class="cancel
icon">{{closeMsg}}</button></li>
--
To view, visit https://gerrit.wikimedia.org/r/115337
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id9c56586bb27d2798e35e76614423d103a775d3c
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <jgon...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
