Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 1x 3x 3x 9x 3x 3x 3x 3x 3x 1x | const util = require( '../util' ),
View = require( '../View' ),
IconButton = require( '../IconButton' );
/**
* @extends 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;
|