Файловый менеджер - Редактировать - /var/www/html/mediawiki-1.43.1/resources/src/mediawiki.page.gallery.slideshow.js
Ðазад
( function () { /** * @class mw.GallerySlideshow * @classdesc Interface controls for the slideshow gallery. To use, first load * the `mediawiki.page.gallery.slideshow` ResourceLoader module. * @uses mw.Title * @uses mw.Api * * @constructor * @description Encapsulates the user interface of the slideshow galleries. * An object is instantiated for each `.mw-gallery-slideshow` element. * @param {jQuery} gallery The `<ul>` element of the gallery. */ mw.GallerySlideshow = function ( gallery ) { // Properties /** * The `<ul>` element of the gallery. * * @type {jQuery} */ this.$gallery = $( gallery ); /** * The `<li>` that has the gallery caption. * * @type {jQuery} */ this.$galleryCaption = this.$gallery.find( '.gallerycaption' ); /** * Selection of `<li>` elements that have thumbnails. * * @type {jQuery} */ this.$galleryBox = this.$gallery.find( '.gallerybox' ); /** * The `<li>` element of the current image. * * @type {jQuery} */ this.$currentImage = null; /** * A key value pair of thumbnail URLs and image info. * * @type {Object.<string,jQuery.Promise>} */ this.imageInfoCache = {}; /* Properties */ /** * The `<li>` element that contains the carousel. * * @name $carousel * @memberof mw.GallerySlideshow.prototype * @type {jQuery|null} */ /** * The `<div>` element that contains the interface buttons. * * @name $interface * @memberof mw.GallerySlideshow.prototype * @type {jQuery} */ /** * The `<img>` element that'll display the current image. * * @name $img * @memberof mw.GallerySlideshow.prototype * @type {jQuery} */ /** * The `<p>` element that holds the image caption. * * @name $imgCaption * @memberof mw.GallerySlideshow.prototype * @type {jQuery} */ /** * The `<div>` element that contains the image. * * @name $imgContainer * @memberof mw.GallerySlideshow.prototype * @type {jQuery} */ /** * Width of the image based on viewport size. * * @name imageWidth * @memberof mw.GallerySlideshow.prototype * @type {number} */ /** * Height of the image based on viewport size the URLs in the required size. * * @name imageHeight * @memberof mw.GallerySlideshow.prototype * @type {number} */ // Initialize this.drawCarousel(); this.setSizeRequirement(); this.toggleThumbnails( !!this.$gallery.attr( 'data-showthumbnails' ) ); this.showCurrentImage( true ); // 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', ( e ) => { this.$currentImage = $( e.currentTarget ); this.showCurrentImage(); return false; } ); }; /* Setup */ OO.initClass( mw.GallerySlideshow ); /* Methods */ /** * Draws the carousel and the interface around it. */ mw.GallerySlideshow.prototype.drawCarousel = function () { this.$carousel = $( '<li>' ).addClass( 'gallerycarousel' ); // Buttons for the interface const prevButton = new OO.ui.ButtonWidget( { framed: false, icon: 'previous' } ).connect( this, { click: 'prevImage' } ); const nextButton = new OO.ui.ButtonWidget( { framed: false, icon: 'next' } ).connect( this, { click: 'nextImage' } ); const toggleButton = new OO.ui.ButtonWidget( { framed: false, icon: 'imageGallery', title: mw.msg( 'gallery-slideshow-toggle' ) } ).connect( this, { click: 'toggleThumbnails' } ); const interfaceElements = new OO.ui.PanelLayout( { expanded: false, classes: [ 'mw-gallery-slideshow-buttons' ], $content: $( '<div>' ).append( prevButton.$element, toggleButton.$element, nextButton.$element ) } ); this.$interface = interfaceElements.$element; // Containers for the current image, caption etc. this.$imgCaption = $( '<p>' ).attr( 'class', 'mw-gallery-slideshow-caption' ); this.$imgContainer = $( '<div>' ) .attr( 'class', 'mw-gallery-slideshow-img-container' ); const 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 mw.GallerySlideshow#imageWidth imageWidth} and * {@link mw.GallerySlideshow#imageHeight imageHeight} properties based on the size of the * window. Also flushes the {@link mw.GallerySlideshow#imageInfoCache imageInfoCache} as we'll * now need URLs for a different size. */ mw.GallerySlideshow.prototype.setSizeRequirement = function () { let w = this.$imgContainer.width(), h = Math.min( $( window ).height() * ( 3 / 4 ), this.$imgContainer.width() ) - this.getChromeHeight(); // Round values in case the user's browser is returning non-integer values. w = Math.round( w ); h = Math.round( h ); // 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. * * @return {number} Height */ mw.GallerySlideshow.prototype.getChromeHeight = function () { return this.$interface.outerHeight() + ( this.$galleryCaption.outerHeight() || 0 ); }; /** * Sets the height and width of {@link mw.GallerySlideshow#$img $img} based on the * proportion of the image and the values generated by * {@link mw.GallerySlideshow#setSizeRequirement setSizeRequirement}. */ mw.GallerySlideshow.prototype.setImageSize = function () { if ( this.$img === undefined || this.$thumbnail === undefined ) { return; } // Reset height and width this.$img .removeAttr( 'width' ) .removeAttr( 'height' ); // Stretch image to take up the required size this.$img.attr( 'height', ( this.imageHeight - this.$imgCaption.outerHeight() ) + 'px' ); // Make the image smaller in case the current image // size is larger than the original file size. this.getImageInfo( this.$thumbnail ).then( ( 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', height: info.thumbheight + 'px' } ); } } ); }; /** * Displays the image set as {@link mw.GallerySlideshow#$currentImage $currentImage} in the * carousel. * * @param {boolean} init Image being shown during gallery init (i.e. first image) */ mw.GallerySlideshow.prototype.showCurrentImage = function ( init ) { const $imageLi = this.getCurrentImage(); const $caption = $imageLi.find( '.gallerytext' ); // The order of the following is important for size calculations // 1. Highlight current thumbnail this.$gallery .find( '.gallerybox.slideshow-current' ) .removeClass( 'slideshow-current' ); $imageLi.addClass( 'slideshow-current' ); this.$thumbnail = $imageLi.find( 'img' ); if ( this.$thumbnail.length ) { // 2. Create and show thumbnail this.$img = $( '<img>' ).attr( { src: this.$thumbnail.attr( 'src' ), alt: this.$thumbnail.attr( 'alt' ) } ); // 'image' class required for detection by MultimediaViewer const $imgLink = $( '<a>' ).addClass( 'image' ) .attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) ) .append( this.$img ); this.$imgContainer.empty().append( $imgLink ); } else { // 2b. No image found (e.g. file doesn't exist) this.$imgContainer.text( $imageLi.find( '.thumb' ).text() ); } // 3. Copy caption this.$imgCaption .empty() .append( $caption.clone() ); if ( !this.$thumbnail.length ) { return; } // 4. Stretch thumbnail to correct size this.setImageSize(); const $thumbnail = this.$thumbnail; // 5. Load image at the required size this.loadImage( this.$thumbnail ).done( ( info ) => { // Show this image to the user only if its still the current one if ( this.$thumbnail.attr( 'src' ) === $thumbnail.attr( 'src' ) ) { this.$img.attr( 'src', info.thumburl ); this.setImageSize(); // Don't fire hook twice during init if ( !init ) { mw.hook( 'wikipage.content' ).fire( this.$imgContainer ); } // Pre-fetch the next image this.loadImage( this.getNextImage().find( 'img' ) ); } } ).fail( () => { // Image didn't load const title = mw.Title.newFromImg( this.$img ); this.$imgContainer.text( title ? title.getMainText() : '' ); } ); }; /** * Loads the full image given the `<img>` element of the thumbnail. * * @param {jQuery} $img * @return {jQuery.Promise} Resolves with the image's URL and original * element once the image has loaded. */ mw.GallerySlideshow.prototype.loadImage = function ( $img ) { return this.getImageInfo( $img ).then( ( info ) => { const d = $.Deferred(); const img = new Image(); img.src = info.thumburl; img.onload = function () { d.resolve( info ); }; img.onerror = 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 ) { const imageSrc = $img.attr( 'src' ); // Reject promise if there is no thumbnail image if ( $img[ 0 ] === undefined ) { return $.Deferred().reject(); } if ( this.imageInfoCache[ imageSrc ] === undefined ) { const api = new mw.Api(); // TODO: This supports only gallery of images const title = mw.Title.newFromImg( $img ); const 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( ( 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 ) { const 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 mw.GallerySlideshow#$currentImage $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 mw.GallerySlideshow#$currentImage $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 mw.GallerySlideshow#$currentImage $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 mw.hook( 'wikipage.content' ).add( ( $content ) => { $content.find( '.mw-gallery-slideshow' ).filter( function () { // This gallery slideshow feature depends on img tags being present in the DOM. // This might not be true - for example in MobileFrontend - where images are lazy loaded. // The filter statement can be removed when T194887 is resolved. return $( this ).find( 'img' ).length > 0; } ).each( function () { // eslint-disable-next-line no-new new mw.GallerySlideshow( this ); } ); } ); }() );
| ver. 1.1 | |
.
| PHP 8.4.18 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ Ñтраницы: 0 |
proxy
|
phpinfo
|
ÐаÑтройка