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

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