All files / mobile.startup/search SearchResultsView.js

100% Statements 18/18
100% Branches 4/4
100% Functions 4/4
100% Lines 18/18

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 741x 1x 1x 1x 1x 1x                             4x       12x                                             4x 4x 1x           4x 4x 4x     4x 4x 1x                   1x  
const View = require( '../View' ),
	Icon = require( '../Icon' ),
	Anchor = require( '../Anchor' ),
	icons = require( '../icons' ),
	$spinner = icons.spinner().$el,
	util = require( '../util' );
 
/**
 * @class SearchResultsView
 * @extends 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;