/*
* Example of your monobook.js with this script imported, with a customised menu:
*
*
*
* importScript("User:tiny_plastic_Grey_Knight/scripts/suldropdown.js");
*
* function setupSULDropDownMenu() {
* addSULDropDownOption("wikiversity", "en");
* addSULDropDownOption("wikibooks", "en");
* addSULDropDownOption("wikipedia", "en");
* addSULDropDownOption("wikipedia", "la");
* addSULDropDownOption("meta");
* }
*
*
*/
/**
* Write a function setupSULDropDownMenu() after importing this script, defining the
* projects you want in order. By default the below will be used.
*/
function defaultSULDropDownMenu() {
addSULDropDownOption("wikipedia", "en");
addSULDropDownOption("wikibooks", "en");
addSULDropDownOption("wiktionary", "en");
addSULDropDownOption("wikinews", "en");
addSULDropDownOption("wikisource", "en");
addSULDropDownOption("wikiquote", "en");
addSULDropDownOption("wikiversity", "en");
addSULDropDownOption("meta");
addSULDropDownOption("species");
addSULDropDownOption("commons");
}
var SULDropDownItems = [];
var SULDropDownSubmenuNodes = {};
/**
* Sets up the base of the menu
*/
function addSULDropDown() {
var upnode_id = "p-personal";
var nextnode_id = "pt-mytalk";
var node_id = "pt-suldropdown";
mw.util.addPortletLink(upnode_id, "#", "<SUL>", node_id, "SUL account drop-down menu", "", document.getElementById(nextnode_id));
var node = document.getElementById(node_id);
if(!node) return false;
node.firstChild.innerHTML = "";
var downIcon = document.createElement("img");
downIcon.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Gtk-go-down.svg/16px-Gtk-go-down.svg.png";
downIcon.width = 16;
downIcon.height = 16;
downIcon.alt = "(v)";
node.firstChild.appendChild(downIcon);
node.firstChild.appendChild(document.createTextNode("SUL"));
node.firstChild.style.textTransform = "none";
var menunode = document.createElement("div");
var menulist = document.createElement("ul");
var menuhead = document.createElement("li");
menunode.style.textAlign = "left";
menuhead.style.textAlign = "left";
menulist.style.textAlign = "left";
menunode.style.display = "none";
menunode.style.position = "absolute";
menunode.style.left= "0px";
menunode.style.top = "0px";
menunode.style.border="1px solid #000000";
menunode.style.background="#ffffff";
menuhead.style.display = "block";
menuhead.style.background = "#ddddff";
menuhead.style.text = "#000000";
menuhead.style.textTransform = "none";
menunode.style.zIndex = 3;
menulist.style.zIndex = 3;
menuhead.style.zIndex = 3;
menulist.style.paddingLeft = "0px";
menulist.style.marginLeft = "0px";
menulist.style.paddingRight = "0px";
menulist.style.marginRight = "0px";
menulist.style.listStyleType = "none";
menunode.style.textTransform = "none";
/* ??? Why won't the menunode stack properly in Firefox without this... It should normally be 2, which should work. */
document.getElementById("content").style.zIndex = 0;
menunode.id = "pt-suldropdown-menu";
menulist.id = "pt-suldropdown-menulist";
var exitIcon = document.createElement("img");
exitIcon.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Gtk-stop.svg/16px-Gtk-stop.svg.png";
exitIcon.width = 16;
exitIcon.height = 16;
var headText = document.createElement("span");
headText.appendChild(document.createTextNode("SUL"));
var headwrap = document.createElement("div");
headwrap.style.width = "10em";
headwrap.style.clear = "both";
exitIcon.style.cssFloat = "right";
headText.style.cssFloat = "left";
headText.style.paddingLeft = "1em";
var CLEAR = document.createElement("div");
CLEAR.style.clear = "both";
CLEAR.appendChild(document.createTextNode(""));
headwrap.appendChild(headText);
headwrap.appendChild(exitIcon);
headwrap.appendChild(CLEAR);
menuhead.appendChild(headwrap);
menulist.appendChild(menuhead);
menunode.appendChild(menulist);
menuhead.onclick = hideSULDropDown;
var nextnode = document.getElementById(nextnode_id);
var upnode = node.parentNode;
upnode.insertBefore(menunode, nextnode);
if((typeof setupSULDropDownMenu) == "function") {
setupSULDropDownMenu();
} else {
defaultSULDropDownMenu();
}
updateSULDropDown();
node.onclick = showSULDropDown;
}
var tprojects = [];
/**
* Update the HTML of the menu to match what is in SULDropDownItems[].
*/
function updateSULDropDown() {
var menulist = document.getElementById("pt-suldropdown-menulist");
var submenu_icon_src = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Gtk-go-forward-ltr.svg/16px-Gtk-go-forward-ltr.svg.png";
var max_icon_width = 20;
var max_icon_height = 26;
var submenu_icon_w = 16;
var submenu_icon_h = 16;
var submenu_icon_alt = ">>";
var cells = [];
var item;
var project_data;
var img, link, imgwrap, submenu, subIcon, sublist, subcell, sublink;
var i, deltaX, deltaY;
var addlinkonclick = function(link, project, cell) {
link.onclick = function(e) { return clickSULDropDownSubmenu(e, project, cell); }
}
for(i in allowedSULDropDownProjects) {
allowedSULDropDownProjects[i].inuse = false;
}
for(i in SULDropDownItems) {
item = SULDropDownItems[i];
project_data = item.data;
if(!project_data.inuse) {
if(project_data.unlanguaged) {
cell = document.createElement("li");
img = document.createElement("img");
link = document.createElement("a");
link.href = project_data.userpage;
img.src = project_data.icon;
img.width = project_data.icon_w;
img.height = project_data.icon_h;
deltaY = (max_icon_height - img.height);
deltaX = (max_icon_width - img.width);
link.appendChild(document.createTextNode(project_data.name));
link.style.textTransform = "none";
imgwrap = document.createElement("span");
imgwrap.style.paddingBottom = Math.ceil(deltaY/2) + "px";
imgwrap.style.paddingTop = Math.floor(deltaY/2) + "px";
imgwrap.style.paddingRight = deltaX + "px";
imgwrap.appendChild(img);
cell.appendChild(imgwrap);
cell.appendChild(link);
} else {
cell = document.createElement("li");
img = document.createElement("img");
link = document.createElement("a");
submenu = document.createElement("ul");
link.href = "#";
img.src = project_data.icon;
img.width = project_data.icon_w;
img.height = project_data.icon_h;
deltaY = (max_icon_height - img.height);
deltaX = (max_icon_width - img.width);
link.appendChild(document.createTextNode(project_data.name));
link.style.textTransform = "none";
subIcon = document.createElement("img");
subIcon.src = submenu_icon_src;
subIcon.width = submenu_icon_w;
subIcon.height = submenu_icon_h;
subIcon.alt = submenu_icon_alt;
subIcon.style.marginLeft = "1em";
link.appendChild(subIcon);
submenu.id = "pt-suldropdown-menulist-" + project_data.domain;
submenu.style.display = "none";
submenu.style.border="0px solid #000000";
submenu.style.background="#ffffff";
submenu.style.marginLeft = "4em";
submenu.style.padding = "1px";
submenu.style.listStyleType = "none";
imgwrap = document.createElement("span");
imgwrap.style.paddingBottom = Math.ceil(deltaY/2) + "px";
imgwrap.style.paddingTop = Math.floor(deltaY/2) + "px";
imgwrap.style.paddingRight = deltaX + "px";
imgwrap.appendChild(img);
addlinkonclick(link, item.project, cell);
cell.appendChild(imgwrap);
cell.appendChild(link);
cell.appendChild(submenu);
SULDropDownSubmenuNodes[project_data.domain] = submenu;
}
cell.style.display = "block";
cell.style.padding = "1px";
cell.style.zIndex = 4;
cells.push(cell);
project_data.inuse = true;
}
if(!project_data.unlanguaged) {
/* add subelement for language */
sublist = SULDropDownSubmenuNodes[project_data.domain];
subcell = document.createElement("li");
sublink = document.createElement("a");
sublink.href = project_data.userpage;
subcell.style.display = "block";
subcell.style.textAlign = "left";
sublink.appendChild(document.createTextNode(item.lang));
subcell.appendChild(sublink);
if(sublist) {
sublist.appendChild(subcell);
} else {
alert("No submenu for '" +project_data.domain+ "'!");
}
}
}
while(menulist.childNodes.length > 1) menulist.removeChild(menulist.lastChild);
for(i in cells) {
menulist.appendChild(cells[i]);
}
}
/**
* Hide the menu.
*/
function hideSULDropDown(e) {
var node = document.getElementById("pt-suldropdown");
var menunode = document.getElementById("pt-suldropdown-menu");
menunode.style.display = 'none';
node.onclick = showSULDropDown;
}
/**
* Show the menu based on a given click.
*/
function showSULDropDown(e) {
var event = e ? e : window.event;
var x = 0;
var y = 0;
var menunode = document.getElementById("pt-suldropdown-menu");
if(!menunode) return false;
if(isNaN(window.scrollX)) {
x = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
} else {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
x -= 5;
y -= 5;
menunode.style.left = x + 'px';
menunode.style.top = y + 'px';
menunode.style.display = 'block';
var node = document.getElementById("pt-suldropdown");
node.onclick = hideSULDropDown;
//menunode.onmouseout = hideSULDropDown;
//menunode.ondragout = hideSULDropDown;
}
/**
* Properties list for the various Wikimedia projects
*/
allowedSULDropDownProjects = [
{domain:"wikipedia", unlanguaged:false, inuse:false, name:"Wikipedia", icon_h:16, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Wikipedia-logo.png/16px-Wikipedia-logo.png"},
{domain:"wiktionary", unlanguaged:false, inuse:false, name:"Wiktionary", icon_h:11, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/b/bd/Wiktionary-logo-51px.gif/16px-Wiktionary-logo-51px.gif"},
{domain:"wikibooks", unlanguaged:false, inuse:false, name:"Wikibooks", icon_h:16, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/7/7f/Wikibooks-logo-35px.png/16px-Wikibooks-logo-35px.png"},
{domain:"wikinews", unlanguaged:false, inuse:false, name:"Wikinews", icon_h: 9, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/6/60/Wikinews-logo-51px.png/16px-Wikinews-logo-51px.png"},
{domain:"wikisource", unlanguaged:false, inuse:false, name:"Wikisource", icon_h:17, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/b/b6/Wikisource-logo-35px.png/16px-Wikisource-logo-35px.png"},
{domain:"wikiquote", unlanguaged:false, inuse:false, name:"Wikiquote", icon_h:13, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/4/46/Wikiquote-logo-51px.png/16px-Wikiquote-logo-51px.png"},
{domain:"wikiversity", unlanguaged:false, inuse:false, name:"Wikiversity", icon_h:12, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/e/e3/Wikiversity-logo-41px.png/16px-Wikiversity-logo-41px.png"},
{domain:"commons", unlanguaged:true, inuse:false, name:"Commons", icon_h:21, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/9/9d/Commons-logo-31px.png/16px-Commons-logo-31px.png"},
{domain:"meta", unlanguaged:true, inuse:false, name:"Meta-Wiki", icon_h:16, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Wikimedia-logo-35px.png/16px-Wikimedia-logo-35px.png"},
{domain:"species", unlanguaged:true, inuse:false, name:"Wikispecies", icon_h:19, icon_w:16, icon:"http://upload.wikimedia.org/wikipedia/en/thumb/b/bf/Wikispecies-logo-35px.png/16px-Wikispecies-logo-35px.png"}
];
/**
* Adds the specified project (including language) to the menu.
* @param project Should match the "domain" field of an entry in allowedSULDropDownProjects[].
* @param lang If the project has language-specific versions, you should specify the language code you want here. Otherwise, leave undefined.
*/
function addSULDropDownOption(project, lang) {
var project = project.toLowerCase();
var index = -1;
for(var i in allowedSULDropDownProjects) {
if(allowedSULDropDownProjects[i].domain==project) {
index = i;
break;
}
}
if(index<0) return false;
var project_data = allowedSULDropDownProjects[index];
var username = document.getElementById('pt-userpage').firstChild.firstChild.data;
var domain = "wikimedia";
var subdomain = "meta";
if(project_data.unlanguaged) {
domain = "wikimedia";
subdomain = project_data.domain;
} else {
domain = project_data.domain;
subdomain = lang;
}
project_data.userpage = "http://" + subdomain + "." + domain + ".org/wiki/User:" + username;
var item = {};
item.project = project;
item.lang = lang;
item.domain = domain;
item.subdomain = subdomain;
item.data = project_data;
SULDropDownItems.push(item);
}
/**
* Show/hide submenus by click.
* @param e The click event.
* @param project The project we are looking at (probably defined from the caller_node).
* @param caller_node The cell whose click called this function (probably an LI in the main list).
*/
function clickSULDropDownSubmenu(e, project, caller_node) {
var submenu = document.getElementById("pt-suldropdown-menulist-" + project);
if(!submenu) {
alert("SULDropDown panic -- can't find 'pt-suldropdown-menulist-" + project + "'");
return false;
}
var currentlyVisible = (submenu.style.display != "none" ? true : false);
if(currentlyVisible) {
submenu.style.display = "none";
} else {
submenu.style.display = "block";
}
}
/* Finally, add the hook to kick everything off. */
$(addSULDropDown);
