Use OverlayManager for SearchOverlay
Enables the SearchOverlay to be shown/hidden by the OverlayManager, instead of managing the routing itself. A special route is added to hide the search overlay on pageload, so that the overlay can always be closed with history.back() Bug: T189212, T102946 Change-Id: I1eaad36fe4ceca2d6f3e3345d987e2b32634446d
This commit is contained in:
parent
68df48ddf0
commit
da7f08ad09
|
@ -1,36 +1,12 @@
|
||||||
( function ( M, $ ) {
|
( function ( M, $ ) {
|
||||||
var placeholder = $( '#searchInput' ).attr( 'placeholder' ),
|
var SearchOverlay = M.require( 'mobile.search/SearchOverlay' ),
|
||||||
SearchOverlay = M.require( 'mobile.search/SearchOverlay' ),
|
|
||||||
SearchGateway = M.require( 'mobile.search.api/SearchGateway' ),
|
SearchGateway = M.require( 'mobile.search.api/SearchGateway' ),
|
||||||
router = require( 'mediawiki.router' ),
|
overlayManager = M.require( 'skins.minerva.scripts/overlayManager' ),
|
||||||
searchLogger = M.require( 'mobile.search/MobileWebSearchLogger' );
|
searchLogger = M.require( 'mobile.search/MobileWebSearchLogger' ),
|
||||||
|
searchInput = $( '#searchInput' ),
|
||||||
/**
|
placeholder = searchInput.attr( 'placeholder' ),
|
||||||
* Reveal the search overlay
|
searchRoute = new RegExp( /\/search/ ),
|
||||||
* @param {jQuery.Event} ev
|
searchOverlayInstance;
|
||||||
* @event mobilefrontend.searchModule
|
|
||||||
* @ignore
|
|
||||||
*/
|
|
||||||
function openSearchOverlay( ev ) {
|
|
||||||
var overlay,
|
|
||||||
$this = $( this ),
|
|
||||||
searchTerm = $this.val();
|
|
||||||
|
|
||||||
ev.preventDefault();
|
|
||||||
// The loading of SearchOverlay should never be done inside a callback
|
|
||||||
// as this will result in issues with input focus
|
|
||||||
// see https://phabricator.wikimedia.org/T156508#2977463
|
|
||||||
overlay = new SearchOverlay( {
|
|
||||||
router: router,
|
|
||||||
gatewayClass: SearchGateway,
|
|
||||||
api: new mw.Api(),
|
|
||||||
searchTerm: searchTerm,
|
|
||||||
placeholderMsg: placeholder
|
|
||||||
} );
|
|
||||||
searchLogger.register( overlay );
|
|
||||||
overlay.show();
|
|
||||||
router.navigate( '/search' );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only continue on mobile devices as it breaks desktop search
|
// Only continue on mobile devices as it breaks desktop search
|
||||||
// See https://phabricator.wikimedia.org/T108432
|
// See https://phabricator.wikimedia.org/T108432
|
||||||
|
@ -38,13 +14,60 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// don't use focus event (https://bugzilla.wikimedia.org/show_bug.cgi?id=47499)
|
/**
|
||||||
//
|
* Hide the search overlay on pageload before the search route
|
||||||
// focus() (see SearchOverlay#show) opens virtual keyboard only if triggered
|
* is registered with the overlayManager.
|
||||||
// from user context event, so using it in route callback won't work
|
* Allows the usage of history.back() to close searchOverlay by
|
||||||
// http://stackoverflow.com/questions/6837543/show-virtual-keyboard-on-mobile-phones-in-javascript
|
* preventing the situation described in https://phabricator.wikimedia.org/T102946
|
||||||
$( '#searchInput, #searchIcon, .skin-minerva-search-trigger' ).on( 'click', openSearchOverlay )
|
*/
|
||||||
|
function removeSearchOnPageLoad() {
|
||||||
|
if ( searchRoute.test( overlayManager.router.getPath() ) ) {
|
||||||
|
// TODO: replace when router supports replaceState https://phabricator.wikimedia.org/T189173
|
||||||
|
history.replaceState( '', document.title, window.location.pathname );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSearchOverlay() {
|
||||||
|
if ( !searchOverlayInstance ) {
|
||||||
|
searchOverlayInstance = new SearchOverlay( {
|
||||||
|
router: overlayManager.router,
|
||||||
|
gatewayClass: SearchGateway,
|
||||||
|
api: new mw.Api(),
|
||||||
|
searchTerm: searchInput.val(),
|
||||||
|
placeholderMsg: placeholder
|
||||||
|
} );
|
||||||
|
searchLogger.register( searchOverlayInstance );
|
||||||
|
}
|
||||||
|
return searchOverlayInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
removeSearchOnPageLoad();
|
||||||
|
overlayManager.add( searchRoute, getSearchOverlay );
|
||||||
|
|
||||||
// Apparently needed for main menu to work correctly.
|
// Apparently needed for main menu to work correctly.
|
||||||
.prop( 'readonly', true );
|
$( '#searchInput, #searchIcon, .skin-minerva-search-trigger' ).prop( 'readonly', true );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trigger overlay on touchstart so that the on-screen keyboard on iOS
|
||||||
|
* can be triggered immidiately after on touchend. The keyboard can't be
|
||||||
|
* triggered unless the element is already visible.
|
||||||
|
* Touchstart makes the overlay visible, touchend brings up the keyboard afterwards.
|
||||||
|
*/
|
||||||
|
$( '#searchInput, #searchIcon, .skin-minerva-search-trigger' ).on( 'touchstart click', function ( ev ) {
|
||||||
|
ev.preventDefault();
|
||||||
|
overlayManager.router.navigate( '/search' );
|
||||||
|
} );
|
||||||
|
|
||||||
|
$( '#searchInput, #searchIcon, .skin-minerva-search-trigger' ).on( 'touchend', function ( ev ) {
|
||||||
|
ev.preventDefault();
|
||||||
|
/**
|
||||||
|
* Manually triggering focus event because on-screen keyboard only
|
||||||
|
* opens when `focus()` is called from a "user context event",
|
||||||
|
* Calling it from the route callback above (which calls SearchOverlay#show)
|
||||||
|
* doesn't work.
|
||||||
|
* http://stackoverflow.com/questions/6837543/show-virtual-keyboard-on-mobile-phones-in-javascript
|
||||||
|
*/
|
||||||
|
getSearchOverlay().showKeyboard();
|
||||||
|
} );
|
||||||
|
|
||||||
}( mw.mobileFrontend, jQuery ) );
|
}( mw.mobileFrontend, jQuery ) );
|
||||||
|
|
Loading…
Reference in New Issue