Utilisateur:Dr Brains/ImageViewer.js
Apparence
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.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};
}