Wikipédia

MediaWiki:Gadget-ZoomOnThumb.js

Note : après avoir enregistré la page, vous devrez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

Mozilla / Firefox / Konqueror / Safari : maintenez la touche Majuscule (Shift) en cliquant sur le bouton Actualiser (Reload) ou pressez Maj-Ctrl-R (Cmd-R sur Apple Mac) ;

Firefox (sur GNU/Linux) / Chrome / Internet Explorer / Opera : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5.
// Permet de zoomer une image ("thumb" ou galerie) au survol de la souris ou au focus du clavier

// Documentation : [[Projet:JavaScript/Notices/ZoomOnThumb]]

// {{Catégorisation JS|ZoomOnThumb}}

// TODO : mettre à jour ZoomOnThumb_CheckLinks() et ZoomOnGallery_CheckLinks() pour le nouveau markup des médias
// cf. [[mw:Parsoid/Parser Unification/Media structure/FAQ]] ainsi que [[mw:Specs/HTML/Extensions/Gallery]]

//<syntaxhighlight lang=javascript>
//<pre><nowiki>
// jshint strict:false

////////////////////////////////////////////////////////////// VARIABLES PERSONNALISABLES //////////////////////////////////////////


////  Images thumb  ////

// délai avant zoom en millisecondes
if ( typeof window.ZoomOnThumb_Delay === 'undefined' ) {
	window.ZoomOnThumb_Delay = 200;
}
// délai entre deux étapes d'agrandissement en millisecondes
if ( typeof window.ZoomOnThumb_TimeOut === 'undefined' ) {
	window.ZoomOnThumb_TimeOut = 50;
}
// multiplicateur de grossissement max
if ( typeof window.ZoomOnThumb_MaxMultiplicator === 'undefined' ) {
	window.ZoomOnThumb_MaxMultiplicator = 3;
}

////  Images galeries  ////

// délai avant zoom en millisecondes
if ( typeof window.ZoomOnGallery_Delay === 'undefined' ) {
	window.ZoomOnGallery_Delay = 200;
}
// délai entre deux étapes d'agrandissement en millisecondes
if ( typeof window.ZoomOnGallery_TimeOut === 'undefined' ) {
	window.ZoomOnGallery_TimeOut = 50;
}
// pourcentage d'agrandissement entre deux étapes
if ( typeof window.ZoomOnGallery_ZoomFactor === 'undefined' ) {
	window.ZoomOnGallery_ZoomFactor = 4;
}
// multiplicateur de grossissement max
if ( typeof window.ZoomOnGallery_MaxMultiplicator === 'undefined' ) {
	window.ZoomOnGallery_MaxMultiplicator = 3;
}


////////////////////////////////////////////////////////////// FONCTIONS //////////////////////////////////////////



// --------------------------------------------------- IMAGES THUMB -----------------------------------------------------------------

/* VARIABLES */
var ZoomOnThumb_LinkOnImage = [];                 // Liste des liens "image"
var ZoomOnThumb_LinkOnImageState = [];            // État de zoom : 1 = zoom avant, -1 = zoom arrière, 0 = taille normale
var ZoomOnThumb_LinkOnImageOriginalWidth = [];    // Largeur originale de l'image
var ZoomOnThumb_LinkOnImageOriginalHeight = [];   // Hauteur originale de l'image
var ZoomOnThumb_LinkOnImageOriginalTarget = [];   // Cible originale de l'image (basse résolution)
var ZoomOnThumb_LinkOnImageZoomedTarget = [];     // Cible zoomée de l'image (haute résolution)


