mediawiki-extensions-MultimediaViewer/resources/mmv.ui.ondemandshareddependencies/mmv.ui.utils.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/>.
 */

( function () {

	/**
	 * A helper class for reuse logic.
	 */
	class Utils {
		/**
		 * Creates header from given options.
		 *
		 * @param {string} text
		 * @return {jQuery}
		 */
		static createHeader( text ) {
			const $header = $( '<div>' ).addClass( 'cdx-dialog__header' );
			$( '<p>' )
				.addClass( 'cdx-dialog__header__title' )
				.text( text )
				.appendTo( $header );
			return $header;
		}

		/**
		 * Creates input element with copy button from given options.
		 *
		 * @param {string} title
		 * @param {string} placeholder
		 * @return {jQuery[]} [$input, $div]
		 */
		static createInputWithCopy( title, placeholder ) {
			const $input = $( '<input>' )
				.addClass( 'cdx-text-input__input' )
				.attr( 'placeholder', placeholder );
			const $copyButton = $( '<button>' )
				.addClass( 'cdx-button cdx-button--action-default cdx-button--weight-normal cdx-button--size-medium cdx-button--framed' )
				.addClass( 'mw-mmv-pt-0 mw-mmv-pb-0' ) // override padding provided by ".oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button, button"
				.attr( 'title', title )
				.append( $( '<span>' ).addClass( 'cdx-button__icon cdx-button__icon--copy' ).attr( 'aria-hidden', 'true' ) )
				.append( mw.message( 'multimediaviewer-copy-button' ).text() )
				.on( 'click', () => {
					// navigator.clipboard() is not supported in Safari 11.1, iOS Safari 11.3-11.4
					if ( navigator.clipboard && navigator.clipboard.writeText ) {
						navigator.clipboard.writeText( $input.val() );
						mw.notify( mw.msg( 'mw-widgets-copytextlayout-copy-success' ) );
					}
				} );
			const $div = $( '<div>' )
				.addClass( 'mw-mmv-flex mw-mmv-gap-50' )
				.append(
					$( '<div>' )
						.addClass( 'cdx-text-input mw-mmv-flex-grow-1' )
						.append( $input ),
					$copyButton
				);

			return [ $input, $div ];
		}

		/**
		 * Creates select menu from given options.
		 *
		 * @param {string[]} options
		 * @param {string} def
		 * @return {jQuery}
		 */
		static createSelectMenu( options, def ) {
			const $select = $( '<select>' ).addClass( 'cdx-select mw-mmv-flex-grow-1' );
			options.forEach( ( size ) =>
				$( '<option>' )
					.attr( 'value', size )
					.data( 'name', size )
					.text( Utils.getDimensionsMessageHtml( size ) )
					.appendTo( $select )
			);
			$select.val( def );
			return $select;
		}

		/**
		 * Gets a promise for the large thumbnail URL. This is needed because thumbnail URLs cannot
		 * be reliably guessed, even if we know the full size of the image - most of the time replacing
		 * the size in another thumbnail URL works (as long as the new size is not larger than the full
		 * size), but if the file name is very long and with the larger size the URL length would
		 * exceed a certain threshold, a different schema is used instead.
		 *
		 * @param {number} width
		 *
		 * @fires MultimediaViewer#mmv-request-thumbnail
		 * @return {jQuery.Promise.<string>}
		 */
		static getThumbnailUrlPromise( width ) {
			return $( document ).triggerHandler( 'mmv-request-thumbnail', width ) ||
				$.Deferred().reject();
		}

		/**
		 * Updates the select options based on calculated sizes.
		 *
		 * @private
		 * @param {Object} sizes
		 * @param {jQuery} options
		 */
		static updateSelectOptions( sizes, options ) {
			for ( let i = 0; i < options.length; i++ ) {
				const $option = $( options[ i ] );
				const name = $option.data( 'name' );
				if ( sizes[ name ] ) {
					$option.prop( 'disabled', false );

					// These values are later used when the item is selected
					$option.data( 'width', sizes[ name ].width );
					$option.data( 'height', sizes[ name ].height );

					$option.text( Utils.getDimensionsMessageHtml( name, sizes[ name ].width, sizes[ name ].height ) );
				} else {
					$option.prop( 'disabled', true );
					$option.text( Utils.getDimensionsMessageHtml( name, undefined, undefined ) );
				}
			}
		}

		/**
		 * Calculates possible image sizes for html snippets. It returns up to
		 * three possible snippet frame sizes (small, medium, large) plus the
		 * original image size.
		 *
		 * @param {number} width
		 * @param {number} height
		 * @return {Object}
		 * @return {Object} return.small
		 * @return {Object} return.medium
		 * @return {Object} return.large
		 * @return {Object} return.xl
		 * @return {Object} return.original
		 */
		static getPossibleImageSizesForHtml( width, height ) {
			const buckets = {
				small: { width: 640, height: 480 },
				medium: { width: 1280, height: 720 }, // HD ready = 720p
				large: { width: 1920, height: 1080 }, // Full HD = 1080p
				xl: { width: 3840, height: 2160 } // 4K = 2160p
			};
			const sizes = {};
			const bucketNames = Object.keys( buckets );
			const widthToHeight = height / width;
			const heightToWidth = width / height;

			for ( let i = 0; i < bucketNames.length; i++ ) {
				const bucketName = bucketNames[ i ];
				const dimensions = buckets[ bucketName ];
				const bucketWidth = dimensions.width;
				const bucketHeight = dimensions.height;

				if ( width > bucketWidth ) {
					// Width fits in the current bucket
					const currentGuess = bucketWidth;

					if ( currentGuess * widthToHeight > bucketHeight ) {
						// Constrain in height, resize width accordingly
						sizes[ bucketName ] = {
							width: Math.round( bucketHeight * heightToWidth ),
							height: bucketHeight
						};
					} else {
						sizes[ bucketName ] = {
							width: currentGuess,
							height: Math.round( currentGuess * widthToHeight )
						};
					}
				} else if ( height > bucketHeight ) {
					// Height fits in the current bucket, resize width accordingly
					sizes[ bucketName ] = {
						width: Math.round( bucketHeight * heightToWidth ),
						height: bucketHeight
					};
				}
			}

			sizes.original = { width: width, height: height };

			return sizes;
		}

		/**
		 * Generates an i18n message for a label, given a size label and image dimensions
		 *
		 * @param {string} sizeLabel
		 * @param {number} width
		 * @param {number} height
		 * @return {string} i18n label html
		 */
		static getDimensionsMessageHtml( sizeLabel, width, height ) {
			const dimensions = !width || !height ? '' : mw.message(
				'multimediaviewer-embed-dimensions-separated',
				mw.message(
					'multimediaviewer-embed-dimensions',
					width, height ).text()
			).text();

			// The following messages are used here:
			return mw.message(
				// The following messages are used here:
				// * multimediaviewer-default-embed-dimensions
				// * multimediaviewer-original-embed-dimensions
				// * multimediaviewer-xl-embed-dimensions
				// * multimediaviewer-large-embed-dimensions
				// * multimediaviewer-medium-embed-dimensions
				// * multimediaviewer-small-embed-dimensions
				`multimediaviewer-${ sizeLabel }-embed-dimensions`,
				dimensions
			).text();
		}
	}

	module.exports = Utils;
}() );