/* * 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 . */ ( function ( mw, $, oo ) { var RUP; /** * @class mw.mmv.ui.Utils * A helper class for reuse logic. * @constructor */ function Utils() { /** @property {mw.mmv.HtmlUtils} htmlUtils - */ this.htmlUtils = new mw.mmv.HtmlUtils(); } RUP = Utils.prototype; /** * Creates pulldown menu from given options. * * @param {string[]} options * @param {string[]} classes * @param {string} def * @returns {OO.ui.DropdownWidget} */ RUP.createPulldownMenu = function( options, classes, def ) { var dropdown, i, option, items = [], choices = {}; dropdown = new oo.ui.DropdownWidget( { classes: classes } ); for ( i = 0; i < options.length; i++ ) { option = options[ i ]; choices[option] = new oo.ui.MenuOptionWidget( { // Customized data injected in each item name: option, height: null, width: null }, { label: this.getDimensionsMessageHtml( option, 0, 0 ), autoFitLabel: false } ); items.push( choices[option] ); } dropdown.getMenu() .addItems( items ) .chooseItem( choices[ def ] ); return dropdown; }; /** * 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 * * @return {jQuery.Promise.} */ RUP.getThumbnailUrlPromise = function ( width ) { return $( document ).triggerHandler( 'mmv-request-thumbnail', width ) || $.Deferred().reject(); }; /** * @private * * Updates the menu options based on calculated sizes. * * @param {Object} sizes * @param {OO.ui.MenuOptionWidget[]} options */ RUP.updateMenuOptions = function ( sizes, options ) { var i, option, data, $label; for ( i = 0; i < options.length; i++ ) { option = options[i]; data = option.getData(); if ( sizes[data.name] ) { option.setDisabled( false ); // These values are later used when the item is selected data.width = sizes[data.name].width; data.height = sizes[data.name].height; $label = $( '' ).html( this.getDimensionsMessageHtml( data.name, data.width, data.height ) ); option.setLabel( $label ); } else { option.setDisabled( true ); } } }; /** * 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 * @returns {Object} * @returns { {width: number, height: number} } return.small * @returns { {width: number, height: number} } return.medium * @returns { {width: number, height: number} } return.large * @returns { {width: number, height: number} } return.original */ RUP.getPossibleImageSizesForHtml = function ( width, height ) { var i, bucketName, currentGuess, dimensions, bucketWidth, bucketHeight, buckets = { small: { width: 220, height: 145 }, medium: { width: 640, height: 480 }, large: { width: 1200, height: 900 } }, sizes = {}, bucketNames = Object.keys( buckets ), widthToHeight = height / width, heightToWidth = width / height; for ( i = 0; i < bucketNames.length; i++ ) { bucketName = bucketNames[i]; dimensions = buckets[bucketName]; bucketWidth = dimensions.width; bucketHeight = dimensions.height; if ( width > bucketWidth ) { // Width fits in the current bucket 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 * @returns {string} i18n label html */ RUP.getDimensionsMessageHtml = function ( sizeLabel, width, height ) { var dimensions = this.htmlUtils.jqueryToHtml( $( '' ) .addClass( 'mw-mmv-embed-dimensions' ) .text( mw.message( 'multimediaviewer-embed-dimensions-separated', mw.message( 'multimediaviewer-embed-dimensions', width, height ).text() ).text() ) ); return mw.message( 'multimediaviewer-' + sizeLabel + '-embed-dimensions', dimensions ).text(); }; mw.mmv.ui.Utils = Utils; }( mediaWiki, jQuery, OO ) );