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 nextButton, prevButton, toggleButton, interfaceElements, carouselStack;
 109
 110                 this.$carousel = $( '<li>' ).addClass( 'gallerycarousel' );
 111
 112                 // Buttons for the interface
 113                 prevButton = new OO.ui.ButtonWidget( {
 114                         framed: false,
 115                         icon: 'previous'
 116                 } ).connect( this, { click: 'prevImage' } );
 117
 118                 nextButton = new OO.ui.ButtonWidget( {
 119                         framed: false,
 120                         icon: 'next'
 121                 } ).connect( this, { click: 'nextImage' } );
 122
 123                 toggleButton = new OO.ui.ButtonWidget( {
 124                         framed: false,
 125                         icon: 'imageGallery',
 126                         title: mw.msg( 'gallery-slideshow-toggle' )
 127                 } ).connect( this, { click: 'toggleThumbnails' } );
 128
 129                 interfaceElements = new OO.ui.PanelLayout( {
 130                         expanded: false,
 131                         classes: [ 'mw-gallery-slideshow-buttons' ],
 132                         $content: $( '<div>' ).append(
 133                                 prevButton.$element,
 134                                 toggleButton.$element,
 135                                 nextButton.$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         mw.GallerySlideshow.prototype.setImageSize = function () {
 208                 if ( this.$img === undefined || this.$thumbnail === undefined ) {
 209                         return;
 210                 }
 211
 212                 // Reset height and width
 213                 this.$img
 214                         .removeAttr( 'width' )
 215                         .removeAttr( 'height' );
 216
 217                 // Stretch image to take up the required size
 218                 this.$img.attr( 'height', ( this.imageHeight - this.$imgCaption.outerHeight() ) + 'px' );
 219
 220                 // Make the image smaller in case the current image
 221                 // size is larger than the original file size.
 222                 this.getImageInfo( this.$thumbnail ).done( function ( info ) {
 223                         // NOTE: There will be a jump when resizing the window
 224                         // because the cache is cleared and this a new network request.
 225                         if (
 226                                 info.thumbwidth < this.$img.width() ||
 227                                 info.thumbheight < this.$img.height()
 228                         ) {
 229                                 this.$img.attr( {
 230                                         width: info.thumbwidth + 'px',
 231                                         height: info.thumbheight + 'px'
 232                                 } );
 233                         }
 234                 }.bind( this ) );
 235         };
 236
 237         /**
 238          * Displays the image set as {@link #$currentImage} in the carousel.
 239          */
 240         mw.GallerySlideshow.prototype.showCurrentImage = function () {
 241                 var $thumbnail,
 242                         $imageLi = this.getCurrentImage(),
 243                         $caption = $imageLi.find( '.gallerytext' );
 244
 245                 // The order of the following is important for size calculations
 246                 // 1. Highlight current thumbnail
 247                 this.$gallery
 248                         .find( '.gallerybox.slideshow-current' )
 249                         .removeClass( 'slideshow-current' );
 250                 $imageLi.addClass( 'slideshow-current' );
 251
 252                 // 2. Show thumbnail
 253                 this.$thumbnail = $imageLi.find( 'img' );
 254                 this.$img.attr( {
 255                         src: this.$thumbnail.attr( 'src' ),
 256                         alt: this.$thumbnail.attr( 'alt' )
 257                 } );
 258                 this.$imgLink.attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
 259
 260                 // 3. Copy caption
 261                 this.$imgCaption
 262                         .empty()
 263                         .append( $caption.clone() );
 264
 265                 // 4. Stretch thumbnail to correct size
 266                 this.setImageSize();
 267
 268                 $thumbnail = this.$thumbnail;
 269                 // 5. Load image at the required size
 270                 this.loadImage( this.$thumbnail ).done( function ( info ) {
 271                         // Show this image to the user only if its still the current one
 272                         if ( this.$thumbnail.attr( 'src' ) === $thumbnail.attr( 'src' ) ) {
 273                                 this.$img.attr( 'src', info.thumburl );
 274                                 this.setImageSize();
 275
 276                                 // Pre-fetch the next image
 277                                 this.loadImage( this.getNextImage().find( 'img' ) );
 278                         }
 279                 }.bind( this ) );
 280         };
 281
 282         /**
 283          * Loads the full image given the `<img>` element of the thumbnail.
 284          *
 285          * @param {jQuery} $img
 286          * @return {jQuery.Promise} Resolves with the images URL and original
 287          *  element once the image has loaded.
 288          */
 289         mw.GallerySlideshow.prototype.loadImage = function ( $img ) {
 290                 var img, d = $.Deferred();
 291
 292                 this.getImageInfo( $img ).done( function ( info ) {
 293                         img = new Image();
 294                         img.src = info.thumburl;
 295                         img.onload = function () {
 296                                 d.resolve( info );
 297                         };
 298                         img.onerror = function () {
 299                                 d.reject();
 300                         };
 301                 } ).fail( function () {
 302                         d.reject();
 303                 } );
 304
 305                 return d.promise();
 306         };
 307
 308         /**
 309          * Gets the image's info given an `<img>` element.
 310          *
 311          * @param {Object} $img
 312          * @return {jQuery.Promise} Resolves with the image's info.
 313          */
 314         mw.GallerySlideshow.prototype.getImageInfo = function ( $img ) {
 315                 var api, title, params,
 316                         imageSrc = $img.attr( 'src' );
 317
 318                 // Reject promise if there is no thumbnail image
 319                 if ( $img[ 0 ] === undefined ) {
 320                         return $.Deferred().reject();
 321                 }
 322
 323                 if ( this.imageInfoCache[ imageSrc ] === undefined ) {
 324                         api = new mw.Api();
 325                         // TODO: This supports only gallery of images
 326                         title = mw.Title.newFromImg( $img );
 327                         params = {
 328                                 action: 'query',
 329                                 formatversion: 2,
 330                                 titles: title.toString(),
 331                                 prop: 'imageinfo',
 332                                 iiprop: 'url'
 333                         };
 334
 335                         // Check which dimension we need to request, based on
 336                         // image and container proportions.
 337                         if ( this.getDimensionToRequest( $img ) === 'height' ) {
 338                                 params.iiurlheight = this.imageHeight;
 339                         } else {
 340                                 params.iiurlwidth = this.imageWidth;
 341                         }
 342
 343                         this.imageInfoCache[ imageSrc ] = api.get( params ).then( function ( data ) {
 344                                 if ( OO.getProp( data, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
 345                                         return data.query.pages[ 0 ].imageinfo[ 0 ];
 346                                 } else {
 347                                         return $.Deferred().reject();
 348                                 }
 349                         } );
 350                 }
 351
 352                 return this.imageInfoCache[ imageSrc ];
 353         };
 354
 355         /**
 356          * Given an image, the method checks whether to use the height
 357          * or the width to request the larger image.
 358          *
 359          * @param {jQuery} $img
 360          * @return {string}
 361          */
 362         mw.GallerySlideshow.prototype.getDimensionToRequest = function ( $img ) {
 363                 var ratio = $img.width() / $img.height();
 364
 365                 if ( this.imageHeight * ratio <= this.imageWidth ) {
 366                         return 'height';
 367                 } else {
 368                         return 'width';
 369                 }
 370         };
 371
 372         /**
 373          * Toggles visibility of the thumbnails.
 374          *
 375          * @param {boolean} show Optional argument to control the state
 376          */
 377         mw.GallerySlideshow.prototype.toggleThumbnails = function ( show ) {
 378                 this.$galleryBox.toggle( show );
 379                 this.$carousel.toggleClass( 'mw-gallery-slideshow-thumbnails-toggled', show );
 380         };
 381
 382         /**
 383          * Getter method for {@link #$currentImage}
 384          *
 385          * @return {jQuery}
 386          */
 387         mw.GallerySlideshow.prototype.getCurrentImage = function () {
 388                 this.$currentImage = this.$currentImage || this.$galleryBox.eq( 0 );
 389                 return this.$currentImage;
 390         };
 391
 392         /**
 393          * Gets the image after the current one. Returns the first image if
 394          * the current one is the last.
 395          *
 396          * @return {jQuery}
 397          */
 398         mw.GallerySlideshow.prototype.getNextImage = function () {
 399                 // Not the last image in the gallery
 400                 if ( this.$currentImage.next( '.gallerybox' )[ 0 ] !== undefined ) {
 401                         return this.$currentImage.next( '.gallerybox' );
 402                 } else {
 403                         return this.$galleryBox.eq( 0 );
 404                 }
 405         };
 406
 407         /**
 408          * Gets the image before the current one. Returns the last image if
 409          * the current one is the first.
 410          *
 411          * @return {jQuery}
 412          */
 413         mw.GallerySlideshow.prototype.getPrevImage = function () {
 414                 // Not the first image in the gallery
 415                 if ( this.$currentImage.prev( '.gallerybox' )[ 0 ] !== undefined ) {
 416                         return this.$currentImage.prev( '.gallerybox' );
 417                 } else {
 418                         return this.$galleryBox.last();
 419                 }
 420         };
 421
 422         /**
 423          * Sets the {@link #$currentImage} to the next one and shows
 424          * it in the carousel
 425          */
 426         mw.GallerySlideshow.prototype.nextImage = function () {
 427                 this.$currentImage = this.getNextImage();
 428                 this.showCurrentImage();
 429         };
 430
 431         /**
 432          * Sets the {@link #$currentImage} to the previous one and shows
 433          * it in the carousel
 434          */
 435         mw.GallerySlideshow.prototype.prevImage = function () {
 436                 this.$currentImage = this.getPrevImage();
 437                 this.showCurrentImage();
 438         };
 439
 440         // Bootstrap all slideshow galleries
 441         mw.hook( 'wikipage.content' ).add( function ( $content ) {
 442                 $content.find( '.mw-gallery-slideshow' ).each( function () {
 443                         // eslint-disable-next-line no-new
 444                         new mw.GallerySlideshow( this );
 445                 } );
 446         } );
 447 }() );