blob: 56277bf7616fc88c3adf58acff630ee85d833b27 [file] [log] [blame]
{
"version": 3,
"sources": ["table.ts"],
"sourcesContent": ["/*!\n * @license\n * Copyright 2020 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n/**\n * Controller for a table element with expandable rows. Adds event listeners to\n * a toggle within a table row that controls visiblity of additional related\n * rows in the table.\n *\n * @example\n * ```typescript\n * import {ExpandableRowsTableController} from '/static/js/table';\n *\n * const el = document .querySelector<HTMLTableElement>('.js-myTableElement')\n * new ExpandableRowsTableController(el));\n * ```\n */\nexport class ExpandableRowsTableController {\n private toggles: NodeListOf<HTMLTableRowElement>;\n\n /**\n * Create a table controller.\n * @param table - The table element to which the controller binds.\n */\n constructor(private table: HTMLTableElement, private expandAll?: HTMLButtonElement | null) {\n this.toggles = table.querySelectorAll<HTMLTableRowElement>('[data-aria-controls]');\n this.setAttributes();\n this.attachEventListeners();\n this.updateVisibleItems();\n }\n\n /**\n * setAttributes sets data-aria-* and data-id attributes to regular\n * html attributes as a workaround for limitations from safehtml.\n */\n private setAttributes() {\n for (const a of ['data-aria-controls', 'data-aria-labelledby', 'data-id']) {\n this.table.querySelectorAll(`[${a}]`).forEach(t => {\n t.setAttribute(a.replace('data-', ''), t.getAttribute(a) ?? '');\n t.removeAttribute(a);\n });\n }\n }\n\n private attachEventListeners() {\n this.toggles.forEach(t => {\n t.addEventListener('click', e => {\n this.handleToggleClick(e);\n });\n });\n this.expandAll?.addEventListener('click', () => {\n this.expandAllItems();\n });\n\n document.addEventListener('keydown', e => {\n if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n this.expandAllItems();\n }\n });\n }\n\n private handleToggleClick(e: MouseEvent) {\n let target = e.currentTarget as HTMLTableRowElement | null;\n if (!target?.hasAttribute('aria-expanded')) {\n target = this.table.querySelector(\n `button[aria-controls=\"${target?.getAttribute('aria-controls')}\"]`\n );\n }\n const isExpanded = target?.getAttribute('aria-expanded') === 'true';\n target?.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');\n e.stopPropagation();\n this.updateVisibleItems();\n }\n\n private expandAllItems() {\n this.table\n .querySelectorAll('[aria-expanded=false]')\n .forEach(t => t.setAttribute('aria-expanded', 'true'));\n this.updateVisibleItems();\n }\n\n private updateVisibleItems() {\n this.toggles.forEach(t => {\n const isExpanded = t?.getAttribute('aria-expanded') === 'true';\n const rowIds = t?.getAttribute('aria-controls')?.trimEnd().split(' ');\n rowIds?.forEach(id => {\n const target = document.getElementById(`${id}`);\n if (isExpanded) {\n target?.classList.add('visible');\n target?.classList.remove('hidden');\n } else {\n target?.classList.add('hidden');\n target?.classList.remove('visible');\n }\n });\n });\n }\n}\n"],
"mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoBO,0CAAoC,CAOzC,YAAoB,EAAiC,EAAsC,CAAvE,aAAiC,iBACnD,KAAK,QAAU,EAAM,iBAAsC,wBAC3D,KAAK,gBACL,KAAK,uBACL,KAAK,qBAOC,eAAgB,CACtB,SAAW,KAAK,CAAC,qBAAsB,uBAAwB,WAC7D,KAAK,MAAM,iBAAiB,IAAI,MAAM,QAAQ,GAAK,CACjD,EAAE,aAAa,EAAE,QAAQ,QAAS,IAAK,EAAE,aAAa,IAAM,IAC5D,EAAE,gBAAgB,KAKhB,sBAAuB,CAC7B,KAAK,QAAQ,QAAQ,GAAK,CACxB,EAAE,iBAAiB,QAAS,GAAK,CAC/B,KAAK,kBAAkB,OAG3B,KAAK,WAAW,iBAAiB,QAAS,IAAM,CAC9C,KAAK,mBAGP,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,KAAK,mBAKH,kBAAkB,EAAe,CACvC,GAAI,GAAS,EAAE,cACf,AAAK,GAAQ,aAAa,kBACxB,GAAS,KAAK,MAAM,cAClB,yBAAyB,GAAQ,aAAa,uBAGlD,KAAM,GAAa,GAAQ,aAAa,mBAAqB,OAC7D,GAAQ,aAAa,gBAAiB,EAAa,QAAU,QAC7D,EAAE,kBACF,KAAK,qBAGC,gBAAiB,CACvB,KAAK,MACF,iBAAiB,yBACjB,QAAQ,GAAK,EAAE,aAAa,gBAAiB,SAChD,KAAK,qBAGC,oBAAqB,CAC3B,KAAK,QAAQ,QAAQ,GAAK,CACxB,KAAM,GAAa,GAAG,aAAa,mBAAqB,OAExD,AADe,GAAG,aAAa,kBAAkB,UAAU,MAAM,MACzD,QAAQ,GAAM,CACpB,KAAM,GAAS,SAAS,eAAe,GAAG,KAC1C,AAAI,EACF,IAAQ,UAAU,IAAI,WACtB,GAAQ,UAAU,OAAO,WAEzB,IAAQ,UAAU,IAAI,UACtB,GAAQ,UAAU,OAAO",
"names": []
}