@gfellerph/focusgroup-polyfill
Version:
Partial polyfill for the focusgroup attribute (https://open-ui.org/components/focusgroup.explainer/).
2 lines (1 loc) • 4.42 kB
JavaScript
(()=>{var k=["button",'input:not([type="hidden"])',"[tabindex]","select","textarea","[contenteditable]","a[href]","iframe","audio[controls]","video[controls]","area[href]","details > summary:first-of-type"].join(","),P=["[inert]","[inert] *",":disabled","dialog:not([open]) *","[popover]:not(:popover-open) *","details:not([open]) > *:not(details > summary:first-of-type)","details:not([open]) > *:not(details > summary:first-of-type) *"].join(","),N=`:where(${k})`,w=`:where(${P})`,R=['input:is([type="text"],[type="radio"],[type="url"],[type="password"],[type="search"],[type="number"],[type="email"],[type="tel"])',"select","textarea","[contenteditable]","audio","video","iframe"].join(",");var r={NEXT:0,PREVIOUS:1,FIRST:2,LAST:3},h=t=>t.hasAttribute("focusgroup"),d={NO_FOCUSGROUP:1,NOT_FOCUSABLE:2,KEY_CONFLICT:3,FOCUSGROUP_NONE:4,IS_CANDIDATE:5},O=t=>{let e=E(t),o=b(e);return e?o.none?{isCandidate:!1,reason:d.FOCUSGROUP_NONE,focusgroup:e}:x(t)?t.matches(R)?{isCandidate:!1,reason:d.KEY_CONFLICT,focusgroup:e}:{isCandidate:!0,reason:d.IS_CANDIDATE,focusgroup:e}:{isCandidate:!1,reason:d.NOT_FOCUSABLE,focusgroup:e}:{isCandidate:!1,reason:d.NO_FOCUSGROUP,focusgroup:e}},x=t=>!t.matches(w)&&t.matches(N),p=new WeakMap,U=t=>{for(let e of t){for(let o of e.addedNodes)O(o)&&C(o);for(let o of e.removedNodes)x(o)&&!o.matches(R)&&!o.hasAttribute("tabindex")&&g(e.target)}},M=new MutationObserver(U),D={childList:!0,subtree:!0},_=t=>{for(let e of t)if(e.type==="attributes"&&e.attributeName==="focusgroup"){let o=b(e.target);(o.nomemory||o.none)&&g(e.target)}},X=new MutationObserver(_),H={attributes:!0,attributeFilter:["focusgroup"]},A=t=>{if(p.has(t))return;M.observe(t,D),X.observe(t,H),T(t).map(o=>{o.matches(":focus")?S(o):C(o)}),p.set(t,!0)},C=t=>{let e=t.getAttribute("tabindex");t.setAttribute("tabindex","-1"),e&&t.setAttribute("data-focusgroup-tabindex-memory",e)},S=t=>{let e=t.getAttribute("data-focusgroup-tabindex-memory");e?t.setAttribute("tabindex",e):t.removeAttribute("tabindex")},g=t=>{p.has(t)&&p.delete(t),T(t).map(e=>{S(e)})},V=t=>t.shadowRoot||t,v=t=>{let e=V(t);return"assignedElements"in t?e.assignedElements():e.children},y=t=>{if(t.assignedSlot!==null)return t.assignedSlot;let e=t.parentElement;return e===null&&(e=t.getRootNode()?.host),e};var E=t=>{let e=y(t);for(;e!=null;){if(h(e))return e;e=y(e)}return null},F=(t,e)=>{let o=getComputedStyle(t).direction==="ltr",i={};return e.inline&&(i={...i,ArrowLeft:o?r.PREVIOUS:r.NEXT,ArrowRight:o?r.NEXT:r.PREVIOUS,End:r.LAST,Home:r.FIRST,MetaArrowRight:o?r.LAST:r.FIRST,MetaArrowLeft:o?r.FIRST:r.LAST}),e.block&&(i={...i,ArrowUp:r.PREVIOUS,ArrowDown:r.NEXT,MetaArrowUp:r.FIRST,MetaArrowDown:r.LAST}),i},b=t=>{let e=` ${t.getAttribute("focusgroup").trim()} `,o={block:e.includes(" block "),inline:e.includes(" inline "),wrap:e.includes(" wrap "),grid:e.includes(" grid "),none:e.includes(" none "),nomemory:e.includes(" no-memory ")};return!o.block&&!o.inline&&(o.block=!0,o.inline=!0),o},f=(t,e=!0,o=!0,i=!0,n=0)=>{if(n>0&&x(t))return t;let u=n>0&&h(t),s=null;if(!u){let l=v(t);if(o&&l?.length){let L=e?l[0]:l[l.length-1];s=f(L,e,!0,!1,n+1)}}let a=e?t.nextElementSibling:t.previousElementSibling;!s&&a&&(s=f(a,e,!0,!1,n+1));let c=y(t);return!s&&!u&&i&&c&&!h(c)&&(s=f(c,e,!1,!0,n+1)),s},T=(t,e=0)=>{if(e>0&&h(t))return[];let o=[];return Array.from(v(t)).map(n=>{x(n)&&o.push(n),o=[...o,...T(n,e+1)]}),o};var I=new WeakMap;function m(t){I.has(t)||(I.set(t,!0),t.addEventListener("focusin",K))}var $=t=>{let e=t.target.shadowRoot,o=e!=null;if(o){for(;o;)e.activeElement.shadowRoot!=null?e=e.activeElement.shadowRoot:o=!1;return m(e),e.activeElement}else return t.target};function K(t){let e=$(t),{isCandidate:o,reason:i,focusgroup:n}=O(e);if(o){t.stopPropagation(),b(n).nomemory||A(n);let s=E(n);for(;s;)g(s),s=E(s);let a=c=>{j(c,e,n)};e.addEventListener("keydown",a),e.addEventListener("blur",()=>e.removeEventListener("keydown",a),{once:!0})}else i===d.KEY_CONFLICT&&p.has(n)&&g(n)}function j(t,e,o){if(t.defaultPrevented)return;let i=`${t.getModifierState("Meta")?"Meta":""}${t.key}`,n=b(o),u=F(e,n);i in u&&G(e,o,n,u[i],t)}function G(t,e,o,i,n){let u=i===r.NEXT||i===r.PREVIOUS?t:e,s=i===r.FIRST||i===r.NEXT,a=f(u,s);if(a==null&&o.wrap){let c=v(e),l=s?c[0]:c[c.length-1];a=f(l,s,!0,!1,1)}a&&(n.preventDefault(),o.nomemory||(C(t),S(a)),a.focus())}function Y(){return"focusgroup"in document.createElement("div")}window&&!Y()&&m(window);})();