Page MenuHomeWickedGov Phorge
Files F1426620

mmv.ui.reuse.embed.js
No OneTemporary
Actions

Size
9 KB
Referenced Files
None
Subscribers
None

mmv.ui.reuse.embed.js
View Options

/*
* 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 )
);
}
/**
* @typedef {Object} SizeOptions
* @memberof Embed
* @property {Utils.ImageSizes} html Collection of possible image sizes for html snippets
* @property {Utils.ImageSizes} wikitext Collection of possible image sizes for wikitext snippets
*/
/**
* Gets size options for html and wikitext snippets.
*
* @param {number} width
* @param {number} height
* @return {Embed.SizeOptions}
*/
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 {ImageModel} imageInfo
* @param {string} [caption]
* @param {string} [alt]
*/
set( imageInfo, caption, alt ) {
const sizes = this.getSizeOptions( imageInfo.width, imageInfo.height );
this.embedFileInfo = { imageInfo, caption, 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 {Utils.ImageSizes}
*/
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;

File Metadata

Mime Type
text/x-asm
Expires
Sat, May 16, 13:29 (1 d, 19 h)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
9e/82/f64b6bc731d430a4014d90572dba
Default Alt Text
mmv.ui.reuse.embed.js (9 KB)

Event Timeline