MediaWiki:Popup.js

// Altes speichern und neue Elemente gestalten
var bilder = [[]]; 

function getThumbs() {
  var a=0;
  for (i=0;i<document.getElementsByTagName('img').length;i++) {
    if (document.getElementsByTagName('img')[i].src.indexOf('thumb')!=-1) {
      var thumb = document.getElementsByTagName('img')[i];
      var bildSrc = thumb.src.replace(/thumb\//, '');
        bildSrc = bildSrc.slice(0,(bildSrc.indexOf(bildSrc.split('/')[bildSrc.split('/').length-1]))-1);
      var bildname = bildSrc.split('/')[bildSrc.split('/').length-1];
      var namensgeber=document.getElementById('pp_'+bildname)||document.getElementById('pp_'+bildname.toLowerCase())||false;

      bilder[0][a] = new Image;
      bilder[0][a].src = bildSrc;
      bilder[0][a].text = namensgeber? namensgeber.innerHTML : '';

      if (thumb.parentNode.tagName=='A') {
        if (sysopRights)
          bilder[0][a].text += '<p class="editsection"><a href="'+thumb.parentNode.href+'">[Bild]</a> <a href="'+thumb.parentNode.href.replace(/an\//,"w/index.php?title=")+'&action=edit">[bearbeiten]</a></p>';
	thumb.parentNode.href= "javascript:pp_open("+a+",0)";
	thumb.parentNode.title="Popup oeffnen";  
      }
      a++;
    }
  }

  body_width = document.body.offsetWidth;
  body_height = document.body.offsetHeight;
  screen_height = window.innerHeight || document.documentElement.offsetHeight;
  screen_width = window.innerWidth-15 || document.documentElement.offsetWidth-15;

  writeImgDiv();
}

//Pfeiltasten
var usePfeil = 0;

function writeImgDiv() {
  ppImgScreen = document.body.appendChild(document.createElement('div'));
    ppImgScreen.id = "ppScreen"; ppImgScreen.style.display = "none";
  ppImgDiv = document.body.appendChild(document.createElement('div'));
    ppImgDiv.id = "ppImgDiv";  
	ppImgDiv.style.display = "none";
  ppImg = ppImgDiv.appendChild(document.createElement('div')).appendChild(document.createElement('img'));
  ppImgTop = ppImgDiv.appendChild(document.createElement('div'));
  ppImgInfo = ppImgDiv.appendChild(document.createElement('div')); 
  ppImgInfo.className = "ppFloat";
  ppImgClick = ppImgDiv.appendChild(document.createElement('div'));     
  ppImgClick.className = "ppClick"; 

  ppImgScreen.onclick =
  ppImgInfo.onclick = hideDiv;
}

function pp_open(indexB, arrayB) { 
      //welcher Bilderarray?
  var aIndex = arrayB || 0;
  var auswahl = bilder[aIndex];
      //welches Bild?
  var x = indexB || 0;

    //Scrollposition ermitteln	
  var scrY = document.documentElement.scrollTop || // Explorer 6 Strict
	document.body.scrollTop || //all other Explorers
	self.pageYOffset ||
	0;

  with (ppImgScreen.style) {
    width = document.body.offsetWidth+"px";
    height = document.body.offsetHeight+"px";
	display = "block";
  }	  
//Anpassen an Fenster
  if (auswahl[x].height>(screen_height)) {
    auswahl[x].width=auswahl[x].width/auswahl[x].height*screen_height;
    auswahl[x].height=screen_height;
    }
  if (auswahl[x].width>(screen_width)) {
    auswahl[x].height=auswahl[x].height/auswahl[x].width*screen_width;
    auswahl[x].width=screen_width;
    }
//
  var ppH = auswahl[x].height+28, // Maße für das Schriftfenster (ppImgInfo)
    ppW = auswahl[x].width+10,
    ppBoTop = ((ppH+10) < screen_height) ? //wenn Bildübergröße 
      0 : ((ppH+10)-screen_height)/2 +"px"; 
  
	    //Bild gestalten		
  ppImg.src = auswahl[x].src;
  ppImg.height= auswahl[x].height;		
  ppImg.width= auswahl[x].width;		
  ppImgInfo.innerHTML=auswahl[x].text; //Begleittext...
  
  with (ppImgInfo.style) {
	if ( (ppW+300)<body_width) {
	   left = ppW+"px"; top = ppBoTop; width = (body_width-ppW-64)/2+"px";}
	else {
	   left = (auswahl[x].width/2-10)+"px"; top = ppH+"px"; width = (body_width/2-32)+"px";
	}
  }
  ppImgTop.innerHTML="Bild "+(x+1)+"/"+auswahl.length;
  ppImgTop.id="ppIndex";
  ppImgClick.style.width=450+"px"; 
  ppImgClick.style.left=ppW-543+"px";   
  
  if (auswahl.length>1) {// mehr als ein bild
	bck=ppImgTop.insertBefore(document.createElement('a'), ppImgTop.firstChild);
    nxt=ppImgTop.appendChild(document.createElement('a'));
	bck.id="bck1";
	nxt.id="nxt1";
	ppH=auswahl[x].height+28;
	ppW=(auswahl[x].width+10)/2;
	  with (bck.style) { left=0; height=ppH+"px"; width=ppW+"px"; }
	  with (nxt.style){ left=ppW+"px"; height=ppH+"px"; width=ppW+"px"; }
	  //neues Bild aufrufen
    vor=(x+1<auswahl.length)? x+1:0;
	zur=(x-1>-1)? x-1:auswahl.length-1;
    nxt.href="javascript:pp_open("+vor+","+aIndex+")";	
    bck.href="javascript:pp_open("+zur+","+aIndex+")";
		
	ppImgClick.innerHTML = "<span>Ins Bild klicken oder Pfeiltasten [&larr;] [&rarr;] = Neues Bild! <br/>Sonst wo klicken oder [Esc] = Bild schließen!</span>" 
	
    ppImgClick.onclick =	
    ppImgScreen.onclick =
    ppImgInfo.onclick = hideDiv;
	
  }
  else {
	ppImgDiv.onclick=hideDiv;
	ppImgClick.innerHTML = "<span>Beliebiger Klick oder [Esc] = Bild schließen!<br/>&nbsp;</span>";
  }
    
  usePfeil=1; //Schalter für Pfeilfunktion
  pfeil=function(e) {
    e=e||event;
    if (e.keyCode&&usePfeil&&(typeof(vor)!="undefined"||typeof(zur)!="undefined"))
      if (e.keyCode==39||e.keyCode==102) pp_open(vor,aIndex);
	    else if (e.keyCode==37||e.keyCode==100) pp_open(zur,aIndex); 
	    else if (e.keyCode==27) hideDiv(); 
  }
  document.onkeydown = pfeil;
	
		//ppImgDiv positionieren und zeigen
  abstand_x = auswahl[x].width < document.body.clientWidth ?
	(document.body.clientWidth - auswahl[x].width-10)/2 : 0;
  abstand_y = scrY + (screen_height-auswahl[x].height)/3;
	
  with (ppImgDiv.style) {
	left = abstand_x+"px";
	top  = abstand_y+"px";
  }
 	//Image Screen Größe (falls Bild größer als body)
  var maxW = ((auswahl[x].width+12) > body_width) ?
    (auswahl[x].width+12) : body_width;
  with (ppImgScreen.style) {
    width =  maxW + "px";
    height = document.body.offsetHeight+"px";
	display = "block";
  }	  
  ppImgDiv.style.display = "block";
  /*
  function aaa(){newDiv.parentNode.removeChild(newDiv)}
  window.setTimeout('aaa()', 500);
  //Bild anzeigen
  newDiv = document.body.appendChild(ppImgDiv.cloneNode(true));  
    newDiv.style.display = "block";	*/
}

    //popup-Div SCHLIESSEN 

function hideDiv() { 
  ppImgScreen.style.display = 
  ppImgDiv.style.display = "none"; 
  usePfeil=0; //Pfeiltasten nicht mehr verwenden
}