Welcome to the DFO World Wiki. With many major updates since the release of DFO, many items are missing. Visit Item Database Project to learn more.
Please remember to click "show preview" before saving the page.
Thanks for the updated logo snafuPop!

MediaWiki:Common.js

From DFO World Wiki
Revision as of 12:42, 8 June 2014 by Dfoplayer (talk | contribs) (Mouse-over boxes)
Jump to: navigation, search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/** Collapsible tables *********************************************************
  *
  *  Description: Allows tables to be collapsed, showing only the header. See
  *               [[Wikipedia:NavFrame]].
  *  Maintainers: [[User:R. Koot]]
  */
 
 var autoCollapse = 2;
 var collapseCaption = "hide";
 var expandCaption = "show";
 
 function collapseTable( tableIndex )
 {
     var Button = document.getElementById( "collapseButton" + tableIndex );
     var Table = document.getElementById( "collapsibleTable" + tableIndex );
 
     if ( !Table || !Button ) {
         return false;
     }
 
     var Rows = Table.rows;
 
     if ( Button.firstChild.data == collapseCaption ) {
         for ( var i = 1; i < Rows.length; i++ ) {
             Rows[i].style.display = "none";
         }
         Button.firstChild.data = expandCaption;
     } else {
         for ( var i = 1; i < Rows.length; i++ ) {
             Rows[i].style.display = Rows[0].style.display;
         }
         Button.firstChild.data = collapseCaption;
     }
 }
 
 function createCollapseButtons()
 {
     var tableIndex = 0;
     var NavigationBoxes = new Object();
     var Tables = document.getElementsByTagName( "table" );
 
     for ( var i = 0; i < Tables.length; i++ ) {
         if ( hasClass( Tables[i], "collapsible" ) ) {
 
             /* only add button and increment count if there is a header row to work with */
             var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
             if (!HeaderRow) continue;
             var Header = HeaderRow.getElementsByTagName( "th" )[0];
             if (!Header) continue;
 
             NavigationBoxes[ tableIndex ] = Tables[i];
             Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
 
             var Button     = document.createElement( "span" );
             var ButtonLink = document.createElement( "a" );
             var ButtonText = document.createTextNode( collapseCaption );
 
             Button.style.styleFloat = "right";
             Button.style.cssFloat = "right";
             Button.style.fontWeight = "normal";
             Button.style.textAlign = "right";
             Button.style.width = "6em";
 
             ButtonLink.style.color = Header.style.color;
             ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
             ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" );
             ButtonLink.appendChild( ButtonText );
 
             Button.appendChild( document.createTextNode( "[" ) );
             Button.appendChild( ButtonLink );
             Button.appendChild( document.createTextNode( "]" ) );
 
             Header.insertBefore( Button, Header.childNodes[0] );
             tableIndex++;
         }
     }
 
     for ( var i = 0;  i < tableIndex; i++ ) {
         if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
             collapseTable( i );
         }
     }
 }
 
 addOnloadHook( createCollapseButtons );
 
 /** Dynamic Navigation Bars (experimental) *************************************
  *
  *  Description: See [[Wikipedia:NavFrame]].
  *  Maintainers: UNMAINTAINED
  */
 
  // set up the words in your language
  var NavigationBarHide = '[' + collapseCaption + ']';
  var NavigationBarShow = '[' + expandCaption + ']';
 
  // shows and hides content and picture (if available) of navigation bars
  // Parameters:
  //     indexNavigationBar: the index of navigation bar to be toggled
  function toggleNavigationBar(indexNavigationBar)
  {
     var NavToggle = document.getElementById("NavToggle" + indexNavigationBar);
     var NavFrame = document.getElementById("NavFrame" + indexNavigationBar);
 
     if (!NavFrame || !NavToggle) {
         return false;
     }
 
     // if shown now
     if (NavToggle.firstChild.data == NavigationBarHide) {
         for (
                 var NavChild = NavFrame.firstChild;
                 NavChild != null;
                 NavChild = NavChild.nextSibling
             ) {
             if ( hasClass( NavChild, 'NavPic' ) ) {
                 NavChild.style.display = 'none';
             }
             if ( hasClass( NavChild, 'NavContent') ) {
                 NavChild.style.display = 'none';
             }
         }
     NavToggle.firstChild.data = NavigationBarShow;
 
     // if hidden now
     } else if (NavToggle.firstChild.data == NavigationBarShow) {
         for (
                 var NavChild = NavFrame.firstChild;
                 NavChild != null;
                 NavChild = NavChild.nextSibling
             ) {
             if (hasClass(NavChild, 'NavPic')) {
                 NavChild.style.display = 'block';
             }
             if (hasClass(NavChild, 'NavContent')) {
                 NavChild.style.display = 'block';
             }
         }
     NavToggle.firstChild.data = NavigationBarHide;
     }
  }
 
  // adds show/hide-button to navigation bars
  function createNavigationBarToggleButton()
  {
     var indexNavigationBar = 0;
     // iterate over all < div >-elements 
     var divs = document.getElementsByTagName("div");
     for(
             var i=0; 
             NavFrame = divs[i]; 
             i++
         ) {
         // if found a navigation bar
         if (hasClass(NavFrame, "NavFrame")) {
 
             indexNavigationBar++;
             var NavToggle = document.createElement("a");
             NavToggle.className = 'NavToggle';
             NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar);
             NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');');
 
             var NavToggleText = document.createTextNode(NavigationBarHide);
             for (
                  var NavChild = NavFrame.firstChild;
                  NavChild != null;
                  NavChild = NavChild.nextSibling
                 ) {
                 if ( hasClass( NavChild, 'NavPic' ) || hasClass( NavChild, 'NavContent' ) ) {
                     if (NavChild.style.display == 'none') {
                         NavToggleText = document.createTextNode(NavigationBarShow);
                         break;
                     }
                 }
             }
 
             NavToggle.appendChild(NavToggleText);
             // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
             for(
               var j=0; 
               j < NavFrame.childNodes.length; 
               j++
             ) {
               if (hasClass(NavFrame.childNodes[j], "NavHead")) {
                 NavFrame.childNodes[j].appendChild(NavToggle);
               }
             }
             NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar);
         }
     }
  }
 
  addOnloadHook( createNavigationBarToggleButton );
 
 
