wmlunits: New pop-up menu implementation

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.

data/tools/unit_tree/html_output.py

@@ -384,12 +384,9 @@ def abbrev(name):
 
         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>')

data/tools/unit_tree/menu.js

@@ -1,32 +1,80 @@
-var all = new Array();
-
-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;
-    }
-
-    if (show == 0 || show == 1) return;
-
-    if (show == 2) {
-        if (e.style.display == 'block') show = 0;
-    }
-    if (show == 0) {
-        e.style.display = 'none';
+/*
+ * Popup menu implementation for the Wesnoth units database
+ */
+(function() {
+    var menus = [];
+    var visibleMenu = false;
+
+    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;
+        }
     }
-    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);
+})();