MediaWiki:Popup.js

// Altes speichern und neue Elemente gestalten
var pps = []; 
var all, pfeiltasten, usePfeiltasten, ppScreen;

var body_width = document.body.offsetWidth;
var body_height = document.body.offsetHeight;

function setPopup() {
  var a = 0;
// FOR Schleife
  for (var i=0;i<document.getElementsByTagName('img').length;i++) {
// 1. Bedingungen für Popup 
    if (document.getElementsByTagName('img')[i].src.indexOf('thumb')!=-1 
      && document.getElementsByTagName('img')[i].parentNode.tagName == 'A'
      && document.getElementsByTagName('img')[i].width > 100)
      var thumb = document.getElementsByTagName('img')[i];
    else
      continue;
// 2. Bedingungen für Popup 
    var bildSrc = thumb.src.replace(/thumb\//, '');
      bildSrc = bildSrc.slice(0,(bildSrc.indexOf(bildSrc.split('/')[bildSrc.split('/').length-1]))-1);
    var link = thumb.parentNode.href;      
    var bildname = link.split(':')[link.split(':').length-1];     
    var ppText = document.getElementById('pp_'+bildname) || 
      document.getElementById('pp_'+bildname.toLowerCase()) || false;
    if (!ppText) 
      continue;
// Link ändern
    thumb.parentNode.href = 'javascript:open_popup('+a+')';
    thumb.parentNode.title = 'Popup öffnen';  
// images in neues Objekt laden
    pps[a] = {};
    pps[a].image = new Image;    
    pps[a].image.src = bildSrc;  
// Popups gestalten
    pps[a].div = document.body.appendChild(document.createElement('div'));
      pps[a].div.className = 'ppDiv';
      pps[a].div.style.display = 'none';
    pps[a].frame = pps[a].div.appendChild(document.createElement('div'));
      pps[a].frame.className = 'ppFrame';
      pps[a].frame.appendChild(pps[a].image);
    pps[a].index =pps[a].frame.appendChild(document.createElement('div'));
      pps[a].index.className = 'ppIndex';
    pps[a].back = pps[a].frame.appendChild(document.createElement('a'))
      pps[a].back.className  = 'ppBack';
      pps[a].back.title  = 'voriges Bild';
      pps[a].back.innerHTML= '<span class="fa fa-chevron-left"></span>';
      pps[a].back.href = 'javascript:open_popup('+(a-1)+')';
    pps[a].next = pps[a].frame.appendChild(document.createElement('a'));
      pps[a].next.className = 'ppNext';
      pps[a].next.title = 'nächstes Bild';
      pps[a].next.innerHTML= '<span class="fa fa-chevron-right"></span>';
      pps[a].next.href = 'javascript:open_popup('+(a+1)+')';
    pps[a].click = pps[a].frame.appendChild(document.createElement('div'));     
      pps[a].click.className = 'ppClick';  		
      pps[a].click.innerHTML = 
        '<span>Ins Bild klicken oder Pfeiltasten [&larr;] [&rarr;] = Neues Bild!<br/>' + 
        'Sonst wo klicken oder [Esc] = Bild schließen!</span>'; 
// bildtext in popup einfuegen
    pps[a].text = pps[a].div.appendChild(ppText); 
      pps[a].text.className = 'ppText';
    var bildlinks = pps[a].text.appendChild(document.createElement('p'));
      bildlinks.className = 'editsection';
      bildlinks.innerHTML += '<a href="'+link+'">[Bildseite]</a> ';
      if (sysopRights)
        bildlinks.innerHTML += '<a href="'+link+'?action=edit">[edit]</a> ';
    pps[a].vollbildlink = pps[a].text.appendChild(document.createElement('div'));
      pps[a].vollbildlink.className = 'editsection';
// ausblenden	
    pps[a].div.onclick =
    pps[a].click.onclick =	
    pps[a].text.onclick = hidePopup;
// weiterzählen
    a++;
  } // Ende FOR 
// Arrays zählen
  all = pps.length;
// schwarze leinwand
  ppScreen = document.body.appendChild(document.createElement('div'));
  ppScreen.id = 'ppScreen'; 
  with (ppScreen.style) {
    //width = document.body.offsetWidth+'px';
    //height = document.body.offsetHeight+'px';
    display = 'none';
  }  
  ppScreen.onclick = hidePopup;
}

/////// POPUP ÖFFNEN
function open_popup(p,g) {
  p = (p < all) ? (p < 0) ? all + p : p : all - p;
  g = g || 0; 
// Anpassen der Bildgroesse
  var screen_height = window.innerHeight || document.documentElement.offsetHeight;
  var screen_width = window.innerWidth-27 || document.documentElement.offsetWidth-27;
//Originalgroesse speichern
  pps[p].width = pps[p].width || pps[p].image.width; 
  pps[p].height = pps[p].height || pps[p].image.height; 
// Link für übergroße Bilder
  var vbLink = '<a href="javascript:open_popup('+p+','+1+')">'+
    'Volle Auflösung ('+pps[p].height+' x '+pps[p].width+' px)</a>';
// Vollbild anzeigen
  if (g) {
    pps[p].image.width = pps[p].width;
    pps[p].image.height = pps[p].height; 
    pps[p].vollbildlink.innerHTML = '';
  }
// Verkleinertes Bild
  else {
    if (pps[p].width > screen_width-8) {
      pps[p].image.height = pps[p].height/pps[p].width*(screen_width-8);
      pps[p].image.width  = screen_width-8 ; 
      pps[p].vollbildlink.innerHTML = vbLink;
    }
    if (pps[p].height > screen_height-30) {
      pps[p].image.width = pps[p].width/pps[p].height*(screen_height-30);
      pps[p].image.height  = screen_height-30 ; 
      pps[p].vollbildlink.innerHTML = vbLink;
    }
  }
// Frame und Text positionieren
  var diffWidth  = (screen_width - 8 - pps[p].image.width)/2;
  var diffHeight = (screen_height - 30 - pps[p].image.height)/2;
  var scrY = document.documentElement.scrollTop || // Explorer 6 Strict
    document.body.scrollTop || //all other Explorers
    self.pageYOffset || 0; 
  pps[p].frame.style.marginLeft = g ? 0 : diffWidth + 'px';
  pps[p].text.style.clear = (diffWidth < 160) ? 'left' : 'none';
// Bilder Index anzeigen
  pps[p].index.innerHTML = 'Bild '+(p+1)+'/'+all;
// nur ein Bild
  if (all == 1) {
    pps[p].back.style.visibility = 
    pps[p].next.style.visibility = 'hidden';
    pps[p].click.innerHTML = '<span>Beliebiger Klick oder [Esc] = Bild schließen!</span>' ;
  }
// Pfeiltasten
  usePfeiltasten = true;
  pfeiltasten = function(e) {
    e=e||event;
    if (e.keyCode && usePfeiltasten)
      switch (e.keyCode) {
        case 39:  open_popup(p+1);break;
        case 102: open_popup(p+1);break;
	case 37: open_popup(p-1); break;
        case 100: open_popup(p-1); break;
	case 27: hidePopup(); break;
      }
  }
  document.onkeydown = pfeiltasten;
// Einblenden
  ppScreen.style.display = 'block';
  pps[p].div.style.top =  g ? scrY+'px' : (scrY + diffHeight/2)+'px'; 
  for (var i=0;i<all;i++) 
    pps[i].div.style.display = i==p? 'block' : 'none';
}

// popup-Div aufblenden (dzt. ungenutzt)
function initFade(x) {
  for (var i=5;i<11;i++)
    setTimeout('setOpacity('+i+','+x+')',40*i);
  return false;
}
function setOpacity(value,x) {
  pps[x].image.style.opacity = value/10;
  pps[x].image.style.filter = 'alpha(opacity=' + value*10 + ')';
}

///////////// popup-Div SCHLIESSEN 

function hidePopup() { 
  ppScreen.style.display = 'none'; 
  for (var i in pps)
    pps[i].div.style.display = 'none';
// Pfeiltasten nicht mehr verwenden
  usePfeiltasten = false;
}

setPopup();