Utilisateur:Dr Brains/ImageViewer.js

if(typeof(fdSliderController)=="undefined"){
     importScript("User:Dr Brains/slider.js");
     importStylesheet("User:Dr Brains/slider.css");
}

if(typeof(MoveResizeAbsolute_AddMoveArea)=="undefined"){
     importScript("MediaWiki:Gadget-MoveResizeAbsolute.js");
}

if(mw.config.get('wgNamespaceNumber') == 6) addOnloadHook(ImageViewer_Init);

var ImageViewerZoom = new Array();
ImageViewerZoom.Values = new Array(1, 1.2, 1.5, 1.75, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10);
ImageViewerZoom.CurrentValue = 1;
ImageViewerZoom.RequestOK = new Array();
ImageViewerZoom.src = new Array();
ImageViewerZoom.height = new Array();
ImageViewerZoom.width = new Array();

var ImageViewerTimeout = new Array();


ImageViewer_ManageSlider = new Array();

ImageViewer_ManageSlider["zoom"] = function(ID){
     var Slider = document.getElementById("fd-slider-"+ID);
     if(!Slider) return;
     var Button = Slider.getElementsByTagName("button")[0];
     var NewValue = (Math.floor(parseFloat(Button.getAttribute("valuenow"))*10)/10);

     if(NewValue==ImageViewerZoom.CurrentValue || NewValue=="NaN") return;
     var Image = document.getElementById("ImageViewer_Image");
     if(!Image) return;
     var ValueIndex = ImageViewerZoom.Values.indexOf(NewValue);
     Image.src = ImageViewerZoom.src[ValueIndex];
     Image.height = ImageViewerZoom.height[ValueIndex];
     Image.width = ImageViewerZoom.width[ValueIndex];

     var ZoomLabel = document.getElementById("ZoomLabel");
     //if(ZoomLabel) ZoomLabel.innerHTML = "Zoom : " + NewValue + " ; ID : "+ValueIndex;
     ImageViewerZoom.CurrentValue = NewValue;
}

var ImageViewer_ajax = {
  http:function(bundle){ var xmlhttp; try{ xmlhttp = new XMLHttpRequest(); }catch(e){ try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ xmlhttp = false; }}}; if(xmlhttp){ xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4){ ImageViewer_ajax.httpComplete(xmlhttp,bundle);}}; xmlhttp.open(bundle.method ? bundle.method : "GET",bundle.url,bundle.async == false ? false : true); if (bundle.headers) { for (var field in bundle.headers){ try{ xmlhttp.setRequestHeader(field,bundle.headers[field]); }catch(err){}}}; xmlhttp.send(bundle.data ? bundle.data : null); }; return xmlhttp;}, 
  httpComplete: function(xmlhttp,bundle){ if(xmlhttp.status == 200 || xmlhttp.status == 302){ if(bundle.onSuccess) bundle.onSuccess(xmlhttp,bundle); }else if(bundle.onFailure){ bundle.onFailure(xmlhttp,bundle); }else{ }}
};

var ControlDiv = new Array();

function ImageViewer_Init(){
     var ImageDiv = document.getElementById("file");
    // if(!ImageDiv) return;
     var Image = ImageDiv.getElementsByTagName('img')[0];
     //if(!Image) return;
     var ImageWidth = Image.width;
     var ImageHeight = Image.height;
     var ScreenWidth = ImageViewer_GetScreenWidth();
     var ScreenHeight = ImageViewer_GetScreenHeight();
     var RatioImage = ImageWidth/ImageHeight;
     var RatioScreen = ScreenWidth/ScreenHeight;
     var InitialWidth;
     if(RatioImage>RatioScreen){
          InitialWidth = ScreenWidth;
     }else{
          InitialWidth = ImageWidth * (ScreenHeight/ImageHeight);
     }
     InitialWidth = (InitialWidth -50);
     var InitialHeight = (InitialWidth/RatioImage);
     for(var a=0,l=ImageViewerZoom.Values.length;a<l;a++){
          ImageViewerZoom.RequestOK[a] = false;
          ImageViewerZoom.width[a] = parseInt(InitialWidth*ImageViewerZoom.Values[a]);
          ImageViewerZoom.height[a] = parseInt(InitialHeight*ImageViewerZoom.Values[a]);
          var URL = mw.config.get('wgServer') + mw.config.get('wgScriptPath') + '/api.php?format=xml&action=query&prop=imageinfo&iiprop=url'
                  + '&iiurlwidth='+ImageViewerZoom.width[a]
                  + '&titles=' + mw.config.get('wgFormattedNamespaces')[6] + ":" + encodeURIComponent(mw.config.get('wgTitle'));

          ControlDiv[a] = document.createElement('div');
          //ControlDiv[a].innerHTML = a + ' <a href="'+URL+'">'+URL+'</a>';
          ImageDiv.parentNode.insertBefore(ControlDiv[a], ImageDiv);

          ImageViewer_ajax.http({ url       : URL,
                                  onSuccess : ImageViewer_GotImageSRC,
                                  index     : a
          });

     }     
}

