Gallery slideshow: Support MMV

Create a new $imgLink and $img for each image, set the
'image' class on $imgLink and fire 'wikipage.content' hook.

Bug: T181470
Change-Id: I9b705b0b6b2c1c4e40e1c7c120fe90fe26d259da

diff --git a/resources/src/mediawiki.page.gallery.slideshow.js b/resources/src/mediawiki.page.gallery.slideshow.js
index b62b45e..dd52767 100644 (file)
--- a/resources/src/mediawiki.page.gallery.slideshow.js
+++ b/resources/src/mediawiki.page.gallery.slideshow.js
@@ -68,10 +68,6 @@
         * @property {jQuery} $img The `<img>` element that'll display the current image.
         */
 
-       /**
-        * @property {jQuery} $imgLink The `<a>` element that links to the image's File page.
-        */
-
        /**
         * @property {jQuery} $imgCaption The `<p>` element that holds the image caption.
         */
@@ -138,12 +134,9 @@
                this.$interface = interfaceElements.$element;
 
                // Containers for the current image, caption etc.
-               this.$img = $( '<img>' );
-               this.$imgLink = $( '<a>' ).append( this.$img );
                this.$imgCaption = $( '<p>' ).attr( 'class', 'mw-gallery-slideshow-caption' );
                this.$imgContainer = $( '<div>' )
-                       .attr( 'class', 'mw-gallery-slideshow-img-container' )
-                       .append( this.$imgLink );
+                       .attr( 'class', 'mw-gallery-slideshow-img-container' );
 
                carouselStack = new OO.ui.StackLayout( {
                        continuous: true,
@@ -238,7 +231,7 @@
         * Displays the image set as {@link #$currentImage} in the carousel.
         */
        mw.GallerySlideshow.prototype.showCurrentImage = function () {
-               var $thumbnail,
+               var $thumbnail, $imgLink,
                        $imageLi = this.getCurrentImage(),
                        $caption = $imageLi.find( '.gallerytext' );
 
@@ -249,13 +242,18 @@
                        .removeClass( 'slideshow-current' );
                $imageLi.addClass( 'slideshow-current' );
 
-               // 2. Show thumbnail
+               // 2. Create and show thumbnail
                this.$thumbnail = $imageLi.find( 'img' );
-               this.$img.attr( {
+               this.$img = $( '<img>' ).attr( {
                        src: this.$thumbnail.attr( 'src' ),
                        alt: this.$thumbnail.attr( 'alt' )
                } );
-               this.$imgLink.attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
+               // 'image' class required for detection by MultimediaViewer
+               $imgLink = $( '<a>' ).addClass( 'image' )
+                       .attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) )
+                       .append( this.$img );
+
+               this.$imgContainer.empty().append( $imgLink );
 
                // 3. Copy caption
                this.$imgCaption
@@ -272,6 +270,7 @@
                        if ( this.$thumbnail.attr( 'src' ) === $thumbnail.attr( 'src' ) ) {
                                this.$img.attr( 'src', info.thumburl );
                                this.setImageSize();
+                               mw.hook( 'wikipage.content' ).fire( this.$imgContainer );
 
                                // Pre-fetch the next image
                                this.loadImage( this.getNextImage().find( 'img' ) );