{"project":{"id":"AByFzYj","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Custom Element Dropdown","thumbnail":"UklGRmwWAABXRUJQVlA4IGAWAACwtACdASogA1gCPlEokkcjoiGhIHZoWHAKCWlu/HyZ5ev2APxm4SHkf8N3pNbnHAFH6yOm71QPZF9pvuAfo//jP5X1uPMB+pf+6/sHu2/6f/AewD0AP069W7/YeyR+sfsE/qz6S3/W/uXwbfrt+1/wEfsJ/7tak8cfwD8K/1V+Tnwj83/on5BefPfK7keyn7ue+VmT6atS/4j9XPr/9y/Zb+7/tx79f5X8ZvyA9j/gn/X+oF+Mfxz+1flh+SPG25//lvQC9d/l3+C/wP7af6LzvP0b0D+on+k9wD+K/zn+8/mJ/Xf//0KdAH+Ufzn/T/2393/7T9L/7t/vv8V+VntN/O/7j/xv8V/nvkK/k39G/1n90/ej/Tf///0/dB65vQ7/ZT//gnp70kCBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIEBKQjk0OBVs2Dpz/dubFslqqcm4yQSdFhb7Vj7/L2fFO6kH84/VbV++I0bysy99mY4PQoXF4PI0tFpk6+JqHcq9QoI6RXRBF2pcPltaHDexJrgb3o6w8koUeX5VvFXNK5VGIrxyeuLsrzIgWkiCh5ekgQIECBAgQIEBLTHTxq+vZ3uWWCKqzHeSMhLUDMggycbateRzwF4uP+in/9B4zA6bsYiL2G27MDCrdCrQfRheIC5v3ev5DRyszqTbigivUkSIHALyvQrHK+VFTWz9YxqQBiXXtKuHA21iJoasMKjELtEibEkaCw2I3bDB1teItUCLKao3QF3HHRPekgQIECBAgQIECAl0AIWpBYsWLFixYsWLFixYsWLFg0fdX0PhGtch1YCcQ+HhGtch1rkOtch1X86VFakFixYsWLFixYsWLFim10xuOI5sA/CHBPi1ACVzK8Bka7VP71B1Zph26WthDFY8rQOSp37hOoALOnqc3tiCFKRrINuwAgcMlfHiQG7n8Y6v0AZ5HyXslITPYZlGBPnRPekgQIECBAgQIECAk0Y2w4JpuJNNxJXKiy+4XwrXwTTcSabiTTaiksP+K9JAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIECBAgQIEBIAAD+//EsAAAAAAFUxdVg1c0l7O3IxyqwKhvZd7K90vxGZT8wE1t5c/DHmgJbau822A98UdFrTkCdEi0DpYNIqmlIaLx9EmHWDHXjOqoZUR/Ma4ToVaQRhpfYM8SlBcsLVxtx8Y3SGboo7HhW3/Jm2dcNqVdw+Ha1YoEi7PiBnA/ZQii2ifywE5vJegx73nDuixAnBjWsR8cTPLCdC5tkKrqN7Bp8gJ7UgIgda9bTRqQT8BFT8dwl158J+KuYmknGtK7Bsjxuyqd5lyu9LA+VMTzvH+2laFGaXbw34ngLJEgTjr729eOLrxdZDleGqWlvcTOdc5HPDlFhE+5v2wE6pe/PwR6X9uSyLQ1B8nwirdGO4Ewg4/xkt+J/DvkBiBoX0fwTdcd0Oh7U7W/teOvQ7k7CS8QxF4vIdd+U0PrGsl8In2yKzbOl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","visible":true,"contributors":"","githubRepo":null,"forkedFrom":null,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Untitled</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n</head>\n<body>\n<main>\n\t<h1>WC Dropdown Demo</h1>\n\n\t<cib-dropdown>\n\t\t<button class=\"cib-button\" type=\"button\" data-part=\"dropdown__toggle\">Toggle Me</button>\n\t\t<div class=\"cib-dropdown__container\" data-part=\"dropdown__container\">\n\t\t\t<ul class=\"cib-list\">\n\t\t\t\t<li><a href=\"#\">Edit</a></li>\n\t\t\t\t<li><a href=\"#\">Duplicate</a></li>\n\t\t\t\t<li><a href=\"#\">Delete</a></li>\n\t\t\t</ul>\n\t\t</div>\n\t</cib-dropdown>\n\n\t<cib-dropdown>\n\t\t<button class=\"cib-button\" type=\"button\" data-part=\"dropdown__toggle\">Toggle Me Again!!!</button>\n\t\t<div class=\"cib-dropdown__container\" data-part=\"dropdown__container\">\n\t\t\t<img alt=\"I see you\" src=\"https://i.giphy.com/gKHGnB1ml0moQdjhEJ.webp\">\n\t\t</div>\n\t</cib-dropdown>\n\n\t\n</main>\n  <script type=\"module\" src=\"main.js\"></script>\n</body>\n</html>"},{"name":"main.js","content":"class MyDropdown extends HTMLElement {\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._open = false;\n\t\tthis._id = `wc-${crypto.randomUUID()}`;\n\n\t\tthis._handleClickOutside = this.handleClickOutside.bind(this);\n\t\tthis._handleEscape = this.handleEscape.bind(this);\n\t}\n\n\tconnectedCallback() {\n\n\t\tif (this.hasAttribute('open')) {\n\t\t\tthis._open = true;\n\t\t}\n\n\t\tthis.toggleEl = this.querySelector('[data-part=\"dropdown__toggle\"]');\n\t\tthis.containerEl = this.querySelector('[data-part=\"dropdown__container\"]');\n\n\t\tif (!this.toggleEl || !this.containerEl) {\n\t\t\tthis.innerHTML ='Missing slots!!!!'\n\t\t\treturn;\n\t\t}\n\t\t\n\t\t//Setup attributes\n\t\tthis.toggleEl.setAttribute('aria-haspopup', 'true');\n\t\tthis.toggleEl.setAttribute('aria-controls', this._id);\n\t\tthis.containerEl.id = this._id;\n\n\t\tthis.toggleEl.addEventListener('click', this); // handleEvent\n\n\t\tdocument.addEventListener('click', this._handleClickOutside);\n\t\tdocument.addEventListener('keyup', this._handleEscape);\n\n\t\tthis.updateState();\n\t}\n\n\thandleEvent(e) {\n\t\tthis.toggleOpen();\n\t}\n\t \n\tdisconnectedCallback() {\n\t\tdocument.removeEventListener('click', this._handleClickOutside);\n\t\tdocument.removeEventListener('keyup', this._handleEscape);\n\t}\n\n\ttoggleOpen() {\n\t\tthis._open = !this._open;\n\t\tthis.updateState();\n\t}\n\n\tclose() {\n\t\tthis._open = false;\n\t\tthis.updateState();\n\t}\n\n\thandleClickOutside(e) {\n\t\tif (!this.contains(e.target)) this.close();\n\t}\n\n\thandleEscape(e) {\n\t\tif (e.key === 'Escape') this.close();\n\t}\n\n\tupdateState() {\n\t\tthis.toggleEl.setAttribute('aria-expanded', String(this._open));\n\t\tif (this._open) {\n\t\t\tthis.containerEl.removeAttribute('hidden');\n\t\t}\n\t\telse {\n\t\t\tthis.containerEl.setAttribute('hidden', '');\n\t\t}\n\t}\n}\n\ncustomElements.define('cib-dropdown', MyDropdown);"},{"name":"style.css","content":"body {\n\tfont-family: system-ui, sans-serif;\n\tpadding: 2rem;\n}\n\n\ncib-dropdown:not(:defined){\n\tdisplay: none;\n}\n\ncib-dropdown {\n\tposition: relative;\n\tdisplay: inline-block;\n}\n\n.cib-dropdown__container {\n\tposition: absolute;\n\ttop: 100%;\n\tleft: 0;\n\tmin-width: 170px;\n\twidth: 100%;\n\tbackground: white;\n\tborder: 1px solid #ccc;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, .25);\n\tpadding:10px;\n\tmargin-top:5px;\n\tborder-radius:10px;\n}\n\nimg{\n\twidth:100%;\n}\n\n.cib-button {\n\tpadding: 0.5rem 1rem;\n\tcursor: pointer;\n\tbackground:blue;\n\tcolor:white;\n\tborder:0\n}\n\n.cib-list {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cib-list a {\n\tdisplay: block;\n\tpadding: 0.5rem 1rem;\n\ttext-decoration: none;\n\tcolor: black;\n}\n\n.cib-list a:hover {\n\tbackground: #f0f0f0;\n}"}],"folders":[]},"variants":null,"createdAt":"2026-01-09T20:40:08.845Z","updatedAt":"2026-01-28T22:44:19.216Z"}}