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} $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 ).done( 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         mw.GallerySlideshow.prototype.showCurrentImage = function () {
 234                 var $thumbnail, $imgLink,
 235                         $imageLi = this.getCurrentImage(),
 236                         $caption = $imageLi.find( '.gallerytext' );
 237
 238                 // The order of the following is important for size calculations
 239                 // 1. Highlight current thumbnail
 240                 this.$gallery
 241                         .find( '.gallerybox.slideshow-current' )
 242                         .removeClass( 'slideshow-current' );
 243                 $imageLi.addClass( 'slideshow-current' );
 244
 245                 this.$thumbnail = $imageLi.find( 'img' );
 246                 if ( this.$thumbnail.length ) {
 247                         // 2. Create and show thumbnail
 248                         this.$img = $( '<img>' ).attr( {
 249                                 src: this.$thumbnail.attr( 'src' ),
 250                                 alt: this.$thumbnail.attr( 'alt' )
 251                         } );
 252                         // 'image' class required for detection by MultimediaViewer
 253                         $imgLink = $( '<a>' ).addClass( 'image' )
 254                                 .attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) )
 255                                 .append( this.$img );
 256
 257                         this.$imgContainer.empty().append( $imgLink );
 258                 } else {
 259                         // 2b. No image found (e.g. file doesn't exist)
 260                         this.$imgContainer.text( $imageLi.find( '.thumb' ).text() );
 261                 }
 262
 263                 // 3. Copy caption
 264                 this.$imgCaption
 265                         .empty()
 266                         .append( $caption.clone() );
 267
 268                 if ( !this.$thumbnail.length ) {
 269                         return;
 270                 }
 271
 272                 // 4. Stretch thumbnail to correct size
 273                 this.setImageSize();
 274
 275                 $thumbnail = this.$thumbnail;
 276                 // 5. Load image at the required size
 277                 this.loadImage( this.$thumbnail ).done( function ( info ) {
 278                         // Show this image to the user only if its still the current one
 279                         if ( this.$thumbnail.attr( 'src' ) === $thumbnail.attr( 'src' ) ) {
 280                                 this.$img.attr( 'src', info.thumburl );
 281                                 this.setImageSize();
 282                                 mw.hook( 'wikipage.content' ).fire( this.$imgContainer );
 283
 284                                 // Pre-fetch the next image
 285                                 this.loadImage( this.getNextImage().find( 'img' ) );
 286                         }
 287                 }.bind( this ) ).fail( function () {
 288                         // Image didn't load
 289                         var title = mw.Title.newFromImg( this.$img );
 290                         this.$imgContainer.text( title ? title.getMainText() : '' );
 291                 }.bind( this ) );
 292         };
 293
 294         /**
 295          * Loads the full image given the `<img>` element of the thumbnail.
 296          *
 297          * @param {jQuery} $img
 298          * @return {jQuery.Promise} Resolves with the images URL and original
 299          *  element once the image has loaded.
 300          */
 301         mw.GallerySlideshow.prototype.loadImage = function ( $img ) {
 302                 var img, d = $.Deferred();
 303
 304                 this.getImageInfo( $img ).done( function ( info ) {
 305                         img = new Image();
 306                         img.src = info.thumburl;
 307                         img.onload = function () {
 308                                 d.resolve( info );
 309                         };
 310                         img.onerror = function () {
 311                                 d.reject();
 312                         };
 313                 } ).fail( function () {
 314                         d.reject();
 315                 } );
 316
 317                 return d.promise();
 318         };
 319
 320         /**
 321          * Gets the image's info given an `<img>` element.
 322          *
 323          * @param {Object} $img
 324          * @return {jQuery.Promise} Resolves with the image's info.
 325          */
 326         mw.GallerySlideshow.prototype.getImageInfo = function ( $img ) {
 327                 var api, title, params,
 328                         imageSrc = $img.attr( 'src' );
 329
 330                 // Reject promise if there is no thumbnail image
 331                 if ( $img[ 0 ] === undefined ) {
 332                         return $.Deferred().reject();
 333                 }
 334
 335                 if ( this.imageInfoCache[ imageSrc ] === undefined ) {
 336                         api = new mw.Api();
 337                         // TODO: This supports only gallery of images
 338                         title = mw.Title.newFromImg( $img );
 339                         params = {
 340                                 action: 'query',
 341                                 formatversion: 2,
 342                                 titles: title.toString(),
 343                                 prop: 'imageinfo',
 344                                 iiprop: 'url'
 345                         };
 346
 347                         // Check which dimension we need to request, based on
 348                         // image and container proportions.
 349                         if ( this.getDimensionToRequest( $img ) === 'height' ) {
 350                                 params.iiurlheight = this.imageHeight;
 351                         } else {
 352                                 params.iiurlwidth = this.imageWidth;
 353                         }
 354
 355                         this.imageInfoCache[ imageSrc ] = api.get( params ).then( function ( data ) {
 356                                 if ( OO.getProp( data, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
 357                                         return data.query.pages[ 0 ].imageinfo[ 0 ];
 358                                 } else {
 359                                         return $.Deferred().reject();
 360                                 }
 361                         } );
 362                 }
 363
 364                 return this.imageInfoCache[ imageSrc ];
 365         };
 366
 367         /**
 368          * Given an image, the method checks whether to use the height
 369          * or the width to request the larger image.
 370          *
 371          * @param {jQuery} $img
 372          * @return {string}
 373          */
 374         mw.GallerySlideshow.prototype.getDimensionToRequest = function ( $img ) {
 375                 var ratio = $img.width() / $img.height();
 376
 377                 if ( this.imageHeight * ratio <= this.imageWidth ) {
 378                         return 'height';
 379                 } else {
 380                         return 'width';
 381                 }
 382         };
 383
 384         /**
 385          * Toggles visibility of the thumbnails.
 386          *
 387          * @param {boolean} show Optional argument to control the state
 388          */
 389         mw.GallerySlideshow.prototype.toggleThumbnails = function ( show ) {
 390                 this.$galleryBox.toggle( show );
 391                 this.$carousel.toggleClass( 'mw-gallery-slideshow-thumbnails-toggled', show );
 392         };
 393
 394         /**
 395          * Getter method for {@link #$currentImage}
 396          *
 397          * @return {jQuery}
 398          */
 399         mw.GallerySlideshow.prototype.getCurrentImage = function () {
 400                 this.$currentImage = this.$currentImage || this.$galleryBox.eq( 0 );
 401                 return this.$currentImage;
 402         };
 403
 404         /**
 405          * Gets the image after the current one. Returns the first image if
 406          * the current one is the last.
 407          *
 408          * @return {jQuery}
 409          */
 410         mw.GallerySlideshow.prototype.getNextImage = function () {
 411                 // Not the last image in the gallery
 412                 if ( this.$currentImage.next( '.gallerybox' )[ 0 ] !== undefined ) {
 413                         return this.$currentImage.next( '.gallerybox' );
 414                 } else {
 415                         return this.$galleryBox.eq( 0 );
 416                 }
 417         };
 418
 419         /**
 420          * Gets the image before the current one. Returns the last image if
 421          * the current one is the first.
 422          *
 423          * @return {jQuery}
 424          */
 425         mw.GallerySlideshow.prototype.getPrevImage = function () {
 426                 // Not the first image in the gallery
 427                 if ( this.$currentImage.prev( '.gallerybox' )[ 0 ] !== undefined ) {
 428                         return this.$currentImage.prev( '.gallerybox' );
 429                 } else {
 430                         return this.$galleryBox.last();
 431                 }
 432         };
 433
 434         /**
 435          * Sets the {@link #$currentImage} to the next one and shows
 436          * it in the carousel
 437          */
 438         mw.GallerySlideshow.prototype.nextImage = function () {
 439                 this.$currentImage = this.getNextImage();
 440                 this.showCurrentImage();
 441         };
 442
 443         /**
 444          * Sets the {@link #$currentImage} to the previous one and shows
 445          * it in the carousel
 446          */
 447         mw.GallerySlideshow.prototype.prevImage = function () {
 448                 this.$currentImage = this.getPrevImage();
 449                 this.showCurrentImage();
 450         };
 451
 452         // Bootstrap all slideshow galleries
 453         mw.hook( 'wikipage.content' ).add( function ( $content ) {
 454                 $content.find( '.mw-gallery-slideshow' ).each( function () {
 455                         // eslint-disable-next-line no-new
 456                         new mw.GallerySlideshow( this );
 457                 } );
 458         } );
 459 }() );