Wikipédia

MediaWiki:Gadget-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) ;

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>

/* jshint laxbreak: true */
/* globals mw, $ */

(function () {

///////////////////////////////// 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;
var mwSkin = mw.config.get('skin');
if((mwSkin==="vector"||mwSkin==='vector-2022')){
     var Zoom_Param_IDContent = "bodyContent";
}else if(mwSkin==="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){
     mw.loader.using('mediawiki.api', function () {
          $(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;

     var position_x;
     var position_y;
     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);
}

// Ces deux fonctions sont appelées en callback dans du JavaScript inline, et doivent donc être exposées dans l'espace global
window.Zoom_Function_WindowSize = Zoom_Function_WindowSize;
window.Zoom_Function_ZoomFactor = Zoom_Function_ZoomFactor;

})();

//</nowiki></pre></source>
Ce document provient de « https://fr.wikipedia.org/w/index.php?title=MediaWiki:Gadget-Loupe.js&oldid=190513333 ».