Rename 'slider' gallery mode to 'slideshow'
authorEd Sanders <esanders@wikimedia.org>
Tue, 12 Jul 2016 13:48:58 +0000 (14:48 +0100)
committerEd Sanders <esanders@wikimedia.org>
Tue, 12 Jul 2016 13:48:58 +0000 (14:48 +0100)
Bug: T140093
Change-Id: I6f01344b9ac61e3d2a8e7a9d920ba37786537ff8

RELEASE-NOTES-1.28
autoload.php
includes/gallery/ImageGalleryBase.php
includes/gallery/SliderImageGallery.php [deleted file]
includes/gallery/SlideshowImageGallery.php [new file with mode: 0644]
maintenance/jsduck/categories.json
resources/Resources.php
resources/src/mediawiki/page/gallery-slider.js [deleted file]
resources/src/mediawiki/page/gallery-slideshow.js [new file with mode: 0644]
resources/src/mediawiki/page/gallery.css

index 6976655..6ee962f 100644 (file)
@@ -19,7 +19,7 @@ production.
 
 === New features in 1.28 ===
 * User::isBot() method for checking if an account is a bot role account.
-* Added a new 'slider' mode for galleries.
+* Added a new 'slideshow' mode for galleries.
 * Added a new hook, 'UserIsBot', to aid in determining if a user is a bot.
 * Added a new hook, 'ApiMakeParserOptions', to allow extensions to better
   interact with API parsing.
