` element that holds the image caption. */ @@ -87,11 +80,6 @@ * @property {jQuery} $currentImage The `
' ).append(
- prev.$element,
- toggle.$element,
- next.$element
+ prevButton.$element,
+ toggleButton.$element,
+ nextButton.$element
)
} );
this.$interface = interfaceElements.$element;
// Containers for the current image, caption etc.
- this.$img = $( '![]()
' );
- this.$imgLink = $( '' ).append( this.$img );
this.$imgCaption = $( '
' ).attr( 'class', 'mw-gallery-slideshow-caption' ); this.$imgContainer = $( '
' )
- .attr( 'class', 'mw-gallery-slideshow-img-container' )
- .append( this.$imgLink );
+ .attr( 'class', 'mw-gallery-slideshow-img-container' );
carouselStack = new OO.ui.StackLayout( {
continuous: true,
@@ -185,15 +170,8 @@
* size.
*/
mw.GallerySlideshow.prototype.setSizeRequirement = function () {
- var w, h;
-
- if ( this.$container !== undefined ) {
- w = this.$container.width() * 0.9;
- h = ( this.$container.height() - this.getChromeHeight() ) * 0.9;
- } else {
- w = this.$imgContainer.width();
+ var w = this.$imgContainer.width(),
h = Math.min( $( window ).height() * ( 3 / 4 ), this.$imgContainer.width() ) - this.getChromeHeight();
- }
// Only update and flush the cache if the size changed
if ( w !== this.imageWidth || h !== this.imageHeight ) {
@@ -211,19 +189,17 @@
* @return {number} Height
*/
mw.GallerySlideshow.prototype.getChromeHeight = function () {
- return this.$interface.outerHeight() + this.$galleryCaption.outerHeight();
+ return this.$interface.outerHeight() + ( this.$galleryCaption.outerHeight() || 0 );
};
/**
* Sets the height and width of {@link #$img} based on the
* proportion of the image and the values generated by
* {@link #setSizeRequirement}.
- *
- * @return {boolean} Whether or not the image was sized.
*/
mw.GallerySlideshow.prototype.setImageSize = function () {
if ( this.$img === undefined || this.$thumbnail === undefined ) {
- return false;
+ return;
}
// Reset height and width
@@ -236,86 +212,110 @@
// Make the image smaller in case the current image
// size is larger than the original file size.
- this.getImageInfo( this.$thumbnail ).done( function ( info ) {
+ this.getImageInfo( this.$thumbnail ).then( function ( info ) {
// NOTE: There will be a jump when resizing the window
// because the cache is cleared and this a new network request.
if (
info.thumbwidth < this.$img.width() ||
info.thumbheight < this.$img.height()
) {
- this.$img.attr( 'width', info.thumbwidth + 'px' );
- this.$img.attr( 'height', info.thumbheight + 'px' );
+ this.$img.attr( {
+ width: info.thumbwidth + 'px',
+ height: info.thumbheight + 'px'
+ } );
}
}.bind( this ) );
-
- return true;
};
/**
* Displays the image set as {@link #$currentImage} in the carousel.
+ *
+ * @param {boolean} init Image being show during gallery init (i.e. first image)
*/
- mw.GallerySlideshow.prototype.showCurrentImage = function () {
- var imageLi = this.getCurrentImage(),
- caption = imageLi.find( '.gallerytext' );
+ mw.GallerySlideshow.prototype.showCurrentImage = function ( init ) {
+ var $thumbnail, $imgLink,
+ $imageLi = this.getCurrentImage(),
+ $caption = $imageLi.find( '.gallerytext' );
// The order of the following is important for size calculations
// 1. Highlight current thumbnail
this.$gallery
.find( '.gallerybox.slideshow-current' )
.removeClass( 'slideshow-current' );
- imageLi.addClass( 'slideshow-current' );
+ $imageLi.addClass( 'slideshow-current' );
+
+ this.$thumbnail = $imageLi.find( 'img' );
+ if ( this.$thumbnail.length ) {
+ // 2. Create and show thumbnail
+ this.$img = $( '![]()
' ).attr( {
+ src: this.$thumbnail.attr( 'src' ),
+ alt: this.$thumbnail.attr( 'alt' )
+ } );
+ // 'image' class required for detection by MultimediaViewer
+ $imgLink = $( '' ).addClass( 'image' )
+ .attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) )
+ .append( this.$img );
- // 2. Show thumbnail
- this.$thumbnail = imageLi.find( 'img' );
- this.$img.attr( 'src', this.$thumbnail.attr( 'src' ) );
- this.$img.attr( 'alt', this.$thumbnail.attr( 'alt' ) );
- this.$imgLink.attr( 'href', imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
+ this.$imgContainer.empty().append( $imgLink );
+ } else {
+ // 2b. No image found (e.g. file doesn't exist)
+ this.$imgContainer.text( $imageLi.find( '.thumb' ).text() );
+ }
// 3. Copy caption
this.$imgCaption
.empty()
- .append( caption.clone() );
+ .append( $caption.clone() );
+
+ if ( !this.$thumbnail.length ) {
+ return;
+ }
// 4. Stretch thumbnail to correct size
this.setImageSize();
+ $thumbnail = this.$thumbnail;
// 5. Load image at the required size
- this.loadImage( this.$thumbnail ).done( function ( info, $img ) {
+ this.loadImage( this.$thumbnail ).done( function ( info ) {
// Show this image to the user only if its still the current one
- if ( this.$thumbnail.attr( 'src' ) === $img.attr( 'src' ) ) {
+ if ( this.$thumbnail.attr( 'src' ) === $thumbnail.attr( 'src' ) ) {
this.$img.attr( 'src', info.thumburl );
this.setImageSize();
+ // Don't fire hook twice during init
+ if ( !init ) {
+ mw.hook( 'wikipage.content' ).fire( this.$imgContainer );
+ }
- // Keep the next image ready
+ // Pre-fetch the next image
this.loadImage( this.getNextImage().find( 'img' ) );
}
+ }.bind( this ) ).fail( function () {
+ // Image didn't load
+ var title = mw.Title.newFromImg( this.$img );
+ this.$imgContainer.text( title ? title.getMainText() : '' );
}.bind( this ) );
};
/**
* Loads the full image given the `![]()
` element of the thumbnail.
*
- * @param {Object} $img
+ * @param {jQuery} $img
* @return {jQuery.Promise} Resolves with the images URL and original
- * element once the image has loaded.
+ * element once the image has loaded.
*/
mw.GallerySlideshow.prototype.loadImage = function ( $img ) {
- var img, d = $.Deferred();
-
- this.getImageInfo( $img ).done( function ( info ) {
+ return this.getImageInfo( $img ).then( function ( info ) {
+ var img, d = $.Deferred();
img = new Image();
img.src = info.thumburl;
img.onload = function () {
- d.resolve( info, $img );
+ d.resolve( info );
};
img.onerror = function () {
d.reject();
};
- } ).fail( function () {
- d.reject();
+ return d.promise();
} );
-
- return d.promise();
};
/**