MinervaNeue/resources/skins.minerva.scripts/search.js
Stephen Niedzielski 37333c7189 Hygiene: collapse mobile.search* into mobile.startup
MinervaNeue depends on mobile.search and mobile.search.api. These
ResourceLoader modules existed in MobileFrontend but now have been
collapsed into mobile.startup.

This patch updates Minerva's ResourceLoader module and JavaScript
references.

Bug: T210207
Depends-On: I1eae36f2927a4e0f9d1e91d604d656beb8cc33ae
Change-Id: Ied6f4873bf2550564673296e9ef4fa009ca45e5b
2018-12-17 22:03:41 +00:00

76 lines
2.7 KiB
JavaScript

( function ( M ) {
var
client = M.require( 'mobile.startup' ),
SearchOverlay = client.search.SearchOverlay,
SearchGateway = client.search.SearchGateway,
overlayManager = M.require( 'skins.minerva.scripts/overlayManager' ),
searchLogger = client.search.MobileWebSearchLogger,
searchInput = $( '#searchInput' ),
placeholder = searchInput.attr( 'placeholder' ),
searchRoute = new RegExp( /\/search/ ),
searchOverlayInstance;
// Only continue on mobile devices as it breaks desktop search
// See https://phabricator.wikimedia.org/T108432
if ( mw.config.get( 'skin' ) !== 'minerva' ) {
return;
}
/**
* Hide the search overlay on pageload before the search route
* is registered with the overlayManager.
* Allows the usage of history.back() to close searchOverlay by
* preventing the situation described in https://phabricator.wikimedia.org/T102946
*/
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.
$( '#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 ) );