wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-27 17:40:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use packageFiles in mmv

Browse source 
Bug: T337030
Change-Id: I90cdfb626c176b27b59db6b92b9edd6b2fe49b68
This commit is contained in:
Simon Legner 2023-05-19 23:26:45 +03:00 committed by Jon Robson
parent 91bb566fec
commit 35cd0f18c0
50 changed files with 459 additions and 249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
extension.json
View file

@ -40,7 +40,8 @@
},
"ResourceModules": {
"mmv": {
"scripts": [
"packageFiles": [
"mmv/mmv.js",
"mmv/logging/mmv.logging.ViewLogger.js",
"mmv/model/mmv.model.js",
"mmv/model/mmv.model.IwTitle.js",
@ -51,6 +52,7 @@
"mmv/model/mmv.model.TaskQueue.js",
"mmv/model/mmv.model.ThumbnailWidth.js",
"mmv/mmv.lightboximage.js",
"mmv/provider/mmv.provider.js",
"mmv/provider/mmv.provider.Api.js",
"mmv/provider/mmv.provider.ImageInfo.js",
"mmv/provider/mmv.provider.FileRepoInfo.js",
@ -58,10 +60,10 @@
"mmv/provider/mmv.provider.GuessedThumbnailInfo.js",
"mmv/provider/mmv.provider.Image.js",
"mmv/mmv.ThumbnailWidthCalculator.js",
"mmv/ui/index.js",
"mmv/ui/mmv.ui.js",
"mmv/ui/mmv.ui.dialog.js",
"mmv/ui/mmv.ui.reuse.dialog.js",
"mmv/ui/mmv.ui.download.js",
"mmv/ui/mmv.ui.download.dialog.js",
"mmv/ui/mmv.ui.description.js",
"mmv/ui/mmv.ui.viewingOptions.js",
@ -73,8 +75,7 @@
"mmv/ui/mmv.ui.truncatableTextField.js",
"mmv/ui/mmv.ui.metadataPanel.js",
"mmv/ui/mmv.ui.metadataPanelScroller.js",
"mmv/mmv.lightboxinterface.js",
"mmv/mmv.js"
"mmv/mmv.lightboxinterface.js"
],
"styles": [
"mmv/ui/mmv.ui.dialog.less",
@ -233,7 +234,7 @@
]
},
"mmv.ui.download.pane": {
"scripts": [
"packageFiles": [
"mmv.ui.download.pane/mmv.ui.download.pane.js"
],
"styles": [
@ -310,10 +311,10 @@
]
},
"mmv.bootstrap": {
"scripts": [
"packageFiles": [
"mmv.bootstrap/mmv.bootstrap.js",
"mmv.bootstrap/mmv.Config.js",
"mmv.bootstrap/mmv.HtmlUtils.js",
"mmv.bootstrap/mmv.bootstrap.js"
"mmv.bootstrap/mmv.HtmlUtils.js"
],
"styles": [
"mmv.bootstrap/mmv.bootstrap.less"
@ -337,7 +338,7 @@
]
},
"mmv.bootstrap.autostart": {
"scripts": [
"packageFiles": [
"mmv.bootstrap.autostart/mmv.bootstrap.autostart.js"
],
"dependencies": [
@ -346,9 +347,9 @@
]
},
"mmv.head": {
"scripts": [
"mmv.head/base.js",
"mmv.head/mmv.head.js"
"packageFiles": [
"mmv.head/mmv.head.js",
"mmv.head/base.js"
],
"dependencies": [
"mediawiki.user",

8
resources/mmv.bootstrap.autostart/mmv.bootstrap.autostart.js
View file

@ -17,14 +17,16 @@
// This file is used to do the global initialization that we want on the real pages,
// but do not want in the tests.
( function () {
var bootstrap;
bootstrap = new mw.mmv.MultimediaViewerBootstrap();
const { MultimediaViewerBootstrap } = require( 'mmv.bootstrap' );
( function () {
const bootstrap = new MultimediaViewerBootstrap();
$( function () {
bootstrap.setupEventHandlers();
} );
mw.mmv.bootstrap = bootstrap;
module.exports = bootstrap;
}() );

2
resources/mmv.bootstrap/mmv.Config.js
View file

@ -274,5 +274,5 @@
return this.viewerConfig.imageQueryParameter;
};
mw.mmv.Config = Config;
module.exports = Config;
}() );

2
resources/mmv.bootstrap/mmv.HtmlUtils.js
View file

@ -270,5 +270,5 @@
return this.jqueryToHtml( $( '<a>' ).prop( props ).text( text ) );
};
mw.mmv.HtmlUtils = HtmlUtils;
module.exports = HtmlUtils;
}() );

28
resources/mmv.bootstrap/mmv.bootstrap.js
View file

@ -15,6 +15,11 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Config = require( './mmv.Config.js' );
const HtmlUtils = require( './mmv.HtmlUtils.js' );
mw.mmv.Config = Config;
mw.mmv.HtmlUtils = HtmlUtils;
( function () {
var MMVB;
var mwRouter = require( 'mediawiki.router' );
@ -28,7 +33,7 @@
* Bootstrap code listening to thumb clicks checking the initial location.hash
* Loads the mmv and opens it if necessary
*
* @class mw.mmv.MultimediaViewerBootstrap
* @class MultimediaViewerBootstrap
*/
function MultimediaViewerBootstrap() {
// Exposed for tests
@ -36,8 +41,8 @@
// TODO lazy-load config and htmlUtils
/** @property {mw.mmv.Config} config - */
this.config = new mw.mmv.Config(
/** @property {Config} config - */
this.config = new Config(
mw.config.get( 'wgMultimediaViewer', {} ),
mw.config,
mw.user,
@ -47,8 +52,8 @@
this.validExtensions = this.config.extensions();
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils - */
this.htmlUtils = new HtmlUtils();
/**
* This flag is set to true when we were unable to load the viewer.
@ -134,9 +139,9 @@
bs.setupOverlay();
}
mw.loader.using( 'mmv', function () {
mw.loader.using( 'mmv', function ( req ) {
try {
viewer = bs.getViewer();
viewer = bs.getViewer( req );
} catch ( e ) {
message = e.message;
if ( e.stack ) {
@ -640,11 +645,13 @@
/**
* Instantiates a new viewer if necessary
*
* @return {mw.mmv.MultimediaViewer}
* @param {Function} localRequire
* @return {MultimediaViewer}
*/
MMVB.getViewer = function () {
MMVB.getViewer = function ( localRequire ) {
if ( this.viewer === undefined ) {
this.viewer = new mw.mmv.MultimediaViewer( this.config );
const { MultimediaViewer } = localRequire( 'mmv' );
this.viewer = new MultimediaViewer( this.config );
this.viewer.setupEventHandlers();
mw.mmv.viewer = this.viewer;
}
@ -739,4 +746,5 @@
};
mw.mmv.MultimediaViewerBootstrap = MultimediaViewerBootstrap;
module.exports = { MultimediaViewerBootstrap, Config, HtmlUtils };
}() );

2
resources/mmv.head/base.js
View file

@ -17,7 +17,7 @@
// Included on every page which has images so keep it lightweight.
( function () {
mw.mmv = {
module.exports = {
/**
* The media route prefix
*

3
resources/mmv.head/mmv.head.js
View file

@ -15,6 +15,9 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const base = require( './base.js' );
mw.mmv = base;
( function () {
var $document = $( document );

17
resources/mmv.ui.download.pane/mmv.ui.download.pane.js
View file

@ -15,6 +15,9 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { UiElement } = require( 'mmv' );
const { Utils } = require( 'mmv.ui.ondemandshareddependencies' );
( function () {
// Shortcut for prototype later
var DP;
@ -23,15 +26,15 @@
* UI component that provides functionality to download the media asset displayed.
*
* @class mw.mmv.ui.download.Pane
* @extends mw.mmv.ui.Element
* @extends UiElement
* @constructor
* @param {jQuery} $container
*/
function Pane( $container ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
/** @property {mw.mmv.ui.Utils} utils - */
this.utils = new mw.mmv.ui.Utils();
/** @property {Utils} utils - */
this.utils = new Utils();
this.$pane = $( '<div>' )
.addClass( 'mw-mmv-download-pane' )
@ -59,7 +62,7 @@
/** @property {mw.mmv.model.Image|null} Image the download button currently points to. */
this.image = null;
}
OO.inheritClass( Pane, mw.mmv.ui.Element );
OO.inheritClass( Pane, UiElement );
DP = Pane.prototype;
/**
@ -248,7 +251,7 @@
* Clears listeners.
*/
DP.unattach = function () {
mw.mmv.ui.Element.prototype.unattach.call( this );
UiElement.prototype.unattach.call( this );
this.downloadSizeMenu.getMenu().off( 'choose' );
this.$selectionArrow.off( 'click' );
@ -404,5 +407,7 @@
this.image = null;
};
mw.mmv.ui.download = mw.mmv.ui.download || {};
mw.mmv.ui.download.Pane = Pane;
module.exports = Pane;
}() );

1
resources/mmv.ui.ondemandshareddependencies/index.js
View file

@ -19,6 +19,7 @@ const EmbedFileFormatter = require( './mmv.EmbedFileFormatter.js' );
const Utils = require( './mmv.ui.utils.js' );
mw.mmv.EmbedFileFormatter = EmbedFileFormatter;
mw.mmv.ui = mw.mmv.ui || {};
mw.mmv.ui.Utils = Utils;
module.exports = { EmbedFileFormatter, Utils };

6
resources/mmv.ui.ondemandshareddependencies/mmv.EmbedFileFormatter.js
View file

@ -15,6 +15,8 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
( function () {
var EFFP;
@ -25,8 +27,8 @@
* @constructor
*/
function EmbedFileFormatter() {
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils - */
this.htmlUtils = new HtmlUtils();
}
EFFP = EmbedFileFormatter.prototype;

8
resources/mmv.ui.ondemandshareddependencies/mmv.ui.utils.js
View file

@ -15,18 +15,20 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
( function () {
var RUP;
/**
* A helper class for reuse logic.
*
* @class mw.mmv.ui.Utils
* @class Utils
* @constructor
*/
function Utils() {
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils - */
this.htmlUtils = new HtmlUtils();
}
RUP = Utils.prototype;

1
resources/mmv.ui.reuse.shareembed/index.js
View file

@ -19,6 +19,7 @@ const Embed = require( './mmv.ui.reuse.embed.js' );
const Share = require( './mmv.ui.reuse.share.js' );
const Tab = require( './mmv.ui.reuse.tab.js' );
mw.mmv.ui.reuse = mw.mmv.ui.reuse || {};
mw.mmv.ui.reuse.Embed = Embed;
mw.mmv.ui.reuse.Share = Share;
mw.mmv.ui.reuse.Tab = Tab;

9
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.embed.js
View file

@ -15,6 +15,7 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { EmbedFileFormatter, Utils } = require( 'mmv.ui.ondemandshareddependencies' );
const Tab = require( './mmv.ui.reuse.tab.js' );
( function () {
@ -36,12 +37,12 @@ const Tab = require( './mmv.ui.reuse.tab.js' );
/**
* Formatter converting image data into formats needed for output
*
* @property {mw.mmv.EmbedFileFormatter}
* @property {EmbedFileFormatter}
*/
this.formatter = new mw.mmv.EmbedFileFormatter();
this.formatter = new EmbedFileFormatter();
/** @property {mw.mmv.ui.Utils} utils - */
this.utils = new mw.mmv.ui.Utils();
/** @property {Utils} utils - */
this.utils = new Utils();
/**
* Indicates whether or not the default option has been reset for both size menus.

6
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.tab.js
View file

@ -15,6 +15,8 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { UiElement } = require( 'mmv' );
( function () {
var TP;
@ -22,7 +24,7 @@
* A tab in a mw.mmv.ui.Pane component
*
* @class mw.mmv.ui.reuse.Tab
* @extends mw.mmv.ui.Element
* @extends UiElement
* @param {jQuery} $container
* @constructor
*/
@ -37,7 +39,7 @@
this.$pane = $( '<div>' ).addClass( 'mw-mmv-reuse-pane' );
}
OO.inheritClass( Tab, mw.mmv.ui.Element );
OO.inheritClass( Tab, UiElement );
TP = Tab.prototype;
/**

1
resources/mmv/logging/mmv.logging.ViewLogger.js
View file

@ -179,4 +179,5 @@
mw.mmv.logging = mw.mmv.logging || {};
mw.mmv.logging.ViewLogger = ViewLogger;
module.exports = ViewLogger;
}() );

6
resources/mmv/mmv.ThumbnailWidthCalculator.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const ThumbnailWidth = require( './model/mmv.model.ThumbnailWidth.js' );
( function () {
var TWCP;
@ -168,8 +170,8 @@
bucketedWidth = this.findNextBucket( screenPixelWidth );
return new mw.mmv.model.ThumbnailWidth( cssWidth, cssHeight, screenPixelWidth, bucketedWidth );
return new ThumbnailWidth( cssWidth, cssHeight, screenPixelWidth, bucketedWidth );
};
mw.mmv.ThumbnailWidthCalculator = ThumbnailWidthCalculator;
module.exports = ThumbnailWidthCalculator;
}() );

88
resources/mmv/mmv.js
View file

@ -15,6 +15,25 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const ViewLogger = require( './logging/mmv.logging.ViewLogger.js' );
require( './provider/mmv.provider.js' );
require( './model/mmv.model.js' );
require( './ui/index.js' );
const LightboxImage = require( './mmv.lightboximage.js' );
const LightboxInterface = require( './mmv.lightboxinterface.js' );
const TaskQueue = require( './model/mmv.model.TaskQueue.js' );
const ThumbnailWidthCalculator = require( './mmv.ThumbnailWidthCalculator.js' );
const UiElement = require( './ui/mmv.ui.js' );
const ImageProvider = require( './provider/mmv.provider.Image.js' );
const ImageInfo = require( './provider/mmv.provider.ImageInfo.js' );
const FileRepoInfo = require( './provider/mmv.provider.FileRepoInfo.js' );
const ThumbnailInfo = require( './provider/mmv.provider.ThumbnailInfo.js' );
const GuessedThumbnailInfo = require( './provider/mmv.provider.GuessedThumbnailInfo.js' );
mw.mmv.LightboxImage = LightboxImage;
mw.mmv.LightboxInterface = LightboxInterface;
mw.mmv.ThumbnailWidthCalculator = ThumbnailWidthCalculator;
( function () {
var router = require( 'mediawiki.router' );
var comingFromHashChange = false;
@ -24,9 +43,9 @@
* Analyses the page, looks for image content and sets up the hooks
* to manage the viewing experience of such content.
*
* @class mw.mmv.MultimediaViewer
* @class MultimediaViewer
* @constructor
* @param {mw.mmv.Config} config mw.mmv.Config object
* @param {Config} config Config object
*/
function MultimediaViewer( config ) {
var apiCacheMaxAge = 86400, // one day (24 hours * 60 min * 60 sec)
@ -34,45 +53,45 @@
api = new mw.Api();
/**
* @property {mw.mmv.Config}
* @property {Config}
* @private
*/
this.config = config;
/**
* @property {mw.mmv.provider.Image}
* @property {ImageProvider}
* @private
*/
this.imageProvider = new mw.mmv.provider.Image( this.config.imageQueryParameter() );
this.imageProvider = new ImageProvider( this.config.imageQueryParameter() );
/**
* @property {mw.mmv.provider.ImageInfo}
* @property {ImageInfo}
* @private
*/
this.imageInfoProvider = new mw.mmv.provider.ImageInfo( api, {
this.imageInfoProvider = new ImageInfo( api, {
language: this.config.language(),
maxage: apiCacheFiveMinutes
} );
/**
* @property {mw.mmv.provider.FileRepoInfo}
* @property {FileRepoInfo}
* @private
*/
this.fileRepoInfoProvider = new mw.mmv.provider.FileRepoInfo( api,
this.fileRepoInfoProvider = new FileRepoInfo( api,
{ maxage: apiCacheMaxAge } );
/**
* @property {mw.mmv.provider.ThumbnailInfo}
* @property {ThumbnailInfo}
* @private
*/
this.thumbnailInfoProvider = new mw.mmv.provider.ThumbnailInfo( api,
this.thumbnailInfoProvider = new ThumbnailInfo( api,
{ maxage: apiCacheMaxAge } );
/**
* @property {mw.mmv.provider.ThumbnailInfo}
* @property {ThumbnailInfo}
* @private
*/
this.guessedThumbnailInfoProvider = new mw.mmv.provider.GuessedThumbnailInfo();
this.guessedThumbnailInfoProvider = new GuessedThumbnailInfo();
/**
* Image index on page.
@ -91,10 +110,10 @@
/**
* UI object used to display the pictures in the page.
*
* @property {mw.mmv.LightboxInterface}
* @property {LightboxInterface}
* @private
*/
this.ui = new mw.mmv.LightboxInterface();
this.ui = new LightboxInterface();
/**
* How many sharp images have been displayed in Media Viewer since the pageload
@ -114,9 +133,9 @@
this.documentTitle = document.title;
/**
* @property {mw.mmv.logging.ViewLogger} view -
* @property {ViewLogger} view -
*/
this.viewLogger = new mw.mmv.logging.ViewLogger( this.config, window );
this.viewLogger = new ViewLogger( this.config, window );
/**
* Stores whether the real image was loaded and displayed already.
@ -177,10 +196,10 @@
* @param {HTMLImageElement} thumb The thumbnail that represents this image on the page
* @param {string} [caption] The caption, if any.
* @param {string} [alt] The alt text of the image
* @return {mw.mmv.LightboxImage}
* @return {LightboxImage}
*/
MMVP.createNewImage = function ( fileLink, filePageLink, fileTitle, index, thumb, caption, alt ) {
var thisImage = new mw.mmv.LightboxImage( fileLink, filePageLink, fileTitle, index, thumb, caption, alt ),
var thisImage = new LightboxImage( fileLink, filePageLink, fileTitle, index, thumb, caption, alt ),
$thumb = $( thumb );
thisImage.filePageLink = filePageLink;
@ -197,7 +216,7 @@
* Handles resize events in viewer.
*
* @protected
* @param {mw.mmv.LightboxInterface} ui lightbox that got resized
* @param {LightboxInterface} ui lightbox that got resized
*/
MMVP.resize = function ( ui ) {
var imageWidths,
@ -238,10 +257,10 @@
/**
* Loads and sets the specified image. It also updates the controls.
*
* @param {mw.mmv.LightboxInterface} ui image container
* @param {mw.mmv.model.Thumbnail} thumbnail thumbnail information
* @param {LightboxInterface} ui image container
* @param {Thumbnail} thumbnail thumbnail information
* @param {HTMLImageElement} imageElement
* @param {mw.mmv.model.ThumbnailWidth} imageWidths
* @param {ThumbnailWidth} imageWidths
*/
MMVP.setImage = function ( ui, thumbnail, imageElement, imageWidths ) {
ui.canvas.setImageAndMaxDimensions( thumbnail, imageElement, imageWidths );
@ -420,9 +439,9 @@
/**
* Display the real, full-resolution, thumbnail that was fetched with fetchThumbnail
*
* @param {mw.mmv.model.Thumbnail} thumbnail
* @param {Thumbnail} thumbnail
* @param {HTMLImageElement} imageElement
* @param {mw.mmv.model.ThumbnailWidth} imageWidths
* @param {ThumbnailWidth} imageWidths
* @param {number} loadTime Time it took to load the thumbnail
*/
MMVP.displayRealThumbnail = function ( thumbnail, imageElement, imageWidths, loadTime ) {
@ -447,7 +466,7 @@
*
* @param {mw.mmv.LightboxImage} image
* @param {jQuery} $initialImage The thumbnail from the page
* @param {mw.mmv.model.ThumbnailWidth} imageWidths
* @param {ThumbnailWidth} imageWidths
* @param {boolean} [recursion=false] for internal use, never set this when calling from outside
*/
MMVP.displayPlaceholderThumbnail = function ( image, $initialImage, imageWidths, recursion ) {
@ -499,7 +518,7 @@
* all the related callbacks.
*
* @param {mw.mmv.LightboxImage} image
* @param {jQuery.Promise.<mw.mmv.model.Thumbnail, HTMLImageElement>} imagePromise
* @param {jQuery.Promise.<Thumbnail, HTMLImageElement>} imagePromise
* @param {number} imageWidth needed for caching progress (FIXME)
*/
MMVP.setupProgressBar = function ( image, imagePromise, imageWidth ) {
@ -574,14 +593,14 @@
/**
* Stores image metadata preloads, so they can be cancelled.
*
* @property {mw.mmv.model.TaskQueue}
* @property {TaskQueue}
*/
MMVP.metadataPreloadQueue = null;
/**
* Stores image thumbnail preloads, so they can be cancelled.
*
* @property {mw.mmv.model.TaskQueue}
* @property {TaskQueue}
*/
MMVP.thumbnailPreloadQueue = null;
@ -619,10 +638,10 @@
*
* @private
* @param {function(mw.mmv.LightboxImage): function()} taskFactory
* @return {mw.mmv.model.TaskQueue}
* @return {TaskQueue}
*/
MMVP.pushLightboxImagesIntoQueue = function ( taskFactory ) {
var queue = new mw.mmv.model.TaskQueue();
var queue = new TaskQueue();
this.eachPreloadableLightboxIndex( function ( i, lightboxImage, extraStatsDeferred ) {
queue.push( taskFactory( lightboxImage, extraStatsDeferred ) );
@ -719,7 +738,7 @@
* information).
*
* @param {mw.Title} fileTitle Title of the file page for the image.
* @return {jQuery.Promise.<mw.mmv.model.Image, mw.mmv.model.Repo>}
* @return {jQuery.Promise.<Image, Repo>}
*/
MMVP.fetchSizeIndependentLightboxInfo = function ( fileTitle ) {
var imageInfoPromise = this.imageInfoProvider.get( fileTitle ),
@ -738,7 +757,7 @@
* @param {mw.mmv.LightboxImage} image
* @param {number} width the width of the requested thumbnail
* @param {jQuery.Deferred.<string>} [extraStatsDeferred] Promise that resolves to the image's upload timestamp when the metadata is loaded
* @return {jQuery.Promise.<mw.mmv.model.Thumbnail, HTMLImageElement>}
* @return {jQuery.Promise.<Thumbnail, HTMLImageElement>}
*/
MMVP.fetchThumbnailForLightboxImage = function ( image, width, extraStatsDeferred ) {
return this.fetchThumbnail(
@ -760,7 +779,7 @@
* @param {number} [originalWidth] the width of the original, full-sized file (might be missing)
* @param {number} [originalHeight] the height of the original, full-sized file (might be missing)
* @param {jQuery.Deferred.<string>} [extraStatsDeferred] Promise that resolves to the image's upload timestamp when the metadata is loaded
* @return {jQuery.Promise.<mw.mmv.model.Thumbnail, HTMLImageElement>} A promise resolving to
* @return {jQuery.Promise.<Thumbnail, HTMLImageElement>} A promise resolving to
* a thumbnail model and an <img> element. It might or might not have progress events which
* return a single number.
*/
@ -1004,4 +1023,5 @@
};
mw.mmv.MultimediaViewer = MultimediaViewer;
module.exports = { MultimediaViewer, UiElement };
}() );

2
resources/mmv/mmv.lightboximage.js
View file

@ -59,5 +59,5 @@
this.originalHeight = undefined;
}
mw.mmv.LightboxImage = LightboxImage;
module.exports = LightboxImage;
}() );

38
resources/mmv/mmv.lightboxinterface.js
View file

@ -15,6 +15,16 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { Config } = require( 'mmv.bootstrap' );
const Canvas = require( './ui/mmv.ui.canvas.js' );
const CanvasButtons = require( './ui/mmv.ui.canvasButtons.js' );
const DownloadDialog = require( './ui/mmv.ui.download.dialog.js' );
const MetadataPanel = require( './ui/mmv.ui.metadataPanel.js' );
const OptionsDialog = require( './ui/mmv.ui.viewingOptions.js' );
const ReuseDialog = require( './ui/mmv.ui.reuse.dialog.js' );
const ThumbnailWidthCalculator = require( './mmv.ThumbnailWidthCalculator.js' );
const UiElement = require( './ui/mmv.ui.js' );
( function () {
var LIP;
@ -22,14 +32,14 @@
* Represents the main interface of the lightbox
*
* @class mw.mmv.LightboxInterface
* @extends mw.mmv.ui.Element
* @extends UiElement
* @constructor
*/
function LightboxInterface() {
this.localStorage = mw.storage;
/** @property {mw.mmv.Config} config - */
this.config = new mw.mmv.Config(
/** @property {Config} config - */
this.config = new Config(
mw.config.get( 'wgMultimediaViewer', {} ),
mw.config,
mw.user,
@ -38,15 +48,15 @@
);
/**
* @property {mw.mmv.ThumbnailWidthCalculator}
* @property {ThumbnailWidthCalculator}
* @private
*/
this.thumbnailWidthCalculator = new mw.mmv.ThumbnailWidthCalculator();
this.thumbnailWidthCalculator = new ThumbnailWidthCalculator();
this.init();
mw.mmv.ui.Element.call( this, this.$wrapper );
UiElement.call( this, this.$wrapper );
}
OO.inheritClass( LightboxInterface, mw.mmv.ui.Element );
OO.inheritClass( LightboxInterface, UiElement );
LIP = LightboxInterface.prototype;
/**
@ -101,13 +111,13 @@
this.setupCanvasButtons();
this.panel = new mw.mmv.ui.MetadataPanel( this.$postDiv, this.$aboveFold, this.localStorage, this.config );
this.buttons = new mw.mmv.ui.CanvasButtons( this.$preDiv, this.$closeButton, this.$fullscreenButton );
this.canvas = new mw.mmv.ui.Canvas( this.$innerWrapper, this.$imageWrapper, this.$wrapper );
this.panel = new MetadataPanel( this.$postDiv, this.$aboveFold, this.localStorage, this.config );
this.buttons = new CanvasButtons( this.$preDiv, this.$closeButton, this.$fullscreenButton );
this.canvas = new Canvas( this.$innerWrapper, this.$imageWrapper, this.$wrapper );
this.fileReuse = new mw.mmv.ui.reuse.Dialog( this.$innerWrapper, this.buttons.$reuse, this.config );
this.downloadDialog = new mw.mmv.ui.download.Dialog( this.$innerWrapper, this.buttons.$download, this.config );
this.optionsDialog = new mw.mmv.ui.OptionsDialog( this.$innerWrapper, this.buttons.$options, this.config );
this.fileReuse = new ReuseDialog( this.$innerWrapper, this.buttons.$reuse, this.config );
this.downloadDialog = new DownloadDialog( this.$innerWrapper, this.buttons.$download, this.config );
this.optionsDialog = new OptionsDialog( this.$innerWrapper, this.buttons.$options, this.config );
};
/**
@ -496,5 +506,5 @@
this.buttons.toggle( showPrevButton, showNextButton );
};
mw.mmv.LightboxInterface = LightboxInterface;
module.exports = LightboxInterface;
}() );

12
resources/mmv/model/mmv.model.Image.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const License = require( './mmv.model.License.js' );
( function () {
var IP;
@ -41,7 +43,7 @@
* @param {string} source
* @param {string} author
* @param {number} authorCount
* @param {mw.mmv.model.License} license
* @param {License} license
* @param {string} permission
* @param {string} attribution Custom attribution string that replaces credit line when set
* @param {string} deletionReason
@ -133,7 +135,7 @@
*/
this.authorCount = authorCount;
/** @property {mw.mmv.model.License} license The license under which the image is distributed */
/** @property {License} license The license under which the image is distributed */
this.license = license;
/** @property {string} additional license conditions by the author (note that this is usually a big ugly HTML blob) */
@ -256,13 +258,13 @@
*
* @static
* @param {Object} extmeta the extmeta array of the imageinfo data
* @return {mw.mmv.model.License|undefined}
* @return {License|undefined}
*/
Image.newLicenseFromImageInfo = function ( extmeta ) {
var license;
if ( extmeta.LicenseShortName ) {
license = new mw.mmv.model.License(
license = new License(
this.parseExtmeta( extmeta.LicenseShortName, 'string' ),
this.parseExtmeta( extmeta.License, 'string' ),
this.parseExtmeta( extmeta.UsageTerms, 'string' ),
@ -340,5 +342,5 @@
this.longitude !== undefined && this.longitude !== null;
};
mw.mmv.model.Image = Image;
module.exports = Image;
}() );

2
resources/mmv/model/mmv.model.IwTitle.js
View file

@ -76,5 +76,5 @@
return this.domain;
};
mw.mmv.model.IwTitle = IwTitle;
module.exports = IwTitle;
}() );

8
resources/mmv/model/mmv.model.License.js
View file

@ -15,6 +15,8 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
( function () {
var LP;
@ -61,8 +63,8 @@
/** @property {boolean} nonFree is this a non-free license? */
this.nonFree = nonFree;
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils - */
this.htmlUtils = new HtmlUtils();
}
LP = License.prototype;
@ -158,5 +160,5 @@
}
};
mw.mmv.model.License = License;
module.exports = License;
}() );

4
resources/mmv/model/mmv.model.Repo.js
View file

@ -201,7 +201,5 @@
return /^(https?:)?\/\/commons.wikimedia.org/.test( this.descBaseUrl );
};
mw.mmv.model.Repo = Repo;
mw.mmv.model.ForeignApiRepo = ForeignApiRepo;
mw.mmv.model.ForeignDbRepo = ForeignDbRepo;
module.exports = { Repo, ForeignApiRepo, ForeignDbRepo };
}() );

2
resources/mmv/model/mmv.model.TaskQueue.js
View file

@ -140,5 +140,5 @@
CANCELLED: 'cancelled'
};
mw.mmv.model.TaskQueue = TaskQueue;
module.exports = TaskQueue;
}() );

2
resources/mmv/model/mmv.model.Thumbnail.js
View file

@ -44,5 +44,5 @@
this.height = height;
}
mw.mmv.model.Thumbnail = Thumbnail;
module.exports = Thumbnail;
}() );

2
resources/mmv/model/mmv.model.ThumbnailWidth.js
View file

@ -77,6 +77,6 @@
this.real = real;
}
mw.mmv.model.ThumbnailWidth = ThumbnailWidth;
module.exports = ThumbnailWidth;
}() );

22
resources/mmv/model/mmv.model.js
View file

@ -15,6 +15,22 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
( function () {
mw.mmv.model = {};
}() );
const ImageModel = require( './mmv.model.Image.js' );
const IwTitle = require( './mmv.model.IwTitle.js' );
const License = require( './mmv.model.License.js' );
const { Repo, ForeignApiRepo, ForeignDbRepo } = require( './mmv.model.Repo.js' );
const TaskQueue = require( './mmv.model.TaskQueue.js' );
const Thumbnail = require( './mmv.model.Thumbnail.js' );
const ThumbnailWidth = require( './mmv.model.ThumbnailWidth.js' );
mw.mmv.model = {
Image: ImageModel,
IwTitle,
License,
Repo,
ForeignApiRepo,
ForeignDbRepo,
TaskQueue,
Thumbnail,
ThumbnailWidth
};

3
resources/mmv/provider/mmv.provider.Api.js
View file

@ -163,6 +163,5 @@
return $.Deferred().reject( this.getErrorMessage( data ), data );
};
mw.mmv.provider = {};
mw.mmv.provider.Api = Api;
module.exports = Api;
}() );

10
resources/mmv/provider/mmv.provider.FileRepoInfo.js
View file

@ -15,13 +15,15 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Api = require( './mmv.provider.Api.js' );
( function () {
/**
* Gets file repo information.
*
* @class mw.mmv.provider.FileRepoInfo
* @extends mw.mmv.provider.Api
* @extends Api
* @constructor
* @param {mw.Api} api
* @param {Object} [options]
@ -29,9 +31,9 @@
* Will be used for both client-side cache (maxage) and reverse proxies (s-maxage)
*/
function FileRepoInfo( api, options ) {
mw.mmv.provider.Api.call( this, api, options );
Api.call( this, api, options );
}
OO.inheritClass( FileRepoInfo, mw.mmv.provider.Api );
OO.inheritClass( FileRepoInfo, Api );
/**
* Runs an API GET request to get the repo info.
@ -60,5 +62,5 @@
} );
};
mw.mmv.provider.FileRepoInfo = FileRepoInfo;
module.exports = FileRepoInfo;
}() );

10
resources/mmv/provider/mmv.provider.GuessedThumbnailInfo.js
View file

@ -15,6 +15,8 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Thumbnail = require( '../model/mmv.model.Thumbnail.js' );
( function () {
/**
* This provider is similar to mw.mmv.provider.ThumbnailInfo, but instead of making an API call
@ -24,7 +26,7 @@
* - unexpected failure: we guess an URL but it does not work. The current implementation is
* conservative so at least on WMF wikis this probably won't happen, but should be reckoned
* with anyway. On other wikis (especially ones which do not generate thumbnails on demand
* via the 404 handler) this could be more frequent. Again, it is the caller's resonsibility
* via the 404 handler) this could be more frequent. Again, it is the caller's responsibility
* to handle this by detecting image loading errors and falling back to the normal provider.
*
* @class mw.mmv.provider.GuessedThumbnailInfo
@ -67,12 +69,12 @@
* @param {number} width thumbnail width in pixels
* @param {number} originalWidth width of original image in pixels
* @param {number} originalHeight height of original image in pixels
* @return {jQuery.Promise.<mw.mmv.model.Thumbnail>}
* @return {jQuery.Promise.<Thumbnail>}
*/
GuessedThumbnailInfo.prototype.get = function ( file, sampleUrl, width, originalWidth, originalHeight ) {
var url = this.getUrl( file, sampleUrl, width, originalWidth );
if ( url ) {
return $.Deferred().resolve( new mw.mmv.model.Thumbnail(
return $.Deferred().resolve( new Thumbnail(
url,
this.guessWidth( file, width, originalWidth ),
this.guessHeight( file, width, originalWidth, originalHeight )
@ -305,5 +307,5 @@
return undefined;
};
mw.mmv.provider.GuessedThumbnailInfo = GuessedThumbnailInfo;
module.exports = GuessedThumbnailInfo;
}() );

2
resources/mmv/provider/mmv.provider.Image.js
View file

@ -117,5 +117,5 @@
return window.XMLHttpRequest !== undefined && 'withCredentials' in new XMLHttpRequest();
};
mw.mmv.provider.Image = Image;
module.exports = Image;
}() );

10
resources/mmv/provider/mmv.provider.ImageInfo.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Api = require( './mmv.provider.Api.js' );
( function () {
/**
@ -23,7 +25,7 @@
* See https://www.mediawiki.org/wiki/API:Properties#imageinfo_.2F_ii
*
* @class mw.mmv.provider.ImageInfo
* @extends mw.mmv.provider.Api
* @extends Api
* @constructor
* @param {mw.Api} api
* @param {Object} [options]
@ -36,9 +38,9 @@
language: null
}, options );
mw.mmv.provider.Api.call( this, api, options );
Api.call( this, api, options );
}
OO.inheritClass( ImageInfo, mw.mmv.provider.Api );
OO.inheritClass( ImageInfo, Api );
/**
* Array of imageinfo API properties which are needed to construct an Image model.
@ -114,5 +116,5 @@
} );
};
mw.mmv.provider.ImageInfo = ImageInfo;
module.exports = ImageInfo;
}() );

15
resources/mmv/provider/mmv.provider.ThumbnailInfo.js
View file

@ -15,6 +15,9 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Api = require( './mmv.provider.Api.js' );
const Thumbnail = require( '../model/mmv.model.Thumbnail.js' );
( function () {
/**
@ -23,7 +26,7 @@
* See https://www.mediawiki.org/wiki/API:Properties#imageinfo_.2F_ii
*
* @class mw.mmv.provider.ThumbnailInfo
* @extends mw.mmv.provider.Api
* @extends Api
* @constructor
* @param {mw.Api} api
* @param {Object} [options]
@ -31,9 +34,9 @@
* Will be used for both client-side cache (maxage) and reverse proxies (s-maxage)
*/
function ThumbnailInfo( api, options ) {
mw.mmv.provider.Api.call( this, api, options );
Api.call( this, api, options );
}
OO.inheritClass( ThumbnailInfo, mw.mmv.provider.Api );
OO.inheritClass( ThumbnailInfo, Api );
/**
* Runs an API GET request to get the thumbnail info for the specified size.
@ -45,7 +48,7 @@
* @param {mw.Title} file
* @param {number} width thumbnail width in pixels
* @param {number} height thumbnail height in pixels
* @return {jQuery.Promise.<mw.mmv.model.Thumbnail>}
* @return {jQuery.Promise.<Thumbnail>}
*/
ThumbnailInfo.prototype.get = function ( file, width, height ) {
var provider = this,
@ -68,7 +71,7 @@
imageInfo = page.imageinfo[ 0 ];
if ( imageInfo.thumburl && imageInfo.thumbwidth && imageInfo.thumbheight ) {
return $.Deferred().resolve(
new mw.mmv.model.Thumbnail(
new Thumbnail(
imageInfo.thumburl,
imageInfo.thumbwidth,
imageInfo.thumbheight
@ -86,5 +89,5 @@
} );
};
mw.mmv.provider.ThumbnailInfo = ThumbnailInfo;
module.exports = ThumbnailInfo;
}() );

32
resources/mmv/provider/mmv.provider.js Normal file
View file

@ -0,0 +1,32 @@
/*
* 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 Api = require( './mmv.provider.Api.js' );
const FileRepoInfo = require( './mmv.provider.FileRepoInfo.js' );
const GuessedThumbnailInfo = require( './mmv.provider.GuessedThumbnailInfo.js' );
const ImageProvider = require( './mmv.provider.Image.js' );
const ImageInfo = require( './mmv.provider.ImageInfo.js' );
const ThumbnailInfo = require( './mmv.provider.ThumbnailInfo.js' );
mw.mmv.provider = {
Api,
FileRepoInfo,
GuessedThumbnailInfo,
Image: ImageProvider,
ImageInfo,
ThumbnailInfo
};

51
resources/mmv/ui/index.js Normal file
View file

@ -0,0 +1,51 @@
/*
* 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 Canvas = require( './mmv.ui.canvas.js' );
const CanvasButtons = require( './mmv.ui.canvasButtons.js' );
const Description = require( './mmv.ui.description.js' );
const Dialog = require( './mmv.ui.dialog.js' );
const DownloadDialog = require( './mmv.ui.download.dialog.js' );
const UiElement = require( './mmv.ui.js' );
const MetadataPanel = require( './mmv.ui.metadataPanel.js' );
const MetadataPanelScroller = require( './mmv.ui.metadataPanelScroller.js' );
const Permission = require( './mmv.ui.permission.js' );
const ProgressBar = require( './mmv.ui.progressBar.js' );
const ReuseDialog = require( './mmv.ui.reuse.dialog.js' );
const StripeButtons = require( './mmv.ui.stripeButtons.js' );
const TruncatableTextField = require( './mmv.ui.truncatableTextField.js' );
const OptionsDialog = require( './mmv.ui.viewingOptions.js' );
mw.mmv.ui = mw.mmv.ui || {};
mw.mmv.ui.Canvas = Canvas;
mw.mmv.ui.CanvasButtons = CanvasButtons;
mw.mmv.ui.Description = Description;
mw.mmv.ui.Dialog = Dialog;
mw.mmv.ui.Element = UiElement;
mw.mmv.ui.MetadataPanel = MetadataPanel;
mw.mmv.ui.MetadataPanelScroller = MetadataPanelScroller;
mw.mmv.ui.Permission = Permission;
mw.mmv.ui.ProgressBar = ProgressBar;
mw.mmv.ui.StripeButtons = StripeButtons;
mw.mmv.ui.TruncatableTextField = TruncatableTextField;
mw.mmv.ui.OptionsDialog = OptionsDialog;
mw.mmv.ui.download = mw.mmv.ui.download || {};
mw.mmv.ui.download.Dialog = DownloadDialog;
mw.mmv.ui.reuse = mw.mmv.ui.reuse || {};
mw.mmv.ui.reuse.Dialog = ReuseDialog;

20
resources/mmv/ui/mmv.ui.canvas.js
View file

@ -15,6 +15,10 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
const ThumbnailWidthCalculator = require( '../mmv.ThumbnailWidthCalculator.js' );
const UiElement = require( './mmv.ui.js' );
( function () {
var C;
@ -23,15 +27,15 @@
* This first version assumes an image but it can be extended to other
* media types (video, sound, presentation, etc.).
*
* @class mw.mmv.ui.Canvas
* @extends mw.mmv.ui.Element
* @class Canvas
* @extends UiElement
* @constructor
* @param {jQuery} $container Canvas' container
* @param {jQuery} $imageWrapper
* @param {jQuery} $mainWrapper
*/
function Canvas( $container, $imageWrapper, $mainWrapper ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
/**
* @property {boolean}
@ -40,10 +44,10 @@
this.dialogOpen = false;
/**
* @property {mw.mmv.ThumbnailWidthCalculator}
* @property {ThumbnailWidthCalculator}
* @private
*/
this.thumbnailWidthCalculator = new mw.mmv.ThumbnailWidthCalculator();
this.thumbnailWidthCalculator = new ThumbnailWidthCalculator();
/**
* Contains image.
@ -79,7 +83,7 @@
*/
this.imageRawMetadata = null;
}
OO.inheritClass( Canvas, mw.mmv.ui.Element );
OO.inheritClass( Canvas, UiElement );
C = Canvas.prototype;
/**
@ -355,7 +359,7 @@
var errorDetails, description, errorUri, $retryLink, $reportLink,
canvasDimensions = this.getDimensions(),
thumbnailDimensions = this.getCurrentImageWidths(),
htmlUtils = new mw.mmv.HtmlUtils();
htmlUtils = new HtmlUtils();
errorDetails = [
'error: ' + error,
@ -469,5 +473,5 @@
return this.getLightboxImageWidths( this.imageRawMetadata );
};
mw.mmv.ui.Canvas = Canvas;
module.exports = Canvas;
}() );

14
resources/mmv/ui/mmv.ui.canvasButtons.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const UiElement = require( './mmv.ui.js' );
( function () {
var CBP;
@ -22,8 +24,8 @@
* Represents the buttons which are displayed over the image - next, previous, close
* and fullscreen.
*
* @class mw.mmv.ui.CanvasButtons
* @extends mw.mmv.ui.Element
* @class CanvasButtons
* @extends UiElement
* @constructor
* @param {jQuery} $container The parent element we should put the buttons into.
* @param {jQuery} $closeButton The close button element from the parent class.
@ -32,7 +34,7 @@
function CanvasButtons( $container, $closeButton, $fullscreenButton ) {
var buttons = this;
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
this.$close = $closeButton;
this.$fullscreen = $fullscreenButton;
@ -93,7 +95,7 @@
buttons.emit( 'prev' );
} );
}
OO.inheritClass( CanvasButtons, mw.mmv.ui.Element );
OO.inheritClass( CanvasButtons, UiElement );
CBP = CanvasButtons.prototype;
/**
@ -254,7 +256,7 @@
* Removes all UI things from the DOM, or hides them
*/
CBP.unattach = function () {
mw.mmv.ui.Element.prototype.unattach.call( this );
UiElement.prototype.unattach.call( this );
this.$download
.add( this.$reuse )
@ -280,5 +282,5 @@
.prop( 'href', null );
};
mw.mmv.ui.CanvasButtons = CanvasButtons;
module.exports = CanvasButtons;
}() );

17
resources/mmv/ui/mmv.ui.description.js
View file

@ -15,20 +15,23 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
const UiElement = require( './mmv.ui.js' );
( function () {
/**
* Description element in the UI.
*
* @class mw.mmv.ui.Description
* @extends mw.mmv.ui.Element
* @class Description
* @extends UiElement
* @constructor
* @inheritdoc
*/
function Description( $container ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils - */
this.htmlUtils = new HtmlUtils();
this.$imageDescDiv = $( '<div>' )
.addClass( 'mw-mmv-image-desc-div empty' )
@ -39,7 +42,7 @@
.appendTo( this.$imageDescDiv );
}
OO.inheritClass( Description, mw.mmv.ui.Element );
OO.inheritClass( Description, UiElement );
/**
* Sets data on the element.
@ -65,5 +68,5 @@
this.$imageDescDiv.addClass( 'empty' );
};
mw.mmv.ui.Description = Description;
module.exports = Description;
}() );

14
resources/mmv/ui/mmv.ui.dialog.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const UiElement = require( './mmv.ui.js' );
( function () {
// Shortcut for prototype later
var DP;
@ -22,14 +24,14 @@
/**
* Represents a dialog and the link to open it.
*
* @class mw.mmv.ui.Dialog
* @extends mw.mmv.ui.Element
* @class Dialog
* @extends UiElement
* @param {jQuery} $container the element to which the dialog will be appended
* @param {jQuery} $openButton the button which opens the dialog. Only used for positioning.
* @param {mw.mmv.Config} config
*/
function Dialog( $container, $openButton, config ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
/** @property {boolean} isOpen Whether or not the dialog is open. */
this.isOpen = false;
@ -66,7 +68,7 @@
this.$dialog.appendTo( this.$container );
}
OO.inheritClass( Dialog, mw.mmv.ui.Element );
OO.inheritClass( Dialog, UiElement );
DP = Dialog.prototype;
/**
@ -175,7 +177,7 @@
* Clears listeners.
*/
DP.unattach = function () {
mw.mmv.ui.Element.prototype.unattach.call( this );
UiElement.prototype.unattach.call( this );
this.stopListeningToOutsideClick();
};
@ -248,5 +250,5 @@
}
};
mw.mmv.ui.Dialog = Dialog;
module.exports = Dialog;
}() );

25
resources/mmv/ui/mmv.ui.download.dialog.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Dialog = require( './mmv.ui.dialog.js' );
( function () {
// Shortcut for prototype later
var DP;
@ -22,14 +24,14 @@
/**
* Represents the file download dialog and the link to open it.
*
* @class mw.mmv.ui.download.Dialog
* @extends mw.mmv.ui.Dialog
* @class DownloadDialog
* @extends Dialog
* @param {jQuery} $container the element to which the dialog will be appended
* @param {jQuery} $openButton the button which opens the dialog. Only used for positioning.
* @param {mw.mmv.Config} config
*/
function Dialog( $container, $openButton, config ) {
mw.mmv.ui.Dialog.call( this, $container, $openButton, config );
function DownloadDialog( $container, $openButton, config ) {
Dialog.call( this, $container, $openButton, config );
this.loadDependencies.push( 'mmv.ui.download.pane' );
@ -38,8 +40,8 @@
this.eventPrefix = 'download';
}
OO.inheritClass( Dialog, mw.mmv.ui.Dialog );
DP = Dialog.prototype;
OO.inheritClass( DownloadDialog, Dialog );
DP = DownloadDialog.prototype;
/**
* Registers listeners.
@ -66,7 +68,7 @@
* Clears listeners.
*/
DP.unattach = function () {
mw.mmv.ui.Dialog.prototype.unattach.call( this );
Dialog.prototype.unattach.call( this );
this.$container.off( 'mmv-download-cta-open mmv-download-cta-close' );
};
@ -98,7 +100,8 @@
*/
DP.openDialog = function () {
if ( !this.download ) {
this.download = new mw.mmv.ui.download.Pane( this.$dialog );
const DownloadPane = require( 'mmv.ui.download.pane' );
this.download = new DownloadPane( this.$dialog );
this.download.attach();
}
@ -108,7 +111,7 @@
this.setValues = undefined;
}
mw.mmv.ui.Dialog.prototype.openDialog.call( this );
Dialog.prototype.openDialog.call( this );
$( document ).trigger( 'mmv-download-opened' );
};
@ -121,10 +124,10 @@
* Closes the download dialog.
*/
DP.closeDialog = function () {
mw.mmv.ui.Dialog.prototype.closeDialog.call( this );
Dialog.prototype.closeDialog.call( this );
$( document ).trigger( 'mmv-download-closed' );
};
mw.mmv.ui.download.Dialog = Dialog;
module.exports = DownloadDialog;
}() );

2
resources/mmv/ui/mmv.ui.download.js
View file

@ -16,5 +16,5 @@
*/
( function () {
mw.mmv.ui.download = {};
module.exports = {};
}() );

12
resources/mmv/ui/mmv.ui.js
View file

@ -22,12 +22,12 @@
/**
* Represents a UI element.
*
* @class mw.mmv.ui.Element
* @class Element
* @abstract
* @constructor
* @param {jQuery} $container
*/
function Element( $container ) {
function UiElement( $container ) {
OO.EventEmitter.call( this );
/** @property {jQuery} $container The element that contains the UI element. */
@ -51,9 +51,9 @@
this.timers = {};
}
OO.mixinClass( Element, OO.EventEmitter );
OO.mixinClass( UiElement, OO.EventEmitter );
EP = Element.prototype;
EP = UiElement.prototype;
/**
* Checks whether the document is RTL. Assumes it doesn't change.
@ -236,7 +236,5 @@
return keyword;
};
mw.mmv.ui = {};
mw.mmv.ui.reuse = {};
mw.mmv.ui.Element = Element;
module.exports = UiElement;
}() );

37
resources/mmv/ui/mmv.ui.metadataPanel.js
View file

@ -15,6 +15,15 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
const Description = require( './mmv.ui.description.js' );
const UiElement = require( './mmv.ui.js' );
const MetadataPanelScroller = require( './mmv.ui.metadataPanelScroller.js' );
const Permission = require( './mmv.ui.permission.js' );
const ProgressBar = require( './mmv.ui.progressBar.js' );
const StripeButtons = require( './mmv.ui.stripeButtons.js' );
const TruncatableTextField = require( './mmv.ui.truncatableTextField.js' );
( function () {
// Shortcut for prototype later
var MPP;
@ -22,8 +31,8 @@
/**
* Represents the metadata panel in the viewer
*
* @class mw.mmv.ui.MetadataPanel
* @extends mw.mmv.ui.Element
* @class MetadataPanel
* @extends UiElement
* @constructor
* @param {jQuery} $container The container for the panel (.mw-mmv-post-image).
* @param {jQuery} $aboveFold The brighter headline of the metadata panel (.mw-mmv-above-fold).
@ -33,21 +42,21 @@
* @param {mw.mmv.Config} config A configuration object.
*/
function MetadataPanel( $container, $aboveFold, localStorage, config ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
this.$aboveFold = $aboveFold;
/** @property {mw.mmv.Config} config - */
this.config = config;
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils - */
this.htmlUtils = new HtmlUtils();
this.initializeHeader( localStorage );
this.initializeImageMetadata();
this.initializeAboutLinks();
}
OO.inheritClass( MetadataPanel, mw.mmv.ui.Element );
OO.inheritClass( MetadataPanel, UiElement );
MPP = MetadataPanel.prototype;
/**
@ -180,9 +189,9 @@
* @param {mw.SafeStorage} localStorage the localStorage object, for dependency injection
*/
MPP.initializeHeader = function ( localStorage ) {
this.progressBar = new mw.mmv.ui.ProgressBar( this.$aboveFold );
this.progressBar = new ProgressBar( this.$aboveFold );
this.scroller = new mw.mmv.ui.MetadataPanelScroller( this.$container, this.$aboveFold,
this.scroller = new MetadataPanelScroller( this.$container, this.$aboveFold,
localStorage );
this.$titleDiv = $( '<div>' )
@ -206,7 +215,7 @@
this.$title = $( '<span>' )
.addClass( 'mw-mmv-title' );
this.title = new mw.mmv.ui.TruncatableTextField( this.$titlePara, this.$title, {
this.title = new TruncatableTextField( this.$titlePara, this.$title, {
styles: [ 'mw-mmv-title-small', 'mw-mmv-title-smaller' ]
} );
this.title.setTitle(
@ -218,7 +227,7 @@
};
MPP.initializeButtons = function () {
this.buttons = new mw.mmv.ui.StripeButtons( this.$titleDiv );
this.buttons = new StripeButtons( this.$titleDiv );
};
/**
@ -240,8 +249,8 @@
.appendTo( this.$imageMetadata );
this.initializeCredit();
this.description = new mw.mmv.ui.Description( this.$imageMetadataLeft );
this.permission = new mw.mmv.ui.Permission( this.$imageMetadataLeft, this.scroller );
this.description = new Description( this.$imageMetadataLeft );
this.permission = new Permission( this.$imageMetadataLeft, this.scroller );
this.initializeImageLinks();
};
@ -257,7 +266,7 @@
this.$authorAndSource = $( '<span>' )
.addClass( 'mw-mmv-source-author' );
this.creditField = new mw.mmv.ui.TruncatableTextField(
this.creditField = new TruncatableTextField(
this.$credit,
this.$authorAndSource,
{ styles: [] }
@ -866,5 +875,5 @@
}
};
mw.mmv.ui.MetadataPanel = MetadataPanel;
module.exports = MetadataPanel;
}() );

12
resources/mmv/ui/mmv.ui.metadataPanelScroller.js
View file

@ -15,21 +15,23 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const UiElement = require( './mmv.ui.js' );
( function () {
var MPSP;
/**
* Handles scrolling behavior of the metadata panel.
*
* @class mw.mmv.ui.MetadataPanelScroller
* @extends mw.mmv.ui.Element
* @class MetadataPanelScroller
* @extends UiElement
* @constructor
* @param {jQuery} $container The container for the panel (.mw-mmv-post-image).
* @param {jQuery} $aboveFold The control bar element (.mw-mmv-above-fold).
* @param {mw.SafeStorage} localStorage the localStorage object, for dependency injection
*/
function MetadataPanelScroller( $container, $aboveFold, localStorage ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
this.$aboveFold = $aboveFold;
@ -57,7 +59,7 @@
this.initialize();
}
OO.inheritClass( MetadataPanelScroller, mw.mmv.ui.Element );
OO.inheritClass( MetadataPanelScroller, UiElement );
MPSP = MetadataPanelScroller.prototype;
MPSP.attach = function () {
@ -244,5 +246,5 @@
this.panelWasOpen = panelIsOpen;
};
mw.mmv.ui.MetadataPanelScroller = MetadataPanelScroller;
module.exports = MetadataPanelScroller;
}() );

22
resources/mmv/ui/mmv.ui.permission.js
View file

@ -15,6 +15,10 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
const UiElement = require( './mmv.ui.js' );
const MetadataPanelScroller = require( './mmv.ui.metadataPanelScroller.js' );
( function () {
var P;
@ -24,19 +28,19 @@
* It has two states: when closed, it just shows some text, when open, it shows the HTML
* block supplied by the author in its full beauty.
*
* @class mw.mmv.ui.Permission
* @extends mw.mmv.ui.Element
* @class Permission
* @extends UiElement
* @constructor
* @param {jQuery} $container
* @param {mw.mmv.ui.MetadataPanelScroller} scroller
* @param {MetadataPanelScroller} scroller
*/
function Permission( $container, scroller ) {
var permission = this;
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils - */
this.htmlUtils = new HtmlUtils();
/**
* Contains everything else.
@ -111,11 +115,11 @@
/**
* Panel scroller from the metadata panel object.
*
* @property {mw.mmv.ui.MetadataPanelScroller}
* @property {MetadataPanelScroller}
*/
this.scroller = scroller;
}
OO.inheritClass( Permission, mw.mmv.ui.Element );
OO.inheritClass( Permission, UiElement );
P = Permission.prototype;
/**
@ -175,5 +179,5 @@
return this.$box.hasClass( 'full-size' );
};
mw.mmv.ui.Permission = Permission;
module.exports = Permission;
}() );

12
resources/mmv/ui/mmv.ui.progressBar.js
View file

@ -15,22 +15,24 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const UiElement = require( './mmv.ui.js' );
( function () {
var PBP;
/**
* A progress bar for the loading of the image.
*
* @class mw.mmv.ui.ProgressBar
* @extends mw.mmv.ui.Element
* @class ProgressBar
* @extends UiElement
* @constructor
* @param {jQuery} $container
*/
function ProgressBar( $container ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
this.init();
}
OO.inheritClass( ProgressBar, mw.mmv.ui.Element );
OO.inheritClass( ProgressBar, UiElement );
PBP = ProgressBar.prototype;
/**
@ -93,5 +95,5 @@
this.$percent.stop().css( { width: percent + '%' } );
};
mw.mmv.ui.ProgressBar = ProgressBar;
module.exports = ProgressBar;
}() );

35
resources/mmv/ui/mmv.ui.reuse.dialog.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Dialog = require( './mmv.ui.dialog.js' );
( function () {
// Shortcut for prototype later
var DP;
@ -22,17 +24,17 @@
/**
* Represents the file reuse dialog and the link to open it.
*
* @class mw.mmv.ui.reuse.Dialog
* @extends mw.mmv.ui.Element
* @class ReuseDialog
* @extends Dialog
* @param {jQuery} $container the element to which the dialog will be appended
* @param {jQuery} $openButton the button which opens the dialog. Only used for positioning.
* @param {mw.mmv.Config} config
*/
function Dialog( $container, $openButton, config ) {
mw.mmv.ui.Dialog.call( this, $container, $openButton, config );
function ReuseDialog( $container, $openButton, config ) {
Dialog.call( this, $container, $openButton, config );
/**
* @property {Object.<string, mw.mmv.ui.Element>} tabs List of tab ui objects.
* @property {Object.<string, UiElement>} tabs List of tab ui objects.
*/
this.tabs = null;
@ -48,8 +50,8 @@
this.eventPrefix = 'use-this-file';
}
OO.inheritClass( Dialog, mw.mmv.ui.Dialog );
DP = Dialog.prototype;
OO.inheritClass( ReuseDialog, Dialog );
DP = ReuseDialog.prototype;
// FIXME this should happen outside the dialog and the tabs, but we need to improve
DP.initTabs = function () {
@ -69,9 +71,10 @@
} );
this.reuseTabs.$element.appendTo( this.$dialog );
const { Embed, Share } = require( 'mmv.ui.reuse.shareembed' );
this.tabs = {
share: new mw.mmv.ui.reuse.Share( this.$dialog ),
embed: new mw.mmv.ui.reuse.Embed( this.$dialog )
share: new Share( this.$dialog ),
embed: new Embed( this.$dialog )
};
this.ooTabs = {
@ -115,7 +118,7 @@
this.initTabs();
}
mw.mmv.ui.Dialog.prototype.toggleDialog.call( this );
Dialog.prototype.toggleDialog.call( this );
};
/**
@ -184,7 +187,7 @@
DP.unattach = function () {
var tab;
mw.mmv.ui.Dialog.prototype.unattach.call( this );
Dialog.prototype.unattach.call( this );
if ( this.reuseTabs ) {
this.reuseTabs.off( 'select' );
@ -198,7 +201,7 @@
};
/**
* Sets data needed by contaned tabs and makes dialog launch link visible.
* Sets data needed by contained tabs and makes dialog launch link visible.
*
* @param {mw.mmv.model.Image} image
* @param {mw.mmv.model.Repo} repo
@ -225,7 +228,7 @@
DP.empty = function () {
var tab;
mw.mmv.ui.Dialog.prototype.empty.call( this );
Dialog.prototype.empty.call( this );
for ( tab in this.tabs ) {
this.tabs[ tab ].empty();
@ -240,7 +243,7 @@
* Opens a dialog with information about file reuse.
*/
DP.openDialog = function () {
mw.mmv.ui.Dialog.prototype.openDialog.call( this );
Dialog.prototype.openDialog.call( this );
// move warnings after the tabs
this.$warning.insertAfter( this.reuseTabs.$element );
@ -258,10 +261,10 @@
* Closes the reuse dialog.
*/
DP.closeDialog = function () {
mw.mmv.ui.Dialog.prototype.closeDialog.call( this );
Dialog.prototype.closeDialog.call( this );
$( document ).trigger( 'mmv-reuse-closed' );
};
mw.mmv.ui.reuse.Dialog = Dialog;
module.exports = ReuseDialog;
}() );

12
resources/mmv/ui/mmv.ui.stripeButtons.js
View file

@ -15,6 +15,8 @@
* along with MediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const UiElement = require( './mmv.ui.js' );
( function () {
var SBP;
@ -22,14 +24,14 @@
* Class for buttons which are placed on the metadata stripe (the always visible part of the
* metadata panel).
*
* @class mw.mmv.ui.StripeButtons
* @extends mw.mmv.ui.Element
* @class StripeButtons
* @extends UiElement
* @constructor
* @param {jQuery} $container the title block (.mw-mmv-title-contain) which wraps the buttons and all
* other title elements
*/
function StripeButtons( $container ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
this.$buttonContainer = $( '<div>' )
.addClass( 'mw-mmv-stripe-button-container' )
@ -44,7 +46,7 @@
this.initDescriptionPageButton();
}
OO.inheritClass( StripeButtons, mw.mmv.ui.Element );
OO.inheritClass( StripeButtons, UiElement );
SBP = StripeButtons.prototype;
/**
@ -140,5 +142,5 @@
.removeClass( 'mw-mmv-repo-button-commons' );
};
mw.mmv.ui.StripeButtons = StripeButtons;
module.exports = StripeButtons;
}() );

17
resources/mmv/ui/mmv.ui.truncatableTextField.js
View file

@ -15,6 +15,9 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const { HtmlUtils } = require( 'mmv.bootstrap' );
const UiElement = require( './mmv.ui.js' );
( function () {
var TTFP;
@ -39,8 +42,8 @@
*
* repaint() should be called after layout changes to keep the truncation accurate.
*
* @class mw.mmv.ui.TruncatableTextField
* @extends mw.mmv.ui.Element
* @class TruncatableTextField
* @extends UiElement
* @constructor
* @param {jQuery} $container The container for the element.
* @param {jQuery} $element The element where we should put the text.
@ -50,7 +53,7 @@
* the text fit.
*/
function TruncatableTextField( $container, $element, options ) {
mw.mmv.ui.Element.call( this, $container );
UiElement.call( this, $container );
/** @property {jQuery} $element The DOM element that holds text for this element. */
this.$element = $element;
@ -70,13 +73,13 @@
/** @property {string} truncatedTitle title attribute to show when the text is not truncated */
this.truncatedTitle = null;
/** @property {mw.mmv.HtmlUtils} htmlUtils Our HTML utility instance. */
this.htmlUtils = new mw.mmv.HtmlUtils();
/** @property {HtmlUtils} htmlUtils Our HTML utility instance. */
this.htmlUtils = new HtmlUtils();
this.init();
}
OO.inheritClass( TruncatableTextField, mw.mmv.ui.Element );
OO.inheritClass( TruncatableTextField, UiElement );
TTFP = TruncatableTextField.prototype;
@ -239,5 +242,5 @@
} );
};
mw.mmv.ui.TruncatableTextField = TruncatableTextField;
module.exports = TruncatableTextField;
}() );

17
resources/mmv/ui/mmv.ui.viewingOptions.js
View file

@ -15,6 +15,8 @@
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
const Dialog = require( './mmv.ui.dialog.js' );
( function () {
// Shortcut for prototype later
var ODP;
@ -22,14 +24,14 @@
/**
* Represents the viewing options dialog and the link to open it.
*
* @class mw.mmv.ui.OptionsDialog
* @extends mw.mmv.ui.Dialog
* @class OptionsDialog
* @extends Dialog
* @param {jQuery} $container the element to which the dialog will be appended
* @param {jQuery} $openButton the button which opens the dialog. Only used for positioning.
* @param {mw.mmv.Config} config
*/
function OptionsDialog( $container, $openButton, config ) {
mw.mmv.ui.Dialog.call( this, $container, $openButton, config );
Dialog.call( this, $container, $openButton, config );
this.$dialog.addClass( 'mw-mmv-options-dialog' );
this.eventPrefix = 'options';
@ -37,7 +39,7 @@
this.initPanel();
}
OO.inheritClass( OptionsDialog, mw.mmv.ui.Dialog );
OO.inheritClass( OptionsDialog, Dialog );
ODP = OptionsDialog.prototype;
ODP.attach = function () {
@ -159,7 +161,7 @@
this.$dialog.addClass( 'mw-mmv-enable-div-shown' );
}
mw.mmv.ui.Dialog.prototype.openDialog.call( this );
Dialog.prototype.openDialog.call( this );
$( document ).trigger( 'mmv-options-opened' );
};
@ -177,7 +179,7 @@
ODP.closeDialog = function ( e ) {
var wasConfirmation = this.$dialog.is( '.mw-mmv-disable-confirmation-shown' ) || this.$dialog.is( '.mw-mmv-enable-confirmation-shown' );
mw.mmv.ui.Dialog.prototype.closeDialog.call( this );
Dialog.prototype.closeDialog.call( this );
$( document ).trigger( 'mmv-options-closed' );
this.hideDivs();
@ -395,5 +397,6 @@
return this.config.isMediaViewerEnabledOnClick();
};
mw.mmv.ui.OptionsDialog = OptionsDialog;
module.exports = OptionsDialog;
module.exports = OptionsDialog;
}() );