const View = require( '../View' ),
Icon = require( '../Icon' ),
Anchor = require( '../Anchor' ),
icons = require( '../icons' ),
$spinner = icons.spinner().$el,
util = require( '../util' );
/**
* Render search results.
*
* @extends module:mobile.startup/View
* @param {Object} options
* @param {string} options.searchContentLabel actionable label to tell the user they can "search
* within pages rather than doing a full text search
* @param {string} options.noResultsMsg shows when no results displayed
* @param {string} options.searchContentNoResultsMsg alternative to options.searchContentLabel that
* shows when no search results have been displayed.
*/
class SearchResultsView extends View {
/** @inheritdoc */
get isTemplateMode() {
return true;
}
/** @inheritdoc */
get template() {
return util.template( `
<div class="search-results-view">
<div class="search-content">
<div class="caption">
<p class="with-results">{{searchContentLabel}}</p>
<p class="without-results">{{noResultsMsg}}</p>
<p class="without-results">{{{searchContentNoResultsMsg}}}</p>
</div>
</div>
<div class="spinner-container position-fixed"></div>
<div class="results">
<div class="results-list-container"></div>
{{#feedback}}
<div class="search-feedback">
{{prompt}}
</div>
{{/feedback}}
</div>
</div>`
);
}
/** @inheritdoc */
preRender() {
const feedbackLink = mw.config.get( 'wgCirrusSearchFeedbackLink' );
if ( feedbackLink ) {
this.options.feedback = {
prompt: mw.msg( 'mobile-frontend-search-feedback-prompt' ) };
}
}
/** @inheritdoc */
postRender( options ) {
const feedbackLink = mw.config.get( 'wgCirrusSearchFeedbackLink' );
super.postRender( options );
this.$el.find( '.search-content' ).prepend(
new Icon( { icon: 'articlesSearch' } ).$el
);
this.$el.find( '.spinner-container' ).append( $spinner );
if ( feedbackLink ) {
this.$el.find( '.search-feedback' ).append(
new Anchor( {
label: mw.msg( 'mobile-frontend-search-feedback-link-text' ),
href: feedbackLink
} ).$el
);
}
}
}
module.exports = SearchResultsView;