2 * mw.GallerySlideshow: Interface controls for the slideshow gallery
4 ( function ( mw
, $, OO
) {
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
= {};
22 if ( this.$gallery
.parent().attr( 'id' ) !== 'mw-content-text' ) {
23 this.$container
= this.$gallery
.parent();
28 this.setSizeRequirement();
29 this.toggleThumbnails( false );
30 this.showCurrentImage();
36 this.setSizeRequirement
.bind( this ),
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();
51 * @property {jQuery} $gallery The `<ul>` element of the gallery.
55 * @property {jQuery} $galleryCaption The `<li>` that has the gallery caption.
59 * @property {jQuery} $galleryBox Selection of `<li>` elements that have thumbnails.
63 * @property {jQuery} $carousel The `<li>` elements that contains the carousel.
67 * @property {jQuery} $interface The `<div>` elements that contains the interface buttons.
71 * @property {jQuery} $img The `<img>` element that'll display the current image.
75 * @property {jQuery} $imgLink The `<a>` element that links to the image's File page.
79 * @property {jQuery} $imgCaption The `<p>` element that holds the image caption.
83 * @property {jQuery} $imgContainer The `<div>` element that contains the image.
87 * @property {jQuery} $currentImage The `<li>` element of the current image.
91 * @property {jQuery} $container If the gallery contained in an element that is
92 * not the main content element, then it stores that element.
96 * @property {Object} imageInfoCache A key value pair of thumbnail URLs and image info.
100 * @property {number} imageWidth Width of the image based on viewport size
104 * @property {number} imageHeight Height of the image based on viewport size
105 * the URLs in the required size.
109 OO
.initClass( mw
.GallerySlideshow
);
113 * Draws the carousel and the interface around it.
115 mw
.GallerySlideshow
.prototype.drawCarousel = function () {
116 var next
, prev
, toggle
, interfaceElements
, carouselStack
;
118 this.$carousel
= $( '<li>' ).addClass( 'gallerycarousel' );
120 // Buttons for the interface
121 prev
= new OO
.ui
.ButtonWidget( {
124 } ).on( 'click', this.prevImage
.bind( this ) );
126 next
= new OO
.ui
.ButtonWidget( {
129 } ).on( 'click', this.nextImage
.bind( this ) );
131 toggle
= new OO
.ui
.ButtonWidget( {
134 } ).on( 'click', this.toggleThumbnails
.bind( this ) );
136 interfaceElements
= new OO
.ui
.PanelLayout( {
138 classes
: [ 'mw-gallery-slideshow-buttons' ],
139 $content
: $( '<div>' ).append(
145 this.$interface = interfaceElements
.$element
;
147 // Containers for the current image, caption etc.
148 this.$img
= $( '<img>' );
149 this.$imgLink
= $( '<a>' ).append( this.$img
);
150 this.$imgCaption
= $( '<p>' ).attr( 'class', 'mw-gallery-slideshow-caption' );
151 this.$imgContainer
= $( '<div>' )
152 .attr( 'class', 'mw-gallery-slideshow-img-container' )
153 .append( this.$imgLink
);
155 carouselStack
= new OO
.ui
.StackLayout( {
160 new OO
.ui
.PanelLayout( {
162 $content
: this.$imgContainer
164 new OO
.ui
.PanelLayout( {
166 $content
: this.$imgCaption
170 this.$carousel
.append( carouselStack
.$element
);
172 // Append below the caption or as the first element in the gallery
173 if ( this.$galleryCaption
.length
!== 0 ) {
174 this.$galleryCaption
.after( this.$carousel
);
176 this.$gallery
.prepend( this.$carousel
);
181 * Sets the {@link #imageWidth} and {@link #imageHeight} properties
182 * based on the size of the window. Also flushes the
183 * {@link #imageInfoCache} as we'll now need URLs for a different
186 mw
.GallerySlideshow
.prototype.setSizeRequirement = function () {
189 if ( this.$container
!== undefined ) {
190 w
= this.$container
.width() * 0.9;
191 h
= ( this.$container
.height() - this.getChromeHeight() ) * 0.9;
193 w
= this.$imgContainer
.width();
194 h
= Math
.min( $( window
).height() * ( 3 / 4 ), this.$imgContainer
.width() ) - this.getChromeHeight();
197 // Only update and flush the cache if the size changed
198 if ( w
!== this.imageWidth
|| h
!== this.imageHeight
) {
200 this.imageHeight
= h
;
201 this.imageInfoCache
= {};
207 * Gets the height of the interface elements and the
210 mw
.GallerySlideshow
.prototype.getChromeHeight = function () {
211 return this.$interface.outerHeight() + this.$galleryCaption
.outerHeight();
215 * Sets the height and width of {@link #$img} based on the
216 * proportion of the image and the values generated by
217 * {@link #setSizeRequirement}.
219 * @return {boolean} Whether or not the image was sized.
221 mw
.GallerySlideshow
.prototype.setImageSize = function () {
222 if ( this.$img
=== undefined || this.$thumbnail
=== undefined ) {
226 // Reset height and width
228 .removeAttr( 'width' )
229 .removeAttr( 'height' );
231 // Stretch image to take up the required size
232 if ( this.$thumbnail
.width() > this.$thumbnail
.height() ) {
233 this.$img
.attr( 'width', this.imageWidth
+ 'px' );
235 this.$img
.attr( 'height', this.imageHeight
+ 'px' );
238 // Make the image smaller in case the current image
239 // size is larger than the original file size.
240 this.getImageInfo( this.$thumbnail
).done( function ( info
) {
241 // NOTE: There will be a jump when resizing the window
242 // because the cache is cleared and this a new network request.
244 info
.thumbwidth
< this.$img
.width() ||
245 info
.thumbheight
< this.$img
.height()
247 this.$img
.attr( 'width', info
.thumbwidth
+ 'px' );
248 this.$img
.attr( 'height', info
.thumbheight
+ 'px' );
256 * Displays the image set as {@link #$currentImage} in the carousel.
258 mw
.GallerySlideshow
.prototype.showCurrentImage = function () {
259 var imageLi
= this.getCurrentImage(),
260 caption
= imageLi
.find( '.gallerytext' );
262 // Highlight current thumbnail
264 .find( '.gallerybox.slideshow-current' )
265 .removeClass( 'slideshow-current' );
266 imageLi
.addClass( 'slideshow-current' );
268 // Show thumbnail stretched to the right size while the image loads
269 this.$thumbnail
= imageLi
.find( 'img' );
270 this.$img
.attr( 'src', this.$thumbnail
.attr( 'src' ) );
271 this.$imgLink
.attr( 'href', imageLi
.find( 'a' ).eq( 0 ).attr( 'href' ) );
277 .append( caption
.clone() );
279 // Load image at the required size
280 this.loadImage( this.$thumbnail
).done( function ( info
, $img
) {
281 // Show this image to the user only if its still the current one
282 if ( this.$thumbnail
.attr( 'src' ) === $img
.attr( 'src' ) ) {
283 this.$img
.attr( 'src', info
.thumburl
);
286 // Keep the next image ready
287 this.loadImage( this.getNextImage().find( 'img' ) );
293 * Loads the full image given the `<img>` element of the thumbnail.
295 * @param {Object} $img
296 * @return {jQuery.Promise} Resolves with the images URL and original
297 * element once the image has loaded.
299 mw
.GallerySlideshow
.prototype.loadImage = function ( $img
) {
300 var img
, d
= $.Deferred();
302 this.getImageInfo( $img
).done( function ( info
) {
304 img
.src
= info
.thumburl
;
305 img
.onload = function () {
306 d
.resolve( info
, $img
);
308 img
.onerror = function () {
311 } ).fail( function () {
319 * Gets the image's info given an `<img>` element.
321 * @param {Object} $img
322 * @return {jQuery.Promise} Resolves with the image's info.
324 mw
.GallerySlideshow
.prototype.getImageInfo = function ( $img
) {
325 var api
, title
, params
,
326 imageSrc
= $img
.attr( 'src' );
328 // Reject promise if there is no thumbnail image
329 if ( $img
[ 0 ] === undefined ) {
330 return $.Deferred().reject();
333 if ( this.imageInfoCache
[ imageSrc
] === undefined ) {
335 // TODO: This supports only gallery of images
336 title
= new mw
.Title
.newFromImg( $img
);
340 titles
: title
.toString(),
345 // Check which dimension we need to request, based on
346 // image and container proportions.
347 if ( this.getDimensionToRequest( $img
) === 'height' ) {
348 params
.iiurlheight
= this.imageHeight
;
350 params
.iiurlwidth
= this.imageWidth
;
353 this.imageInfoCache
[ imageSrc
] = api
.get( params
).then( function ( data
) {
354 if ( OO
.getProp( data
, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
355 return data
.query
.pages
[ 0 ].imageinfo
[ 0 ];
357 return $.Deferred().reject();
362 return this.imageInfoCache
[ imageSrc
];
366 * Given an image, the method checks whether to use the height
367 * or the width to request the larger image.
369 * @param {jQuery} $img
372 mw
.GallerySlideshow
.prototype.getDimensionToRequest = function ( $img
) {
373 var ratio
= $img
.width() / $img
.height();
375 if ( this.imageHeight
* ratio
<= this.imageWidth
) {
383 * Toggles visibility of the thumbnails.
385 * @param {boolean} show Optional argument to control the state
387 mw
.GallerySlideshow
.prototype.toggleThumbnails = function ( show
) {
388 this.$galleryBox
.toggle( show
);
389 this.$carousel
.toggleClass( 'mw-gallery-slideshow-thumbnails-toggled', show
);
393 * Getter method for {@link #$currentImage}
397 mw
.GallerySlideshow
.prototype.getCurrentImage = function () {
398 this.$currentImage
= this.$currentImage
|| this.$galleryBox
.eq( 0 );
399 return this.$currentImage
;
403 * Gets the image after the current one. Returns the first image if
404 * the current one is the last.
408 mw
.GallerySlideshow
.prototype.getNextImage = function () {
409 // Not the last image in the gallery
410 if ( this.$currentImage
.next( '.gallerybox' )[ 0 ] !== undefined ) {
411 return this.$currentImage
.next( '.gallerybox' );
413 return this.$galleryBox
.eq( 0 );
418 * Gets the image before the current one. Returns the last image if
419 * the current one is the first.
423 mw
.GallerySlideshow
.prototype.getPrevImage = function () {
424 // Not the first image in the gallery
425 if ( this.$currentImage
.prev( '.gallerybox' )[ 0 ] !== undefined ) {
426 return this.$currentImage
.prev( '.gallerybox' );
428 return this.$galleryBox
.last();
433 * Sets the {@link #$currentImage} to the next one and shows
436 mw
.GallerySlideshow
.prototype.nextImage = function () {
437 this.$currentImage
= this.getNextImage();
438 this.showCurrentImage();
442 * Sets the {@link #$currentImage} to the previous one and shows
445 mw
.GallerySlideshow
.prototype.prevImage = function () {
446 this.$currentImage
= this.getPrevImage();
447 this.showCurrentImage();
450 // Bootstrap all slideshow galleries
452 $( '.mw-gallery-slideshow' ).each( function () {
454 new mw
.GallerySlideshow( this );
458 }( mediaWiki
, jQuery
, OO
) );