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