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

88
LINES

< > BotCompany Repo | #1030222 // hPopDownButton - HTML triangle pop-down menu

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

Transpiled version (3574L) is out of date.

// entries are HTML (e.g. links)
// requires JQuery for click-outside-to-close trick
// TODO: doesn't open on first click (does it still?)
// Note: Make sure containing elements have overflow: visible,
// otherwise pop-up can get cut off
sS hPopDownButton(S... entries) {
  S id = "dropdown-" + aGlobalID(), outerID = "outer-" + id;
  
  S onclick = replaceDollarVars([[
    var x = document.getElementById($id);
    x.style.display = window.getComputedStyle(x).display === "none" ? "block" : "none";
    console.log("popup " + id + " display: " + x.style.display);
  ]], $id := jsQuote(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: 99;
    }
    
    #$id li a {
      text-decoration: none;
      color: #000;
    }

    #$id li {    
      display: block;
      border-bottom: 1px solid #555;
      padding: 8px 16px;
      color: #000;
    }
  ]]
  /*
    #$id li:hover, #$id li:hover a {
      background-color: #3399ff;
      color: white;
    }
    
    /* exclude sub menus - works but submenu loses hover highlights *//*
    #$id li:hover ul li, #$id li:hover ul li a {
      background-color: #f9f9f9;
      color: #000;
    }
  */
  // version 2 of the trick
  + [[
    #$id li:hover, #$id li:hover > a {
      background-color: #3399ff;
      color: white;
    }
  ]], $id := id))
  + hdiv(
      span(htmlEncode2(unicode_smallDownPointingTriangle()), +onclick)
    + hdiv(ul(entries), +id),
    style := "position: relative; display: inline-block; cursor: context-menu",
    /*+onclick,*/ id := outerID)
    + hscript(replaceDollarVars([[
      if (typeof $ !== 'undefined')
        $('body').click(function(e) {
          //console.log("target=" + e.target + ", outerID=$outerID");
          if (!$(e.target).closest('#$outerID').length) {
            //console.log("hiding $id");
            $("#$id").hide();
          }
        });
    ]], +id, +outerID));
}

sS hPopDownButton(Cl<S> entries) {
  ret hPopDownButton(toStringArray(entries));
}

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: 244 / 356
Version history: 32 change(s)
Referenced in: [show references]