jenkins-bot has submitted this change and it was merged.
Change subject: Make tapping more responsive
......................................................................
Make tapping more responsive
Until now we used the click event to make links and buttons do
something. This, unfortunately, causes a 300ms delays on all mobile
browsers between the actual tap (touchend) and the callback being
invoked.
This patch introduces a small library that adds a tap event for a more
responsive UI. On browsers without touch events it falls back to click
events.
I added it in alpha in several places for now: hamburger, overlay close
button, search input and page actions. If it works well, we could use it
everywhere instead of using click events.
Change-Id: Ib487355d86803fb09f169b573575b2a34f456ada
---
M includes/Resources.php
M javascripts/common/Drawer.js
M javascripts/common/Overlay.js
M javascripts/common/navigation.js
M javascripts/common/user.js
A javascripts/externals/micro.tap.js
M javascripts/modules/editor/editor.js
M javascripts/modules/mf-toggle.js
M javascripts/modules/mf-watchstar.js
M javascripts/modules/search/search.js
M javascripts/modules/talk.js
M less/common/common-js.less
M stylesheets/common/common-js.css
13 files changed, 104 insertions(+), 24 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/Resources.php b/includes/Resources.php
index 49d2bdd..9ed51d1 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -353,6 +353,7 @@
'stylesheets/modules/nearbypages.css',
),
'scripts' => array(
+ 'javascripts/externals/micro.tap.js',
'javascripts/modules/mf-inline-style-scrubber.js',
'javascripts/common/history-alpha.js',
'javascripts/modules/mf-tables.js',
diff --git a/javascripts/common/Drawer.js b/javascripts/common/Drawer.js
index 74107d9..c002485 100644
--- a/javascripts/common/Drawer.js
+++ b/javascripts/common/Drawer.js
@@ -24,7 +24,9 @@
if ( !this.locked ) {
// ignore a possible click that called
show()
setTimeout( function() {
- $( window ).one( 'scroll.drawer
click.drawer', $.proxy( self, 'hide' ) );
+ $( window ).one(
'scroll.drawer', $.proxy( self, 'hide' ) );
+ // FIXME change when
micro.tap.js in stable
+ $( '#mw-mf-page-center' ).one(
( mw.config.get( 'wgMFMode' ) === 'alpha' ? 'tap' : 'click' ) + '.drawer',
$.proxy( self, 'hide' ) );
}, this.minHideDelay );
}
}
@@ -35,6 +37,7 @@
// .one() registers one callback for scroll and click
independently
// if one fired, get rid of the other one
$( window ).off( '.drawer' );
+ $( '#mw-mf-page-center' ).off( '.drawer' );
},
isVisible: function() {
diff --git a/javascripts/common/Overlay.js b/javascripts/common/Overlay.js
index db576e0..2737c16 100644
--- a/javascripts/common/Overlay.js
+++ b/javascripts/common/Overlay.js
@@ -34,7 +34,8 @@
},
postRender: function() {
var self = this;
- this.$( '.cancel,.confirm' ).click( function( ev ) {
+ // FIXME change when micro.tap.js in stable
+ this.$( '.cancel, .confirm' ).on( mw.config.get(
'wgMFMode' ) === 'alpha' ? 'tap' : 'click', function( ev ) {
ev.preventDefault();
if ( self.closeOnBack ) {
window.history.back();
diff --git a/javascripts/common/navigation.js b/javascripts/common/navigation.js
index ff5f09b..9f3b169 100644
--- a/javascripts/common/navigation.js
+++ b/javascripts/common/navigation.js
@@ -3,6 +3,7 @@
var m = ( function( $ ) {
var
menu,
+ inAlpha = mw.config.get( 'wgMFMode' ) === 'alpha',
inBeta = mw.config.get( 'wgMFMode' ) === 'beta';
function openNavigation() {
@@ -33,23 +34,46 @@
closeNavigation();
}
}
- $( '#mw-mf-main-menu-button' ).click( function( ev ) {
- toggleNavigation();
- ev.preventDefault();
- } ).on( 'touchend mouseup', function( ev ) {
- ev.stopPropagation();
- } );
- // close navigation if content tapped
- $( '#mw-mf-page-center' ).
- on( 'touchend mouseup', function() {
- if ( isOpen() && !moved ) {
+ // FIXME change when micro.tap.js in stable
+ if ( inAlpha ) {
+ // make the input readonly to avoid accidental focusing
when closing menu
+ // (when JS is on, this input should not be used for
typing anyway)
+ $( '#searchInput' ).prop( 'readonly', true );
+ $( '#mw-mf-main-menu-button' ).on( 'tap', function( ev
) {
+ toggleNavigation();
+ ev.preventDefault();
+ ev.stopPropagation();
+ } );
+
+ // close navigation if content tapped
+ $( '#mw-mf-page-center' ).on( 'tap', function(ev) {
+ if ( isOpen() ) {
closeNavigation();
+ ev.preventDefault();
}
- } ).
- // but don't close if scrolled
- on( 'touchstart', function() { moved = false; } ).
- on( 'touchmove', function() { moved = true; } );
+ } );
+ } else {
+ $( '#mw-mf-main-menu-button' ).click( function( ev ) {
+ toggleNavigation();
+ ev.preventDefault();
+ } ).on( 'touchend mouseup', function( ev ) {
+ ev.stopPropagation();
+ } );
+
+ // close navigation if content tapped
+ $( '#mw-mf-page-center' ).
+ on( 'touchend mouseup', function() {
+ if ( isOpen() && !moved ) {
+ closeNavigation();
+ }
+ } ).
+ // but don't close if scrolled
+ on( 'touchstart', function() { moved = false; }
).
+ on( 'touchmove', function() { moved = true; } );
+ }
+
+
if( window.location.hash === '#mw-mf-page-left' ) {
openNavigation();
diff --git a/javascripts/common/user.js b/javascripts/common/user.js
index ee012d0..0ccfa86 100644
--- a/javascripts/common/user.js
+++ b/javascripts/common/user.js
@@ -6,7 +6,8 @@
content: mw.msg( 'mobile-frontend-user-cta' )
} );
- $( '#user-button' ).on( 'click', function( ev ) {
+ // FIXME change when micro.tap.js in stable
+ $( '#user-button' ).on( mw.config.get( 'wgMFMode' ) === 'alpha'
? 'tap' : 'click', function( ev ) {
ev.preventDefault();
drawer.show();
} );
diff --git a/javascripts/externals/micro.tap.js
b/javascripts/externals/micro.tap.js
new file mode 100644
index 0000000..f3f997a
--- /dev/null
+++ b/javascripts/externals/micro.tap.js
@@ -0,0 +1,35 @@
+/**
+ * micro.tap
+ * https://github.com/jgonera/micro.tap
+ */
+
+;(function($) {
+ var $window = $(window), moved, tapEv;
+
+ function handleTap(ev) {
+ tapEv = $.Event('tap');
+ if (!moved) $(ev.target).trigger(tapEv);
+ }
+
+ // jQuery's on() doesn't allow useCapture argument (last argument, true)
+ window.addEventListener('click', function(ev) {
+ if (tapEv.isDefaultPrevented()) {
+ ev.stopPropagation();
+ ev.preventDefault();
+ }
+ }, true);
+
+ if ('ontouchstart' in window) {
+ $window.
+ on('touchstart', function(ev) {
+ moved = false;
+ }).
+ on('touchmove', function() {
+ moved = true;
+ }).
+ on('touchend', handleTap);
+ } else {
+ $window.on('mouseup', handleTap);
+ }
+}(jQuery));
+
diff --git a/javascripts/modules/editor/editor.js
b/javascripts/modules/editor/editor.js
index 7edef15..3f473cf 100644
--- a/javascripts/modules/editor/editor.js
+++ b/javascripts/modules/editor/editor.js
@@ -63,11 +63,13 @@
if ( mw.config.get( 'wgMFAnonymousEditing' ) || mw.config.get(
'wgUserName' ) ) {
init();
} else {
- $( '#ca-edit' ).addClass( 'enabled' ).on( 'click',
$.proxy( drawer, 'show' ) );
+ // FIXME change when micro.tap.js in stable
+ $( '#ca-edit' ).addClass( 'enabled' ).on(
mw.config.get( 'wgMFMode' ) === 'alpha' ? 'tap' : 'click', $.proxy( drawer,
'show' ) );
}
M.on( 'page-loaded', init );
} else {
- $( '#ca-edit' ).on( 'click', function() {
+ // FIXME change when micro.tap.js in stable
+ $( '#ca-edit' ).on( mw.config.get( 'wgMFMode' ) === 'alpha' ?
'tap' : 'click', function() {
popup.show( mw.msg( 'mobile-frontend-editor-disabled'
), 'toast' );
} );
}
diff --git a/javascripts/modules/mf-toggle.js b/javascripts/modules/mf-toggle.js
index 3634516..27b112f 100644
--- a/javascripts/modules/mf-toggle.js
+++ b/javascripts/modules/mf-toggle.js
@@ -27,7 +27,8 @@
// use mouseup because mousedown blocks the click event and
links
// in headings won't work
- $( '.section_heading' ).on( 'mouseup', openSectionHandler );
+ // FIXME change when micro.tap.js in stable
+ $( '.section_heading' ).on( mw.config.get( 'wgMFMode' ) ===
'alpha' ? 'tap' : 'mouseup', openSectionHandler );
$( '.section_anchors' ).remove();
function checkHash() {
diff --git a/javascripts/modules/mf-watchstar.js
b/javascripts/modules/mf-watchstar.js
index 82c06bc..7229a35 100644
--- a/javascripts/modules/mf-watchstar.js
+++ b/javascripts/modules/mf-watchstar.js
@@ -105,7 +105,8 @@
} );
}
- $( watchBtn ).click( function( ev ) {
+ // FIXME change when micro.tap.js in stable
+ $( watchBtn ).on( mw.config.get( 'wgMFMode' ) === 'alpha' ?
'tap' : 'click', function( ev ) {
if( prevent ) {
ev.preventDefault();
}
@@ -173,7 +174,8 @@
createWatchListButton( container, title,
status[ title ] );
} );
} else {
- $( createButton( container ) ).click( function() {
+ // FIXME change when micro.tap.js in stable
+ $( createButton( container ) ).on( mw.config.get(
'wgMFMode' ) === 'alpha' ? 'tap' : 'click', function() {
if ( !drawer.isVisible() ) {
// log if enabled
logWatchEvent( 2 );
diff --git a/javascripts/modules/search/search.js
b/javascripts/modules/search/search.js
index 22aff37..4db229c 100644
--- a/javascripts/modules/search/search.js
+++ b/javascripts/modules/search/search.js
@@ -115,8 +115,9 @@
searchOverlay = new SearchOverlay();
function init() {
+ // FIXME change when micro.tap.js in stable
// don't use focus event
(https://bugzilla.wikimedia.org/show_bug.cgi?id=47499)
- $( '#searchInput' ).on( 'touchend mouseup', function() {
+ $( '#searchInput' ).on( mw.config.get( 'wgMFMode' ) === 'alpha' ? 'tap'
: 'touchend mouseup', function() {
searchOverlay.showAndFocus();
} );
}
diff --git a/javascripts/modules/talk.js b/javascripts/modules/talk.js
index fe22211..0cb3ffa 100644
--- a/javascripts/modules/talk.js
+++ b/javascripts/modules/talk.js
@@ -153,7 +153,8 @@
function init( title ) {
var talkPrefix = mw.config.get( 'wgFormattedNamespaces' )
[mw.config.get( 'wgNamespaceNumber' ) + 1 ] + ':';
- $( '#ca-talk' ).on( 'click', onTalkClick ).data( 'title',
talkPrefix + title );
+ // FIXME change when micro.tap.js in stable
+ $( '#ca-talk' ).on( mw.config.get( 'wgMFMode' ) === 'alpha' ?
'tap' : 'click', onTalkClick ).data( 'title', talkPrefix + title );
}
init( mw.config.get( 'wgTitle' ) );
diff --git a/less/common/common-js.less b/less/common/common-js.less
index 1e81cdb..46eba5e 100644
--- a/less/common/common-js.less
+++ b/less/common/common-js.less
@@ -31,3 +31,8 @@
background: @blueBase;
}
}
+
+.alpha {
+ -webkit-tap-highlight-color: transparent;
+}
+
diff --git a/stylesheets/common/common-js.css b/stylesheets/common/common-js.css
index 008ee48..f428c61 100644
--- a/stylesheets/common/common-js.css
+++ b/stylesheets/common/common-js.css
@@ -36,3 +36,6 @@
height: 100%;
background: #3366bb;
}
+.alpha {
+ -webkit-tap-highlight-color: transparent;
+}
--
To view, visit https://gerrit.wikimedia.org/r/78632
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib487355d86803fb09f169b573575b2a34f456ada
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