/* ÉTABLISSEMENT DE LA LISTE DES LIENS "IMAGE" */
function ZoomOnThumb_CheckLinks() {
	var Divs = document.getElementsByTagName( 'div' );
	var a, DivThumb, Links, LinkOnImage, Extension;
	for ( a = 0; a < Divs.length; a++ ) {
		if ( Divs[ a ].classList.contains( "thumbinner" ) ) {
			DivThumb = Divs[ a ];
			if ( DivThumb.parentNode.closest( ".infobox, .noZoom" ) ) {
				continue;
			}
			DivThumb.classList.add( "nopopups" );
			Links = DivThumb.getElementsByTagName( 'a' );
			LinkOnImage = Links[ 0 ];
			if ( LinkOnImage ) {
				while ( LinkOnImage.className != "image" ) {
					LinkOnImage = LinkOnImage.nextSibling;
					if ( !LinkOnImage ) {
						break;
					}
				}
			}
			if ( LinkOnImage ) {
				Extension = LinkOnImage.href.replace( /.*\./,"" ).toLowerCase();
				if ( [ 'ogg','ogv','pdf','webm' ].indexOf( Extension ) === -1 ) {
					ZoomOnThumb_LinkOnImage.push( LinkOnImage );
				}
			}
		}
	}
	ZoomOnThumb_ModifyLinks();
}

/* TRANSFORMATION DES LIENS, MISE A JOUR VARIABLES */
function ZoomOnThumb_ModifyLinks() {
	function zoomIn() {
		var ID = parseInt( this.id.split( 'ZoomLink_' ).join( '' ) );
		ZoomOnThumb_LinkOnImageState[ ID ] = 1;
		ZoomOnThumb_ReplaceSrc( ID );
		setTimeout(
			"window.ZoomOnThumb_ZoomIn(" + ID + ");",
			window.ZoomOnThumb_Delay
		);
	}
	function zoomOut () {
		var ID = parseInt( this.id.split( 'ZoomLink_' ).join( '' ) );
		ZoomOnThumb_LinkOnImageState[ ID ] = -1;
		window.ZoomOnThumb_ZoomOut( ID );
	}
	
	var b, ThisLink, ThisDiv, ThisImage;
	for ( b = 0; b < ZoomOnThumb_LinkOnImage.length; b++ ) {
		ThisLink = ZoomOnThumb_LinkOnImage[ b ];
		ThisLink.id = "ZoomLink_" + b;
		ThisLink.onmouseover = zoomIn;
		ThisLink.onfocus = zoomIn;
		ThisLink.onmouseout = zoomOut;
		ThisLink.onblur = zoomOut;
		
		ThisDiv = ThisLink.parentNode;
		ThisDiv.id = "ZoomDiv_" + b;
		
		ThisImage = ThisLink.getElementsByTagName( 'img' )[ 0 ];
		ThisImage.id = "ZoomImage_" + b;
		
		ZoomOnThumb_LinkOnImageOriginalWidth[ b ] = ThisImage.width;
		ZoomOnThumb_LinkOnImageOriginalHeight[ b ] = ThisImage.height;
		ZoomOnThumb_LinkOnImageOriginalTarget[ b ] = ThisImage.src;
		ZoomOnThumb_LinkOnImageState[ b ] = 0;
	}
}

/* ZOOM AVANT */
window.ZoomOnThumb_ZoomIn = function ( ID ) {
	if ( ZoomOnThumb_LinkOnImageState[ ID ]!= 1 ) {
		return;
	}

	var Image = document.getElementById( 'ZoomImage_' + ID );
	var Div = document.getElementById( 'ZoomDiv_' + ID );
	if ( !Image || !Div ) {
		return;
	}

	var ImageWidth = parseInt( Image.width );
	var ImageHeight = parseInt( Image.height );

	var Content = document.getElementById( "bodyContent" );
	if ( !Content ) {
		Content = document.getElementById( "mw_contentholder" );
	}
	if ( !Content ) {
		Content = document.getElementById( "article" );
	}
	var ContentWidth = ( parseInt( Content.offsetWidth ) - 30 );

	if ( ImageWidth < ( ZoomOnThumb_LinkOnImageOriginalWidth[ ID ] * window.ZoomOnThumb_MaxMultiplicator ) ) {
		var NewImageWidth = parseInt( ImageWidth * 1.05 );
		var NewImageHeight = parseInt( ImageHeight * 1.05 );
		if ( NewImageWidth > ContentWidth ) {
			return;
		}
		Image.width = NewImageWidth;
		Image.height = NewImageHeight;
		Div.style.width = ( 2 + NewImageWidth ) + 'px';
		setTimeout(
			"window.ZoomOnThumb_ZoomIn(" + ID + ");",
			window.ZoomOnThumb_TimeOut
		);
	}
};