index 8768e9a..d82d699 100644 (file)
@@ -1260,7 +1260,7 @@ $wgAutoloadLocalClasses = [
        'SkinFallback' => __DIR__ . '/includes/skins/SkinFallback.php',
        'SkinFallbackTemplate' => __DIR__ . '/includes/skins/SkinFallbackTemplate.php',
        'SkinTemplate' => __DIR__ . '/includes/skins/SkinTemplate.php',
-       'SliderImageGallery' => __DIR__ . '/includes/gallery/SliderImageGallery.php',
+       'SlideshowImageGallery' => __DIR__ . '/includes/gallery/SlideshowImageGallery.php',
        'SpecialActiveUsers' => __DIR__ . '/includes/specials/SpecialActiveusers.php',
        'SpecialAllMessages' => __DIR__ . '/includes/specials/SpecialAllMessages.php',
        'SpecialAllMyUploads' => __DIR__ . '/includes/specials/SpecialMyRedirectPages.php',
index 73f4b19..6884f65 100644 (file)
@@ -113,7 +113,7 @@ abstract class ImageGalleryBase extends ContextSource {
                                'packed' => 'PackedImageGallery',
                                'packed-hover' => 'PackedHoverImageGallery',
                                'packed-overlay' => 'PackedOverlayImageGallery',
-                               'slider' => 'SliderImageGallery',
+                               'slideshow' => 'SlideshowImageGallery',
                        ];
                        // Allow extensions to make a new gallery format.
                        Hooks::run( 'GalleryGetModes', [ &self::$modeMapping ] );
diff --git a/includes/gallery/SliderImageGallery.php b/includes/gallery/SliderImageGallery.php
deleted file mode 100644 (file)
index 67be9ce..0000000
+++ /dev/null
@@ -1,37 +0,0 @@
-<?php
-/**
- * Slider gallery shows one image at a time with controls to move around.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License along
- * with this program; if not, write to the Free Software Foundation, Inc.,
- * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- * http://www.gnu.org/copyleft/gpl.html
- *
- * @file
- */
-
-class SliderImageGallery extends TraditionalImageGallery {
-       function __construct( $mode = 'traditional', IContextSource $context = null ) {
-               parent::__construct( $mode, $context );
-               // Does not support per row option.
-               $this->mPerRow = 0;
-       }
-
-       /**
-        * Add javascript adds interface elements
-        * @return array
-        */
-       protected function getModules() {
-               return [ 'mediawiki.page.gallery.slider' ];
-       }
-}
diff --git a/includes/gallery/SlideshowImageGallery.php b/includes/gallery/SlideshowImageGallery.php
new file mode 100644 (file)
index 0000000..3f0c932
--- /dev/null
@@ -0,0 +1,37 @@
+<?php
+/**
+ * A slideshow gallery shows one image at a time with controls to move around.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ * http://www.gnu.org/copyleft/gpl.html
+ *
+ * @file
+ */
+
+class SlideshowImageGallery extends TraditionalImageGallery {
+       function __construct( $mode = 'traditional', IContextSource $context = null ) {
+               parent::__construct( $mode, $context );
+               // Does not support per row option.
+               $this->mPerRow = 0;
+       }
+
+       /**
+        * Add javascript adds interface elements
+        * @return array
+        */
+       protected function getModules() {
+               return [ 'mediawiki.page.gallery.slideshow' ];
+       }
+}
index 631d2a7..068ee8c 100644 (file)
@@ -65,7 +65,7 @@
                                        "mw.Upload*",
                                        "mw.ForeignUpload",
                                        "mw.ForeignStructuredUpload*",
-                                       "mw.GallerySlider"
+                                       "mw.GallerySlideshow"
                                ]
                        },
                        {
index 46a9ec6..e35c3d7 100644 (file)
@@ -1655,8 +1655,8 @@ return [
                'position' => 'top',
                'targets' => [ 'desktop', 'mobile' ],
        ],
-       'mediawiki.page.gallery.slider' => [
-               'scripts' => 'resources/src/mediawiki/page/gallery-slider.js',
+       'mediawiki.page.gallery.slideshow' => [
+               'scripts' => 'resources/src/mediawiki/page/gallery-slideshow.js',
                'position' => 'top',
                'dependencies' => [
                        'mediawiki.api',
diff --git a/resources/src/mediawiki/page/gallery-slider.js b/resources/src/mediawiki/page/gallery-slider.js
deleted file mode 100644 (file)
index 82b22e8..0000000
+++ /dev/null
@@ -1,453 +0,0 @@
-/*!
- * mw.GallerySlider: Interface controls for the slider gallery
- */
-( function ( mw, $, OO ) {
-       /**
-        * mw.GallerySlider encapsulates the user interface of the slider
-        * galleries. An object is instantiated for each `.mw-gallery-slider`
-        * element.
-        *
-        * @class mw.GallerySlider
-        * @uses mw.Title
-        * @uses mw.Api
-        * @param {jQuery} gallery The `<ul>` element of the gallery.
-        */
-       mw.GallerySlider = function ( gallery ) {
-               // Properties
-               this.$gallery = $( gallery );
-               this.$galleryCaption = this.$gallery.find( '.gallerycaption' );
-               this.$galleryBox = this.$gallery.find( '.gallerybox' );
-               this.$currentImage = null;
-               this.imageInfoCache = {};
-               if ( this.$gallery.parent().attr( 'id' ) !== 'mw-content-text' ) {
-                       this.$container = this.$gallery.parent();
-               }
-
-               // Initialize
-               this.drawCarousel();
-               this.setSizeRequirement();
-               this.toggleThumbnails( false );
-               this.showCurrentImage();
-
-               // Events
-               $( window ).on(
-                       'resize',
-                       OO.ui.debounce(
-                               this.setSizeRequirement.bind( this ),
-                               100
-                       )
-               );
-
-               // Disable thumbnails' link, instead show the image in the carousel
-               this.$galleryBox.on( 'click', function ( e ) {
-                       this.$currentImage = $( e.currentTarget );
-                       this.showCurrentImage();
-                       return false;
-               }.bind( this ) );
-       };
-
-       /* Properties */
-       /**
-        * @property {jQuery} $gallery The `<ul>` element of the gallery.
-        */
-
-       /**
-        * @property {jQuery} $galleryCaption The `<li>` that has the gallery caption.
-        */
-
-       /**
-        * @property {jQuery} $galleryBox Selection of `<li>` elements that have thumbnails.
-        */
-
-       /**
-        * @property {jQuery} $carousel The `<li>` elements that contains the carousel.
-        */
-
-       /**
-        * @property {jQuery} $interface The `<div>` elements that contains the interface buttons.
-        */
-
-       /**
-        * @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.
-        */
-
-       /**
-        * @property {jQuery} $imgContainer The `<div>` element that contains the image.
-        */
-
-       /**
-        * @property {jQuery} $currentImage The `<li>` element of the current image.
-        */
-
-       /**
-        * @property {jQuery} $container If the gallery contained in an element that is
-        *      not the main content element, then it stores that element.
-        */
-
-       /**
-        * @property {Object} imageInfoCache A key value pair of thumbnail URLs and image info.
-        */
-
-       /**
-        * @property {number} imageWidth Width of the image based on viewport size
-        */
-
-       /**
-        * @property {number} imageHeight Height of the image based on viewport size
-        *      the URLs in the required size.
-        */
-
-       /* Setup */
-       OO.initClass( mw.GallerySlider );
-
-       /* Methods */
-       /**
-        * Draws the carousel and the interface around it.
-        */
-       mw.GallerySlider.prototype.drawCarousel = function () {
-               var next, prev, toggle, interfaceElements, carouselStack;
-
-               this.$carousel = $( '<li>' ).addClass( 'gallerycarousel' );
-
-               // Buttons for the interface
-               prev = new OO.ui.ButtonWidget( {
-                       framed: false,
-                       icon: 'previous'
-               } ).on( 'click', this.prevImage.bind( this ) );
-
-               next = new OO.ui.ButtonWidget( {
-                       framed: false,
-                       icon: 'next'
-               } ).on( 'click', this.nextImage.bind( this ) );
-
-               toggle = new OO.ui.ButtonWidget( {
-                       framed: false,
-                       icon: 'imageGallery'
-               } ).on( 'click', this.toggleThumbnails.bind( this ) );
-
-               interfaceElements = new OO.ui.PanelLayout( {
-                       expanded: false,
-                       classes: [ 'mw-gallery-slider-buttons' ],
-                       $content: $( '<div>' ).append(
-                               prev.$element,
-                               toggle.$element,
-                               next.$element
-                       )
-               } );
-               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-slider-caption' );
-               this.$imgContainer = $( '<div>' )
-                       .attr( 'class', 'mw-gallery-slider-img-container' )
-                       .append( this.$imgLink );
-
-               carouselStack = new OO.ui.StackLayout( {
-                       continuous: true,
-                       expanded: false,
-                       items: [
-                               interfaceElements,
-                               new OO.ui.PanelLayout( {
-                                       expanded: false,
-                                       $content: this.$imgContainer
-                               } ),
-                               new OO.ui.PanelLayout( {
-                                       expanded: false,
-                                       $content: this.$imgCaption
-                               } )
-                       ]
-               } );
-               this.$carousel.append( carouselStack.$element );
-
-               // Append below the caption or as the first element in the gallery
-               if ( this.$galleryCaption.length !== 0 ) {
-                       this.$galleryCaption.after( this.$carousel );
-               } else {
-                       this.$gallery.prepend( this.$carousel );
-               }
-       };
-
-       /**
-        * Sets the {@link #imageWidth} and {@link #imageHeight} properties
-        * based on the size of the window. Also flushes the
-        * {@link #imageInfoCache} as we'll now need URLs for a different
-        * size.
-        */
-       mw.GallerySlider.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();
-                       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 ) {
-                       this.imageWidth = w;
-                       this.imageHeight = h;
-                       this.imageInfoCache = {};
-                       this.setImageSize();
-               }
-       };
-
-       /**
-        * Gets the height of the interface elements and the
-        * gallery's caption.
-        */
-       mw.GallerySlider.prototype.getChromeHeight = function () {
-               return this.$interface.outerHeight() + this.$galleryCaption.outerHeight();
-       };
-
-       /**
-        * 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.GallerySlider.prototype.setImageSize = function () {
-               if ( this.$img === undefined || this.$thumbnail === undefined ) {
-                       return false;
-               }
-
-               // Reset height and width
-               this.$img
-                       .removeAttr( 'width' )
-                       .removeAttr( 'height' );
-
-               // Stretch image to take up the required size
-               if ( this.$thumbnail.width() > this.$thumbnail.height() ) {
-                       this.$img.attr( 'width', this.imageWidth + 'px' );
-               } else {
-                       this.$img.attr( 'height', this.imageHeight + 'px' );
-               }
-
-               // Make the image smaller in case the current image
-               // size is larger than the original file size.
-               this.getImageInfo( this.$thumbnail ).done( 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' );
-                       }
-               }.bind( this ) );
-
-               return true;
-       };
-
-       /**
-        * Displays the image set as {@link #$currentImage} in the carousel.
-        */
-       mw.GallerySlider.prototype.showCurrentImage = function () {
-               var imageLi = this.getCurrentImage(),
-                       caption = imageLi.find( '.gallerytext' );
-
-               // Highlight current thumbnail
-               this.$gallery
-                       .find( '.gallerybox.slider-current' )
-                       .removeClass( 'slider-current' );
-               imageLi.addClass( 'slider-current' );
-
-               // Show thumbnail stretched to the right size while the image loads
-               this.$thumbnail = imageLi.find( 'img' );
-               this.$img.attr( 'src', this.$thumbnail.attr( 'src' ) );
-               this.$imgLink.attr( 'href', imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
-               this.setImageSize();
-
-               // Copy caption
-               this.$imgCaption
-                       .empty()
-                       .append( caption.clone() );
-
-               // Load image at the required size
-               this.loadImage( this.$thumbnail ).done( function ( info, $img ) {
-                       // Show this image to the user only if its still the current one
-                       if ( this.$thumbnail.attr( 'src' ) === $img.attr( 'src' ) ) {
-                               this.$img.attr( 'src', info.thumburl );
-                               this.setImageSize();
-
-                               // Keep the next image ready
-                               this.loadImage( this.getNextImage().find( 'img' ) );
-                       }
-               }.bind( this ) );
-       };
-
-       /**
-        * Loads the full image given the `<img>` element of the thumbnail.
-        *
-        * @param {Object} $img
-        * @return {jQuery.Promise} Resolves with the images URL and original
-        *      element once the image has loaded.
-        */
-       mw.GallerySlider.prototype.loadImage = function ( $img ) {
-               var img, d = $.Deferred();
-
-               this.getImageInfo( $img ).done( function ( info ) {
-                       img = new Image();
-                       img.src = info.thumburl;
-                       img.onload = function () {
-                               d.resolve( info, $img );
-                       };
-                       img.onerror = function () {
-                               d.reject();
-                       };
-               } ).fail( function () {
-                       d.reject();
-               } );
-
-               return d.promise();
-       };
-
-       /**
-        * Gets the image's info given an `<img>` element.
-        *
-        * @param {Object} $img
-        * @return {jQuery.Promise} Resolves with the image's info.
-        */
-       mw.GallerySlider.prototype.getImageInfo = function ( $img ) {
-               var api, title, params,
-                       imageSrc = $img.attr( 'src' );
-
-               if ( this.imageInfoCache[ imageSrc ] === undefined ) {
-                       api = new mw.Api();
-                       // TODO: This supports only gallery of images
-                       title = new mw.Title.newFromImg( $img );
-                       params = {
-                               action: 'query',
-                               formatversion: 2,
-                               titles: title.toString(),
-                               prop: 'imageinfo',
-                               iiprop: 'url'
-                       };
-
-                       // Check which dimension we need to request, based on
-                       // image and container proportions.
-                       if ( this.getDimensionToRequest( $img ) === 'height' ) {
-                               params.iiurlheight = this.imageHeight;
-                       } else {
-                               params.iiurlwidth = this.imageWidth;
-                       }
-
-                       this.imageInfoCache[ imageSrc ] = api.get( params ).then( function ( data ) {
-                               if ( OO.getProp( data, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
-                                       return data.query.pages[ 0 ].imageinfo[ 0 ];
-                               } else {
-                                       return $.Deferred().reject();
-                               }
-                       } );
-               }
-
-               return this.imageInfoCache[ imageSrc ];
-       };
-
-       /**
-        * Given an image, the method checks whether to use the height
-        * or the width to request the larger image.
-        *
-        * @param {jQuery} $img
-        * @return {string}
-        */
-       mw.GallerySlider.prototype.getDimensionToRequest = function ( $img ) {
-               var ratio = $img.width() / $img.height();
-
-               if ( this.imageHeight * ratio <= this.imageWidth ) {
-                       return 'height';
-               } else {
-                       return 'width';
-               }
-       };
-
-       /**
-        * Toggles visibility of the thumbnails.
-        *
-        * @param {boolean} show Optional argument to control the state
-        */
-       mw.GallerySlider.prototype.toggleThumbnails = function ( show ) {
-               this.$galleryBox.toggle( show );
-               this.$carousel.toggleClass( 'mw-gallery-slider-thumbnails-toggled', show );
-       };
-
-       /**
-        * Getter method for {@link #$currentImage}
-        *
-        * @return {jQuery}
-        */
-       mw.GallerySlider.prototype.getCurrentImage = function () {
-               this.$currentImage = this.$currentImage || this.$galleryBox.eq( 0 );
-               return this.$currentImage;
-       };
-
-       /**
-        * Gets the image after the current one. Returns the first image if
-        * the current one is the last.
-        *
-        * @return {jQuery}
-        */
-       mw.GallerySlider.prototype.getNextImage = function () {
-               // Not the last image in the gallery
-               if ( this.$currentImage.next( '.gallerybox' )[ 0 ] !== undefined ) {
-                       return this.$currentImage.next( '.gallerybox' );
-               } else {
-                       return this.$galleryBox.eq( 0 );
-               }
-       };
-
-       /**
-        * Gets the image before the current one. Returns the last image if
-        * the current one is the first.
-        *
-        * @return {jQuery}
-        */
-       mw.GallerySlider.prototype.getPrevImage = function () {
-               // Not the first image in the gallery
-               if ( this.$currentImage.prev( '.gallerybox' )[ 0 ] !== undefined ) {
-                       return this.$currentImage.prev( '.gallerybox' );
-               } else {
-                       return this.$galleryBox.last();
-               }
-       };
-
-       /**
-        * Sets the {@link #$currentImage} to the next one and shows
-        * it in the carousel
-        */
-       mw.GallerySlider.prototype.nextImage = function () {
-               this.$currentImage = this.getNextImage();
-               this.showCurrentImage();
-       };
-
-       /**
-        * Sets the {@link #$currentImage} to the previous one and shows
-        * it in the carousel
-        */
-       mw.GallerySlider.prototype.prevImage = function () {
-               this.$currentImage = this.getPrevImage();
-               this.showCurrentImage();
-       };
-
-       // Bootstrap all slider galleries
-       $( function () {
-               $( '.mw-gallery-slider' ).each( function () {
-                       /*jshint -W031 */
-                       new mw.GallerySlider( this );
-                       /*jshint +W031 */
-               } );
-       } );
-}( mediaWiki, jQuery, OO ) );
diff --git a/resources/src/mediawiki/page/gallery-slideshow.js b/resources/src/mediawiki/page/gallery-slideshow.js
new file mode 100644 (file)
index 0000000..85ded44
--- /dev/null
@@ -0,0 +1,453 @@
+/*!
+ * mw.GallerySlideshow: Interface controls for the slideshow gallery
+ */
+( function ( mw, $, OO ) {
+       /**
+        * mw.GallerySlideshow encapsulates the user interface of the slideshow
+        * galleries. An object is instantiated for each `.mw-gallery-slideshow`
+        * element.
+        *
+        * @class mw.GallerySlideshow
+        * @uses mw.Title
+        * @uses mw.Api
+        * @param {jQuery} gallery The `<ul>` element of the gallery.
+        */
+       mw.GallerySlideshow = function ( gallery ) {
+               // Properties
+               this.$gallery = $( gallery );
+               this.$galleryCaption = this.$gallery.find( '.gallerycaption' );
+               this.$galleryBox = this.$gallery.find( '.gallerybox' );
+               this.$currentImage = null;
+               this.imageInfoCache = {};
+               if ( this.$gallery.parent().attr( 'id' ) !== 'mw-content-text' ) {
+                       this.$container = this.$gallery.parent();
+               }
+
+               // Initialize
+               this.drawCarousel();
+               this.setSizeRequirement();
+               this.toggleThumbnails( false );
+               this.showCurrentImage();
+
+               // Events
+               $( window ).on(
+                       'resize',
+                       OO.ui.debounce(
+                               this.setSizeRequirement.bind( this ),
+                               100
+                       )
+               );
+
+               // Disable thumbnails' link, instead show the image in the carousel
+               this.$galleryBox.on( 'click', function ( e ) {
+                       this.$currentImage = $( e.currentTarget );
+                       this.showCurrentImage();
+                       return false;
+               }.bind( this ) );
+       };
+
+       /* Properties */
+       /**
+        * @property {jQuery} $gallery The `<ul>` element of the gallery.
+        */
+
+       /**
+        * @property {jQuery} $galleryCaption The `<li>` that has the gallery caption.
+        */
+
+       /**
+        * @property {jQuery} $galleryBox Selection of `<li>` elements that have thumbnails.
+        */
+
+       /**
+        * @property {jQuery} $carousel The `<li>` elements that contains the carousel.
+        */
+
+       /**
+        * @property {jQuery} $interface The `<div>` elements that contains the interface buttons.
+        */
+
+       /**
+        * @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.
+        */
+
+       /**
+        * @property {jQuery} $imgContainer The `<div>` element that contains the image.
+        */
+
+       /**
+        * @property {jQuery} $currentImage The `<li>` element of the current image.
+        */
+
+       /**
+        * @property {jQuery} $container If the gallery contained in an element that is
+        *      not the main content element, then it stores that element.
+        */
+
+       /**
+        * @property {Object} imageInfoCache A key value pair of thumbnail URLs and image info.
+        */
+
+       /**
+        * @property {number} imageWidth Width of the image based on viewport size
+        */
+
+       /**
+        * @property {number} imageHeight Height of the image based on viewport size
+        *      the URLs in the required size.
+        */
+
+       /* Setup */
+       OO.initClass( mw.GallerySlideshow );
+
+       /* Methods */
+       /**
+        * Draws the carousel and the interface around it.
+        */
+       mw.GallerySlideshow.prototype.drawCarousel = function () {
+               var next, prev, toggle, interfaceElements, carouselStack;
+
+               this.$carousel = $( '<li>' ).addClass( 'gallerycarousel' );
+
+               // Buttons for the interface
+               prev = new OO.ui.ButtonWidget( {
+                       framed: false,
+                       icon: 'previous'
+               } ).on( 'click', this.prevImage.bind( this ) );
+
+               next = new OO.ui.ButtonWidget( {
+                       framed: false,
+                       icon: 'next'
+               } ).on( 'click', this.nextImage.bind( this ) );
+
+               toggle = new OO.ui.ButtonWidget( {
+                       framed: false,
+                       icon: 'imageGallery'
+               } ).on( 'click', this.toggleThumbnails.bind( this ) );
+
+               interfaceElements = new OO.ui.PanelLayout( {
+                       expanded: false,
+                       classes: [ 'mw-gallery-slideshow-buttons' ],
+                       $content: $( '<div>' ).append(
+                               prev.$element,
+                               toggle.$element,
+                               next.$element
+                       )
+               } );
+               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 );
+
+               carouselStack = new OO.ui.StackLayout( {
+                       continuous: true,
+                       expanded: false,
+                       items: [
+                               interfaceElements,
+                               new OO.ui.PanelLayout( {
+                                       expanded: false,
+                                       $content: this.$imgContainer
+                               } ),
+                               new OO.ui.PanelLayout( {
+                                       expanded: false,
+                                       $content: this.$imgCaption
+                               } )
+                       ]
+               } );
+               this.$carousel.append( carouselStack.$element );
+
+               // Append below the caption or as the first element in the gallery
+               if ( this.$galleryCaption.length !== 0 ) {
+                       this.$galleryCaption.after( this.$carousel );
+               } else {
+                       this.$gallery.prepend( this.$carousel );
+               }
+       };
+
+       /**
+        * Sets the {@link #imageWidth} and {@link #imageHeight} properties
+        * based on the size of the window. Also flushes the
+        * {@link #imageInfoCache} as we'll now need URLs for a different
+        * 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();
+                       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 ) {
+                       this.imageWidth = w;
+                       this.imageHeight = h;
+                       this.imageInfoCache = {};
+                       this.setImageSize();
+               }
+       };
+
+       /**
+        * Gets the height of the interface elements and the
+        * gallery's caption.
+        */
+       mw.GallerySlideshow.prototype.getChromeHeight = function () {
+               return this.$interface.outerHeight() + this.$galleryCaption.outerHeight();
+       };
+
+       /**
+        * 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;
+               }
+
+               // Reset height and width
+               this.$img
+                       .removeAttr( 'width' )
+                       .removeAttr( 'height' );
+
+               // Stretch image to take up the required size
+               if ( this.$thumbnail.width() > this.$thumbnail.height() ) {
+                       this.$img.attr( 'width', this.imageWidth + 'px' );
+               } else {
+                       this.$img.attr( 'height', this.imageHeight + 'px' );
+               }
+
+               // Make the image smaller in case the current image
+               // size is larger than the original file size.
+               this.getImageInfo( this.$thumbnail ).done( 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' );
+                       }
+               }.bind( this ) );
+
+               return true;
+       };
+
+       /**
+        * Displays the image set as {@link #$currentImage} in the carousel.
+        */
+       mw.GallerySlideshow.prototype.showCurrentImage = function () {
+               var imageLi = this.getCurrentImage(),
+                       caption = imageLi.find( '.gallerytext' );
+
+               // Highlight current thumbnail
+               this.$gallery
+                       .find( '.gallerybox.slideshow-current' )
+                       .removeClass( 'slideshow-current' );
+               imageLi.addClass( 'slideshow-current' );
+
+               // Show thumbnail stretched to the right size while the image loads
+               this.$thumbnail = imageLi.find( 'img' );
+               this.$img.attr( 'src', this.$thumbnail.attr( 'src' ) );
+               this.$imgLink.attr( 'href', imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) );
+               this.setImageSize();
+
+               // Copy caption
+               this.$imgCaption
+                       .empty()
+                       .append( caption.clone() );
+
+               // Load image at the required size
+               this.loadImage( this.$thumbnail ).done( function ( info, $img ) {
+                       // Show this image to the user only if its still the current one
+                       if ( this.$thumbnail.attr( 'src' ) === $img.attr( 'src' ) ) {
+                               this.$img.attr( 'src', info.thumburl );
+                               this.setImageSize();
+
+                               // Keep the next image ready
+                               this.loadImage( this.getNextImage().find( 'img' ) );
+                       }
+               }.bind( this ) );
+       };
+
+       /**
+        * Loads the full image given the `<img>` element of the thumbnail.
+        *
+        * @param {Object} $img
+        * @return {jQuery.Promise} Resolves with the images URL and original
+        *      element once the image has loaded.
+        */
+       mw.GallerySlideshow.prototype.loadImage = function ( $img ) {
+               var img, d = $.Deferred();
+
+               this.getImageInfo( $img ).done( function ( info ) {
+                       img = new Image();
+                       img.src = info.thumburl;
+                       img.onload = function () {
+                               d.resolve( info, $img );
+                       };
+                       img.onerror = function () {
+                               d.reject();
+                       };
+               } ).fail( function () {
+                       d.reject();
+               } );
+
+               return d.promise();
+       };
+
+       /**
+        * Gets the image's info given an `<img>` element.
+        *
+        * @param {Object} $img
+        * @return {jQuery.Promise} Resolves with the image's info.
+        */
+       mw.GallerySlideshow.prototype.getImageInfo = function ( $img ) {
+               var api, title, params,
+                       imageSrc = $img.attr( 'src' );
+
+               if ( this.imageInfoCache[ imageSrc ] === undefined ) {
+                       api = new mw.Api();
+                       // TODO: This supports only gallery of images
+                       title = new mw.Title.newFromImg( $img );
+                       params = {
+                               action: 'query',
+                               formatversion: 2,
+                               titles: title.toString(),
+                               prop: 'imageinfo',
+                               iiprop: 'url'
+                       };
+
+                       // Check which dimension we need to request, based on
+                       // image and container proportions.
+                       if ( this.getDimensionToRequest( $img ) === 'height' ) {
+                               params.iiurlheight = this.imageHeight;
+                       } else {
+                               params.iiurlwidth = this.imageWidth;
+                       }
+
+                       this.imageInfoCache[ imageSrc ] = api.get( params ).then( function ( data ) {
+                               if ( OO.getProp( data, 'query', 'pages', 0, 'imageinfo', 0, 'thumburl' ) !== undefined ) {
+                                       return data.query.pages[ 0 ].imageinfo[ 0 ];
+                               } else {
+                                       return $.Deferred().reject();
+                               }
+                       } );
+               }
+
+               return this.imageInfoCache[ imageSrc ];
+       };
+
+       /**
+        * Given an image, the method checks whether to use the height
+        * or the width to request the larger image.
+        *
+        * @param {jQuery} $img
+        * @return {string}
+        */
+       mw.GallerySlideshow.prototype.getDimensionToRequest = function ( $img ) {
+               var ratio = $img.width() / $img.height();
+
+               if ( this.imageHeight * ratio <= this.imageWidth ) {
+                       return 'height';
+               } else {
+                       return 'width';
+               }
+       };
+
+       /**
+        * Toggles visibility of the thumbnails.
+        *
+        * @param {boolean} show Optional argument to control the state
+        */
+       mw.GallerySlideshow.prototype.toggleThumbnails = function ( show ) {
+               this.$galleryBox.toggle( show );
+               this.$carousel.toggleClass( 'mw-gallery-slideshow-thumbnails-toggled', show );
+       };
+
+       /**
+        * Getter method for {@link #$currentImage}
+        *
+        * @return {jQuery}
+        */
+       mw.GallerySlideshow.prototype.getCurrentImage = function () {
+               this.$currentImage = this.$currentImage || this.$galleryBox.eq( 0 );
+               return this.$currentImage;
+       };
+
+       /**
+        * Gets the image after the current one. Returns the first image if
+        * the current one is the last.
+        *
+        * @return {jQuery}
+        */
+       mw.GallerySlideshow.prototype.getNextImage = function () {
+               // Not the last image in the gallery
+               if ( this.$currentImage.next( '.gallerybox' )[ 0 ] !== undefined ) {
+                       return this.$currentImage.next( '.gallerybox' );
+               } else {
+                       return this.$galleryBox.eq( 0 );
+               }
+       };
+
+       /**
+        * Gets the image before the current one. Returns the last image if
+        * the current one is the first.
+        *
+        * @return {jQuery}
+        */
+       mw.GallerySlideshow.prototype.getPrevImage = function () {
+               // Not the first image in the gallery
+               if ( this.$currentImage.prev( '.gallerybox' )[ 0 ] !== undefined ) {
+                       return this.$currentImage.prev( '.gallerybox' );
+               } else {
+                       return this.$galleryBox.last();
+               }
+       };
+
+       /**
+        * Sets the {@link #$currentImage} to the next one and shows
+        * it in the carousel
+        */
+       mw.GallerySlideshow.prototype.nextImage = function () {
+               this.$currentImage = this.getNextImage();
+               this.showCurrentImage();
+       };
+
+       /**
+        * Sets the {@link #$currentImage} to the previous one and shows
+        * it in the carousel
+        */
+       mw.GallerySlideshow.prototype.prevImage = function () {
+               this.$currentImage = this.getPrevImage();
+               this.showCurrentImage();
+       };
+
+       // Bootstrap all slideshow galleries
+       $( function () {
+               $( '.mw-gallery-slideshow' ).each( function () {
+                       /*jshint -W031 */
+                       new mw.GallerySlideshow( this );
+                       /*jshint +W031 */
+               } );
+       } );
+}( mediaWiki, jQuery, OO ) );
index 7bf0f81..26463fd 100644 (file)
@@ -125,48 +125,48 @@ ul.mw-gallery-packed {
        text-align: center;
 }
 
-/* Slider */
-ul.gallery.mw-gallery-slider {
+/* Slideshow */
+ul.gallery.mw-gallery-slideshow {
        display: block;
        margin: 4em 0;
 }
 
-ul.gallery.mw-gallery-slider .gallerycaption {
+ul.gallery.mw-gallery-slideshow .gallerycaption {
        font-size: 1.3em;
        margin: 0;
 }
 
-ul.gallery.mw-gallery-slider .gallerycarousel.mw-gallery-slider-thumbnails-toggled {
+ul.gallery.mw-gallery-slideshow .gallerycarousel.mw-gallery-slideshow-thumbnails-toggled {
        margin-bottom: 1.3em;
 }
 
-ul.gallery.mw-gallery-slider .mw-gallery-slider-buttons {
+ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons {
        opacity: 0.5;
        padding: 1.3em 0;
 }
 
-ul.gallery.mw-gallery-slider .mw-gallery-slider-buttons .oo-ui-buttonElement {
+ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement {
        margin: 0 2em;
 }
 
-.mw-gallery-slider li.gallerybox.slider-current {
+.mw-gallery-slideshow li.gallerybox.slideshow-current {
        background: #efefef;
 }
 
-.mw-gallery-slider .gallerybox > div {
+.mw-gallery-slideshow .gallerybox > div {
        max-width: 120px;
 }
 
-ul.mw-gallery-slider li.gallerybox div.thumb {
+ul.mw-gallery-slideshow li.gallerybox div.thumb {
        border: none;
        background: transparent;
 }
 
-ul.mw-gallery-slider li.gallerycarousel {
+ul.mw-gallery-slideshow li.gallerycarousel {
        display: block;
        text-align: center;
 }
 
-.mw-gallery-slider-img-container a {
+.mw-gallery-slideshow-img-container a {
        display: block;
 }
\ No newline at end of file