Difference between revisions of "MediaWiki:Common.js"

Revision as of 14:29, 10 March 2009

/* Any JavaScript here will be loaded for all users on every page load. */
var reasonCaptionShow = "Show reason";
var reasonCaptionHide = "Hide reason";
var docCaptionShow = "Show documentation";
var docCaptionHide = "Hide documentation";
var tpbCoverChange = "Alternate Cover";

var hasClass = (function () {
  var reCache = {};
  return function (element, className) {
    return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
  };
})();

function collapseReason(id) {
  var content = document.getElementById("reasonContent-" + id);
  var rSwitch = document.getElementById("reasonSwitch-" + id);
  if(rSwitch.firstChild.data==reasonCaptionShow) {
    content.style.display = "block";
    rSwitch.firstChild.data = reasonCaptionHide;
  } else {
    content.style.display = "none";
    rSwitch.firstChild.data = reasonCaptionShow;
  }
}

function createAllReasonButtons() {
  var reasonIndex = 0;
  var divs = document.getElementsByTagName("div");
  for(var i = 0; i < divs.length; i++) {
    if(hasClass(divs[i], "reasonContainer")) {
      var rSwitch = divs[i].childNodes[0].lastChild;
      var content = divs[i].childNodes[1];

      content.setAttribute("id", "reasonContent-" + reasonIndex);

      var link = document.createElement("a");
      var linkCaption = document.createTextNode(reasonCaptionShow);
      link.setAttribute("id", "reasonSwitch-" + reasonIndex);
      link.setAttribute("href", "javascript:collapseReason(" + reasonIndex + ");");
      link.appendChild(linkCaption);
      
      rSwitch.appendChild(link);
      
      reasonIndex++;
    }
  }
}

addOnloadHook(createAllReasonButtons);

function collapseDoc(id) {
  var content = document.getElementById("docContent-" + id);
  var rSwitch = document.getElementById("docSwitch-" + id);
  if(rSwitch.firstChild.data==docCaptionShow) {
    content.style.display = "block";
    rSwitch.firstChild.data = docCaptionHide;
  } else {
    content.style.display = "none";
    rSwitch.firstChild.data = docCaptionShow;
  }
}

function createAllDocButtons() {
  var docIndex = 0;
  var divs = document.getElementsByTagName("div");
  for(var i = 0; i < divs.length; i++) {
    if(hasClass(divs[i], "template-documentation")) {
      var subs = divs[i].childNodes;
      for(var j = 0; j < subs.length; j++) {
        if(hasClass(subs[j], "fake-h2"))
          var rSwitch = subs[j].firstChild;
        if(hasClass(subs[j], "documentation-content"))
          var content = subs[j];
      }

      content.setAttribute("id", "docContent-" + docIndex);

      var link = document.createElement("a");
      var linkCaption = document.createTextNode(docCaptionHide);
      link.setAttribute("id", "docSwitch-" + docIndex);
      link.setAttribute("href", "javascript:collapseDoc(" + docIndex + ");");
      link.appendChild(linkCaption);
      rSwitch.appendChild(link);

      docIndex++;
    }
  }
  if(docIndex>2) {
    for(var i = 0; i < docIndex; i++) {
      collapseDoc(i);
    }
  }
}

addOnloadHook(createAllDocButtons);

function ToggleCoverImage() {
  var el = document.getElementById("image2");
  if ( el.style.display != 'none' ) {
    el.style.display = 'none';
  }
  else {
    el.style.display = '';
  }
  el = document.getElementById("image1");
  if ( el.style.display != 'none' ) {
    el.style.display = 'none';
  }
  else {
    el.style.display = '';
  }
}

function createAllCoverButtons() {

  var divs = document.getElementsByTagName("div");
  for(var i = 0; i < divs.length; i++) {
    if(hasClass(divs[i], "CoverToggle")) {
     // var content = divs[i].lastChild;
      var link = document.createElement("a");
      var linkCaption = document.createTextNode(tpbCoverChange);
      link.setAttribute("href", "javascript:ToggleCoverImage();");
      link.appendChild(linkCaption);
 
      divs[i].appendChild(link);
 
      break;
    }
  }
}
 