/* ZOOM ARRIÈRE */
window.ZoomOnThumb_ZoomOut = function ( ID ) {
	if ( ZoomOnThumb_LinkOnImageState[ ID ]!= -1 ) {
		return;
	}

	var Image = document.getElementById( 'ZoomImage_' + ID );
	var Div = document.getElementById( 'ZoomDiv_' + ID );
	if ( ( !Image )||( !Div ) ) {
		return;
	}

	var ImageWidth = parseInt( Image.width );
	var ImageHeight = parseInt( Image.height );

	if ( ImageWidth > ZoomOnThumb_LinkOnImageOriginalWidth[ ID ] ) {
		var NewImageWidth = parseInt( ImageWidth * 0.8 );
		var NewImageHeight = parseInt( ImageHeight * 0.8 );
		if ( NewImageWidth < ZoomOnThumb_LinkOnImageOriginalWidth[ ID ] ) {
			NewImageWidth = ZoomOnThumb_LinkOnImageOriginalWidth[ ID ];
			NewImageHeight = ZoomOnThumb_LinkOnImageOriginalHeight[ ID ];
			Image.src = ZoomOnThumb_LinkOnImageOriginalTarget[ ID ];
			ZoomOnThumb_LinkOnImageState[ ID ] = 0;
		}
		Image.width = NewImageWidth;
		Image.height = NewImageHeight;
		Div.style.width = ( 2 + NewImageWidth ) + 'px';
		setTimeout(
			"window.ZoomOnThumb_ZoomOut(" + ID + ");",
			window.ZoomOnThumb_TimeOut
		);
	}
};

/* RECHERCHE CIBLE DE L'IMAGE EN HAUTE RÉSOLUTION */
function ZoomOnThumb_ReplaceSrc( ID ) {
	var Image = document.getElementById( 'ZoomImage_' + ID );
	var Link = document.getElementById( 'ZoomLink_' + ID );
	if ( !Image || !Link ) {
		return;
	}
	if ( ZoomOnThumb_LinkOnImageZoomedTarget[ ID ] ) {
		Image.src = ZoomOnThumb_LinkOnImageZoomedTarget[ ID ];
		return;
	}
	// /wiki/File:NomFichier.jpg (fichier sur Commons) ou /wiki/Fichier:NomFichier.jpg (fichier local) → NomFichier.jpg
	var FileName = decodeURIComponent( Link.pathname ).replace( /^\/\w+\/\w+:/, '' );
	var Cible = mw.config.get( 'wgFormattedNamespaces' )[ 6 ] + ':' + FileName;
	var queryopt = {
		action: 'query',
		prop: 'imageinfo',
		iiprop: 'url',
		iiurlwidth: ( ZoomOnThumb_LinkOnImageOriginalWidth[ ID ] * window.ZoomOnThumb_MaxMultiplicator ),
		titles: Cible
	};
	var api = new mw.Api();
	api.get( queryopt ).then( function ( data ) {
		var pages = data.query.pages;
		if ( pages ) {
			var index, imageinfo, thumburl;
			for ( index in pages ) {
				if ( !pages.hasOwnProperty( index ) ) {
					continue;
				}
				imageinfo = pages[ index ].imageinfo[ 0 ];
				if ( !imageinfo ) {
					continue;
				}
				thumburl = imageinfo.thumburl;
				ZoomOnThumb_LinkOnImageZoomedTarget[ ID ] = thumburl;
				if ( ZoomOnThumb_LinkOnImageState[ ID ]!= 1 ) {
					return;
				}
				Image.src = thumburl;
		}
		}
	} );
}

/* LANCEMENT */
mw.loader.using( 'mediawiki.api', function () { 
	$( ZoomOnThumb_CheckLinks ); 
} );

// --------------------------------------------------- IMAGES GALERIES ---------------------------------------------------------------