function ImageViewer_GotImageSRC(Req, data){
     var ObjetXML = Req.responseXML; 
     if(!ObjetXML) return;
     var Info = ObjetXML.getElementsByTagName('ii')[0];
     if(Info){ 
          var NewSrcImage = Info.getAttribute("thumburl");
          ImageViewerZoom.src[data.index] = NewSrcImage;
          ImageViewerZoom.RequestOK[data.index] = true;
          //ControlDiv[data.index].innerHTML += " | <b>OK</b>";
          ImageViewer_GotAllImagesSRC();
     }
}

function ImageViewer_GotAllImagesSRC(){
     for(var a=0,l=ImageViewerZoom.RequestOK.length;a<l;a++){
          if(ImageViewerZoom.RequestOK[a] != true) return;
     }
     var ElementToHide = document.body.firstChild;
     while(ElementToHide){
          if(!ElementToHide) break;
          if(ElementToHide && ElementToHide.style) ElementToHide.style.display = "none";
          ElementToHide = ElementToHide.nextSibling;
     }
     var ContainerDiv = document.createElement('div');
     ContainerDiv.id = "ContainerDiv";
     ContainerDiv.setAttribute("style", "position:fixed;top:0;left:0;z-index:5000;width:100%;height:100%;overflow:hidden;background-color:black;");
     document.body.appendChild(ContainerDiv);
     var Image = document.createElement('img');
     Image.id = "ImageViewer_Image";
     Image.src=ImageViewerZoom.src[0];
     Image.width = ImageViewerZoom.width[0];
     Image.height = ImageViewerZoom.height[0];
     Image.style.position = "relative";
     Image.style.top = "0px";
     Image.style.left = "0px";
     var Top = parseInt((ImageViewer_GetScreenHeight()-ImageViewerZoom.height[0])/2);
     var Left = parseInt((ImageViewer_GetScreenWidth()-ImageViewerZoom.width[0])/2);
     Image.setAttribute("style", "position:relative;top:"+Top+";left:"+Left+";");
     var ZoomSlider = ImageViewer_CreateSlider("zoom");     
     ContainerDiv.appendChild(ZoomSlider);
     ContainerDiv.appendChild(Image);
     fdSliderController.construct();
     MoveResizeAbsolute_AddMoveArea(Image, new Array(Image));
     ImageViewerTimeout[0] = setTimeout("ImageViewer_ManageSliders()", 100);
}

function ImageViewer_ManageSliders(){
     clearTimeout(ImageViewerTimeout[0]);
     ImageViewerTimeout[0] = setTimeout("ImageViewer_ManageSliders()", 50);
     var ContainerDiv = document.getElementById("ContainerDiv");
     if(!ContainerDiv) return;
     var Sliders = getElementsByClassName(ContainerDiv, "div", "fd-slider");
     for(var a=0,l=Sliders.length;a<l;a++){
          var Slider = Sliders[a];
          var Id = Slider.id.split("fd-slider-").join("");
          if(typeof(ImageViewer_ManageSlider[Id])=="function") ImageViewer_ManageSlider[Id](Id);
     }     
}

function ImageViewer_CreateSlider(SliderName){
     var Select = document.createElement('select');
     Select.className = "fd_slider fd_callback_updateSelect2";
     Select.id=SliderName;
     Select.name=SliderName;
     for(var a=0, l=ImageViewerZoom.Values.length;a<l;a++){
          var Value = ImageViewerZoom.Values[a];
          var Option = document.createElement('option');
          Option.value = Value;
          Select.appendChild(Option);
     }
     return Select;
}

// Détermination du type de navigateur
 
function ImageViewer_NavIsIE(){
     var agt=navigator.userAgent.toLowerCase();
     var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
     return is_ie;
}

// Détermination de la hauteur de l'écran
 
function ImageViewer_GetScreenHeight(){
     var ScreenHeight = 0;
     if( typeof( window.innerHeight ) == 'number' ) {
          ScreenHeight = parseInt(window.innerHeight);
     }else if( document.documentElement && document.documentElement.clientHeight ){
          ScreenHeight = parseInt(document.documentElement.clientHeight);
     }else if( document.body && document.body.clientHeight ){
          ScreenHeight = parseInt(document.body.clientHeight);
     }
     return ScreenHeight;
}
 
// Détermination de la largeur de l'écran
 
function ImageViewer_GetScreenWidth(){
     var ScreenWidth = 0;
     if( typeof( window.innerWidth ) == 'number' ) {
          ScreenWidth = parseInt(window.innerWidth);
     }else if( document.documentElement && document.documentElement.clientWidth ){
          ScreenWidth = parseInt(document.documentElement.clientWidth);
     }else if( document.body && document.body.clientWidth ){
          ScreenWidth = parseInt(document.body.clientWidth);
     }
     return ScreenWidth;
}
 
// Détermination du positionnement de la souris
 
function ImageViewer_GetMousePosition(event){
     if(ImageViewer_NavIsIE()){
          var Mouse_X = parseInt( event.clientX + document.getElementsByTagName('body')[0].scrollLeft );
          var Mouse_Y = parseInt( event.clientY + document.getElementsByTagName('body')[0].scrollTop );
     }else{
          var Mouse_X = parseInt( event.clientX );
          var Mouse_Y = parseInt( event.clientY );
     }
     return {"X": Mouse_X, "Y": Mouse_Y};
}