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

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