/* * This file is part of the MediaWiki extension MultimediaViewer. * * MultimediaViewer 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. * * MultimediaViewer 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 MultimediaViewer. If not, see . */ ( function ( mw, $, moment ) { var MultiLightbox, lightboxHooks, MMVP, validExtensions = { 'jpg': true, 'jpeg': true, 'gif': true, 'svg': true, 'png': true, 'tiff': true, 'tif': true }, iiprops = [ 'timestamp', 'user', 'userid', 'comment', 'url', 'size', 'sha1', 'mime', 'mediatype', 'metadata', 'extmetadata' ], mmvLogActions = { 'thumbnail-link-click': 'User clicked on thumbnail to open lightbox.', 'enlarge-link-click': 'User clicked on enlarge link to open lightbox.', 'fullscreen-link-click': 'User clicked on fullscreen button in lightbox.', 'defullscreen-link-click': 'User clicked on button to return to normal lightbox view.', 'close-link-click': 'User clicked on the lightbox close button.', 'site-link-click': 'User clicked on the link to the file description page.' }; function MultimediaViewer() { var $thumbs = $( '.gallery .image img, a.image img' ), urls = [], viewer = this; this.api = new mw.Api(); this.imageInfo = {}; $thumbs.each( function ( i, thumb ) { var fileLink, $thumb = $( thumb ), $link = $thumb.closest( 'a.image' ), $thumbContain = $link.closest( '.thumb' ), $enlarge = $thumbContain.find( '.magnify a' ), $links = $link.add( $enlarge ), filePageLink = $link.prop( 'href' ), fileTitle = mw.Title.newFromImg( $thumb ), index = urls.length; if ( !validExtensions[fileTitle.getExtension().toLowerCase()] ) { // Not a valid extension, skip this one return; } $links.data( 'filePageLink', filePageLink ); urls.push( new mw.LightboxImage( fileLink ) ); urls[index].filePageLink = filePageLink; $links.click( function ( e ) { // Do not interfere with non-left clicks or if modifier keys are pressed. if ( e.which !== 1 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) { return; } var $this = $( this ); if ( $this.is( 'a.image' ) ) { viewer.log( 'thumbnail-link-click' ); } else if ( $this.is( '.magnify a' ) ) { viewer.log( 'enlarge-link-click' ); } e.preventDefault(); viewer.lightbox.currentIndex = index; if ( $thumbContain.length === 0 ) { // This isn't a thumbnail! Just use the link. $thumbContain = $link; } else if ( $thumbContain.is( '.thumb' ) ) { $thumbContain = $thumbContain.find( '.image' ); } // Open with the already-loaded thumbnail // Avoids trying to load /wiki/Undefined and doesn't // cost any network time - the library currently needs // some src attribute to work. Will fix. viewer.lightbox.images[index].src = $thumbContain.find( 'img' ).prop( 'src' ); viewer.lightbox.open(); $( document.body ).addClass( 'mw-mlb-lightbox-open' ); viewer.lightbox.iface.$imageDiv.append( $.createSpinner( { id: 'mw-mlb-loading-spinner', size: 'large' } ) ); viewer.fetchImageInfo( fileTitle, function ( imageInfo ) { var imageEle = new Image(); imageEle.onload = function () { viewer.lightbox.iface.replaceImageWith( imageEle ); viewer.lightbox.iface.$imageDiv.removeClass( 'empty' ); viewer.updateControls(); $.removeSpinner( 'mw-mlb-loading-spinner' ); viewer.setImageInfo( fileTitle, imageInfo ); }; imageEle.src = imageInfo.imageinfo[0].thumburl || imageInfo.imageinfo[0].url; } ); return false; } ); } ); if ( $thumbs.length > 0 ) { this.lightbox = new MultiLightbox( urls ); } lightboxHooks.register( 'closeInterface', function () { this.$mwControls.css( { top: '-999px', left: '-999px' } ); $( document.body ).removeClass( 'mw-mlb-lightbox-open' ); } ); lightboxHooks.register( 'imageResize', function () { var api = new mw.Api(), density = $.devicePixelRatio(), filename = viewer.currentImageFilename, ui = this; api.get( { action: 'query', format: 'json', titles: filename, prop: 'imageinfo', iiprop: 'url', iiurlwidth: Math.floor( density * this.$imageWrapper.width() ), iiurlheight: Math.floor( density * this.$imageWrapper.height() ) } ).done( function ( data ) { var imageInfo, innerInfo, image = new Image(); $.each( data.query.pages, function ( i, page ) { imageInfo = page; return false; } ); innerInfo = imageInfo.imageinfo[0]; image.onload = function () { ui.replaceImageWith( image ); viewer.updateControls(); }; image.src = innerInfo.thumburl || innerInfo.url; } ); return false; } ); lightboxHooks.register( 'modifyInterface', function () { var ui = this; viewer.initializeInterface( ui ); } ); lightboxHooks.register( 'fullscreen', function () { if ( this.$imageMetadata ) { this.$imageMetadata.hide(); } } ); lightboxHooks.register( 'defullscreen', function () { if ( this.$imageMetadata ) { this.$imageMetadata.show(); } } ); lightboxHooks.register( 'clearInterface', function () { this.$imageDesc.empty(); this.$imageDescDiv.addClass( 'empty' ); this.$title.empty(); this.$credit.empty().addClass( 'empty' ); this.$username.empty(); this.$usernameLi.addClass( 'empty' ); this.$repo.empty(); this.$repoLi.addClass( 'empty' ); this.$datetime.empty(); this.$datetimeLi.addClass( 'empty' ); this.$license.empty().addClass( 'empty' ); viewer.currentImageFilename = null; this.$useFile.data( 'title', null ); this.$useFile.data( 'link', null ); this.$useFile.data( 'src', null ); this.$useFileLi.addClass( 'empty' ); this.$imageDiv.addClass( 'empty' ); } ); } MMVP = MultimediaViewer.prototype; MMVP.initializeInterface = function ( ui ) { this.ui = ui; this.ui.$postDiv.css( 'top', ( $( window ).height() - 64 ) + 'px' ); this.initializeHeader(); this.initializeButtons(); this.initializeImage(); this.initializeImageMetadata(); this.initializeAboutLinks(); this.registerLogging(); }; MMVP.initializeImage = function () { this.ui.$imageDiv .addClass( 'empty' ); }; MMVP.initializeImageDesc = function () { this.ui.$imageDesc = $( '

' ) .addClass( 'mw-mlb-image-desc' ); this.ui.$imageDescDiv = $( '

' ) .addClass( 'mw-mlb-image-desc-div' ) .addClass( 'empty' ) .append( this.ui.$imageDesc ); this.ui.$imageMetadata.append( this.ui.$imageDescDiv ); }; MMVP.initializeImageLinks = function () { this.ui.$imageLinks = $( '