2 * mw.GallerySlideshow: Interface controls for the slideshow gallery
6 * mw.GallerySlideshow encapsulates the user interface of the slideshow
7 * galleries. An object is instantiated for each `.mw-gallery-slideshow`
10 * @class mw.GallerySlideshow
13 * @param {jQuery} gallery The `<ul>` element of the gallery.
15 mw
.GallerySlideshow = function ( gallery
) {
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
= {};
25 this.setSizeRequirement();
26 this.toggleThumbnails( !!this.$gallery
.attr( 'data-showthumbnails' ) );
27 this.showCurrentImage();
33 this.setSizeRequirement
.bind( this ),
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();
48 * @property {jQuery} $gallery The `<ul>` element of the gallery.
52 * @property {jQuery} $galleryCaption The `<li>` that has the gallery caption.
56 * @property {jQuery} $galleryBox Selection of `<li>` elements that have thumbnails.
60 * @property {jQuery} $carousel The `<li>` elements that contains the carousel.
64 * @property {jQuery} $interface The `<div>` elements that contains the interface buttons.
68 * @property {jQuery} $img The `<img>` element that'll display the current image.
72 * @property {jQuery} $imgCaption The `<p>` element that holds the image caption.
76 * @property {jQuery} $imgContainer The `<div>` element that contains the image.
80 * @property {jQuery} $currentImage The `<li>` element of the current image.
84 * @property {Object} imageInfoCache A key value pair of thumbnail URLs and image info.
88 * @property {number} imageWidth Width of the image based on viewport size
92 * @property {number} imageHeight Height of the image based on viewport size
93 * the URLs in the required size.
97 OO
.initClass( mw
.GallerySlideshow
);
101 * Draws the carousel and the interface around it.
103 mw
.GallerySlideshow
.prototype.drawCarousel = function () {
104 var nextButton
, prevButton
, toggleButton
, interfaceElements
, carouselStack
;
106 this.$carousel
= $( '<li>' ).addClass( 'gallerycarousel' );
108 // Buttons for the interface
109 prevButton
= new OO
.ui
.ButtonWidget( {
112 } ).connect( this, { click
: 'prevImage' } );
114 nextButton
= new OO
.ui
.ButtonWidget( {
117 } ).connect( this, { click
: 'nextImage' } );
119 toggleButton
= new OO
.ui
.ButtonWidget( {
121 icon
: 'imageGallery',
122 title
: mw
.msg( 'gallery-slideshow-toggle' )
123 } ).connect( this, { click
: 'toggleThumbnails' } );
125 interfaceElements
= new OO
.ui
.PanelLayout( {
127 classes
: [ 'mw-gallery-slideshow-buttons' ],
128 $content
: $( '<div>' ).append(
130 toggleButton
.$element
,
134 this.$interface = interfaceElements
.$element
;
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' );
141 carouselStack
= new OO
.ui
.StackLayout( {
146 new OO
.ui
.PanelLayout( {
148 $content
: this.$imgContainer
150 new OO
.ui
.PanelLayout( {
152 $content
: this.$imgCaption
156 this.$carousel
.append( carouselStack
.$element
);
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
);
162 this.$gallery
.prepend( this.$carousel
);
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
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();
176 // Only update and flush the cache if the size changed
177 if ( w
!== this.imageWidth
|| h
!== this.imageHeight
) {
179 this.imageHeight
= h
;
180 this.imageInfoCache
= {};
186 * Gets the height of the interface elements and the
189 * @return {number} Height
191 mw
.GallerySlideshow
.prototype.getChromeHeight = function () {
192 return this.$interface.outerHeight() + ( this.$galleryCaption
.outerHeight() || 0 );
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}.
200 mw
.GallerySlideshow
.prototype.setImageSize = function () {
201 if ( this.$img
=== undefined || this.$thumbnail
=== undefined ) {
205 // Reset height and width
207 .removeAttr( 'width' )
208 .removeAttr( 'height' );
210 // Stretch image to take up the required size
211 this.$img
.attr( 'height', ( this.imageHeight
- this.$imgCaption
.outerHeight() ) + 'px' );
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.
219 info
.thumbwidth
< this.$img
.width() ||
220 info
.thumbheight
< this.$img
.height()
223 width
: info
.thumbwidth
+ 'px',
224 height
: info
.thumbheight
+ 'px'
231 * Displays the image set as {@link #$currentImage} in the carousel.
233 mw
.GallerySlideshow
.prototype.showCurrentImage = function () {
234 var $thumbnail
, $imgLink
,
235 $imageLi
= this.getCurrentImage(),
236 $caption
= $imageLi
.find( '.gallerytext' );
238 // The order of the following is important for size calculations
239 // 1. Highlight current thumbnail
241 .find( '.gallerybox.slideshow-current' )
242 .removeClass( 'slideshow-current' );
243 $imageLi
.addClass( 'slideshow-current' );
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' )
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
);
257 this.$imgContainer
.empty().append( $imgLink
);
259 // 2b. No image found (e.g. file doesn't exist)
260 this.$imgContainer
.text( $imageLi
.find( '.thumb' ).text() );
266 .append( $caption
.clone() );
268 if ( !this.$thumbnail
.length
) {
272 // 4. Stretch thumbnail to correct size
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
);
282 mw
.hook( 'wikipage.content' ).fire( this.$imgContainer
);
284 // Pre-fetch the next image
285 this.loadImage( this.getNextImage().find( 'img' ) );
287 }.bind( this ) ).fail( function () {
289 var title
= mw
.Title
.newFromImg( this.$img
);
290 this.$imgContainer
.text( title
? title
.getMainText() : '' );
295 * Loads the full image given the `<img>` element of the thumbnail.
297 * @param {jQuery} $img
298 * @return {jQuery.Promise} Resolves with the images URL and original
299 * element once the image has loaded.
301 mw
.GallerySlideshow
.prototype.loadImage = function ( $img
) {
302 var img
, d
= $.Deferred();
304 this.getImageInfo( $img
).done( function ( info
) {
306 img
.src
= info
.thumburl
;
307 img
.onload = function () {
310 img
.onerror = function () {
313 } ).fail( function () {
321 * Gets the image's info given an `<img>` element.
323 * @param {Object} $img
324 * @return {jQuery.Promise} Resolves with the image's info.
326 mw
.GallerySlideshow
.prototype.getImageInfo = function ( $img
) {
327 var api
, title
, params
,
328 imageSrc
= $img
.attr( 'src' );
330 // Reject promise if there is no thumbnail image
331 if ( $img
[ 0 ] === undefined ) {
332 return $.Deferred().reject();
335 if ( this.imageInfoCache
[ imageSrc
] === undefined ) {
337 // TODO: This supports only gallery of images
338 title
= mw
.Title
.newFromImg( $img
);
342 titles
: title
.toString(),
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
;
352 params
.iiurlwidth
= this.imageWidth
;
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 ];
359 return $.Deferred().reject();
364 return this.imageInfoCache
[ imageSrc
];
368 * Given an image, the method checks whether to use the height
369 * or the width to request the larger image.
371 * @param {jQuery} $img
374 mw
.GallerySlideshow
.prototype.getDimensionToRequest = function ( $img
) {
375 var ratio
= $img
.width() / $img
.height();
377 if ( this.imageHeight
* ratio
<= this.imageWidth
) {
385 * Toggles visibility of the thumbnails.
387 * @param {boolean} show Optional argument to control the state
389 mw
.GallerySlideshow
.prototype.toggleThumbnails = function ( show
) {
390 this.$galleryBox
.toggle( show
);
391 this.$carousel
.toggleClass( 'mw-gallery-slideshow-thumbnails-toggled', show
);
395 * Getter method for {@link #$currentImage}
399 mw
.GallerySlideshow
.prototype.getCurrentImage = function () {
400 this.$currentImage
= this.$currentImage
|| this.$galleryBox
.eq( 0 );
401 return this.$currentImage
;
405 * Gets the image after the current one. Returns the first image if
406 * the current one is the last.
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' );
415 return this.$galleryBox
.eq( 0 );
420 * Gets the image before the current one. Returns the last image if
421 * the current one is the first.
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' );
430 return this.$galleryBox
.last();
435 * Sets the {@link #$currentImage} to the next one and shows
438 mw
.GallerySlideshow
.prototype.nextImage = function () {
439 this.$currentImage
= this.getNextImage();
440 this.showCurrentImage();
444 * Sets the {@link #$currentImage} to the previous one and shows
447 mw
.GallerySlideshow
.prototype.prevImage = function () {
448 this.$currentImage
= this.getPrevImage();
449 this.showCurrentImage();
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 );