/* VARIABLES */
var ZoomOnGallery_LinkOnImage = [];                 // Liste des liens "image"
var ZoomOnGallery_LinkOnImageState = [];            // État de zoom : 1 = zoom avant, -1 = zoom arrière, 0 = taille normale
var ZoomOnGallery_LinkOnImageOriginalWidth = [];    // Largeur originale de l'image
var ZoomOnGallery_LinkOnImageOriginalHeight = [];   // Hauteur originale de l'image
var ZoomOnGallery_LinkOnImageOriginalTarget = [];   // Cible originale de l'image (basse résolution)
var ZoomOnGallery_LinkOnImageZoomedTarget = [];     // Cible zoomée de l'image (haute résolution)


/* ÉTABLISSEMENT DE LA LISTE DES LIENS "IMAGE" */
function ZoomOnGallery_CheckLinks() {
	var Divs = document.getElementsByTagName( 'li' );
	var a, DivGallery, Links, LinkOnImage, Extension;
	for ( a = 0; a < Divs.length; a++ ) {
		if ( Divs[ a ].classList.contains( "gallerybox" ) ) {
			DivGallery = Divs[ a ];
			DivGallery.classList.add( "nopopups" );
			Links = DivGallery.getElementsByTagName( 'a' );
			LinkOnImage = Links[ 0 ];
			if ( LinkOnImage ) {
				while ( LinkOnImage.className != "image" ) {
					LinkOnImage = LinkOnImage.nextSibling;
					if ( !LinkOnImage ) {
						break;
					}
				}
			}
			if ( LinkOnImage ) {
				Extension = LinkOnImage.href.replace( /.*\./,"" ).toLowerCase();
				if ( [ 'ogg','ogv','pdf','webm' ].indexOf( Extension ) == -1 ) {
					ZoomOnGallery_LinkOnImage.push( LinkOnImage );
				}
			}
		}
	}
	ZoomOnGallery_ModifyLinks();
}

/* TRANSFORMATION DES LIENS, MISE A JOUR VARIABLES */
function ZoomOnGallery_ModifyLinks() {
	function zoomIn() {
		var ID = parseInt( this.id.split( 'ZoomLink_' ).join( '' ) );
		ZoomOnGallery_LinkOnImageState[ ID ] = 1;
		ZoomOnGallery_ReplaceSrc( ID );
		setTimeout(
			"window.ZoomOnGallery_ZoomIn(" + ID + ");",
			window.ZoomOnGallery_Delay
		);
	}
	function zoomOut() {
		var ID = parseInt( this.id.split( 'ZoomLink_' ).join( '' ) );
		ZoomOnGallery_LinkOnImageState[ ID ] = -1;
		window.ZoomOnGallery_ZoomOut( ID );
	}
	
	var b, ThisLink, ThisDiv1, ThisThumb, ThisDiv2, ThisGalleryBox, ThisImage;
	for ( b = 0; b < ZoomOnGallery_LinkOnImage.length; b++ ) {
		ThisLink = ZoomOnGallery_LinkOnImage[ b ];
		ThisLink.id = "ZoomLink_" + ( b + 1000 );
		ThisLink.onmouseover = zoomIn;
		ThisLink.onfocus = zoomIn;
		ThisLink.onmouseout = zoomOut;
		ThisLink.onblur = zoomOut;
		
		ThisDiv1 = ThisLink.parentNode;
		ThisDiv1.id = "ZoomDiv1_" + ( b + 1000 );
		
		ThisThumb = ThisDiv1.parentNode;
		ThisThumb.id = "ZoomThumb_" + ( b + 1000 );
		
		ThisDiv2 = ThisThumb.parentNode;
		ThisDiv2.id = "ZoomDiv2_" + ( b + 1000 );
		
		ThisGalleryBox = ThisDiv2.parentNode;
		ThisGalleryBox.id = "ZoomGalleryBox_" + ( b + 1000 );
		
		ThisImage = ThisLink.getElementsByTagName( 'img' )[ 0 ];
		ThisImage.id = "ZoomImage_" + ( b + 1000 );
		
		ZoomOnGallery_LinkOnImageOriginalWidth[ ( b + 1000 ) ] = ThisImage.width;
		ZoomOnGallery_LinkOnImageOriginalHeight[ ( b + 1000 ) ] = ThisImage.height;
		ZoomOnGallery_LinkOnImageOriginalTarget[ ( b + 1000 ) ] = ThisImage.src;
		ZoomOnGallery_LinkOnImageState[ ( b + 1000 ) ] = 0;
	}
}

