From: Prateek Saxena <prtksxna@gmail.com>
Date: Wed, 4 May 2016 16:13:55 +0000 (+0530)
Subject: Gallery: Add new slider mode
X-Git-Tag: 1.31.0-rc.0~6433
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/categories/modifier.php?a=commitdiff_plain;h=e3aa36ddee9254e934e2bd963f6e32c49f5260ec;p=lhc%2Fweb%2Fwiklou.git

Gallery: Add new slider mode

Bug: T128429
Change-Id: I14cac38cf1c66d9ba9584772a1cd3f345731b2af
---

diff --git a/RELEASE-NOTES-1.28 b/RELEASE-NOTES-1.28
index 9281a96ac8..697665552c 100644
--- a/RELEASE-NOTES-1.28
+++ b/RELEASE-NOTES-1.28
@@ -19,6 +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 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.
diff --git a/autoload.php b/autoload.php
index 0211c6d076..cd0a1643a9 100644
--- a/autoload.php
+++ b/autoload.php
@@ -1248,6 +1248,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',
 	'SpecialActiveUsers' => __DIR__ . '/includes/specials/SpecialActiveusers.php',
 	'SpecialAllMessages' => __DIR__ . '/includes/specials/SpecialAllMessages.php',
 	'SpecialAllMyUploads' => __DIR__ . '/includes/specials/SpecialMyRedirectPages.php',
diff --git a/includes/gallery/ImageGalleryBase.php b/includes/gallery/ImageGalleryBase.php
index c8a25f0b28..73f4b19d52 100644
--- a/includes/gallery/ImageGalleryBase.php
+++ b/includes/gallery/ImageGalleryBase.php
@@ -113,6 +113,7 @@ abstract class ImageGalleryBase extends ContextSource {
 				'packed' => 'PackedImageGallery',
 				'packed-hover' => 'PackedHoverImageGallery',
 				'packed-overlay' => 'PackedOverlayImageGallery',
+				'slider' => 'SliderImageGallery',
 			];
 			// 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
new file mode 100644
index 0000000000..67be9cea10
--- /dev/null
+++ b/includes/gallery/SliderImageGallery.php
@@ -0,0 +1,37 @@
+<?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/maintenance/jsduck/categories.json b/maintenance/jsduck/categories.json
index d9e2c50e99..631d2a7b6d 100644
--- a/maintenance/jsduck/categories.json
+++ b/maintenance/jsduck/categories.json
@@ -64,7 +64,8 @@
 					"mw.Feedback*",
 					"mw.Upload*",
 					"mw.ForeignUpload",
-					"mw.ForeignStructuredUpload*"
+					"mw.ForeignStructuredUpload*",
+					"mw.GallerySlider"
 				]
 			},
 			{
diff --git a/resources/Resources.php b/resources/Resources.php
index 8526ec6c57..1805c842b7 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1656,6 +1656,18 @@ return [
 		'position' => 'top',
 		'targets' => [ 'desktop', 'mobile' ],
 	],
+	'mediawiki.page.gallery.slider' => [
+		'scripts' => 'resources/src/mediawiki/page/gallery-slider.js',
+		'position' => 'top',
+		'dependencies' => [
+			'mediawiki.api',
+			'mediawiki.Title',
+			'oojs',
+			'oojs-ui-core',
+			'oojs-ui-widgets',
+			'oojs-ui.styles.icons-media'
+		]
+	],
 	'mediawiki.page.ready' => [
 		'scripts' => 'resources/src/mediawiki/page/ready.js',
 		'dependencies' => [
diff --git a/resources/src/mediawiki/page/gallery-slider.js b/resources/src/mediawiki/page/gallery-slider.js
new file mode 100644
index 0000000000..82b22e89ad
--- /dev/null
+++ b/resources/src/mediawiki/page/gallery-slider.js
@@ -0,0 +1,453 @@
+/*!
+ * 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.css b/resources/src/mediawiki/page/gallery.css
index 3ed4870580..7bf0f81137 100644
--- a/resources/src/mediawiki/page/gallery.css
+++ b/resources/src/mediawiki/page/gallery.css
@@ -124,3 +124,49 @@ ul.mw-gallery-packed-overlay,
 ul.mw-gallery-packed {
 	text-align: center;
 }
+
+/* Slider */
+ul.gallery.mw-gallery-slider {
+	display: block;
+	margin: 4em 0;
+}
+
+ul.gallery.mw-gallery-slider .gallerycaption {
+	font-size: 1.3em;
+	margin: 0;
+}
+
+ul.gallery.mw-gallery-slider .gallerycarousel.mw-gallery-slider-thumbnails-toggled {
+	margin-bottom: 1.3em;
+}
+
+ul.gallery.mw-gallery-slider .mw-gallery-slider-buttons {
+	opacity: 0.5;
+	padding: 1.3em 0;
+}
+
+ul.gallery.mw-gallery-slider .mw-gallery-slider-buttons .oo-ui-buttonElement {
+	margin: 0 2em;
+}
+
+.mw-gallery-slider li.gallerybox.slider-current {
+	background: #efefef;
+}
+
+.mw-gallery-slider .gallerybox > div {
+	max-width: 120px;
+}
+
+ul.mw-gallery-slider li.gallerybox div.thumb {
+	border: none;
+	background: transparent;
+}
+
+ul.mw-gallery-slider li.gallerycarousel {
+	display: block;
+	text-align: center;
+}
+
+.mw-gallery-slider-img-container a {
+	display: block;
+}
\ No newline at end of file