resources/src/mediawiki.page.gallery.slideshow.js

   1 /*!
   2  * mw.GallerySlideshow: Interface controls for the slideshow gallery
   3  */
   4 ( function () {
   5         /**
   6          * mw.GallerySlideshow encapsulates the user interface of the slideshow
   7          * galleries. An object is instantiated for each `.mw-gallery-slideshow`
   8          * element.
   9          *
  10          * @class mw.GallerySlideshow
  11          * @uses mw.Title
  12          * @uses mw.Api
  13          * @param {jQuery} gallery The `<ul>` element of the gallery.
  14          */
  15         mw.GallerySlideshow = function ( gallery ) {
  16                 // Properties
  17                 this.$gallery = $( gallery );
  18                 this.$galleryCaption = this.$gallery.find( '.gallerycaption' );
  19                 this.$galleryBox = this.$gallery.find( '.gallerybox' );
  20                 this.$currentImage = null;
  21                 this.imageInfoCache = {};
  22
  23                 // Initialize
  24                 this.drawCarousel();
  25                 this.setSizeRequirement();
  26                 this.toggleThumbnails( !!this.$gallery.attr( 'data-showthumbnails' ) );
  27                 this.showCurrentImage( true );
  28
  29                 // Events
  30                 $( window ).on(
  31                         'resize',
  32                         OO.ui.debounce(
  33                                 this.setSizeRequirement.bind( this ),
  34                                 100
  35                         )
  36                 );
  37
  38                 // Disable thumbnails' link, instead show the image in the carousel
  39                 this.$galleryBox.on( 'click', function ( e ) {
  40                         this.$currentImage = $( e.currentTarget );
  41                         this.showCurrentImage();
  42                         return false;
  43                 }.bind( this ) );
  44         };
  45
  46         /* Properties */
  47         /**
  48          * @property {jQuery} $gallery The `<ul>` element of the gallery.
  49          */
  50
  51         /**
  52          * @property {jQuery} $galleryCaption The `<li>` that has the gallery caption.
  53          */
  54
  55         /**
  56          * @property {jQuery} $galleryBox Selection of `<li>` elements that have thumbnails.
  57          */
  58
  59         /**
  60          * @property {jQuery} $carousel The `<li>` elements that contains the carousel.
  61          */
  62
  63         /**
  64          * @property {jQuery} $interface The `<div>` elements that contains the interface buttons.
  65          */
  66
  67         /**
  68          * @property {jQuery} $img The `<img>` element that'll display the current image.
  69          */
  70
  71         /**
  72          * @property {jQuery} $imgCaption The `<p>` element that holds the image caption.
  73          */
  74
  75         /**
  76          * @property {jQuery} $imgContainer The `<div>` element that contains the image.
  77          */
  78
  79         /**
  80          * @property {jQuery} $currentImage The `<li>` element of the current image.
  81          */
  82
  83         /**
  84          * @property {Object} imageInfoCache A key value pair of thumbnail URLs and image info.
  85          */
  86
  87         /**
  88          * @property {number} imageWidth Width of the image based on viewport size
  89          */
  90
  91         /**
  92          * @property {number} imageHeight Height of the image based on viewport size
  93          *   the URLs in the required size.
  94          */
  95
  96         /* Setup */
  97         OO.initClass( mw.GallerySlideshow );
  98
  99         /* Methods */
 100         /**
 101          * Draws the carousel and the interface around it.
 102          */
 103         mw.GallerySlideshow.prototype.drawCarousel = function () {
 104                 var nextButton, prevButton, toggleButton, interfaceElements, carouselStack;
 105
 106                 this.$carousel = $( '<li>' ).addClass( 'gallerycarousel' );
 107
 108                 // Buttons for the interface
 109                 prevButton = new OO.ui.ButtonWidget( {
 110                         framed: false,
 111                         icon: 'previous'
 112                 } ).connect( this, { click: 'prevImage' } );
 113
 114                 nextButton = new OO.ui.ButtonWidget( {
 115                         framed: false,
 116                         icon: 'next'
 117                 } ).connect( this, { click: 'nextImage' } );
 118
 119                 toggleButton = new OO.ui.ButtonWidget( {
 120                         framed: false,
 121                         icon: 'imageGallery',
 122                         title: mw.msg( 'gallery-slideshow-toggle' )
 123                 } ).connect( this, { click: 'toggleThumbnails' } );
 124
 125                 interfaceElements = new OO.ui.PanelLayout( {
 126                         expanded: false,
 127                         classes: [ 'mw-gallery-slideshow-buttons' ],
 128                         $content: $( '<div>' ).append(
 129                                 prevButton.$element,
 130                                 toggleButton.$element,
 131                                 nextButton.$element
 132                         )
 133                 } );
 134                 this.$interface = interfaceElements.$element;
 135
 136                 // Containers for the current image, caption etc.
 137                 this.$imgCaption = $( '<p>' ).attr( 'class', 'mw-gallery-slideshow-caption' );
 138                 this.$imgContainer = $( '<div>' )
 139                         .attr( 'class', 'mw-gallery-slideshow-img-container' );
 140
 141                 carouselStack = new OO.ui.StackLayout( {
 142                         continuous: true,
 143                         expanded: false,
 144                         items: [
 145                                 interfaceElements,
 146                                 new OO.ui.PanelLayout( {
 147                                         expanded: false,
 148                                         $content: this.$imgContainer
 149                                 } ),
 150                                 new OO.ui.PanelLayout( {
 151                                         expanded: false,
 152                                         $content: this.$imgCaption
 153                                 } )
 154                         ]
 155                 } );
 156                 this.$carousel.append( carouselStack.$element );
 157
 158                 // Append below the caption or as the first element in the gallery
 159                 if ( this.$galleryCaption.length !== 0 ) {
 160                         this.$galleryCaption.after( this.$carousel );
 161                 } else {
 162                         this.$gallery.prepend( this.$carousel );
 163                 }
 164         };
 165
 166         /**
 167          * Sets the {@link #imageWidth} and {@link #imageHeight} properties
 168          * based on the size of the window. Also flushes the
 169          * {@link #imageInfoCache} as we'll now need URLs for a different
 170          * size.
 171          */
 172         mw.GallerySlideshow.prototype.setSizeRequirement = function () {
 173                 var w = this.$imgContainer.width(),
 174                         h = Math.min( $( window ).height() * ( 3 / 4 ), this.$imgContainer.width() ) - this.getChromeHeight();
 175
 176                 // Only update and flush the cache if the size changed
 177                 if ( w !== this.imageWidth || h !== this.imageHeight ) {
 178                         this.imageWidth = w;
 179                         this.imageHeight = h;
 180                         this.imageInfoCache = {};
 181                         this.setImageSize();
 182                 }
 183         };
 184
 185         /**
 186          * Gets the height of the interface elements and the
 187          * gallery's caption.
 188          *
 189          * @return {number} Height
 190          */
 191         mw.GallerySlideshow.prototype.getChromeHeight = function () {
 192                 return this.$interface.outerHeight() + ( this.$galleryCaption.outerHeight() || 0 );
 193         };
 194
 195         /**
 196          * Sets the height and width of {@link #$img} based on the
 197          * proportion of the image and the values generated by
 198          * {@link #setSizeRequirement}.
 199          */
 200         mw.GallerySlideshow.prototype.setImageSize = function () {
 201                 if ( this.$img === undefined || this.$thumbnail === undefined ) {
 202                         return;
 203                 }
 204
 205                 // Reset height and width
 206                 this.$img
 207                         .removeAttr( 'width' )
 208                         .removeAttr( 'height' );
 209
 210                 // Stretch image to take up the required size
 211                 this.$img.attr( 'height', ( this.imageHeight - this.$imgCaption.outerHeight() ) + 'px' );
 212
 213                 // Make the image smaller in case the current image
 214                 // size is larger than the original file size.
 215                 this.getImageInfo( this.$thumbnail ).then( function ( info ) {
 216                         // NOTE: There will be a jump when resizing the window
 217                         // because the cache is cleared and this a new network request.
 218                         if (
 219                                 info.thumbwidth < this.$img.width() ||
 220                                 info.thumbheight < this.$img.height()
 221                         ) {
 222                                 this.$img.attr( {
 223                                         width: info.thumbwidth + 'px',
 224                                         height: info.thumbheight + 'px'
 225                                 } );
 226                         }
 227                 }.bind( this ) );
 228         };
 229
 230         /**
 231          * Displays the image set as {@link #$currentImage} in the carousel.
 232          *
 233          * @param {boolean} init Image being show during gallery init (i.e. first image)
 234          */
 235         mw.GallerySlideshow.prototype.showCurrentImage = function ( init ) {
 236                 var $thumbnail, $imgLink,
 237                         $imageLi = this.getCurrentImage(),
 238                         $caption = $imageLi.find( '.gallerytext' );
 239
 240                 // The order of the following is important for size calculations
 241                 // 1. Highlight current thumbnail
 242                 this.$gallery
 243                         .find( '.gallerybox.slideshow-current' )
 244                         .removeClass( 'slideshow-current' );
 245                 $imageLi.addClass( 'slideshow-current' );
 246
 247                 this.$thumbnail = $imageLi.find( 'img' );
 248                 if ( this.$thumbnail.length ) {
 249                         // 2. Create and show thumbnail
 250                         this.$img = $( '<img>' ).attr( {
 251                                 src: this.$thumbnail.attr( 'src' ),
 252                                 alt: this.$thumbnail.attr( 'alt' )
 253                         } );
 254                         // 'image' class required for detection by MultimediaViewer
 255                         $imgLink = $( '<a>' ).addClass( 'image' )
 256                                 .attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) )
 257                                 .append( this.$img );
 258
 259                         this.$imgContainer.empty().append( $imgLink );
 260                 } else {
 261                         // 2b. No image found (e.g. file doesn't exist)
 262                         this.$imgContainer.text( $imageLi.find( '.thumb' ).text() );
 263                 }
 264
 265                 // 3. Copy caption
 266                 this.$imgCaption
 267                         .empty()
 268                         .append( $caption.clone() );
 269
 270                 if ( !this.$thumbnail.length ) {
 271                         return;
 272                 }
 273
 274                 // 4. Stretch thumbnail to correct size
 275                 this.setImageSize();
 276
 277                 $thumbnail = this.$thumbnail;
 278                 // 5. Load image at the required size
 279                 this.loadImage( this.$thumbnail ).done( function ( info ) {
 280                         // Show this image to the user only if its still the current one
 281                         if ( this.$thumbnail.attr( 'src' ) === $thumbnail.attr( 'src' ) ) {
 282                                 this.$img.attr( 'src', info.thumburl );
 283                                 this.setImageSize();
 284                                 // Don't fire hook twice during init
 285                                 if ( !init ) {
 286                                         mw.hook( 'wikipage.content' ).fire( this.$imgContainer );
 287                                 }
 288
 289                                 // Pre-fetch the next image
 290                                 this.loadImage( this.getNextImage().find( 'img' ) );
 291                         }
 292                 }.bind( this ) ).fail( function () {
 293                         // Image didn't load
 294                         var title = mw.Title.newFromImg( this.$img );
 295                         this.$imgContainer.text( title ? title.getMainText() : '' );
 296                 }.bind( this ) );
 297         };
 298
 299         /**
 300          * Loads the full image given the `<img>` element of the thumbnail.
 301          *
 302          * @param {jQuery} $img
 303          * @return {jQuery.Promise} Resolves with the images URL and original
 304          *  element once the image has loaded.
 305          */
 306         mw.GallerySlideshow.prototype.loadImage = function ( $img ) {
 307                 return this.getImageInfo( $img ).then( function ( info ) {
 308                         var img, d = $.Deferred();
 309                         img = new Image();
 310                         img.src = info.thumburl;
 311                         img.onload = function () {
 312                                 d.resolve( info );
 313                         };
 314                         img.onerror = function () {
 315                                 d.reject();
 316                         };
 317                         return d.promise();
 318                 } );
 319         };
 320
 321         /**
 322          * Gets the image's info given an `<img>` element.
 323          *
 324          * @param {Object} $img
 325          * @return {jQuery.Promise} Resolves with the image's info.
 326          */
 327         mw.GallerySlideshow.prototype.getImageInfo = function ( $img ) {
 328                 var api, title, params,
 329                         imageSrc = $img.attr( 'src' );
 330
 331                 // Reject promise if there is no thumbnail image
 332                 if ( $img[ 0 ] === undefined ) {
 333                         return $.Deferred().reject();
 334                 }
 335
 336                 if ( this.imageInfoCache[ imageSrc ] === undefined ) {
 337                         api = new mw.Api();
 338                         // TODO: This supports only gallery of images
 339                         title = mw.Title.newFromImg( $img );
 340                         params = {
 341                                 action: 'query',
 342                                 formatversion: 2,
 343                                 titles: title.toString(),
 344                                 prop: 'imageinfo',
 345                                 iiprop: 'url'
 346                         };
 347
 348                         // Check which dimension we need to request, based on
 349                         // image and container proportions.
 350                         if ( this.getDimensionToRequest( $img ) === 'height' ) {
 351                                 params.iiurlheight = this.imageHeight;
 352                         } else {
 353                                 params.iiurlwidth = this.imageWidth;
 354                         }
 355
 356                         this.imageInfoCache[ imageSrc ] = api.get( params ).then( function ( data ) {
 357                                 if ( OO.getProp( data, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
 358                                         return data.query.pages[ 0 ].imageinfo[ 0 ];
 359                                 } else {
 360                                         return $.Deferred().reject();
 361                                 }
 362                         } );
 363                 }
 364
 365                 return this.imageInfoCache[ imageSrc ];
 366         };
 367
 368         /**
 369          * Given an image, the method checks whether to use the height
 370          * or the width to request the larger image.
 371          *
 372          * @param {jQuery} $img
 373          * @return {string}
 374          */
 375         mw.GallerySlideshow.prototype.getDimensionToRequest = function ( $img ) {
 376                 var ratio = $img.width() / $img.height();
 377
 378                 if ( this.imageHeight * ratio <= this.imageWidth ) {
 379                         return 'height';
 380                 } else {
 381                         return 'width';
 382                 }
 383         };
 384
 385         /**
 386          * Toggles visibility of the thumbnails.
 387          *
 388          * @param {boolean} show Optional argument to control the state
 389          */
 390         mw.GallerySlideshow.prototype.toggleThumbnails = function ( show ) {
 391                 this.$galleryBox.toggle( show );
 392                 this.$carousel.toggleClass( 'mw-gallery-slideshow-thumbnails-toggled', show );
 393         };
 394
 395         /**
 396          * Getter method for {@link #$currentImage}
 397          *
 398          * @return {jQuery}
 399          */
 400         mw.GallerySlideshow.prototype.getCurrentImage = function () {
 401                 this.$currentImage = this.$currentImage || this.$galleryBox.eq( 0 );
 402                 return this.$currentImage;
 403         };
 404
 405         /**
 406          * Gets the image after the current one. Returns the first image if
 407          * the current one is the last.
 408          *
 409          * @return {jQuery}
 410          */
 411         mw.GallerySlideshow.prototype.getNextImage = function () {
 412                 // Not the last image in the gallery
 413                 if ( this.$currentImage.next( '.gallerybox' )[ 0 ] !== undefined ) {
 414                         return this.$currentImage.next( '.gallerybox' );
 415                 } else {
 416                         return this.$galleryBox.eq( 0 );
 417                 }
 418         };
 419
 420         /**
 421          * Gets the image before the current one. Returns the last image if
 422          * the current one is the first.
 423          *
 424          * @return {jQuery}
 425          */
 426         mw.GallerySlideshow.prototype.getPrevImage = function () {
 427                 // Not the first image in the gallery
 428                 if ( this.$currentImage.prev( '.gallerybox' )[ 0 ] !== undefined ) {
 429                         return this.$currentImage.prev( '.gallerybox' );
 430                 } else {
 431                         return this.$galleryBox.last();
 432                 }
 433         };
 434
 435         /**
 436          * Sets the {@link #$currentImage} to the next one and shows
 437          * it in the carousel
 438          */
 439         mw.GallerySlideshow.prototype.nextImage = function () {
 440                 this.$currentImage = this.getNextImage();
 441                 this.showCurrentImage();
 442         };
 443
 444         /**
 445          * Sets the {@link #$currentImage} to the previous one and shows
 446          * it in the carousel
 447          */
 448         mw.GallerySlideshow.prototype.prevImage = function () {
 449                 this.$currentImage = this.getPrevImage();
 450                 this.showCurrentImage();
 451         };
 452
 453         // Bootstrap all slideshow galleries
 454         mw.hook( 'wikipage.content' ).add( function ( $content ) {
 455                 $content.find( '.mw-gallery-slideshow' ).each( function () {
 456                         // eslint-disable-next-line no-new
 457                         new mw.GallerySlideshow( this );
 458                 } );
 459         } );
 460 }() );