/* ZOOM AVANT */
window.ZoomOnGallery_ZoomIn = function ( ID ) {
	if ( ZoomOnGallery_LinkOnImageState[ ID ]!= 1 ) return;

	var Image = document.getElementById( 'ZoomImage_' + ID );
	var Div1 = document.getElementById( 'ZoomDiv1_' + ID );
	var Thumb = document.getElementById( 'ZoomThumb_' + ID );
	var Div2 = document.getElementById( 'ZoomDiv2_' + ID );
	var GalleryBox = document.getElementById( 'ZoomGalleryBox_' + ID );
	if ( !Image || !Div1 || !Thumb || !Div2 || !GalleryBox ) {
		return;
	}

	var ImageWidth = parseInt( Image.width );
	var ImageHeight = parseInt( Image.height );

	var Content = document.getElementById( "bodyContent" );
	if ( !Content ) {
		Content = document.getElementById( "mw_contentholder" );
	}
	if ( !Content ) {
		Content = document.getElementById( "article" );
	}
	var ContentWidth = ( parseInt( Content.offsetWidth ) - 30 );
	var Factor = ( 100 + window.ZoomOnGallery_ZoomFactor )/100;

	var MaxWidth =
		parseInt( ZoomOnGallery_LinkOnImageOriginalWidth[ ID ] )
		* parseInt( window.ZoomOnGallery_MaxMultiplicator );
	if ( ImageWidth < MaxWidth ) {
		var NewImageWidth = parseInt( ImageWidth * Factor );
		var NewImageHeight = parseInt( ImageHeight * Factor );
		if ( NewImageWidth > ContentWidth ) {
			return;
		}
		var MaxSize = NewImageWidth;
		if ( ImageHeight > NewImageWidth ) {
			MaxSize = NewImageHeight;
		}
		Image.width = NewImageWidth;
		Image.height = NewImageHeight;
		Div1.style.width = NewImageWidth + 'px';
		Thumb.style.width = Math.floor( MaxSize + 30 ) + 'px';
		Thumb.style.height = Math.floor( MaxSize + 30 ) + 'px';
		Div2.style.width = Math.floor( MaxSize + 35 ) + 'px';
		GalleryBox.style.width = Math.floor( MaxSize + 35 ) + 'px';
		setTimeout(
			"window.ZoomOnGallery_ZoomIn(" + ID + " );",
			window.ZoomOnGallery_TimeOut
		);
	}
};