addOnloadHook(createAllCoverButtons);

function columnAreaImage(){
	if(document.title.split(" ")[0] == "Preferences")
	{
		return;
	}
	
	var divS;
	var divC;
	if (document.getElementById ) {
		divS = document.getElementById("column-content");
		divC = document.getElementById("content");
	} else if (document.all ) {
		divS = document.all["column-content"];
		divC = document.all["content"];
	} else {
		return;
	}
	if ( divS && divS.style ){
		var divSHval;
		if (divS.style.pixelHeight) { 
			divSHval= divS.style.pixelHeight;
		} else {
			divSHval=  divS.offsetHeight;
		}
		
		if(Number(divSHval) >1176){
		//1136=768(number bigger than background image and side buttons)+imgheight(370)
			if ("rgb(19, 32, 46)"==document.body.style.backgroundColor) 
			{
				divS.style.backgroundImage = "url(/images/c/cb/Infosphere_Sidebar.png)";
			}
			else
			{
				divS.style.backgroundImage = "url(/images/0/02/Infosphere_lower_Background.png)";
			}
			divS.style.backgroundPosition = "bottom left";
			divS.style.backgroundRepeat = "no-repeat";
			if(hasClass(document.body, "ns-8"))
				return;
			if(divC && divC.style ) {
				//Uhm... apparently this is working now!  Woo!
				divC.style.backgroundImage = "url(/images/4/44/Infosphere_content_Background.png)";
				divC.style.backgroundPosition = "bottom left";
				divC.style.backgroundRepeat = "no-repeat";
			}
		}
	}
}

addOnloadHook(columnAreaImage);

function getClientHeight() {
	return document.documentElement.clientHeight;
}

//The following is for transcript articles.
var currentTranscriptTarget = null;
var currentTranscriptTarget2 = null;
var currentTranscriptHl = null;
var currentTranscriptHlEnd = null;
var writtenTranscriptLineLink = false;
var transcriptHlColour = "#888888";
var transcriptHlSecondMode = false;
var specialCharacters = ["!", "*", "'", "(", ")", ";", ":", "@", "&", "=", "+", "$", ",", "/", "?", "%", "#", "[", "]" ];
var specialCharactersValues = {"!" : "%21", "*" : "%2A", "'" : "%27", "(" : "%28", ")" : "%29", ";" : "%3B", ":" : "%3A", "@" : "%40", "&" : "%26", "=" : "%3D", "+" : "2B", "$" : "%24", "," : "%2C", "/" : "%2F", "?" : "%3F", "%" : "%25", "#" : "%23", "[" : "%5B", "]" : "%5D" };

function handleURI(str) {
	var tmp = str;
	for(var i = 0; i < specialCharacters.length; i++) {
		if(tmp.indexOf(specialCharacters[i])!=-1)
			tmp = tmp.replace(specialCharacters[i], specialCharactersValues[specialCharacters[i]]);
	}
	return tmp;
}

function getStyle(el,styleProp) {
	var x = document.getElementById(el);
	if (x.currentStyle)
		var y = x.currentStyle[styleProp];
	else if (window.getComputedStyle)
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	return y;
}

