Source: ui/templates/preview/preview.js

/**
 * @module preview
 */

import { renderPopup } from '../popup/popup';
import { createNodeFromTemplate, escapeHTML } from '../templateUtil';

const templateHTML = `
	<div class="mwe-popups-container">
		<div class="mw-ui-icon mw-ui-icon-element"></div>
		<strong class="mwe-popups-title"></strong>
		<a class="mwe-popups-extract">
			<span class="mwe-popups-message"></span>
		</a>
		<footer>
			<a class="mwe-popups-read-link"></a>
		</footer>
	</div>
`;

/**
 * @param {ext.popups.PagePreviewModel} model
 * @param {boolean} showTitle
 * @param {string} extractMsg
 * @param {string} linkMsg
 * @return {JQuery}
 */
export function renderPreview(
	model, showTitle, extractMsg, linkMsg
) {
	const $popup = renderPopup( model.type, createNodeFromTemplate( templateHTML ) );

	// The following classes are used here:
	// * mw-icon-preview-reference
	// * mw-icon-preview-unknown
	// * mw-icon-preview-generic
	// * mw-icon-preview-disambiguation
	$popup.find( '.mw-ui-icon ' ).addClass( `mw-ui-icon-preview-${model.type}` );
	$popup.find( '.mwe-popups-extract' ).attr( 'href', model.url );
	$popup.find( '.mwe-popups-message' ).html( escapeHTML( extractMsg ) );
	$popup.find( '.mwe-popups-read-link' )
		.html( escapeHTML( linkMsg ) )
		.attr( 'href', model.url );
	if ( showTitle ) {
		$popup.find( '.mwe-popups-title' ).html( escapeHTML( model.title ) );
	} else {
		$popup.find( '.mwe-popups-title' ).remove();
	}

	return $popup;
}