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