1import { utils } from './aria/utils.js'; 2import { accordion } from './aria/accordion.js'; 3import { search } from './aria/search.js'; 4import { dataGrid } from './aria/dataGrid.js'; 5import { dialog } from './aria/dialog.js'; 6import { tabs } from './aria/tabs.js'; 7import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js'; 8import { PopupMenuAction } from './aria/PopupMenuAction.js'; 9import { MenubarItemAction } from './aria/MenubarItemAction.js'; 10import { MenubarAction } from './aria/MenubarAction.js'; 11import { listbox } from './aria/listbox.js'; 12import { alert } from './aria/alert.js'; 13import { Treeitem } from './aria/treeitem.js'; 14import { Tree } from './aria/tree.js'; 15import { Toggle } from './aria/toggle.js'; 16import { Collapsible } from './aria/collapsible.js'; 17import { Notification } from './aria/notification.js'; 18import { RadioButton } from './aria/radioButton.js'; 19import { CheckBox } from './aria/checkBoxes.js'; 20import { MenuVertical } from './aria/MenuVertical.js'; 21import { HeaderNavigation } from './aria/HeaderNavigation.js'; 22import { MenuHorizontal } from './aria/MenuHorizontal.js'; 23import { MenuNavigation } from './aria/MenuNavigation.js'; 24import { Nav } from './aria/Nav.js'; 25 26export function accordionComponent(aria) { 27 accordion(aria); 28} 29 30export function searchComponent(aria) { 31 search(aria); 32} 33 34export function alertComponent(aria) { 35 alert(aria); 36} 37 38export function toggleComponent(aria) { 39 Toggle(aria); 40} 41 42export function collapsibleComponent(aria) { 43 Collapsible(aria); 44 45 const collapsibles = document.querySelectorAll('[data-module="c-collapsible"]'); 46 [...collapsibles].forEach((collapsible) => { 47 aria.collapsibleInit(collapsible); 48 }); 49} 50 51export function dialogComponent(aria) { 52 utils(aria); 53 dialog(aria); 54} 55 56export function dropdownComponent(aria) { 57 const modules = document.querySelectorAll('[data-module]'); 58 for (const item in modules) if (modules.hasOwnProperty(item)) { 59 const moduleValue = modules[item].getAttribute('data-module'); 60 61 62 if (moduleValue == 'c-dropdown'){ 63 const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]'); 64 const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]'); 65 if(buttonDropdown && tooltip) { 66 const hideOnPopperBlur = { 67 /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */ 68 name: 'hideOnPopperBlur', 69 defaultValue: true, 70 fn(instance) { 71 return { 72 onCreate() { 73 instance.popper.addEventListener('focusout', (event) => { 74 if ( 75 instance.props.hideOnPopperBlur && 76 event.relatedTarget && 77 !instance.popper.contains(event.relatedTarget) 78 ) { 79 instance.hide(); 80 } 81 }); 82 }, 83 }; 84 }, 85 }; 86 const hideOnEsc = { 87 /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */ 88 name: 'hideOnEsc', 89 defaultValue: true, 90 fn({hide}) { 91 function onKeyDown(event) { 92 if (event.keyCode === 27) { 93 hide(); 94 } 95 } 96 97 return { 98 onShow() { 99 document.addEventListener('keydown', onKeyDown); 100 }, 101 onHide() { 102 document.removeEventListener('keydown', onKeyDown); 103 } 104 }; 105 } 106 }; 107 108 // https://atomiks.github.io/tippyjs/v6/all-props/ 109 tippy(buttonDropdown, { 110 placement: 'bottom-start', 111 inlinePositioning: true, 112 content: tooltip, 113 allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks. 114 trigger: 'click', 115 hideOnClick: true, 116 interactive: true, 117 arrow: false, 118 offset: [0, -10], 119 theme: '', 120 plugins: [hideOnEsc,hideOnPopperBlur], 121 role: false, 122 aria: { 123 content: 'auto' 124 }, 125 onShown(instance) { 126 aria.Utils.focusFirstDescendant(tooltip); 127 } 128 }); 129 } 130 } 131 } 132} 133 134export function listboxComponent(aria) { 135 listbox(aria); 136 const modules = document.querySelectorAll('[data-module]'); 137 let activeButton; 138 for (const item in modules) if (modules.hasOwnProperty(item)) { 139 const moduleValue = modules[item].getAttribute('data-module'); 140 141 if (moduleValue == 'c-listbox'){ 142 const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]'); 143 const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]'); 144 const list = modules[item].querySelector('[data-module = "c-listbox-list"]'); 145 if(buttonListbox && tooltip) { 146 const listbox = new aria.Listbox(list); 147 const hideOnClick = { 148 name: 'hideOnClick', 149 defaultValue: true, 150 fn(instance) { 151 return { 152 onCreate() { 153 buttonListbox.addEventListener("click", (event) => { 154 if(!buttonListbox.classList.contains('open')){ 155 instance.show(); 156 list.focus() 157 buttonListbox.classList.add('open'); 158 } else { 159 list.blur(); 160 instance.hide(); 161 } 162 }); 163 }, 164 }; 165 }, 166 }; 167 const hideOnPopperBlur = { 168 /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */ 169 name: 'hideOnPopperBlur', 170 defaultValue: true, 171 fn(instance) { 172 return { 173 onCreate() { 174 instance.popper.addEventListener('focusout', (event) => { 175 if ( 176 instance.props.hideOnPopperBlur && 177 event.relatedTarget && 178 !instance.popper.contains(event.relatedTarget) 179 ) { 180 instance.hide(); 181 } 182 }); 183 }, 184 }; 185 }, 186 }; 187 const hideOnEscOrEnter = { 188 /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */ 189 name: 'hideOnEsc', 190 defaultValue: true, 191 fn({hide}) { 192 function onKeyDown(event) { 193 if ((event.keyCode === 27)||(event.keyCode === 13)) { 194 hide(); 195 } 196 } 197 198 return { 199 onShow() { 200 document.addEventListener('keydown', onKeyDown); 201 }, 202 onHide() { 203 document.removeEventListener('keydown', onKeyDown); 204 } 205 }; 206 } 207 }; 208 209 // https://atomiks.github.io/tippyjs/v6/all-props/ 210 tippy(buttonListbox, { 211 placement: 'bottom-start', 212 inlinePositioning: true, 213 content: tooltip, 214 allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks. 215 trigger: 'manual', 216 interactive: true,
217 arrow: false, 218 offset: [0, -10], 219 theme: '', 220 plugins: [hideOnEscOrEnter,hideOnPopperBlur, hideOnClick], 221 role: false, 222 aria: { 223 content: 'auto' 224 }, 225 onMount(instance) { 226 if (list.querySelectorAll('[aria-selected="true"]')[0]) { 227 listbox.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]); 228 } 229 }, 230 onHidden(instance){ 231 buttonListbox.classList.remove('open'); 232 } 233 }); 234 235 listbox.setHandleFocusChange(function(evt){ 236 if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change')=='change')){ 237 buttonListbox.firstElementChild.innerHTML = evt.innerHTML; 238 } 239 }); 240 241 const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby'); 242 const allowMultiple = getMultiSelectable.includes('is-multiselectable-label'); 243 244 if(!allowMultiple) { 245 list.addEventListener("click", (event) => { 246 buttonListbox.click(); 247 }) 248 } 249 } 250 } 251 } 252} 253 254export function menubarComponent(aria) { 255 PopupMenuItemAction(aria); 256 PopupMenuAction(aria); 257 MenubarItemAction(aria); 258 MenubarAction(aria); 259 const modules = document.querySelectorAll('[data-module="c-menubar"]'); 260 [...modules].forEach((module) => { 261 const menubar = new aria.MenubarAction(module); 262 menubar.init(null); 263 }); 264} 265 266export function tableAdvancedComponent(aria) { 267 utils(aria); 268 dataGrid(aria); 269 const modules = document.querySelectorAll('[data-module="c-table-advanced"]'); 270 [...modules].forEach((module) => { 271 const grid = new aria.Grid(module); 272 }); 273} 274 275export function tabsComponent(aria) { 276 tabs(aria); 277 const modules = document.querySelectorAll('[data-module="c-tabs"]'); 278 [...modules].forEach((module) => { 279 aria.tabsInit(module); 280 }); 281} 282 283export function tooltipComponent(aria) { 284 const modules = document.querySelectorAll('[data-module]'); 285 for (const item in modules) if (modules.hasOwnProperty(item)) { 286 const moduleValue = modules[item].getAttribute('data-module'); 287 288 289 if (moduleValue == 'c-tooltip'){ 290 const tooltipButton = modules[item].querySelector('[data-module = "c-tooltip-button"]'); 291 const ariaContent = tooltipButton.matches('[data-type = "c-tooltip-button-complex"]') ? 'describedby' : 'labelledby'; 292 const tooltipTooltip = modules[item].querySelector('[data-module = "c-tooltip-tooltip"]'); 293 if(tooltipButton && tooltipTooltip) { 294 const hideOnPopperBlur = { 295 /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */ 296 name: 'hideOnPopperBlur', 297 defaultValue: true, 298 fn(instance) { 299 return { 300 onCreate() { 301 instance.popper.addEventListener('focusout', (event) => { 302 if ( 303 instance.props.hideOnPopperBlur && 304 event.relatedTarget && 305 !instance.popper.contains(event.relatedTarget) 306 ) { 307 instance.hide(); 308 } 309 }); 310 }, 311 }; 312 }, 313 }; 314 const hideOnEsc = { 315 /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */ 316 name: 'hideOnEsc', 317 defaultValue: true, 318 fn({hide}) { 319 function onKeyDown(event) { 320 if (event.keyCode === 27) { 321 hide(); 322 } 323 } 324 325 return { 326 onShow() { 327 document.addEventListener('keydown', onKeyDown); 328 }, 329 onHide() { 330 document.removeEventListener('keydown', onKeyDown); 331 } 332 }; 333 } 334 }; 335 336 // https://atomiks.github.io/tippyjs/v6/all-props/ 337 tippy(tooltipButton, { 338 placement: 'top', 339 inlinePositioning: true, 340 content: tooltipTooltip, 341 allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks. 342 trigger: 'mouseenter focus', 343 hideOnClick: false, 344 theme: '', 345 plugins: [hideOnEsc,hideOnPopperBlur], 346 role: 'tooltip', 347 interactive: true, 348 aria: { 349 content: ariaContent 350 } 351 }); 352 } 353 } 354 } 355} 356
357export function treeComponent(aria) { 358 Treeitem(aria); 359 Tree(aria); 360 const modules = document.querySelectorAll('[data-module]'); 361 for (const item in modules) if (modules.hasOwnProperty(item)) { 362 const moduleValue = modules[item].getAttribute('data-module'); 363 364 if (moduleValue == 'c-tree'){ 365 const tree = new aria.Tree(modules[item]); 366 tree.init(); 367 } 368 369 if (moduleValue == 'c-tree__item'){ 370 modules[item].addEventListener('click', function (event) { 371 event.stopPropagation(); 372 }); 373 } 374 } 375} 376 377export function notificationComponent(aria) { 378 Notification(aria); 379 const modules = document.querySelectorAll('[data-module="c-notification"]'); 380 [...modules].forEach((module) => { 381 aria.notificationInit(module); 382 }); 383} 384 385export function radioButtonComponent(aria) { 386 RadioButton(aria); 387} 388 389export function checkBoxComponent(aria) { 390 CheckBox(aria); 391} 392 393export function MenuVerticalComponent(aria) { 394 MenuVertical(aria); 395 const modules = document.querySelectorAll('[data-module="c-menu-vertical"]'); 396 [...modules].forEach((module) => { 397 const menuVertical = new aria.MenuVertical(module); 398 menuVertical.init(null); 399 }); 400} 401 402export function MenuHorizontalComponent(aria) { 403 MenuHorizontal(aria); 404 const modules = document.querySelectorAll('[data-module="c-menu-horizontal"]'); 405 [...modules].forEach((module) => { 406 const MenuHorizontal = new aria.MenuHorizontal(module); 407 MenuHorizontal.init(null); 408 }); 409} 410 411export function MenuNavigationComponent(aria) { 412 MenuNavigation(aria); 413 const modules = document.querySelectorAll('[data-module="c-menu-navigation"]'); 414 [...modules].forEach((module) => { 415 const menuNavigation = new aria.MenuNavigation(module); 416 menuNavigation.init(null); 417 }); 418} 419 420export function HeaderNavigationComponent(aria) { 421 HeaderNavigation(aria); 422 const modules = document.querySelectorAll('[data-module="c-header-navigation"]'); 423 [...modules].forEach((module) => { 424 const headerNavigation = new aria.HeaderNavigation(module); 425 headerNavigation.init(null); 426 }); 427} 428 429export function NavComponent(aria) { 430 Nav(aria); 431 const modules = document.querySelectorAll('[data-module="c-nav"]'); 432 [...modules].forEach((module) => { 433 const nav = new aria.Nav(module); 434 nav.init(null); 435 }); 436} 437 438export function DatepickerComponent(aria) { 439 const modules = document.querySelectorAll('[data-module="c-datepicker"]'); 440 [...modules].forEach((module) => { 441 const inputElement = module.getElementsByTagName('input')[0]; 442 if (inputElement) { 443 const dropdownId = inputElement.getAttribute('id'); 444 const datepickerDropdown = inputElement.parentNode.querySelector('[data-module="c-dropdown-button"]'); 445 let datepickerCalendar = null; 446 let isOpen = false; 447 448 const focusCalendar = () => { 449 const inputInitialValue = inputElement.value; 450 requestAnimationFrame(() => { 451 const datepickerSelect = module.querySelector(':is(select)'); 452 const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)'); 453 const datepickerInitialValue = datepickerCalendar.value; 454 if (datepickerCalendar != undefined) { 455 datepickerCalendar.focus(); 456 datepickerCalendar.addEventListener('change', (e) => { 457 inputElement.value = e.target.value; 458 }); 459 } 460 if(datepickerSelect != undefined) { 461 datepickerSelect.addEventListener('change', function() { 462 const selectedValue = this.value; 463 datepickerCalendar.min = selectedValue + "-01-01"; 464 datepickerCalendar.max = selectedValue + "-31-12"; 465 datepickerCalendar.focusedDate = datepickerCalendar.min; 466 }); 467 datepickerSelect.focus(); 468 } 469 const datepickerCancel = module.querySelector('#' + dropdownId + '-cancel'); 470 const datepickerSubmit = module.querySelector('#' + dropdownId + '-submit'); 471 if (datepickerCancel != undefined) { 472 datepickerCancel.onclick = function() { 473 inputElement.value = inputInitialValue; 474 datepickerCalendar.tentative =""; 475 datepickerCalendar.value = datepickerInitialValue; 476 closeDropdown(); 477 } 478 } 479 if (datepickerSubmit != undefined) { 480 datepickerSubmit.onclick = function() { 481 closeDropdown(); 482 } 483 } 484 }); 485 } 486 487 const closeDropdown = () => { 488 setTimeout(() => { 489 isOpen = false; 490 inputElement.focus(); 491 }, 300); 492 }; 493 494 const observer = new MutationObserver((mutations) => { 495 mutations.forEach((mutation) => { 496 if (mutation.type === 'attributes' && mutation.attributeName === 'aria-expanded') { 497 const currentExpandedValue = mutation.target.getAttribute('aria-expanded'); 498 if (currentExpandedValue !== isOpen) { 499 const datepickerTimeout = setTimeout(focusCalendar, 500); 500 isOpen = currentExpandedValue; 501 if(!isOpen) { 502 clearTimeout(datepickerTimeout); 503 closeDropdown(); 504 } 505 } 506 } 507 }); 508 }); 509 510 observer.observe(datepickerDropdown, { attributes: true, attributeFilter: ['aria-expanded'] }); 511 } else { 512 const datepickerSelect = module.querySelector(':is(select)'); 513 const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)'); 514 if(datepickerSelect != undefined) { 515 datepickerSelect.addEventListener('change', function() { 516 const selectedValue = this.value; 517 datepickerCalendar.min = selectedValue + "-01-01"; 518 datepickerCalendar.max = selectedValue + "-31-12"; 519 datepickerCalendar.focusedDate = datepickerCalendar.min; 520 }); 521 } 522 } 523 }); 524}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.