/* ZOOM ARRIÈRE */
window.ZoomOnGallery_ZoomOut = function ( ID ) {
	if ( ZoomOnGallery_LinkOnImageState[ ID ]!= -1 ) {
		return;
	}

	var Image = document.getElementById( 'ZoomImage_' + ID );
	var Div1 = document.getElementById( 'ZoomDiv1_' + ID );
	var Thumb = document.getElementById( 'ZoomThumb_' + ID );
	var Div2 = document.getElementById( 'ZoomDiv2_' + ID );
	var GalleryBox = document.getElementById( 'ZoomGalleryBox_' + ID );
	if ( !Image || !Div1 || !Thumb || !Div2 || !GalleryBox ) {
		return;
	}

	var ImageWidth = parseInt( Image.width );
	var ImageHeight = parseInt( Image.height );
	var MinWidth = ZoomOnGallery_LinkOnImageOriginalWidth[ ID ];
	var Factor = 0.8;
	if ( ImageWidth > MinWidth ) {
		var NewImageWidth = parseInt( ImageWidth * Factor );
		var NewImageHeight = parseInt( ImageHeight * Factor );
		if ( NewImageWidth < MinWidth ) {
			Factor = 0.9;
			NewImageWidth = parseInt( ImageWidth * Factor );
			NewImageHeight = parseInt( ImageHeight * Factor );
			if ( NewImageWidth < MinWidth ) {
				Factor = 0.95;
				NewImageWidth = parseInt( ImageWidth * Factor );
				NewImageHeight = parseInt( ImageHeight * Factor );
				if ( NewImageWidth < MinWidth ) {
					NewImageWidth = ZoomOnGallery_LinkOnImageOriginalWidth[ ID ];
					NewImageHeight = ZoomOnGallery_LinkOnImageOriginalHeight[ ID ];
					Image.src = ZoomOnGallery_LinkOnImageOriginalTarget[ ID ];
					ZoomOnGallery_LinkOnImageState[ ID ] = 0;
					return;
				}
			}
		}
		var MaxSize = NewImageWidth;
		if ( ImageHeight > NewImageWidth ) {
			MaxSize = NewImageHeight;
		}
		Image.width = NewImageWidth;
		Image.height = NewImageHeight;
		Image.width = NewImageWidth;
		Image.height = NewImageHeight;
		Div1.style.width = NewImageWidth + 'px';
		Thumb.style.width = ( MaxSize + 30 ) + 'px';
		Thumb.style.height = ( MaxSize + 30 ) + 'px';
		Div2.style.width = ( MaxSize + 35 ) + 'px';
		GalleryBox.style.width = ( MaxSize + 35 ) + 'px';
		setTimeout(
			"window.ZoomOnGallery_ZoomOut(" + ID + ");",
			window.ZoomOnGallery_TimeOut
		);
	}
};

/* RECHERCHE CIBLE DE L'IMAGE EN HAUTE RÉSOLUTION */
function ZoomOnGallery_ReplaceSrc( ID ) {
	var Image = document.getElementById( 'ZoomImage_' + ID );
	var Link = document.getElementById( 'ZoomLink_' + ID );
	if ( !Image || !Link ) {
		return;
	}
	if ( ZoomOnGallery_LinkOnImageZoomedTarget[ ID ] ) {
		Image.src = ZoomOnGallery_LinkOnImageZoomedTarget[ ID ];
		return;
	}
	// /wiki/File:NomFichier.jpg (fichier sur Commons) ou /wiki/Fichier:NomFichier.jpg (fichier local) → NomFichier.jpg
	var FileName = decodeURIComponent( Link.pathname ).replace( /^\/\w+\/\w+:/, '' );
	var Cible = mw.config.get( 'wgFormattedNamespaces' )[ 6 ] + ':' + FileName;
	var queryopt = {
		action: 'query',
		prop: 'imageinfo',
		iiprop: 'url',
		iiurlwidth: ( ZoomOnGallery_LinkOnImageOriginalWidth[ ID ] * window.ZoomOnGallery_MaxMultiplicator ),
		titles: Cible
	};
	var api = new mw.Api();
	api.get( queryopt ).then( function ( data ) {
		var pages = data.query.pages;
		if ( pages ) {
			var index, imageinfo, thumburl;
			for ( index in pages ) {
				if ( !pages.hasOwnProperty( index ) ) {
					continue;
				}
				imageinfo = pages[ index ].imageinfo[ 0 ];
				if ( !imageinfo ) {
					continue;
				}
				thumburl = imageinfo.thumburl;
				ZoomOnGallery_LinkOnImageZoomedTarget[ ID ] = thumburl;
				if ( ZoomOnGallery_LinkOnImageState[ ID ] != 1 ) {
					return;
				}
				Image.src = thumburl;
			}
		}
	} );
}


/* LANCEMENT */
mw.loader.using( 'mediawiki.api', function () {
	// désactivation du chargement sur la version mobile
	if ( mw.config.get('skin') === 'minerva' ) {
		return;
	}
	$( ZoomOnGallery_CheckLinks );
} );


//</nowiki></pre>
//</syntaxhighlight>
Ce document provient de « https://fr.wiki.x.io/w/index.php?title=MediaWiki:Gadget-ZoomOnThumb.js&oldid=209558889 ».