/* Test if an element has a certain class **************************************
  *
  * Description: Uses regular expressions and caching for better performance.
  * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
  */
 
 var hasClass = (function () {
     var reCache = {};
     return function (element, className) {
         return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
     };
 })();

/* Mouse-over boxes (Work-in-progress) */
function initmouseoverbox()
{
	var affectedSpans = new Array();
	var affectedSpansi = 0;
	var spans = document.getElementsByTagName("span");
	for (i = 0; i < spans.length; i++)
	{
		if (spans[i].getAttribute("class") == null)
			continue;
		var classes = spans[i].getAttribute("class").split(" ");
		for (c = 0; c < classes.length; c++)
			if (classes[c] == "mouseover-wrapper")
			{
				affectedSpans[affectedSpansi] = i;
				affectedSpansi++;
				break;
			}
	}

	var content = null;
	var mouseover = null;
	var innerDivs = null;
	for (i = 0; i < affectedSpansi; i++)
	{
		innerDivs = spans[affectedSpans[i]].getElementsByTagName("div");
		for (c = 0; c < innerDivs.length; c++)
			if (innerDivs[c].getAttribute("id") == "mouseover-content")
				content = innerDivs[c];
			else if (innerDivs[c].getAttribute("id") == "mouseover-trigger")
				trigger = innerDivs[c];
		content.style.display = "none";

		/* Replace <p>s inside the trigger with <br />s */
		var ps = trigger.getElementsByTagName("p");
		var anchor = trigger.getElementsByTagName("a");
		var parent = null;
		var innerHTML = null;
		var e1 = null;
		var e2 = null;
		for (d = 0; d < anchor.length; d++)
		{
			anchor[d].setAttribute("title", "");
		}
		for (c = 0; c < ps.length; c++)
		{
			var parent = ps[c].parentNode;
			var innerHTML = ps[c].innerHTML;

			e1 = document.createElement("br");
			parent.replaceChild(e1, ps[c]);
			e2 = document.createElement("br");
			e2.setAttribute("class", "mouseover-p");
			parent.insertBefore(e2, e1.nextSibling);
			e1 = document.createTextNode(innerHTML);
			parent.insertBefore(e1, e2.nextSibling);
			e2 = document.createElement("br");
			parent.insertBefore(e2, e1.nextSibling);
			e1 = document.createElement("br");
			e1.setAttribute("class", "mouseover-p");
			parent.insertBefore(e1, e2.nextSibling);
		}

		trigger.setAttribute("onmouseover", "mouseoverbox(" + i + ", this, event);");
		trigger.setAttribute("onmousemove", "mouseoverbox(" + i + ", this, event, true);");
		trigger.setAttribute("onmouseout", "mouseoverbox(" + i + ", this);");
	}
}
addOnloadHook(initmouseoverbox);

