1
|
{"version":3,"sources":["/missing-js/tabs.js"],"sourcesContent":["/// a tabs library.\n\nimport { $, $$, on, attr, next, prev, asHtml, hotkey, behavior, makelogger } from \"./19.js\";\n\nconst ilog = makelogger(\"tabs\");\n\n/** \n * @param {Element} tablist\n * @returns {HTMLElement[]}\n */\nconst tabsOf = tablist => $$(tablist, \"[role=tab]\");\n\n/** \n * @param {Element} tablist\n * @returns {HTMLElement | null}\n */\nconst currentTab = tablist => $(tablist, \"[role=tab][aria-selected=true]\");\n\n/** \n * @param {Element} tab\n * @param {import(\"./19.js\").Root} root\n * @returns {HTMLElement | null}\n */\nconst tabPanelOf = (tab, root) => {\n const id = attr(tab, \"aria-controls\");\n if (id === null) return ilog(\"Tab\", tab, \"has no associated tabpanel\"), null;\n return root.getElementById(id);\n}\n\n/** \n * @param {import(\"./19.js\").Root} root\n * @param {Element} tablist\n * @param {HTMLElement | null} tab\n * @returns {void}\n */\nconst switchTab = (root, tablist, tab) => {\n if (!tab) return;\n const curtab = currentTab(tablist);\n\n if (curtab) {\n attr(curtab, { ariaSelected: false, tabindex: -1 });\n const tabpanel = tabPanelOf(curtab, root);\n if (tabpanel) tabpanel.hidden = true;\n }\n attr(tab, { ariaSelected: true, tabindex: 0 });\n \n const tabpanel = tabPanelOf(tab, root);\n if (tabpanel) tabpanel.hidden = false;\n\n tab.focus();\n};\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n */\nexport const tablist = behavior(\"[role=tablist]\", (tablist, { root }) => {\n if (!(tablist instanceof HTMLElement)) return;\n tablist.tabIndex = 0;\n tabsOf(tablist).forEach(tab => tab.tabIndex = -1);\n switchTab(root, tablist, currentTab(tablist));\n\n on(tablist, \"focus\", _ => currentTab(tablist)?.focus());\n\n on(tablist, \"click\", e => switchTab(root, tablist, asHtml(asHtml(e.target)?.closest(\"[role=tab]\"))));\n on(tablist, \"focusin\", e => switchTab(root, tablist, asHtml(asHtml(e.target)?.closest(\"[role=tab]\"))));\n\n on(tablist, \"keydown\", hotkey({\n \"ArrowRight\": e => asHtml(next(tablist, \"[role=tab]\", asHtml(e.target)))?.focus(),\n \"ArrowLeft\": e => asHtml(prev(tablist, \"[role=tab]\", asHtml(e.target)))?.focus(),\n \"Home\": _ => tabsOf(tablist).at(0)?.focus(),\n \"End\": _ => tabsOf(tablist).at(-1)?.focus(),\n }));\n})\n\ntablist(document);\nexport default tablist;\n\n"],"mappings":"AAEA,OAAS,KAAAA,EAAG,MAAAC,EAAI,MAAAC,EAAI,QAAAC,EAAM,QAAAC,EAAM,QAAAC,EAAM,UAAAC,EAAQ,UAAAC,EAAQ,YAAAC,EAAU,cAAAC,MAAkB,UAElF,MAAMC,EAAOD,EAAW,MAAM,EAMxBE,EAASC,GAAWX,EAAGW,EAAS,YAAY,EAM5CC,EAAaD,GAAWZ,EAAEY,EAAS,gCAAgC,EAOnEE,EAAa,CAACC,EAAKC,IAAS,CAChC,MAAMC,EAAKd,EAAKY,EAAK,eAAe,EACpC,OAAIE,IAAO,MAAaP,EAAK,MAAOK,EAAK,4BAA4B,EAAG,MACjEC,EAAK,eAAeC,CAAE,CAC/B,EAQMC,EAAY,CAACF,EAAMJ,EAASG,IAAQ,CACxC,GAAI,CAACA,EAAK,OACV,MAAMI,EAASN,EAAWD,CAAO,EAEjC,GAAIO,EAAQ,CACVhB,EAAKgB,EAAQ,CAAE,aAAc,GAAO,SAAU,EAAG,CAAC,EAClD,MAAMC,EAAWN,EAAWK,EAAQH,CAAI,EACpCI,IAAUA,EAAS,OAAS,GAClC,CACAjB,EAAKY,EAAK,CAAE,aAAc,GAAM,SAAU,CAAE,CAAC,EAE7C,MAAMK,EAAWN,EAAWC,EAAKC,CAAI,EACjCI,IAAUA,EAAS,OAAS,IAEhCL,EAAI,MAAM,CACZ,EAKaH,EAAUJ,EAAS,iBAAkB,CAACI,EAAS,CAAE,KAAAI,CAAK,IAAM,CACjEJ,aAAmB,cACzBA,EAAQ,SAAW,EACnBD,EAAOC,CAAO,EAAE,QAAQG,GAAOA,EAAI,SAAW,EAAE,EAChDG,EAAUF,EAAMJ,EAASC,EAAWD,CAAO,CAAC,EAE5CV,EAAGU,EAAS,QAASS,GAAKR,EAAWD,CAAO,GAAG,MAAM,CAAC,EAEtDV,EAAGU,EAAS,QAAWU,GAAKJ,EAAUF,EAAMJ,EAASN,EAAOA,EAAOgB,EAAE,MAAM,GAAG,QAAQ,YAAY,CAAC,CAAC,CAAC,EACrGpB,EAAGU,EAAS,UAAWU,GAAKJ,EAAUF,EAAMJ,EAASN,EAAOA,EAAOgB,EAAE,MAAM,GAAG,QAAQ,YAAY,CAAC,CAAC,CAAC,EAErGpB,EAAGU,EAAS,UAAWL,EAAO,CAC5B,WAAce,GAAKhB,EAAOF,EAAKQ,EAAS,aAAcN,EAAOgB,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,EAChF,UAAcA,GAAKhB,EAAOD,EAAKO,EAAS,aAAcN,EAAOgB,EAAE,MAAM,CAAC,CAAC,GAAG,MAAM,EAChF,KAAQD,GAAKV,EAAOC,CAAO,EAAE,GAAG,CAAC,GAAG,MAAM,EAC1C,IAAOS,GAAKV,EAAOC,CAAO,EAAE,GAAG,EAAE,GAAG,MAAM,CAC5C,CAAC,CAAC,EACJ,CAAC,EAEDA,EAAQ,QAAQ,EAChB,IAAOW,EAAQX","names":["$","$$","on","attr","next","prev","asHtml","hotkey","behavior","makelogger","ilog","tabsOf","tablist","currentTab","tabPanelOf","tab","root","id","switchTab","curtab","tabpanel","_","e","tabs_default"],"sourceRoot":"file:///home/dz4k/Documents/Projects/bigsky.software/missing.css","file":"/missing-js/tabs.js.map"}
|
