@n8d/htwoo-core
Version:
hTWOo is a Fluent Design Framework purely in HTML and CSS
2 lines (1 loc) • 3.09 kB
JavaScript
"use strict";exports.ariaSelect=e=>{const t=e;console.log("csSelector",t);const o=t.querySelector("input"),i=t.querySelector("ul"),a=i.querySelectorAll("li");t.querySelectorAll("svg");const n=document.querySelector("#custom-select-status"),s=Array.from(a);let r="initial";function c(e){"Open"===e?(i.classList.remove("hidden-all"),t.setAttribute("aria-expanded","true")):(i.classList.add("hidden-all"),t.setAttribute("aria-expanded","false"))}function l(){return document.activeElement}function u(e,t){const i=s.filter((function(e){if(""===e.style.display)return!0}));if(0!==i.length)switch("input"===t&&o.focus(),e){case o:"forward"===t?i[0].focus():"back"===t&&i[i.length-1].focus();break;case a[0]:"forward"===t?i[1].focus():"back"===t&&o.focus();break;case a[a.length-1]:"forward"===t?i[0].focus():"back"===t&&i[i.length-2].focus();break;default:const e=l(),n=i.indexOf(e);if("forward"===t){i[n+1].focus()}else if("back"===t&&n>0){i[n-1].focus()}else o.focus()}}function d(){const e=o.value,t=s.filter((function(t){if(t.innerText.toUpperCase().startsWith(e.toUpperCase()))return!0}));var i;a.forEach((e=>e.style.display="none")),t.forEach((function(e){e.style.display=""})),p("filtered"),i=t.length,n.textContent=i+" options available."}function f(e){const t=e.dataset.value;o.value=t,u(document.activeElement,"input")}function p(e){switch(e){case"initial":r="initial";break;case"opened":r="opened";break;case"filtered":r="filtered";break;case"closed":r="closed"}}t.setAttribute("role","combobox"),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("aria-owns","custom-select-list"),o.setAttribute("aria-autocomplete","both"),o.setAttribute("aria-controls","custom-select-list"),i.setAttribute("role","listbox"),a.forEach((e=>{e.setAttribute("role","option"),e.setAttribute("tabindex","-1")})),n.textContent=a.length+" options available. Arrow down to browse or start typing to filter.",t.addEventListener("click",(function(e){const t=l();switch(r){case"initial":c("Open"),p("opened");break;case"opened":t===o?(c("Shut"),p("initial")):"LI"===t.tagName&&(f(t),c("Shut"),p("closed"));break;case"filtered":"LI"===t.tagName&&(f(t),c("Shut"),p("closed"));break;case"closed":c("Open"),p("filtered")}})),t.addEventListener("keyup",(function(e){!function(e){const t=l();switch(e){case"Enter":"initial"===r?(c("Open"),p("opened")):"opened"===r&&"LI"===t.tagName?(f(t),c("Shut"),p("closed")):"opened"===r&&t===o?(c("Shut"),p("closed")):"filtered"===r&&"LI"===t.tagName?(f(t),c("Shut"),p("closed")):"filtered"===r&&t===o?(c("Open"),p("opened")):(c("Open"),p("filtered"));break;case"Escape":"opened"!==r&&"filtered"!==r||(c("Shut"),p("initial"));break;case"ArrowDown":"initial"===r||"closed"===r?(c("Open"),u(o,"forward"),p("opened")):(c("Open"),u(t,"forward"));break;case"ArrowUp":"initial"===r||"closed"===r?(c("Open"),u(o,"back"),p("opened")):u(t,"back");break;default:"initial"===r?(c("Open"),d(),p("filtered")):"opened"===r||"closed"===r?(d(),p("filtered")):d()}}(e.key)})),document.addEventListener("click",(function(e){e.target.closest(".hoo-select")||(c("Shut"),p("initial"))}))};