function transcriptStart() {
	if((!document.getElementById("transcript-field") && wgAction=="view") || (wgTitle.indexOf("(transcript)")==-1 && wgAction=="edit")) //check if it is a transcript article, otherwise jump out.
		return;
	if(wgAction=="view") {
		var tf = document.getElementById("transcript-field");
		while(tf.firstChild)
			tf.removeChild(tf.firstChild);
		var activateText = document.createTextNode("Activate edit mode");
		var activateAnchor = document.createElement("a");
		activateAnchor.setAttribute("href", "javascript:activateTranscript();");
		activateAnchor.appendChild(activateText);
		tf.appendChild(activateAnchor);

		giveTranscriptElementsId();
		//Let's check if someone linked to a specific line in the transcript.
		var bookmark = location.hash;
		if(bookmark) {
			var bs = bookmark.split("-");
			var line = document.getElementById("transline-" + bs[1]);
			currentTranscriptHl = line;
			var ypos = line.offsetTop - (getClientHeight()/2);
			line.style.backgroundColor = transcriptHlColour;
			if(bs[2]) {
				var lstart = parseInt(bs[1]);
				var lend = parseInt(bs[2]);
				if(lstart < lend) {
					for(var i = lstart+1; i<=lend; i++) {
						var tmp = document.getElementById("transline-" + i);
						if(tmp==null)
							break;
						tmp.style.backgroundColor = transcriptHlColour;
						currentTranscriptHlEnd = tmp;
					}
					if((currentTranscriptHlEnd.offsetTop - line.offsetTop + 50) > getClientHeight())
						ypos = line.offsetTop - 50;
					else
						ypos = line.offsetTop + (currentTranscriptHlEnd.offsetTop - line.offsetTop)/2 - (getClientHeight()/2);
				}
			}
			window.scrollBy(0, ypos);
		}
	} else if(wgAction=="edit") {
		var bookmark = location.hash;
		if(bookmark.indexOf("-")==-1)
			return;
		var lineid = parseInt(bookmark.split("-")[1])
		var findLine = 0;
		var fullContent = document.getElementById("wpTextbox1").firstChild.data.split("\n");
		var inTemplate = false;
		var line = "";
		var fontSize = parseInt(getStyle("wpTextbox1", "font-size"));
		if(!fontSize)
			fontSize = parseInt(getStyle("wpTextbox1", "fontSize"));
		var cWidth = parseInt(document.getElementById("wpTextbox1").offsetWidth);
		var fontWidth = fontSize/2 + 1;
		var lineLength = Math.floor(cWidth/fontWidth - 3 * fontWidth);
		var inBoxLine = 0;
		for(var i = 0; i < fullContent.length; i++) {
			var tmpline = fullContent[i];
			if(tmpline.indexOf("}}")!=-1) {
				inTemplate = false;
				findLine--;
			} else if(tmpline.indexOf("{{")!=-1) {
				inTemplate = true;
			}
			if(!inTemplate)
				findLine++;
			if(findLine>lineid)
				break;
			inBoxLine += Math.floor(tmpline.length/lineLength) + 1;
		}
		//var cHeight = document.getElementById("wpTextbox1").offsetHeight;
		var ypos = Math.floor(inBoxLine * (fontSize + 2));
		document.getElementById("wpTextbox1").scrollTop = ypos;
	}
}

addOnloadHook(transcriptStart);

function giveTranscriptElementsId() {
	var c = document.getElementById("bodyContent");
	var elementIndex = 0;
	var kids = c.childNodes;
	for(var i = 0; i < kids.length; i++) {
		var nt = kids[i].nodeType;
		if(nt!=1)
			continue;
		var tn = kids[i].tagName.toLowerCase();
		if(tn=="dl" || (tn=="div" && hasClass(kids[i], "poem"))) {
			kids[i].setAttribute("id", "transline-" + elementIndex);
			elementIndex++;
		}
	}
}

function activateTranscript() {
	var te = document.getElementById("transcript-edit");
	while(te.firstChild)
		te.removeChild(te.firstChild);
	var tf = document.getElementById("transcript-field");
	while(tf.firstChild)
		tf.removeChild(tf.firstChild);
	var deactivateAnchor = document.createElement("a");
	var deactivateText = document.createTextNode("Deactivate edit mode");
	deactivateAnchor.setAttribute("href", "javascript:deactivateTranscript();");
	deactivateAnchor.appendChild(deactivateText);
	var helpText = document.createTextNode("Double click any line to begin.");
	var div1 = document.createElement("div");
	var div2 = document.createElement("div");
	var p = document.createElement("p");
	var div3 = document.createElement("div");
	div1.setAttribute("class", "infoboxCentre");
	div2.setAttribute("id", "transcript-lineedit");
	div2.setAttribute("class", "infoboxCentre");
	p.setAttribute("style", "font-weight: bold;");
	div3.setAttribute("id", "transcript-linelink");
	div1.appendChild(deactivateAnchor);
	p.appendChild(helpText);
	div2.appendChild(p);
	te.appendChild(div1);
	te.appendChild(div2);
	te.appendChild(div3);
	te.setAttribute("style", "display:block; position: fixed; top: " + (getClientHeight()/2) + "px; right: 10px;");
	document.getElementById("bodyContent").addEventListener('click', transcriptLine, true);
}

