Utilisateur:Dr Brains/Loupe.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./*
Fonction : Procure dans la page de description d'une image une fenêtre de zoom.
Quatre boutons permettent de modifier
* la taille de la fenêtre
* le facteur de zoom.
Documentation : [[Projet:JavaScript/Notices/Loupe]]
Licence : Domaine Public
{{Projet:JavaScript/Script|Loupe}}
*/
// <source lang=javascript><pre><nowiki>
///////////////////////////////// VARIABLES PERSONNALISABLE ///////////////////////////////
// TEXTES //
var Zoom_Text_InputWindowPlusValue = "Fenêtre $1px : +";
var Zoom_Text_InputWindowMoinsValue = "Fenêtre $1px : -";
var Zoom_Text_InputZoomPlusValue = "Zoom x$1 : +";
var Zoom_Text_InputZoomMoinsValue = "Zoom x$1 : -";
var Zoom_Text_InputWindowPlusTitle = "Augmenter la taille de la fenêtre de zoom";
var Zoom_Text_InputWindowMoinsTitle = "Diminuer la taille de la fenêtre de zoom";
var Zoom_Text_InputZoomPlusTitle = "Augmenter le facteur de zoom";
var Zoom_Text_InputZoomMoinsTitle = "Diminuer le facteur de zoom";
// PARAMÈTRES //
var Zoom_Param_ZoomDivWidth = 200; // Largeur par défaut de la fenêtre de zoom
var Zoom_Param_ZoomDivHeight = 200; // Hauteur par défaut de la fenêtre de zoom
var Zoom_Param_Multiplicator = 3; // Valeur par défaut du facteur de zoom
var Zoom_Param_DecalTop = 15; // Décalage entre la position de la souris et le haut de la fenêtre de zoom (ne pas mettre une valeur nulle ou négative)
var Zoom_Param_DecalLeft = 15; // Décalage entre la position de la souris et la gauche de la fenêtre de zoom (ne pas mettre une valeur nulle ou négative)
///////////////////////////////// VARIABLES NON PERSONNALISABLE ///////////////////////////////
var ZoomParamDemugMode = false;
var Zoom_Param_TopImage = 0;
var Zoom_Param_LeftImage = 0;
var Zoom_Param_ImageWidth = 0;
var Zoom_Param_ImageHeight = 0;
var Zoom_Param_ZoomWidth = 0;
var Zoom_Param_ZoomHeight = 0;
var Zoom_Param_OriginalSrc = "";
var Zoom_Param_StopTracking = true;
var Zoom_Param_TopContent = 0;
var Zoom_Param_LeftContent = 0;
if((mw.config.get('skin')=="vector")){
var Zoom_Param_IDContent = "bodyContent";
}else if(mw.config.get('skin')=="monobook"){
var Zoom_Param_IDContent = "content";
}else{
var Zoom_Param_IDContent = false;
}
var Zoom_Param_WorkingImage = '<img height=\"15\" width=\"15\" src=\"//upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif\" alt=\"Mise à jour de l\'image en cours\" title=\"Mise à jour de l\'image en cours\" />';
///////////////////////////////// LANCEMENT ///////////////////////////////
if(mw.config.get('wgNamespaceNumber')==6 && Zoom_Param_IDContent){
$(Zoom_Function_Init);
}
///////////////////////////////// INITIALISATION ///////////////////////////////
function Zoom_Function_Init(){
var DivImage = document.getElementById("file");
if(!DivImage) return;
var Image = DivImage.getElementsByTagName("img")[0];
if(!Image) return;
Zoom_Function_CreateZoomButtons(DivImage);
if(Zoom_Param_IDContent){
Zoom_Param_TopContent = document.getElementById(Zoom_Param_IDContent).offsetTop;
Zoom_Param_LeftContent = document.getElementById(Zoom_Param_IDContent).offsetLeft;
}
$(DivImage).addClass("nopopups");
Image.setAttribute("style", "cursor:crosshair;");
Image.id = "MainImage";
Zoom_Param_ImageWidth = Image.width;
Zoom_Param_ImageHeight = Image.height;
Zoom_Param_OriginalSrc = Image.src;
Zoom_Param_TopImage = (Image.offsetTop+Zoom_Param_TopContent);
Zoom_Param_LeftImage = (Image.offsetLeft+Zoom_Param_LeftContent);
var ZoomDiv = Zoom_Function_CreateZoomDiv();
Image.onmouseover = function(){
Zoom_Param_StopTracking = false;
}
Image.onmouseout = function(){
document.getElementById("image_zoomdiv").style.display = "none";
Zoom_Param_StopTracking = true;
}
Image.onmousemove = Zoom_Function_Tracking;
}
///////////////////////////////// CRÉATION DES BOUTONS ///////////////////////////////
function Zoom_Function_CreateZoomButtons(DivImage){
var NewButtons = document.createElement("div");
var Text = '<div id="DebugDiv"></div><div id="zoom_Buttons">'
+ '<input type="button" title="'+Zoom_Text_InputWindowPlusTitle+'" style="cursor:pointer;" '
+ 'value="'+Zoom_Text_InputWindowPlusValue.split('$1').join(Zoom_Param_ZoomDivWidth)+'" '
+ 'onclick="Zoom_Function_WindowSize(+1);" onselect="Zoom_Function_WindowSize(+1);" />'
+ '<input type="button" title="'+Zoom_Text_InputWindowMoinsTitle+'" style="cursor:pointer;" '
+ 'value="'+Zoom_Text_InputWindowMoinsValue.split('$1').join(Zoom_Param_ZoomDivWidth)+'" '
+ 'onclick="Zoom_Function_WindowSize(-1);" onselect="Zoom_Function_WindowSize(-1);" />'
+ '<input type="button" title="'+Zoom_Text_InputZoomPlusTitle+'" style="cursor:pointer;" '
+ 'value="'+Zoom_Text_InputZoomPlusValue.split('$1').join(Zoom_Param_Multiplicator)+'" '
+ 'onclick="Zoom_Function_ZoomFactor(+1);" onselect="Zoom_Function_ZoomFactor(+1);" />'
+ '<input type="button" title="'+Zoom_Text_InputZoomMoinsTitle+'" style="cursor:pointer;" '
+ 'value="'+Zoom_Text_InputZoomMoinsValue.split('$1').join(Zoom_Param_Multiplicator)+'" '
+ 'onclick="Zoom_Function_ZoomFactor(-1);" onselect="Zoom_Function_ZoomFactor(-1);" />'
+ '<span id="Working"></span>'
+ '</div>';
NewButtons.innerHTML = Text;
DivImage.parentNode.insertBefore(NewButtons, DivImage);
}
///////////////////////////////// CRÉATION DE LA FENÊTRE DE ZOOM ///////////////////////////////
function Zoom_Function_CreateZoomDiv(){
var ZoomDiv = document.createElement('div');
ZoomDiv.id = "image_zoomdiv";
ZoomDiv.setAttribute("style", "overflow: hidden; width: "+Zoom_Param_ZoomDivWidth+"px; height: "+Zoom_Param_ZoomDivHeight+"px; position: absolute; top: 0px; left: 0px; border: 2px solid silver; background-color: white; z-index: 2050;display:none");
var ZoomDiv2 = document.createElement('div');
ZoomDiv2.setAttribute("style", "position:relative");
var ZoomImage = document.createElement('img');
ZoomImage.id = "image_zoom";
ZoomImage.src = Zoom_Param_OriginalSrc;
ZoomImage.width = (Zoom_Param_ImageWidth*Zoom_Param_Multiplicator);
ZoomImage.height = (Zoom_Param_ImageHeight*Zoom_Param_Multiplicator);
ZoomImage.setAttribute("style", "position:absolute;top:0px;left:0px;");
Zoom_Param_ZoomWidth = (Zoom_Param_ImageWidth*Zoom_Param_Multiplicator);
Zoom_Param_ZoomHeight = (Zoom_Param_ImageHeight*Zoom_Param_Multiplicator);
ZoomDiv2.appendChild(ZoomImage);
ZoomDiv.appendChild(ZoomDiv2);
document.body.appendChild(ZoomDiv);
Zoom_Function_GetImageURL(Zoom_Param_Multiplicator);
return ZoomDiv;
}
///////////////////////////////// MISE A JOUR DE L'URL DE L'IMAGE ZOOMÉE ///////////////////////////////
function Zoom_Function_GetImageURL(ZoomMultiplicator){
var Buttons = document.getElementById("zoom_Buttons").getElementsByTagName('input');
Buttons[2].disabled = "disabled";
Buttons[3].disabled = "disabled";
document.getElementById("Working").innerHTML = Zoom_Param_WorkingImage;
var Cible = mw.config.get('wgFormattedNamespaces')[6] + ':' + mw.config.get('wgTitle');
var queryopt = {
action: 'query',
prop: 'imageinfo',
iiprop: 'url',
iiurlwidth: (Zoom_Param_ImageWidth*ZoomMultiplicator),
titles: Cible
}
var api = new mw.Api();
api.get( queryopt ).then( function ( data ) {
var pages = data.query.pages;
if ( pages ) {
for(var index in pages){
if(!pages.hasOwnProperty(index)) continue;
var imageinfo = pages[index].imageinfo[0];
if(!imageinfo) continue;
var NewSrcImage = imageinfo.thumburl;
Zoom_Param_ZoomWidth = (Zoom_Param_ImageWidth*Zoom_Param_Multiplicator);
Zoom_Param_ZoomHeight = (Zoom_Param_ImageHeight*Zoom_Param_Multiplicator);
document.getElementById("image_zoom").src = NewSrcImage;
document.getElementById("image_zoom").width = Zoom_Param_ZoomWidth;
document.getElementById("image_zoom").height = Zoom_Param_ZoomHeight;
document.getElementById("Working").innerHTML = "";
Buttons[2].disabled = "";
if((Zoom_Param_Multiplicator-1)>0) Buttons[3].disabled = "";
Buttons[2].value = Zoom_Text_InputZoomPlusValue.split('$1').join(Zoom_Param_Multiplicator);
Buttons[3].value = Zoom_Text_InputZoomMoinsValue.split('$1').join(Zoom_Param_Multiplicator);
}
}
} );
}
///////////////////////////////// MISE A JOUR DE LA POSITION DE LA FENÊTRE DE ZOOM ///////////////////////////////
function Zoom_Function_Tracking(e){
if(Zoom_Param_StopTracking) return;
var Decal_x=Zoom_Param_DecalLeft;
var Decal_y=Zoom_Param_DecalTop;
if(e){
position_x = e.pageX;
position_y = e.pageY;
}else{
var monBody = document.documentElement || document.body;
position_x = "" + (window.event.clientX + monBody.scrollLeft);
position_y = "" + (window.event.clientY + monBody.scrollTop);
}
var ZoomDiv = document.getElementById("image_zoomdiv");
var ZoomImage = document.getElementById("image_zoom");
var DivImage = document.getElementById("file")
var Image = document.getElementById("MainImage");
if(Zoom_Param_IDContent){
Zoom_Param_TopContent = document.getElementById(Zoom_Param_IDContent).offsetTop;
Zoom_Param_LeftContent = document.getElementById(Zoom_Param_IDContent).offsetLeft;
}
Zoom_Param_TopImage = (DivImage.offsetTop+Zoom_Param_TopContent);
Zoom_Param_LeftImage = (DivImage.offsetLeft+Zoom_Param_LeftContent);
var PositionLeftDiv = (position_x+Decal_x);
var PositionTopDiv = (position_y+Decal_y);
var positionLeftInOriginalImage = (position_x-Zoom_Param_LeftImage);
var RatioLeft = (positionLeftInOriginalImage/Zoom_Param_ImageWidth);
var PositionLeftInZoomImage = -((Zoom_Param_ZoomWidth*RatioLeft)-((Zoom_Param_ZoomDivWidth)/2));
var positionTopInOriginalImage = (position_y-Zoom_Param_TopImage);
var RatioTop = (positionTopInOriginalImage/Zoom_Param_ImageHeight);
var PositionTopInZoomImage = -((Zoom_Param_ZoomHeight*RatioTop)-((Zoom_Param_ZoomDivHeight)/2));
ZoomDiv.setAttribute("style", "overflow: hidden; width: "+Zoom_Param_ZoomDivWidth+"px; height: "+Zoom_Param_ZoomDivHeight+"px; position: absolute; top: "+PositionTopDiv+"px; left: "+PositionLeftDiv+"px; border: 2px solid silver; background-color: white; z-index: 2050;");
ZoomImage.setAttribute("style", "position: absolute; top: "+PositionTopInZoomImage+"px; left: "+PositionLeftInZoomImage+"px;");
if(ZoomParamDemugMode){
var DebugDiv = document.getElementById("DebugDiv");
var Recap = "<ul><li>position x : " + position_x
+ " | position y : "+position_y
+ "</li><li>positionLeftInOriginalImage : "+positionLeftInOriginalImage
+ " | positionTopInOriginalImage : "+positionTopInOriginalImage
+ "</li><li>RatioLeft : "+RatioLeft
+ " | RatioTop : "+RatioTop
+ "</li><li>PositionLeftInZoomImage : "+PositionLeftInZoomImage
+ " | PositionTopInZoomImage : "+PositionTopInZoomImage
+ "</li><li>content.offsetLeft : "+document.getElementById("content").offsetLeft
+ " | content.offsetTop : "+document.getElementById("content").offsetTop
+ "</li><li>bodyContent.offsetLeft : "+document.getElementById("bodyContent").offsetLeft
+ " | bodyContent.offsetTop : "+document.getElementById("bodyContent").offsetTop
+ "</li><li>DivImage.offsetLeft : "+DivImage.offsetLeft
+ " | DivImage.offsetTop : "+DivImage.offsetTop
+ "</li><li>Image.offsetLeft : "+Image.offsetLeft
+ " | Image.offsetTop : "+Image.offsetTop
+ "</li><li>Zoom_Param_LeftContent : "+Zoom_Param_LeftContent
+ " | Zoom_Param_TopContent : "+Zoom_Param_TopContent
+ "</li><li>Zoom_Param_LeftImage : "+Zoom_Param_LeftImage
+ " | Zoom_Param_TopImage : "+Zoom_Param_TopImage
+ "</li></ul>"
DebugDiv.innerHTML = Recap;
}
}
///////////////////////////////// CHANGEMENT DE LA TAILLE DE LA FENÊTRE DE ZOOM ///////////////////////////////
function Zoom_Function_WindowSize(Up){
var Buttons = document.getElementById("zoom_Buttons").getElementsByTagName('input');
if(Up<0){
if(((Zoom_Param_ZoomDivWidth-50)>0)&&((Zoom_Param_ZoomDivHeight-50)>0)){
Zoom_Param_ZoomDivWidth = (Zoom_Param_ZoomDivWidth-50);
Zoom_Param_ZoomDivHeight = (Zoom_Param_ZoomDivHeight-50);
}
}else{
Zoom_Param_ZoomDivWidth = (Zoom_Param_ZoomDivWidth+50);
Zoom_Param_ZoomDivHeight = (Zoom_Param_ZoomDivHeight+50);
}
Buttons[0].value = Zoom_Text_InputWindowPlusValue.split('$1').join(Zoom_Param_ZoomDivWidth);
Buttons[1].value = Zoom_Text_InputWindowMoinsValue.split('$1').join(Zoom_Param_ZoomDivWidth);
Buttons[1].disabled = "";
if(!(((Zoom_Param_ZoomDivWidth-50)>0)&&((Zoom_Param_ZoomDivHeight-50)>0))) Buttons[1].disabled = "disabled";
}
///////////////////////////////// CHANGEMENT DU FACTEUR DE ZOOM ///////////////////////////////
function Zoom_Function_ZoomFactor(Up){
var Buttons = document.getElementById("zoom_Buttons").getElementsByTagName('input');
if(Up<0){
if((Zoom_Param_Multiplicator-1)>0) Zoom_Param_Multiplicator = (Zoom_Param_Multiplicator-1);
}else{
Zoom_Param_Multiplicator = (Zoom_Param_Multiplicator+1);
}
Zoom_Param_ZoomWidth = (Zoom_Param_ImageWidth*Zoom_Param_Multiplicator);
Zoom_Param_ZoomHeight = (Zoom_Param_ImageHeight*Zoom_Param_Multiplicator);
Zoom_Function_GetImageURL(Zoom_Param_Multiplicator);
}
//</nowiki></pre></source>