Page MenuHomeWickedGov Phorge
Files F4170930

SearchHeaderView.js
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

SearchHeaderView.js
View Options

const util = require( '../util' ),
View = require( '../View' ),
IconButton = require( '../IconButton' );
/**
* @extends module:mobile.startup/View
*/
class SearchHeaderView extends View {
/**
* constructor
*
* @inheritdoc
* @param {Object} props
* @param {Function} props.onInput executed every time input changes
* @param {string} props.placeholderMsg
* @param {string} props.action
* @parm {string} [props.autocapitalize] none or sentences
* @param {string} [props.searchTerm] default
*/
constructor( props ) {
super(
util.extend( {
autocapitalize: 'sentences'
}, props, {
events: {
'input input': 'onInput'
}
} )
);
}
/** @inheritdoc */
onInput( ev ) {
const query = ev.target.value;
this.options.onInput( query );
if ( query ) {
this.clearIcon.$el.show();
} else {
this.clearIcon.$el.hide();
}
}
/** @inheritdoc */
get isTemplateMode() {
return true;
}
/** @inheritdoc */
get template() {
return util.template( `<div class="overlay-title search-header-view">
<form method="get" action="{{action}}" class="search-box">
<input class="search mf-icon-search" type="search" name="search"
autocapitalize="{{autocapitalize}}"
autocomplete="off" placeholder="{{placeholderMsg}}" aria-label="{{placeholderMsg}}" value="{{searchTerm}}">
<input type="hidden" name="title" value="{{defaultSearchPage}}">
</form>
</div>` );
}
/** @inheritdoc */
postRender() {
const clearIcon = new IconButton( {
tagName: 'button',
icon: 'clear',
size: 'medium',
isSmall: true,
label: mw.msg( 'mobile-frontend-clear-search' ),
additionalClassNames: 'clear',
events: {
click: function () {
this.$el.find( 'input' ).val( '' ).trigger( 'focus' );
this.options.onInput( '' );
clearIcon.$el.hide();
// In beta the clear button is on top of the search input.
// Stop propagation so that the input doesn't receive the click.
return false;
}.bind( this )
}
} );
this.clearIcon = clearIcon;
clearIcon.$el.hide();
clearIcon.$el.attr( 'aria-hidden', 'true' );
this.$el.find( 'form' ).append( clearIcon.$el );
}
}
module.exports = SearchHeaderView;

File Metadata

Mime Type
text/plain
Expires
Aug 20 2026, 06:00 (11 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
2b/b0/2f1699e34c0e7b1dd45cd60cd2cc
Default Alt Text
SearchHeaderView.js (2 KB)

Event Timeline