Transpiled version (3574L) is out of date.
1 | // entries are HTML (e.g. links) |
2 | // requires JQuery for click-outside-to-close trick |
3 | // TODO: doesn't open on first click (does it still?) |
4 | // Note: Make sure containing elements have overflow: visible, |
5 | // otherwise pop-up can get cut off |
6 | sS hPopDownButton(S... entries) {
|
7 | S id = "dropdown-" + aGlobalID(), outerID = "outer-" + id; |
8 | |
9 | S onclick = replaceDollarVars([[ |
10 | var x = document.getElementById($id); |
11 | x.style.display = window.getComputedStyle(x).display === "none" ? "block" : "none"; |
12 | console.log("popup " + id + " display: " + x.style.display);
|
13 | ]], $id := jsQuote(id)); |
14 | |
15 | ret hstyle(replaceDollarVars([[ |
16 | #$id ul {
|
17 | list-style-type: none; |
18 | margin: 0; |
19 | padding: 0; |
20 | width: 200px; |
21 | background-color: #f1f1f1; |
22 | } |
23 | |
24 | #$id {
|
25 | position: absolute; |
26 | display:none; |
27 | background-color: #f9f9f9; |
28 | width:auto; |
29 | height:200px; |
30 | overflow: auto; |
31 | |
32 | min-width: 160px; |
33 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
34 | |
35 | z-index: 99; |
36 | } |
37 | |
38 | #$id li a {
|
39 | text-decoration: none; |
40 | color: #000; |
41 | } |
42 | |
43 | #$id li {
|
44 | display: block; |
45 | border-bottom: 1px solid #555; |
46 | padding: 8px 16px; |
47 | color: #000; |
48 | } |
49 | ]] |
50 | /* |
51 | #$id li:hover, #$id li:hover a {
|
52 | background-color: #3399ff; |
53 | color: white; |
54 | } |
55 | |
56 | /* exclude sub menus - works but submenu loses hover highlights *//* |
57 | #$id li:hover ul li, #$id li:hover ul li a {
|
58 | background-color: #f9f9f9; |
59 | color: #000; |
60 | } |
61 | */ |
62 | // version 2 of the trick |
63 | + [[ |
64 | #$id li:hover, #$id li:hover > a {
|
65 | background-color: #3399ff; |
66 | color: white; |
67 | } |
68 | ]], $id := id)) |
69 | + hdiv( |
70 | span(htmlEncode2(unicode_smallDownPointingTriangle()), +onclick) |
71 | + hdiv(ul(entries), +id), |
72 | style := "position: relative; display: inline-block; cursor: context-menu", |
73 | /*+onclick,*/ id := outerID) |
74 | + hscript(replaceDollarVars([[ |
75 | if (typeof $ !== 'undefined') |
76 | $('body').click(function(e) {
|
77 | //console.log("target=" + e.target + ", outerID=$outerID");
|
78 | if (!$(e.target).closest('#$outerID').length) {
|
79 | //console.log("hiding $id");
|
80 | $("#$id").hide();
|
81 | } |
82 | }); |
83 | ]], +id, +outerID)); |
84 | } |
85 | |
86 | sS hPopDownButton(Cl<S> entries) {
|
87 | ret hPopDownButton(toStringArray(entries)); |
88 | } |
download show line numbers debug dex old transpilations
Travelled to 4 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1030222 |
| Snippet name: | hPopDownButton - HTML triangle pop-down menu |
| Eternal ID of this version: | #1030222/33 |
| Text MD5: | 9c1d87dc1ce1fbc671e036d3ab892b49 |
| Author: | stefan |
| Category: | javax / html |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-06-19 16:36:13 |
| Source code size: | 2439 bytes / 88 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 249 / 362 |
| Version history: | 32 change(s) |
| Referenced in: | [show references] |