mediawiki-extensions-MultimediaViewer/resources/mmv.ui.reuse/mmv.ui.reuse.embed.js

/*
 * This file is part of the MediaWiki extension MultimediaViewer.
 *
 * MultimediaViewer is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 2 of the License, or
 * (at your option) any later version.
 *
 * MultimediaViewer is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with MultimediaViewer.  If not, see <http://www.gnu.org/licenses/>.
 */

const EmbedFileFormatter = require( './mmv.EmbedFileFormatter.js' );
const Utils = require( './mmv.ui.utils.js' );
const { UiElement } = require( 'mmv' );

/**
 * UI component that provides the user html/wikitext snippets needed to share
 * and/or embed a media asset.
 */
class Embed extends UiElement {
	/**
	 * @param {jQuery} $container
	 */
	constructor( $container ) {
		super( $container );

		/**
		 * Formatter converting image data into formats needed for output
		 *
		 * @property {EmbedFileFormatter}
		 */
		this.formatter = new EmbedFileFormatter();

		Utils.createHeader( mw.msg( 'multimediaviewer-embed-tab' ) )
			.appendTo( $container );

		const $body = $( '<div>' )
			.addClass( 'cdx-dialog__body mw-mmv-pt-0 mw-mmv-pb-150' )
			.appendTo( $container );

		this.createSnippetSelectionButtons( $body );
		this.createSizePulldownMenus( $body );
		this.createSnippetTextAreas( $body );
	}

	/**
	 * Creates text areas for html and wikitext snippets.
	 *
	 * @param {jQuery} $container
	 */
	createSnippetTextAreas( $container ) {
		[ this.$embedTextHtml, this.$embedTextHtmlDiv ] = Utils.createInputWithCopy(
			mw.msg( 'multimediaviewer-reuse-copy-embed' ),
			mw.msg( 'multimediaviewer-reuse-loading-placeholder' )
		);
		this.$embedTextHtml.attr( 'title', mw.msg( 'multimediaviewer-embed-explanation' ) );

		[ this.$embedTextWikitext, this.$embedTextWikitextDiv ] = Utils.createInputWithCopy(
			mw.msg( 'multimediaviewer-reuse-copy-embed' ),
			mw.msg( 'multimediaviewer-reuse-loading-placeholder' )
		);
		this.$embedTextWikitext.attr( 'title', mw.msg( 'multimediaviewer-embed-explanation' ) );

		$container.append(
			this.$embedTextHtmlDiv,
			this.$embedTextWikitextDiv
		);
	}

	/**
	 * Creates snippet selection buttons.
	 *
	 * @param {jQuery} $container
	 */
	createSnippetSelectionButtons( $container ) {
		const $embedSwitch = $( '<div>' ).addClass( 'cdx-tabs mw-mmv-mb-75' ).appendTo( $container );
		const $embedSwitchHeader = $( '<div>' ).addClass( 'cdx-tabs__header' ).appendTo( $embedSwitch );
		this.$embedSwitchList = $( '<div>' ).addClass( 'cdx-tabs__list' ).attr( 'role', 'tablist' ).appendTo( $embedSwitchHeader );
		[ 'wikitext', 'html' ].forEach( ( name ) => $( '<button>' )
			.addClass( 'cdx-tabs__list__item' )
			.attr( 'role', 'tab' )
			.data( 'name', name )
			.text( mw.msg( name === 'wikitext' ? 'multimediaviewer-embed-wt' : 'multimediaviewer-embed-html' ) )
			.on( 'click', () => this.handleTypeSwitch( name ) )
			.appendTo( this.$embedSwitchList )
		);
	}

	/**
	 * Creates pulldown menus to select file sizes.
	 *
	 * @param {jQuery} $container
	 */
	createSizePulldownMenus( $container ) {
		// Wikitext sizes pulldown menu
		this.$embedSizeSwitchWikitext = Utils.createSelectMenu(
			[ 'default', 'small', 'medium', 'large' ],
			'default'
		);

		// Html sizes pulldown menu
		this.$embedSizeSwitchHtml = Utils.createSelectMenu(
			[ 'small', 'medium', 'large', 'original' ],
			'original'
		);

		$( '<div>' ).addClass( 'mw-mmv-flex mw-mmv-mb-75' ).append(
			this.$embedSizeSwitchHtml,
			this.$embedSizeSwitchWikitext
		).appendTo( $container );
	}

	/**
	 * Registers listeners.
	 */
	attach() {
		// Logged-out defaults to 'html', logged-in to 'wikitext'
		this.handleTypeSwitch( mw.user.isAnon() ? 'html' : 'wikitext' );

		// Register handlers for switching between file sizes
		this.$embedSizeSwitchHtml.on( 'change', () => this.handleSizeSwitch() );
		this.$embedSizeSwitchWikitext.on( 'change', () => this.handleSizeSwitch() );
	}

	/**
	 * Clears listeners.
	 */
	unattach() {
		super.unattach();

		this.$embedSizeSwitchHtml.off( 'change' );
		this.$embedSizeSwitchWikitext.off( 'change' );
	}

	/**
	 * Handles size menu change events.
	 */
	handleSizeSwitch() {
		// eslint-disable-next-line no-jquery/no-sizzle
		const $html = this.$embedSizeSwitchHtml.find( ':selected' );
		if ( $html.length ) {
			this.updateEmbedHtml( {}, $html.data( 'width' ), $html.data( 'height' ) );
		}
		// eslint-disable-next-line no-jquery/no-sizzle
		const $wikitext = this.$embedSizeSwitchWikitext.find( ':selected' );
		if ( $wikitext.length ) {
			this.updateEmbedWikitext( $wikitext.data( 'width' ) );
		}
	}

