mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-15 10:27:31 +00:00
ca28efc9c7
This restores the previously reverted patchset If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9 Changes since original: * Added Depends-On to MobileFrontend * Uses OOUI classes for page issues rather than es6 classes - ES6 classes do not support modifications to class prior to running super so MobileFrontend's View class is not compatible without significant refactors. Depends-On: I24ad75adf8519102ca356d64d99d765ab69180cc Bug: T348807 Change-Id: I4ff82af0251254c846f2caee330af5af738f6029
80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
module.exports = function () {
|
|
var
|
|
mobile = require( 'mobile.startup' ),
|
|
SearchOverlay = mobile.search.SearchOverlay,
|
|
SearchGateway = mobile.search.SearchGateway,
|
|
overlayManager = mobile.getOverlayManager(),
|
|
// eslint-disable-next-line no-jquery/no-global-selector
|
|
$searchInput = $( '#searchInput' ),
|
|
placeholder = $searchInput.attr( 'placeholder' ),
|
|
defaultSearchPage = $searchInput.siblings( 'input[name=title]' ).val(),
|
|
// eslint-disable-next-line no-jquery/no-global-selector
|
|
$searchBar = $( '#searchInput, #searchIcon, .skin-minerva-search-trigger' ),
|
|
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(),
|
|
autocapitalize: $searchInput.attr( 'autocapitalize' ),
|
|
searchTerm: $searchInput.val(),
|
|
placeholderMsg: placeholder,
|
|
defaultSearchPage: defaultSearchPage
|
|
} );
|
|
}
|
|
return searchOverlayInstance;
|
|
}
|
|
|
|
removeSearchOnPageLoad();
|
|
overlayManager.add( searchRoute, getSearchOverlay );
|
|
|
|
// Apparently needed for main menu to work correctly.
|
|
$searchBar.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.
|
|
*/
|
|
$searchBar.on( 'touchstart click', function ( ev ) {
|
|
ev.preventDefault();
|
|
overlayManager.router.navigate( '/search' );
|
|
} );
|
|
|
|
$searchBar.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();
|
|
} );
|
|
|
|
};
|