User:Tiny plastic Grey Knight/scripts/suldropdown.js

/* * 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, "#", "", 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);