resources/src/mediawiki.Upload.BookletLayout/mw.widgets.StashedFileWidget.js

   1 /*!
   2  * MediaWiki Widgets - StashedFileWidget class.
   3  *
   4  * @copyright 2011-2016 MediaWiki Widgets Team and others; see mediawiki.widgets/AUTHORS.txt
   5  * @license The MIT License (MIT); see mediawiki.widgets/LICENSE.txt
   6  */
   7 ( function () {
   8
   9         /**
  10          * @classdesc Accepts a stashed file and displays the information for purposes of
  11          * publishing the file at the behest of the user.
  12          *
  13          * Note that this widget will not finish an upload for you. Use {@link mw.Upload}
  14          * and {@link mw.Upload#setFilekey}, then {@link mw.Upload#finishStashUpload} to accomplish
  15          * that.
  16          *
  17          * @example
  18          * const widget = new mw.widgets.StashedFileWidget( {
  19          *   filekey: '12r9e4rugeec.ddtmmp.1.jpg',
  20          * } );
  21          *
  22          * widget.getValue(); // '12r9e4rugeec.ddtmmp.1.jpg'
  23          * widget.setValue( '12r9epfbnskk.knfiy7.1.jpg' );
  24          * widget.getValue(); // '12r9epfbnskk.knfiy7.1.jpg'
  25          *
  26          * @class mw.widgets.StashedFileWidget
  27          * @extends OO.ui.Widget
  28          * @constructor
  29          * @param {Object} config Configuration options
  30          * @param {string} [config.filekey] The filekey of the stashed file.
  31          * @param {Object} [config.api] API to use for thumbnails.
  32          */
  33         mw.widgets.StashedFileWidget = function MWWStashedFileWidget( config ) {
  34                 if ( !config.api ) {
  35                         config.api = new mw.Api();
  36                 }
  37
  38                 // Parent constructor
  39                 mw.widgets.StashedFileWidget.super.call( this, config );
  40
  41                 // Mixin constructors
  42                 OO.ui.mixin.IconElement.call( this, config );
  43                 OO.ui.mixin.LabelElement.call( this, config );
  44                 OO.ui.mixin.PendingElement.call( this, config );
  45
  46                 // Properties
  47                 this.api = config.api;
  48                 this.$info = $( '<span>' );
  49                 this.setValue( config.filekey );
  50                 this.$label.addClass( 'mw-widgets-stashedFileWidget-label' );
  51                 this.$info
  52                         .addClass( 'mw-widgets-stashedFileWidget-info' )
  53                         .append( this.$icon, this.$label );
  54
  55                 this.$thumbnail = $( '<div>' ).addClass( 'mw-widgets-stashedFileWidget-thumbnail' );
  56                 this.setPendingElement( this.$thumbnail );
  57
  58                 this.$thumbContain = $( '<div>' )
  59                         .addClass( 'mw-widgets-stashedFileWidget-thumbnail-container' )
  60                         .append( this.$thumbnail, this.$info );
  61
  62                 this.$element
  63                         .addClass( 'mw-widgets-stashedFileWidget' )
  64                         .append( this.$thumbContain );
  65
  66                 this.updateUI();
  67         };
  68
  69         OO.inheritClass( mw.widgets.StashedFileWidget, OO.ui.Widget );
  70         OO.mixinClass( mw.widgets.StashedFileWidget, OO.ui.mixin.IconElement );
  71         OO.mixinClass( mw.widgets.StashedFileWidget, OO.ui.mixin.LabelElement );
  72         OO.mixinClass( mw.widgets.StashedFileWidget, OO.ui.mixin.PendingElement );
  73
  74         /**
  75          * Get the current filekey.
  76          *
  77          * @return {string|null}
  78          */
  79         mw.widgets.StashedFileWidget.prototype.getValue = function () {
  80                 return this.filekey;
  81         };
  82
  83         /**
  84          * Set the filekey.
  85          *
  86          * @param {string|null} filekey
  87          */
  88         mw.widgets.StashedFileWidget.prototype.setValue = function ( filekey ) {
  89                 if ( filekey !== this.filekey ) {
  90                         this.filekey = filekey;
  91                         this.updateUI();
  92                         this.emit( 'change', this.filekey );
  93                 }
  94         };
  95
  96         mw.widgets.StashedFileWidget.prototype.updateUI = function () {
  97                 let $label, $filetype;
  98
  99                 if ( this.filekey ) {
 100                         this.$element.removeClass( 'mw-widgets-stashedFileWidget-empty' );
 101                         $label = $( [] );
 102                         $filetype = $( '<span>' )
 103                                 .addClass( 'mw-widgets-stashedFileWidget-fileType' );
 104
 105                         $label = $label.add(
 106                                 $( '<span>' )
 107                                         .addClass( 'mw-widgets-stashedFileWidget-filekey' )
 108                                         .text( this.filekey )
 109                         ).add( $filetype );
 110
 111                         this.setLabel( $label );
 112
 113                         this.pushPending();
 114                         this.loadAndGetImageUrl().done( ( url, mime ) => {
 115                                 this.$thumbnail.css( 'background-image', 'url( ' + url + ' )' );
 116                                 if ( mime ) {
 117                                         $filetype.text( mime );
 118                                         this.setLabel( $label );
 119                                 }
 120                         } ).fail( () => {
 121                                 this.$thumbnail.append(
 122                                         new OO.ui.IconWidget( {
 123                                                 icon: 'attachment',
 124                                                 classes: [ 'mw-widgets-stashedFileWidget-noThumbnail-icon' ]
 125                                         } ).$element
 126                                 );
 127                         } ).always( () => {
 128                                 this.popPending();
 129                         } );
 130                 } else {
 131                         this.$element.addClass( 'mw-widgets-stashedFileWidget-empty' );
 132                         this.setLabel( '' );
 133                 }
 134         };
 135
 136         mw.widgets.StashedFileWidget.prototype.loadAndGetImageUrl = function () {
 137                 const filekey = this.filekey;
 138
 139                 if ( filekey ) {
 140                         return this.api.get( {
 141                                 action: 'query',
 142                                 prop: 'stashimageinfo',
 143                                 siifilekey: filekey,
 144                                 siiprop: [ 'size', 'url', 'mime' ],
 145                                 siiurlwidth: 220
 146                         } ).then( ( data ) => {
 147                                 const sii = data.query.stashimageinfo[ 0 ];
 148
 149                                 return $.Deferred().resolve( sii.thumburl, sii.mime );
 150                         } );
 151                 }
 152
 153                 return $.Deferred().reject( 'No filekey' );
 154         };
 155 }() );