0ct0pu5/wesnoth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wmlunits: New pop-up menu implementation

Browse source 
The new code has a smaller markup fingerprint (no more inline event
Javascript attributes) and it also ports the outer-click-dismiss
functionality over from the wiki. It raises the Javascript engine
requirements to IE 9 and later, though, which is inline with the home
page code.
This commit is contained in:
Ignacio R. Morelle 2017-08-11 00:02:04 -04:00
parent a0029c06d1
commit 400d419b54
2 changed files with 78 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
data/tools/unit_tree/html_output.py
View file

@ -384,12 +384,9 @@ class HTMLOutput:
def add_menu(id, name, classes='', is_table_container=False):
html_name = cleantext(name)
html_classes = cleantext(classes)
write("""<li class="popuptrigger" role="menuitem" aria-haspopup="true"
onclick="toggle_menu(this, '{0}', 2)"
onmouseover="toggle_menu(this, '{0}', 1)"
onmouseout="toggle_menu(this, '{0}', 0)">""".format(id))
write('<a class="' + html_classes + '">' + html_name + "</a>")
html_classes = " ".join((cleantext(classes), "popuptrigger"))
write('<li class="popupcontainer" role="menuitem" aria-haspopup="true">')
write('<a class="' + html_classes + '" href="#">' + html_name + "</a>")
if not is_table_container:
write('<ul class="popupmenu" id="' + id + '" role="menu" aria-label="' + html_name + '">')
write('<li>' + html_name + '</li>')

102
data/tools/unit_tree/menu.js
View file

@ -1,32 +1,80 @@
var all = new Array();
/*
* Popup menu implementation for the Wesnoth units database
*/
(function() {
var menus = [];
var visibleMenu = false;
function toggle_menu(event, id, what) {
var e = document.getElementById(id);
var show = what;
/* Since we have Javascript, disable the CSS menu trigger. */
if (event.className != "") {
event.className = "";
e.style.display = 'none';
return;
function toggleMenu(event, menu)
{
hideMenus(menu);
if (!menu.style.display || menu.style.display === "none") {
menu.style.display = "block";
visibleMenu = true;
} else {
menu.style.display = "none";
visibleMenu = false;
}
}
if (show == 0 || show == 1) return;
if (show == 2) {
if (e.style.display == 'block') show = 0;
}
if (show == 0) {
e.style.display = 'none';
}
else {
e.style.display = 'block';
all[id] = 1;
for (mid in all) {
if (mid != id) {
e = document.getElementById(mid);
e.style.display = 'none';
function hideMenus(skipMenu)
{
if (!visibleMenu) {
return;
}
for (var i = 0; i < menus.length; ++i) {
if (menus[i] !== skipMenu) {
menus[i].style.display = "none";
}
}
}
}
function isMenuBox(e)
{
return e.className.search(/\bpopupmenu\b/) != -1;
}
function isNavBar(e)
{
return e.className.search(/\bnavbar\b/) != -1;
}
window.addEventListener("load", function() {
var navItems = document.getElementsByClassName("popupcontainer");
// Set event handlers for individual menu triggers.
for (var i = 0; i < navItems.length; ++i) {
var navItem = navItems[i],
menu = navItem.getElementsByClassName("popupmenu")[0];
menus.push(menu);
var id = menu.id,
a = navItem.getElementsByClassName("popuptrigger")[0];
a.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
toggleMenu(event, event.target.nextElementSibling);
}, false);
}
// Dismiss all visible menus on click outside them.
document.addEventListener("click", function(event) {
if (!visibleMenu) {
return;
}
var parent = event.target;
while(parent && !isMenuBox(parent) && !isNavBar(parent)) {
parent = parent.parentElement;
}
if (!parent || !isMenuBox(parent)) {
hideMenus();
}
}, false);
}, false);
})();