index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hcg-context-menu demo</title>
<link rel="stylesheet" href="hcg-context-menu.css">
<style>
  body { font: 16px/1.5 system-ui, sans-serif; margin: 40px; }
  .area {
    border: 2px dashed #c4c8cd; border-radius: 10px;
    padding: 60px 20px; text-align: center; color: #555;
    margin-bottom: 24px; cursor: context-menu;
    /* stop the iOS callout / text selection on long-press */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  button { padding: 10px 18px; font-size: 15px; border-radius: 8px;
    border: 1px solid #c4c8cd; background: #fff; cursor: pointer; }
</style>
</head>
<body>

  <h1>hcg-context-menu</h1>

  <!-- 1. context mode: right-click this box -->
  <h2>Context menu (mode: "context")</h2>
  <div id="area" class="area">Right-click anywhere in this box</div>

  <!-- 2. dropdown mode: click this button -->
  <h2>Dropdown menu (mode: "dropdown")</h2>
  <button id="menuBtn">Open dropdown menu</button>

  <!-- 3. long menu with maxHeight (scrollable) -->
  <h2>Long menu - maxHeight scroll test</h2>
  <p>Right-click this box (maxHeight: 260). The menu should scroll instead of overflowing.</p>
  <div id="long-area" class="area">Right-click for a 30-item menu</div>

  <!-- 3b. long dropdown near the bottom of the page -->
  <h2>Long dropdown - bottom of page (flip-above test)</h2>
  <button id="long-dropdown-btn">Open long dropdown</button>

  <!-- 3c. long text labels (ellipsis + max-width test) -->
  <h2>Long text labels - ellipsis / max-width test</h2>
  <p>Right-click this box. Long labels should truncate with an ellipsis (hover for full text), not stretch the menu off-screen.</p>
  <div id="longtext-area" class="area">Right-click for very long item labels</div>

  <!-- 3d. html labels test -->
  <h2>HTML labels - formatting test</h2>
  <p>Right-click this box. Items use the html field, so tags actually render (bold, italic, color, badge).</p>
  <div id="html-area" class="area">Right-click for HTML-formatted labels</div>

  <!-- 4. menu defined from existing HTML markup -->
  <h2>Menu from HTML markup</h2>
  <div id="markup-area" class="area">Right-click this box (menu built from a hidden &lt;ul&gt;)</div>
  <ul id="markupMenu">
    <li data-hcg-icon="&#9998;" data-hcg-value="edit">Edit</li>
    <li data-hcg-icon="&#128203;" data-hcg-value="copy">Copy</li>
    <li class="hcg-context-menu-separator"></li>
    <li data-hcg-disabled data-hcg-value="paste">Paste</li>
  </ul>

  <script src="hcg-context-menu.js"></script>
  <script>
    // 1. context mode - right-click, opens at the pointer
    hcgContextMenu({
      target: "#area",
      mode: "context",
      onSelect: function (item) { console.log("selected:", item.value || item.label); },
      items: [
        { label: "Cut",   icon: "✂️", value: "cut",  action: function (ctx) { alert("Cut"); } },
        { label: "Copy",  icon: "📋", value: "copy", action: function () { alert("Copy"); } },
        { label: "Paste", icon: "📄", value: "paste", disabled: true },
        { separator: true },
        { label: "Share", icon: "🔗", submenu: [
            { label: "Email", action: function () { alert("Email"); } },
            { label: "Link",  action: function () { alert("Link"); } },
            { label: "More", submenu: [
                { label: "Twitter", action: function () { alert("Twitter"); } },
                { label: "Reddit",  action: function () { alert("Reddit"); } }
            ] }
        ] },
        { separator: true },
        { label: "Delete", icon: "🗑️", action: function () { alert("Delete"); } }
      ]
    });

    // 2. dropdown mode - click, opens below the button
    hcgContextMenu({
      target: "#menuBtn",
      mode: "dropdown",
      items: [
        { label: "Profile", action: function () { alert("Profile"); } },
        { label: "Settings", action: function () { alert("Settings"); } },
        { separator: true },
        { label: "Sign out", action: function () { alert("Sign out"); } }
      ]
    });

    // build a long item list for the scroll tests
    function longItems() {
      var arr = [{ header: "Long list" }];
      for (var i = 1; i <= 30; i++) {
        (function (n) {
          arr.push({ label: "Item " + n, action: function () { alert("Item " + n); } });
        })(i);
      }
      return arr;
    }

    // 3. long menu with maxHeight - should scroll inside the panel
    hcgContextMenu({
      target: "#long-area",
      mode: "context",
      maxHeight: 260,
      items: longItems()
    });

    // 3b. long dropdown at the bottom of the page - should flip above and/or scroll
    hcgContextMenu({
      target: "#long-dropdown-btn",
      mode: "dropdown",
      maxHeight: 300,
      items: longItems()
    });

    // 3c. long text labels - should truncate with an ellipsis, full text on hover
    hcgContextMenu({
      target: "#longtext-area",
      mode: "context",
      items: [
        { header: "Document actions" },
        { label: "Export this document as a PDF and email it to the team", icon: "📄", action: function () { alert("Export"); } },
        { label: "Duplicate this item into the shared workspace folder", icon: "📋", action: function () { alert("Duplicate"); } },
        { separator: true },
        { label: "Rename", icon: "✏️", action: function () { alert("Rename"); } },
        { label: "Move to another very long destination folder name here", submenu: [
            { label: "A really long submenu item label that also overflows", action: function () { alert("Sub 1"); } },
            { label: "Short one", action: function () { alert("Sub 2"); } }
        ] }
      ]
    });

    // 3d. html labels - the html field renders formatting (trusted content only)
    hcgContextMenu({
      target: "#html-area",
      mode: "context",
      items: [
        { html: "<strong>Profile</strong>" , action: function () { alert("Profile"); } },
        { html: "<i>Copy</i>", action: function () { alert("Copy"); } },
        { html: "Status: <span style='color:#1a9d4b'>Online</span>", action: function () { alert("Status"); } },
        { separator: true },
        { html: "Upgrade <span style='background:#2563eb;color:#fff;border-radius:4px;padding:1px 6px;font-size:11px;'>PRO</span>", action: function () { alert("Upgrade"); } },
        { label: "<b>plain label, not rendered</b>", action: function () { alert("Plain"); } }
      ]
    });

    // 4. menu sourced from existing HTML markup, bound to its own box
    hcgContextMenu({
      target: "#markup-area",
      source: "#markupMenu",
      onSelect: function (item) { console.log("markup:", item.value); }
    });
  </script>
</body>
</html>