function deactivateTranscript() {
	var te = document.getElementById("transcript-edit");
	while(te.firstChild)
		te.removeChild(te.firstChild);
	var tf = document.getElementById("transcript-field");
	te.style.display = "none";
	var activateText = document.createTextNode("Activate edit mode");
	var activateAnchor = document.createElement("a");
	activateAnchor.setAttribute("href", "javascript:activateTranscript();");
	activateAnchor.appendChild(activateText);
	tf.appendChild(activateAnchor);
	if(currentTranscriptHl!=null) {
		unHighlightLines(currentTranscriptHl.id.split("-")[1], true);
		currentTranscriptHl = null;
		currentTranscriptHlEnd = null;
	}
	writtenTranscriptLineLink = false;
	document.getElementById("bodyContent").removeEventListener('click', transcriptLine, true);
}

function unHighlightLines(start, several) {
	start = parseInt(start);
	if(!several) {
		document.getElementById("transline-" + start).style.background = "transparent";
		document.getElementById("transline-" + start).style.backgroundColor = "";
	} else {
		var i = start;
		while(1) {
			if(document.getElementById("transline-" + i)==null || document.getElementById("transline-" + i).style.backgroundColor=="")
				return;
			document.getElementById("transline-" + i).style.background = "transparent";
			document.getElementById("transline-" + i).style.backgroundColor = "";
			i++;
		}
	}
}

function getTranscriptElement(el) {
	if(el.id.indexOf("transline-")!=-1)
		return el;
	while(el.id.indexOf("transline-")==-1) {
		if(el.id=="bodyContent")
			return null;
		el = el.parentNode;
	}
	return el;
}

function transcriptLine(event) {
	if(!event) event = window.event;
	var el = getTranscriptElement(event.target);
	if(el==null)
		return;
	if(!transcriptHlSecondMode) {
		if((currentTranscriptTarget == el) && (currentTranscriptHl!=el)) {
			//Since we are here, it must be assumed this is the second time we clicked it.
			el.style.backgroundColor = transcriptHlColour;
			if(currentTranscriptHl) {
				unHighlightLines(currentTranscriptHl.id.split("-")[1], true);
				currentTranscriptHlEnd = null;
			}
			setTranscriptStatus("Work with this line or click another.");		
			currentTranscriptHl = el;
			transcriptLineLink();
		} else if(currentTranscriptTarget!=el) {
			currentTranscriptTarget = el;
		}
	} else {
		if((currentTranscriptTarget2 == el) && (currentTranscriptHlEnd!=el)) {
			startid = parseInt(currentTranscriptHl.id.split("-")[1]);
			endid = parseInt(el.id.split("-")[1]);
			unHighlightLines(startid+1, true);
			for(var i = startid+1; i<=endid; i++)
				document.getElementById("transline-" + i).style.backgroundColor = transcriptHlColour;
			currentTranscriptHlEnd = document.getElementById("transline-" + endid);
			transcriptLineLink();
		} else if(currentTranscriptTarget2!=el) {
			currentTranscriptTarget2 = el;
		}
	}
}