var mouseoverboxes = new Array();
function mouseoverFade(id, fadelength, lastTick) // Had to make it global becuase of setTimeout
{
	if (lastTick !== undefined)
	{
		var curTick = new Date().getTime();
		var elapsedTicks = curTick - lastTick;

		if (mouseoverboxes[id].fadeState == 1 && mouseoverboxes[id].style.display != "block")
			mouseoverboxes[id].style.display = "block";

		if (mouseoverboxes[id].fadeTimeLeft <= elapsedTicks)
		{
			mouseoverboxes[id].style.opacity = mouseoverboxes[id].fadeState == 1 ? 1 : 0;
			if (mouseoverboxes[id].fadeState == -1)
				mouseoverboxes[id].style.display = "none";
			mouseoverboxes[id].fadeState = mouseoverboxes[id].fadeState == 1 ? 2 : -2;
			return;
		}

		mouseoverboxes[id].fadeTimeLeft -= elapsedTicks;
		var newOpVal = mouseoverboxes[id].fadeTimeLeft/fadelength;
		if (mouseoverboxes[id].fadeState == 1)
			newOpVal = 1 - newOpVal;

		mouseoverboxes[id].style.opacity = newOpVal;

		setTimeout("mouseoverFade(" + id + ", " + fadelength + ", " + curTick + ")", 20);
		return;
	}
	if (mouseoverboxes[id].fadeState == undefined)
		if (mouseoverboxes[id].style.opacity == undefined || mouseoverboxes[id].style.opacity == "" || mouseoverboxes[id].style.opacity == 1)
			mouseoverboxes[id].fadeState = 2;
		else
			mouseoverboxes[id].fadeState = -2;

	if (mouseoverboxes[id].fadeState == 1 || mouseoverboxes[id].fadeState == -1)
	{
		mouseoverboxes[id].fadeState = mouseoverboxes[id].fadeState == 1 ? -1 : 1;
		mouseoverboxes[id].fadeTimeLeft = fadelength - mouseoverboxes[id].fadeTimeLeft;
	}
	else
	{
		mouseoverboxes[id].fadeState = mouseoverboxes[id].fadeState == 2 ? -1 : 1;
		mouseoverboxes[id].fadeTimeLeft = fadelength;
		setTimeout("mouseoverFade(" + id + ", " + fadelength + ", " + new Date().getTime() + ")", 20);
	}  
}
function mouseoverbox(id, obj, event, update)
{
	function updatexy(id, event)
	{
		var x, y;
		switch (mouseoverboxes[id].settings["anchor"])
		{
			case 1:
				y = (-mouseoverboxes[id].offsetHeight) + (mouseoverboxes[id].settings["mody"] == 0 ? -10 : mouseoverboxes[id].settings["mody"]);
				x = (-mouseoverboxes[id].offsetWidth) + (mouseoverboxes[id].settings["modx"] == 0 ? -10 : mouseoverboxes[id].settings["modx"]);
				break;
			case 2:
				y = (-mouseoverboxes[id].offsetHeight) + (mouseoverboxes[id].settings["mody"] == 0 ? -10 : mouseoverboxes[id].settings["mody"]);
				x = (-(mouseoverboxes[id].offsetWidth/2)) + mouseoverboxes[id].settings["modx"];
				break;
			case 3:
				y = (-mouseoverboxes[id].offsetHeight) + (mouseoverboxes[id].settings["mody"] == 0 ? -10 : mouseoverboxes[id].settings["mody"]);
				x = mouseoverboxes[id].settings["modx"] == 0 ? 10 : mouseoverboxes[id].settings["modx"];
				break;
			case 4:
				y = (-(mouseoverboxes[id].offsetHeight/2)) + mouseoverboxes[id].settings["mody"];
				x = (-mouseoverboxes[id].offsetWidth) + (mouseoverboxes[id].settings["modx"] == 0 ? -10 : mouseoverboxes[id].settings["modx"]);
				break;
			case 5:
				y = (-(mouseoverboxes[id].offsetHeight/2)) + mouseoverboxes[id].settings["mody"];
				x = (-(mouseoverboxes[id].offsetWidth/2)) + mouseoverboxes[id].settings["modx"];
				break;
			case 6:
				y = (-(mouseoverboxes[id].offsetHeight/2)) + mouseoverboxes[id].settings["mody"];
				x = mouseoverboxes[id].settings["modx"] == 0 ? 10 : mouseoverboxes[id].settings["modx"];
				break;
			case 7:
				y = mouseoverboxes[id].settings["mody"] == 0 ? 10 : mouseoverboxes[id].settings["mody"];
				x = (-mouseoverboxes[id].offsetWidth) + (mouseoverboxes[id].settings["modx"] == 0 ? -10 : mouseoverboxes[id].settings["modx"]);
				break;
			case 8:
				y = mouseoverboxes[id].settings["mody"] == 0 ? 10 : mouseoverboxes[id].settings["mody"];
				x = (-(mouseoverboxes[id].offsetWidth/2)) + mouseoverboxes[id].settings["modx"];
				break;
			case 9:
			default:
				y = mouseoverboxes[id].settings["mody"] == 0 ? 20 : mouseoverboxes[id].settings["mody"];
				x = mouseoverboxes[id].settings["modx"] == 0 ? -1 : mouseoverboxes[id].settings["modx"];
				break;
		}

		mouseoverboxes[id].style.top = (event.clientY + y) + "px";
		mouseoverboxes[id].style.left = (event.clientX + x) + "px";
	}

	if (mouseoverboxes[id] === undefined)
	{
		mouseoverboxes[id] = document.createElement("div");

		var settings = new Array();
		/* Defaults */
		settings["style"] = "";
		settings["anchor"] = 9;
		settings["modx"] = 0;
		settings["mody"] = 0;
		settings["fade-length"] = 200.0;

		var divs = obj.parentNode.getElementsByTagName("div");
		for (i = 0; i < divs.length; i++)
			if (divs[i].getAttribute("id") == "mouseover-custom")
			{
				var spans = divs[i].getElementsByTagName("span");
				for (c = 0; c < spans.length; c++)
					switch (spans[c].getAttribute("id"))
					{
						case "mouseover-custom-style":
							if (spans[c].innerHTML != "")
								settings["style"] = spans[c].innerHTML;
							break;
						case "mouseover-custom-anchor":
							if (spans[c].innerHTML != "")
								settings["anchor"] = parseInt(spans[c].innerHTML);
							break;
						case "mouseover-custom-modx":
							if (spans[c].innerHTML != "")
								settings["modx"] = parseInt(spans[c].innerHTML);
							break;
						case "mouseover-custom-mody":
							if (spans[c].innerHTML != "")
								settings["mody"] = parseInt(spans[c].innerHTML);
							break;
						case "mouseover-custom-fade-length":
							if (spans[c].innerHTML != "")
								settings["fade-length"] = parseInt(spans[c].innerHTML);
							break;
					}
				break;
			}
			else if (divs[i].getAttribute("id") == "mouseover-content")
				mouseoverboxes[id].innerHTML = divs[i].innerHTML;

		mouseoverboxes[id].setAttribute("class", "mouseover-box");
		mouseoverboxes[id].style.cssText = settings["style"];
		mouseoverboxes[id].style.display = "none";
		mouseoverboxes[id].style.position = "fixed";
		mouseoverboxes[id].style.opacity = 0;
		mouseoverboxes[id].settings = settings;
		document.getElementById("bodyContent").appendChild(mouseoverboxes[id]);
	}

	if (event !== undefined)
	{
		updatexy(id, event);
		if (mouseoverboxes[id].style.display != "block")
			mouseoverboxes[id].style.display = "block";
		if (update == true)
			return;
	}

	mouseoverFade(id, mouseoverboxes[id].settings["fade-length"]);
}