// entries are HTML (e.g. links) // requires JQuery for click-outside-to-close trick // TODO: doesn't open on first click sS hPopDownButton(S... entries) { S id = "dropdown-" + aGlobalID(), outerID = "outer-" + id; ret hstyle(replaceDollarVars([[ #$id ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } #$id { position: absolute; display:none; background-color: #f9f9f9; width:auto; height:200px; overflow: auto; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } #$id li a { display: block; border-bottom: 1px solid #555; color: #000; padding: 8px 16px; text-decoration: none; } #$id li a:hover { background-color: #3399ff; color: white; } ]], $id := id)) + hdiv( htmlEncode2(unicode_smallDownPointingTriangle()) + hdiv(ul(entries), +id), style := "position: relative; display: inline-block; cursor: context-menu", onclick := replaceDollarVars([[ console.log("pop open/close"); var x = document.getElementById($id); x.style.display = x.style.display === "none" ? "block" : "none"; ]], $id := jsQuote(id)), id := outerID) + hscript(replaceDollarVars([[ if (typeof $ !== 'undefined') $('body').click(function(e) { console.log("pop click"); if (!$(e.target).closest('#$outerID').length) { console.log("pop hide"); $("#$id").hide(); } }); ]], +id, +outerID)); }