=== 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.
'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',
'BlockIpComplete': After an IP address or user is blocked.
$block: the Block object that was saved
$user: the user who did the block (not the one being blocked)
+$priorBlock: the Block object for the prior block or null if there was none
'BookInformation': Before information output on Special:Booksources.
$isbn: ISBN to show information for
use MediaWiki\Logger\LoggerFactory;
use MediaWiki\Session\SessionManager;
use WrappedString\WrappedString;
+use WrappedString\WrappedStringList;
/**
* This class should be covered by a general architecture document which does
$userdir = $this->getLanguage()->getDir();
$sitedir = $wgContLang->getDir();
- $ret = Html::htmlHeader( $sk->getHtmlElementAttributes() );
+ $pieces = [];
+ $pieces[] = Html::htmlHeader( $sk->getHtmlElementAttributes() );
if ( $this->getHTMLTitle() == '' ) {
$this->setHTMLTitle( $this->msg( 'pagetitle', $this->getPageTitle() )->inContentLanguage() );
$openHead = Html::openElement( 'head' );
if ( $openHead ) {
- # Don't bother with the newline if $head == ''
- $ret .= "$openHead\n";
+ $pieces[] = $openHead;
}
if ( !Html::isXmlMimeType( $this->getConfig()->get( 'MimeType' ) ) ) {
// Our XML declaration is output by Html::htmlHeader.
// http://www.whatwg.org/html/semantics.html#attr-meta-http-equiv-content-type
// http://www.whatwg.org/html/semantics.html#charset
- $ret .= Html::element( 'meta', [ 'charset' => 'UTF-8' ] ) . "\n";
+ $pieces[] = Html::element( 'meta', [ 'charset' => 'UTF-8' ] );
}
- $ret .= Html::element( 'title', null, $this->getHTMLTitle() ) . "\n";
- $ret .= $this->getInlineHeadScripts() . "\n";
- $ret .= $this->buildCssLinks() . "\n";
- $ret .= $this->getExternalHeadScripts() . "\n";
+ $pieces[] = Html::element( 'title', null, $this->getHTMLTitle() );
+ $pieces[] = $this->getInlineHeadScripts();
+ $pieces[] = $this->buildCssLinks();
+ $pieces[] = $this->getExternalHeadScripts();
foreach ( $this->getHeadLinksArray() as $item ) {
- $ret .= $item . "\n";
+ $pieces[] = $item;
}
foreach ( $this->mHeadItems as $item ) {
- $ret .= $item . "\n";
+ $pieces[] = $item;
}
$closeHead = Html::closeElement( 'head' );
if ( $closeHead ) {
- $ret .= "$closeHead\n";
+ $pieces[] = $closeHead;
}
$bodyClasses = [];
$sk->addToBodyAttributes( $this, $bodyAttrs );
Hooks::run( 'OutputPageBodyAttributes', [ $this, $sk, &$bodyAttrs ] );
- $ret .= Html::openElement( 'body', $bodyAttrs ) . "\n";
+ $pieces[] = Html::openElement( 'body', $bodyAttrs );
- return $ret;
+ return WrappedStringList::join( "\n", $pieces );
}
/**
/**
* Build html output from an array of links from makeResourceLoaderLink.
* @param array $links
- * @return string HTML
+ * @return string|WrappedStringList HTML
*/
protected static function getHtmlFromLoaderLinks( array $links ) {
$html = [];
// Filter out empty values
$html = array_filter( $html, 'strlen' );
- if ( count( $states ) ) {
+ if ( $states ) {
array_unshift( $html, ResourceLoader::makeInlineScript(
ResourceLoader::makeLoaderStateScript( $states )
) );
}
/**
- * <script src="..."> tags for "<head>". This is the startup module
+ * <script src="..."> tags for "<head>".This is the startup module
* and other modules marked with position 'top'.
*
- * @return string HTML fragment
+ * @return string|WrappedStringList HTML
*/
function getExternalHeadScripts() {
- $links = [];
-
// Startup - this provides the client with the module
// manifest and loads jquery and mediawiki base modules
+ $links = [];
$links[] = $this->makeResourceLoaderLink( 'startup', ResourceLoaderModule::TYPE_SCRIPTS );
-
return self::getHtmlFromLoaderLinks( $links );
}
/**
- * <script>...</script> tags to put in "<head>".
+ * Inline "<script>" tags to put in "<head>".
*
- * @return string HTML fragment
+ * @return string|WrappedStringList HTML
*/
function getInlineHeadScripts() {
$links = [];
*
* @param bool $unused Previously used to let this method change its output based
* on whether it was called by getExternalHeadScripts() or getBottomScripts().
- * @return string
+ * @return string|WrappedStringList HTML
*/
function getScriptsForBottomQueue( $unused = null ) {
// Scripts "only" requests marked for bottom inclusion
}
/**
- * Build a set of "<link>" elements for the stylesheets specified in the $this->styles array.
- * These will be applied to various media & IE conditionals.
+ * Build a set of "<link>" elements for stylesheets specified in the $this->styles array.
*
- * @return string
+ * @return string|WrappedStringList HTML
*/
public function buildCssLinks() {
global $wgContLang;
}
// Add stuff in $otherTags (previewed user CSS if applicable)
- return self::getHtmlFromLoaderLinks( $links ) . implode( '', $otherTags );
+ $links[] = implode( '', $otherTags );
+
+ return self::getHtmlFromLoaderLinks( $links );
}
/**
$logid = $logEntry->insert();
}
+ // Commit database changes, so even if something else later blows up
+ // the newly-created user doesn't get lost.
+ wfGetLBFactory()->commitMasterChanges( __METHOD__ );
+
if ( $login ) {
$this->setSessionDataForUser( $user );
}
'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 ] );
+++ /dev/null
-<?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' ];
- }
-}
--- /dev/null
+<?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' ];
+ }
+}
return [ 'ipb-blockingself', 'ipb-confirmaction' ];
}
} elseif ( $type == Block::TYPE_RANGE ) {
+ $user = null;
$userId = 0;
} elseif ( $type == Block::TYPE_IP ) {
+ $user = null;
$target = $target->getName();
$userId = 0;
} else {
return $reason;
}
+ $priorBlock = null;
# Try to insert block. Is there a conflicting block?
$status = $block->insert();
if ( !$status ) {
# This returns direct blocks before autoblocks/rangeblocks, since we should
# be sure the user is blocked by now it should work for our purposes
$currentBlock = Block::newFromTarget( $target );
-
if ( $block->equals( $currentBlock ) ) {
return [ [ 'ipb_already_blocked', $block->getTarget() ] ];
}
-
# If the name was hidden and the blocking user cannot hide
# names, then don't allow any block changes...
if ( $currentBlock->mHideName && !$performer->isAllowed( 'hideuser' ) ) {
return [ 'cant-see-hidden-user' ];
}
+ $priorBlock = clone $currentBlock;
$currentBlock->isHardblock( $block->isHardblock() );
$currentBlock->prevents( 'createaccount', $block->prevents( 'createaccount' ) );
$currentBlock->mExpiry = $block->mExpiry;
$logaction = 'block';
}
- Hooks::run( 'BlockIpComplete', [ $block, $performer ] );
+ Hooks::run( 'BlockIpComplete', [ $block, $performer, $priorBlock ] );
# Set *_deleted fields if requested
if ( $data['HideUser'] ) {
"mw.Upload*",
"mw.ForeignUpload",
"mw.ForeignStructuredUpload*",
- "mw.GallerySlider"
+ "mw.GallerySlideshow"
]
},
{
'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',
+++ /dev/null
-/*!
- * 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 ) );
--- /dev/null
+/*!
+ * 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 ) );
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
dépôts / lhc / web / wiklou.git / commitdiff