	/**
	 * Handles snippet type switch.
	 *
	 * @param {string} value 'html' or 'wikitext'
	 */
	handleTypeSwitch( value ) {
		this.$embedSwitchList.children().each( ( _i, element ) => {
			const $element = $( element );
			$element.attr( 'aria-selected', $element.data( 'name' ) === value );
		} );

		this.$embedTextHtmlDiv.toggle( value === 'html' );
		this.$embedSizeSwitchHtml.toggle( value === 'html' );

		this.$embedTextWikitextDiv.toggle( value === 'wikitext' );
		this.$embedSizeSwitchWikitext.toggle( value === 'wikitext' );
	}

	/**
	 * Reset current menu selection to default item.
	 */
	resetCurrentSizeMenuToDefault() {
		this.$embedSizeSwitchWikitext.val( 'default' );
		this.$embedSizeSwitchHtml.val( 'original' );
		this.handleSizeSwitch();
	}

	/**
	 * Sets the HTML embed text.
	 *
	 * Assumes that the set() method has already been called to update this.embedFileInfo
	 *
	 * @param {Thumbnail} thumbnail (can be just an empty object)
	 * @param {number} width New width to set
	 * @param {number} height New height to set
	 */
	updateEmbedHtml( thumbnail, width, height ) {
		if ( !this.embedFileInfo ) {
			return;
		}

		let src = thumbnail.url || this.embedFileInfo.imageInfo.url;

		// If the image dimension requested are "large", use the current image url
		if ( width > Embed.LARGE_IMAGE_WIDTH_THRESHOLD || height > Embed.LARGE_IMAGE_HEIGHT_THRESHOLD ) {
			src = this.embedFileInfo.imageInfo.url;
		}

		this.$embedTextHtml.val(
			this.formatter.getThumbnailHtml( this.embedFileInfo, src, width, height )
		);
	}

	/**
	 * Updates the wikitext embed text with a new value for width.
	 *
	 * Assumes that the set method has already been called.
	 *
	 * @param {number} width
	 */
	updateEmbedWikitext( width ) {
		if ( !this.embedFileInfo ) {
			return;
		}

		this.$embedTextWikitext.val(
			this.formatter.getThumbnailWikitextFromEmbedFileInfo( this.embedFileInfo, width )
		);
	}

	/**
	 * Gets size options for html and wikitext snippets.
	 *
	 * @param {number} width
	 * @param {number} height
	 * @return {Object}
	 * @return {Object} return.html Collection of possible image sizes for html snippets
	 * @return {Object} return.wikitext Collection of possible image sizes for wikitext snippets
	 */
	getSizeOptions( width, height ) {
		const sizes = {};

		sizes.html = Utils.getPossibleImageSizesForHtml( width, height );
		sizes.wikitext = this.getPossibleImageSizesForWikitext( width, height );

		return sizes;
	}

	/**
	 * Sets the data on the element.
	 *
	 * @param {Image} image
	 * @param {Repo} repo
	 * @param {string} [caption]
	 * @param {string} [alt]
	 */
	set( image, repo, caption, alt ) {
		const sizes = this.getSizeOptions( image.width, image.height );

		this.embedFileInfo = { imageInfo: image, repoInfo: repo };
		if ( caption ) {
			this.embedFileInfo.caption = caption;
		}
		if ( alt ) {
			this.embedFileInfo.alt = alt;
		}

		Utils.updateSelectOptions( sizes.html, this.$embedSizeSwitchHtml.children() );
		Utils.updateSelectOptions( sizes.wikitext, this.$embedSizeSwitchWikitext.children() );

		// Reset defaults
		this.resetCurrentSizeMenuToDefault();

		Utils.getThumbnailUrlPromise( this.LARGE_IMAGE_WIDTH_THRESHOLD )
			.done( ( thumbnail ) => {
				this.updateEmbedHtml( thumbnail );
			} );
	}

	/**
	 * @inheritdoc
	 */
	empty() {
		this.$embedTextHtml.val( '' );
		this.$embedTextWikitext.val( '' );

		this.$embedSizeSwitchHtml.toggle( false );
		this.$embedSizeSwitchWikitext.toggle( false );
	}

	/**
	 * Calculates possible image sizes for wikitext snippets. It returns up to
	 * three possible snippet frame sizes (small, medium, large).
	 *
	 * @param {number} width
	 * @param {number} height
	 * @return {Object}
	 * @return {Object} return.small
	 * @return {Object} return.medium
	 * @return {Object} return.large
	 */
	getPossibleImageSizesForWikitext( width, height ) {
		const buckets = {
			small: 300,
			medium: 400,
			large: 500
		};
		const sizes = {};
		const widthToHeight = height / width;

		for ( const bucketName in buckets ) {
			const bucketWidth = buckets[ bucketName ];

			if ( width > bucketWidth ) {
				sizes[ bucketName ] = {
					width: bucketWidth,
					height: Math.round( bucketWidth * widthToHeight )
				};
			}
		}

		sizes.default = { width: null, height: null };

		return sizes;
	}
}

/**
 * @property {number} Width threshold at which an image is to be considered "large"
 * @static
 */
Embed.LARGE_IMAGE_WIDTH_THRESHOLD = 1200;

/**
 * @property {number} Height threshold at which an image is to be considered "large"
 * @static
 */
Embed.LARGE_IMAGE_HEIGHT_THRESHOLD = 900;

module.exports = Embed;