Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

82
LINES

< > BotCompany Repo | #1032366 // HPopDownButton - generalized hPopDownButton

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (4939L/28K).

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 HPopDownButton {

6  
  S labelHTML;

7  
  S buttonHTML = htmlEncode2(unicode_smallDownPointingTriangle());

8  
  new LS entries;

9  
  S id = "dropdown-" + aGlobalID(), outerID = "outer-" + id;

10  
  S style = "position: relative; display: inline-block; cursor: context-menu";

11  
  S menuStyle = "";

12  
  

13  
  *() {}

14  
  *(S *labelHTML, LS entries) { addAll(this.entries, entries); }

15  
  

16  
  S onclick() {

17  
    ret replaceDollarVars([[

18  
      var x = document.getElementById($id);

19  
      x.style.display = window.getComputedStyle(x).display === "none" ? "block" : "none";

20  
      console.log("popup " + id + " display: " + x.style.display);

21  
    ]], id := jsQuote(id));

22  
  }

23  
  

24  
  S html() {

25  
    ret hstyle(replaceDollarVars([[

26  
      #$id ul {

27  
        list-style-type: none;

28  
        margin: 0;

29  
        padding: 0;

30  
        width: 200px;

31  
        background-color: #f1f1f1;

32  
      }

33  
      

34  
      #$id {

35  
        position: absolute;

36  
        display:none;

37  
        background-color: #f9f9f9;

38  
        width:auto;

39  
        height:200px;

40  
        overflow: auto;

41  
       

42  
        min-width: 160px;

43  
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

44  
        

45  
        z-index: 99;

46  
      }

47  
      

48  
      #$id li a {

49  
        text-decoration: none;

50  
        color: #000;

51  
      }

52  
  

53  
      #$id li {    

54  
        display: block;

55  
        border-bottom: 1px solid #555;

56  
        padding: 8px 16px;

57  
        color: #000;

58  
      }

59  
      

60  
      #$id li:hover, #$id li:hover > a {

61  
        background-color: #3399ff;

62  
        color: white;

63  
      }

64  
    ]], +id))

65  
    + hdiv(

66  
          buttonHTMLWithOnClick()

67  
        + hdiv(ul(entries), +id, style := menuStyle),

68  
      +style, id := outerID)

69  
      + hscript(replaceDollarVars([[

70  
        if (typeof $ !== 'undefined')

71  
          $('body').click(function(e) {

72  
            if (!$(e.target).closest('#$outerID').length) {

73  
              $("#$id").hide();

74  
            }

75  
          });

76  
      ]], +id, +outerID));

77  
  }

78  
  

79  
  swappable S buttonHTMLWithOnClick() {

80  
    ret span(joinNemptiesWithSpace(labelHTML, buttonHTML), onclick := onclick());

81  
  }

82  
}

Author comment

Began life as a copy of #1030222

download  show line numbers  debug dex  old transpilations   

Travelled to 4 computer(s): bhatertpkbcr, mowyntqkapby, mqqgnosmbjvj, pyentgdyhuwx

No comments. add comment

Snippet ID: #1032366
Snippet name: HPopDownButton - generalized hPopDownButton
Eternal ID of this version: #1032366/8
Text MD5: f47c5ac0a2e73ff3cbc37a2c2105cd44
Transpilation MD5: 787c3d7ce03a92c538e05e1b549e2187
Author: stefan
Category: javax / html
Type: JavaX fragment (include)
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-09-25 00:03:56
Source code size: 2286 bytes / 82 lines
Pitched / IR pitched: No / No
Views / Downloads: 217 / 373
Version history: 7 change(s)
Referenced in: [show references]