Transpiled version (5381L) is out of date.
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_v2 {
|
6 | Cl<S> entries = new L; |
7 | int width = 200, height = 200; |
8 | |
9 | S id = "dropdown-" + aGlobalID(), outerID = "outer-" + id; |
10 | |
11 | *(S... entries) { this.entries = asList(entries); }
|
12 | *(Cl<S> *entries) {}
|
13 | |
14 | void add(S entry) { main add(this.entries, entry); }
|
15 | void addAll(S... entries) { main addAll(this.entries, entries); }
|
16 | |
17 | S js_closeOnClickAnywhere() {
|
18 | ret [[ |
19 | if (typeof $ !== 'undefined') |
20 | $('body').click(function(e) {
|
21 | if (!$(e.target).closest('.popdowntrigger').length) {
|
22 | $(".popdown").hide();
|
23 | } |
24 | }); |
25 | ]]; |
26 | } |
27 | |
28 | S css() {
|
29 | ret [[ |
30 | .popdown ul {
|
31 | list-style-type: none; |
32 | margin: 0; |
33 | padding: 0; |
34 | width: ]] + width + [[px; |
35 | background-color: #f1f1f1; |
36 | } |
37 | |
38 | .popdown {
|
39 | position: absolute; |
40 | display:none; |
41 | background-color: #f9f9f9; |
42 | width:auto; |
43 | height: ]] + height + [[px; |
44 | overflow: auto; |
45 | |
46 | min-width: 160px; |
47 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
48 | |
49 | z-index: 99; |
50 | } |
51 | |
52 | .popdown li a {
|
53 | text-decoration: none; |
54 | color: #000; |
55 | } |
56 | |
57 | .popdown li {
|
58 | display: block; |
59 | border-bottom: 1px solid #555; |
60 | padding: 8px 16px; |
61 | color: #000; |
62 | } |
63 | ]] |
64 | /* |
65 | .popdown li:hover, .popdown li:hover a {
|
66 | background-color: #3399ff; |
67 | color: white; |
68 | } |
69 | |
70 | /* exclude sub menus - works but submenu loses hover highlights *//* |
71 | .popdown li:hover ul li, .popdown li:hover ul li a {
|
72 | background-color: #f9f9f9; |
73 | color: #000; |
74 | } |
75 | */ |
76 | // version 2 of the trick |
77 | + [[ |
78 | .popdown li:hover, .popdown li:hover > a {
|
79 | background-color: #3399ff; |
80 | color: white; |
81 | } |
82 | ]]; |
83 | } |
84 | |
85 | S headStuff() { ret hcss(css()); }
|
86 | |
87 | S onclick() {
|
88 | ret jsEscapedDollarVars([[ |
89 | var x = document.getElementById($id); |
90 | x.style.display = window.getComputedStyle(x).display === "none" ? "block" : "none"; |
91 | console.log("popup " + id + " display: " + x.style.display);
|
92 | ]], +id); |
93 | } |
94 | |
95 | S html() {
|
96 | ret hdiv( |
97 | span(htmlEncode2(unicode_smallDownPointingTriangle()), +onclick()) |
98 | + hdiv(ul(entries), +id, class := "popdown"), |
99 | style := "position: relative; display: inline-block; cursor: context-menu", |
100 | id := outerID, class := "popdowntrigger"); |
101 | } |
102 | |
103 | S complete() { ret hcombine(headStuff(), html()); }
|
104 | |
105 | selfType width(int width) { this.width = width; this; }
|
106 | selfType height(int height) { this.height = height; this; }
|
107 | } |
Began life as a copy of #1030975
download show line numbers debug dex old transpilations
Travelled to 4 computer(s): bhatertpkbcr, ekrmjmnbrukm, mowyntqkapby, mqqgnosmbjvj
No comments. add comment
| Snippet ID: | #1032795 |
| Snippet name: | HTMLPopDownButton_v2 |
| Eternal ID of this version: | #1032795/8 |
| Text MD5: | 32ef164f6ab6a403dc5dd85e0e98629d |
| Author: | stefan |
| Category: | javax / html |
| Type: | JavaX fragment (include) |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-10-06 14:24:44 |
| Source code size: | 2930 bytes / 107 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 171 / 305 |
| Version history: | 7 change(s) |
| Referenced in: | [show references] |