function transcriptLineLink() {
	hlTop = parseInt(currentTranscriptHl.id.split("-")[1]);
	pageName = handleURI(wgPageName);
	if(!writtenTranscriptLineLink) {
		writtenTranscriptLineLink = true;
		var tll = document.getElementById("transcript-linelink");
		var strong = document.createElement("strong");
		var text1 = document.createTextNode("Link to this line:");
		var text2 = document.createTextNode("Direct URL:");
		var text3 = document.createTextNode("In other articles:");
		var label1 = document.createElement("label");
		var label2 = document.createElement("label");
		label1.setAttribute("for", "transcript-directlinelink");
		label1.setAttribute("style", "float: left; clear:left;");
		label2.setAttribute("for", "transcript-articlelinelink")
		label2.setAttribute("style", "float: left; clear:left;");
		var input1 = document.createElement("input");
		var input2 = document.createElement("input");
		input1.setAttribute("id", "transcript-directlinelink");
		input1.setAttribute("size", "32");
		input1.setAttribute("type", "text");
		input1.setAttribute("value", wgServer + "/" + pageName + "#line-" + hlTop);
		input1.setAttribute("style", "float: left; clear:left; font-size: 0.85em; width: 240px;");
		input1.setAttribute("onFocus", "this.select();");
		input2.setAttribute("id", "transcript-articlelinelink");
		input2.setAttribute("size", "32");
		input2.setAttribute("type", "text");
		input2.setAttribute("value", "{{transline|" + wgTitle.split(" (")[0] + "|" + hlTop + "}}");
		input2.setAttribute("style", "float: left; clear:left; font-size: 0.85em; width: 240px;");
		input2.setAttribute("onFocus", "this.select();");
		strong.appendChild(text1);
		label1.appendChild(text2);
		label2.appendChild(text3);
		tll.appendChild(strong);
		tll.appendChild(label1);
		tll.appendChild(input1);
		tll.appendChild(label2);
		tll.appendChild(input2);

		var tel = document.getElementById("transcript-lineedit");
		var p1 = document.createElement("p");
		var p2 = document.createElement("p");
		var editAnchor = document.createElement("a");
		var editText = document.createTextNode("Edit this line");
		var multipleAnchor = document.createElement("a");
		var multipleText = document.createTextNode("Highlight multiple lines");
		editAnchor.setAttribute("href", "javascript:transcriptEditThisLine();");
		multipleAnchor.setAttribute("href", "javascript:transcriptHlMultiple();");
		multipleAnchor.setAttribute("id", "transcript-multiple");
		editAnchor.appendChild(editText);
		multipleAnchor.appendChild(multipleText);
		p1.appendChild(editAnchor);
		p2.appendChild(multipleAnchor);
		tel.appendChild(p1);
		tel.appendChild(p2);
	} else {
		var input1 = document.getElementById("transcript-directlinelink");
		var input2 = document.getElementById("transcript-articlelinelink");
		if(!transcriptHlSecondMode) {
			input1.setAttribute("value", wgServer + "/" + pageName + "#line-" + hlTop);
			input2.setAttribute("value", "{{transline|" + wgTitle.split(" (")[0] + "|" + hlTop + "}}");
		} else {
			var hl2Top = parseInt(currentTranscriptHlEnd.id.split("-")[1]);
			input1.setAttribute("value", wgServer + "/" + pageName + "#line-" + hlTop + "-" + hl2Top);
			input2.setAttribute("value", "{{transline|" + wgTitle.split(" (")[0] + "|" + hlTop + "|" + hl2Top + "}}");
		}
	}
}

function setTranscriptStatus(msg) {
	document.getElementById("transcript-lineedit").firstChild.firstChild.data = msg;
}

function transcriptEditThisLine() {
	var lid = parseInt(currentTranscriptHl.id.split("-")[1]);
	var url = wgServer + "/index.php?title=" + wgPageName + "&action=edit#line-" + lid;
	location.href = url;
}

function transcriptHlMultiple() {
	if(!transcriptHlSecondMode) {
		setTranscriptStatus("Double click a line below the current one.");
		document.getElementById("transcript-multiple").firstChild.data = "Leave multiple highlight mode";
		transcriptHlSecondMode = true;
	} else {
		setTranscriptStatus("Double click a line.");
		document.getElementById("transcript-multiple").firstChild.data = "Highlight multiple lines";
		transcriptHlSecondMode = false;		
	}
}