Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 | 2x 2x 2x 2x 2x 2x 372x 274x 180x 180x 74518x 74518x 74348x 74348x 73524x 73524x 23248x 824x 51100x 180x 30x 30x 30x 32x 30x 30x 30x 2x 1422x 1422x 764x 658x 658x 658x 742x 742x 742x 742x 742x 742x 10x 742x 1580x 12242x 808x 772x 158x 158x 954x 954x 742x 742x 144x 2x 176x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 174x 174x 2x 176x 176x 126x 126x 126x 124x 124x 51336x 51336x 124x 124x 124x 124x 124x 4x 124x 124x 680x 536x 144x 310x 144x 124x 20x 144x 144x 126x 18x 18x 2x 8x 4x 150x 150x 2x 2x 2x 2x 150x 150x 150x 150x 150x 150x 150x 2x 8x 8x 8x 5628x 5628x 5628x 5628x 5628x 8x 329x 329x 68x 68x 68x 790x 790x 712x 28x 28x 658x 680x 680x 158x 158x 150x 150x 158x 158x 6x 158x 158x 12x 2x 2x 12x 12x 12x 12x 431x 224x 224x 84x 207x 12x 195x 94x 94x 88x 6x 366x 132x 104x 28x 28x 28x 28x 28x 244x 244x 46x 198x 244x 1679x 244x 244x 244x 244x 312x 312x 112x 112x 6348x 6348x 54x 54x 54x 10x 10x 10x 10x 10x 6348x 6348x 5018x 5018x 4742x 5018x 4718x 5018x 2234x 5018x 5018x 5018x 80x 80x 6x 4938x 4938x 428x 428x 5018x 5018x 302x 302x 64x 5536x 5036x 5036x 5036x 3596x 3276x 3596x 3596x 3596x 3596x 3596x 3596x 3596x 1440x 1440x 1440x 1440x 1440x 1440x 12016x 5063x 5063x 2x 2x 5390x 5018x 5018x 3386x 5940x 5940x 43703x 982x 982x 982x 982x 982x 982x 980x 980x 980x 590x 390x 980x 956x 578x 578x 424x 378x 980x 980x 980x 590x 496x 122x 122x 122x 590x 590x 590x 590x 590x 590x 424x 383x 383x 383x 590x 474x 116x 390x 390x 390x 366x 366x 366x 366x 329x 329x 329x 390x 312x 78x 84x 3724x 11852x 102x 5256x 5306x 23036x | /**
* Copyright 2019 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
import base from '../templates/base';
import Vent from '@adobe/vent';
import {validate, transform, commons} from '../../../coral-utils';
import {trapFocus, returnFocus, focusOnShow, scrollOnFocus, FADETIME} from './enums';
const CLASSNAME = '_coral-BaseOverlay';
// Includes overlay itself
const COMPONENTS_WITH_OVERLAY = `
coral-actionbar,
coral-autocomplete,
coral-colorinput,
coral-cyclebutton,
coral-datepicker,
coral-dialog,
coral-overlay,
coral-popover,
coral-quickactions,
coral-select,
coral-tooltip
`;
// The tab capture element that lives at the top of the body
let topTabCaptureEl;
let bottomTabCaptureEl;
// A reference to the backdrop element
let backdropEl;
// The starting zIndex for overlays
const startZIndex = 10000;
// Tab keycode
const TAB_KEY = 9;
// A stack interface for overlays
const overlayStack = [];
let OverlayManager = {};
/**
Return focus option
*/
function preventScroll(instance) {
return {preventScroll: instance.scrollOnFocus === scrollOnFocus.OFF};
}
/**
Cancel the backdrop hide mid-animation.
*/
let fadeTimeout;
function cancelBackdropHide() {
window.clearTimeout(fadeTimeout);
}
/**
Set aria-hidden on every immediate child except the one passed, which should not be hidden.
*/
function hideEverythingBut(instance) {
// ARIA: Hide all the things
const children = document.body.children;
for (let i = 0 ; i < children.length ; i++) {
const child = children[i];
// If it's not a parent of or not the instance itself, it needs to be hidden
if (child !== instance && child.contains && !child.contains(instance)) {
const currentAriaHidden = child.getAttribute('aria-hidden');
if (currentAriaHidden) {
// Store the previous value of aria-hidden if present
// Don't blow away the previously stored value
child._previousAriaHidden = child._previousAriaHidden || currentAriaHidden;
if (currentAriaHidden === 'true') {
// It's already true, don't bother setting
continue;
}
} else {
// Nothing is hidden by default, store that
child._previousAriaHidden = 'false';
}
// Hide it
child.setAttribute('aria-hidden', 'true');
}
}
// Always show ourselves
instance.setAttribute('aria-hidden', 'false');
}
/**
AEctually reposition the backdrop to be under the topmost overlay.
*/
function doRepositionBackdrop() {
// Position under the topmost overlay
const top = OverlayManager.top();
if (top) {
// The backdrop, if shown, should be positioned under the topmost overlay that does have a backdrop
for (let i = overlayStack.length - 1 ; i > -1 ; i--) {
if (overlayStack[i].backdrop) {
backdropEl.style.zIndex = overlayStack[i].zIndex - 1;
break;
}
}
// ARIA: Set hidden properly
hideEverythingBut(top.instance);
}
}
OverlayManager = {
pop(instance) {
// Get overlay index
const index = this.indexOf(instance);
if (index === -1) {
return null;
}
// Get the overlay
const overlay = overlayStack[index];
// Remove from the stack
overlayStack.splice(index, 1);
// Return the passed overlay or the found overlay
return overlay;
},
push(instance) {
// Pop overlay
const overlay = this.pop(instance) || {instance};
// Get the new highest zIndex
const zIndex = this.getHighestZIndex() + 10;
// Store the zIndex
overlay.zIndex = zIndex;
instance.style.zIndex = zIndex;
// Push it
overlayStack.push(overlay);
if (overlay.backdrop) {
// If the backdrop is shown, we'll need to reposition it
// Generally, a component will not call _pushOverlay unnecessarily
// However, attachedCallback is asynchronous in polyfilld environments,
// so _pushOverlay will be called when shown and when attached
doRepositionBackdrop();
}
return overlay;
},
indexOf(instance) {
// Loop over stack
// Find overlay
// Return index
for (let i = 0 ; i < overlayStack.length ; i++) {
if (overlayStack[i].instance === instance) {
return i;
}
}
return -1;
},
get(instance) {
// Get overlay index
const index = this.indexOf(instance);
// Return overlay
return index === -1 ? null : overlayStack[index];
},
top() {
const length = overlayStack.length;
return length === 0 ? null : overlayStack[length - 1];
},
getHighestZIndex() {
const overlay = this.top();
return overlay ? overlay.zIndex : startZIndex;
},
some(...args) {
return overlayStack.some(...args);
},
forEach(...args) {
return overlayStack.forEach(...args);
}
};
/**
Create the global tab capture element.
*/
function createDocumentTabCaptureEls() {
if (!topTabCaptureEl) {
topTabCaptureEl = document.createElement('div');
topTabCaptureEl.setAttribute('coral-tabcapture', '');
topTabCaptureEl.setAttribute('role', 'presentation');
topTabCaptureEl.tabIndex = 0;
document.body.insertBefore(topTabCaptureEl, document.body.firstChild);
topTabCaptureEl.addEventListener('focus', () => {
const top = OverlayManager.top();
if (top && top.instance.trapFocus === trapFocus.ON) {
// Focus on the first tabbable element of the top overlay
Array.prototype.some.call(top.instance.querySelectorAll(commons.TABBABLE_ELEMENT_SELECTOR), (item) => {
if (item.offsetParent !== null && !item.hasAttribute('coral-tabcapture')) {
item.focus(preventScroll(top));
return true;
}
return false;
});
}
});
bottomTabCaptureEl = document.createElement('div');
bottomTabCaptureEl.setAttribute('coral-tabcapture', '');
bottomTabCaptureEl.setAttribute('role', 'presentation');
IbottomTabCaptureEl.tabIndex = 0;
document.body.appendChild(bottomTabCaptureEl);
bottomTabCaptureEl.addEventListener('focus', () => {
const top = OverlayManager.top();
if (top && top.instance.trapFocus === trapFocus.ON) {
const tabbableElement = Array.prototype.filter.call(top.instance.querySelectorAll(commons.TABBABLE_ELEMENT_SELECTOR), (item) => item.offsetParent !== null && !item.hasAttribute('coral-tabcapture')).pop();
// Focus on the last tabbable element of the top overlay
if (tabbableElement) {
tabbableElement.focus(preventScroll(top));
}
}
});
} else {
if (document.body.firstElementChild !== topTabCaptureEl) {
// Make sure we stay at the very top
document.body.insertBefore(topTabCaptureEl, document.body.firstChild);
}
if (document.body.lastElementChild !== bottomTabCaptureEl) {
// Make sure we stay at the very bottom
E document.body.appendChild(bottomTabCaptureEl);
}
}
// Make sure the tab capture elemenst are shown
topTabCaptureEl.style.display = 'inline';
bottomTabCaptureEl.style.display = 'inline';
}
/**
Called after all overlays are hidden and we shouldn't capture the first tab into the page.
*/
function hideDocumentTabCaptureEls() {
if (topTabCaptureEl) {
topTabCaptureEl.style.display = 'none';
bottomTabCaptureEl.style.display = 'none';
}
}
/**
Show or restore the aria-hidden state of every child of body.
*/
function showEverything() {
// ARIA: Show all the things
const children = document.body.children;
for (let i = 0 ; i < children.length ; i++) {
const child = children[i];
// Restore the previous aria-hidden value
child.setAttribute('aria-hidden', child._previousAriaHidden || 'false');
}
}
/**
Actually hide the backdrop.
*/
function doBackdropHide() {
document.body.classList.remove('u-coral-noscroll');
// Start animation
window.requestAnimationFrame(() => {
backdropEl.classList.remove('is-open');
cancelBackdropHide();
fadeTimeout = window.setTimeout(() => {
backdropEl.style.display = 'none';
}, FADETIME);
});
// Set flag for testing
backdropEl._isOpen = false;
// Wait for animation to complete
showEverything();
}
/**
Hide the backdrop if no overlays are using it.
*/
function hideOrRepositionBackdrop() {
if (!backdropEl || !backdropEl._isOpen) {
// Do nothing if the backdrop isn't shown
return;
}
// Loop over all overlays
const keepBackdrop = OverlayManager.some((overlay) => {
// Check for backdrop usage
return !!overlay.backdrop;
});
if (!keepBackdrop) {
// HiEde the backdrop
doBackdropHide();
} else {
// Reposition the backdrop
doRepositionBackdrop();
}
// Hide/create the document-level tab capture element as necessary
// This only applies to modal overlays (those that have backdrops)
const top = OverlayManager.top();
if (!top || !(top.instance.trapFocus === trapFocus.ON && top.instance._requestedBackdrop)) {
hideDocumentTabCaptureEls();
} else if (top && top.instance.trapFocus === trapFocus.ON && top.instance._requestedBackdrop) {
createDocumentTabCaptureEls();
}
}
/**
Handles clicks to the backdrop, calling backdropClickedCallback for every overlay
*/
function handleBackdropClick(event) {
OverlayManager.forEach((overlay) => {
if (typeof overlay.instance.backdropClickedCallback === 'function') {
overlay.instance.backdropClickedCallback(event);
}
});
}
/**
Actually show the backdrop.
*/
function doBackdropShow(zIndex, instance) {
document.body.classList.add('u-coral-noscroll');
if (!backdropEl) {
backdropEl = document.createElement('div');
backdropEl.className = '_coral-Underlay';
document.body.appendChild(backdropEl);
backdropEl.addEventListener('click', handleBackdropClick);
}
// Show just under the provided zIndex
// Since we always increment by 10, this will never collide
backdropEl.style.zIndex = zIndex - 1;
// Set flag for testing
backdropEl._isOpen = true;
// Start animation
backdropEl.style.display = '';
window.requestAnimationFrame(() => {
// Add the class on the next animation frame so backdrop has time to exist
// Otherwise, the animation for opacity will not work.
backdropEl.classList.add('is-open');
cancelBackdropHide();
});
hideEverythingBut(instance);
}
/**
@base BaseOverlay
@classdesc The base element for Overlay components
*/
const BaseOverlay = (superClass) => class extends superClass {
/** @ignore */
constructor() {
super();
// Templates
this._elements = {};
base.call(this._elements);
}
/**
Whether to trap tabs and keep them within the overlay. See {@link OverlayTrapFocusEnum}.
@type {String}
@default OverlayTrapFocusEnum.OFF
@htmlattribute trapfocus
*/
get trapFocus() {
return this._trapFocus || trapFocus.OFF;
}
I
set trapFocus(value) {
value = transform.string(value).toLowerCase();
this._trapFIocus = validate.enumeration(trapFocus)(value) && value || trapFocus.OFF;
if (this._trapFocus === trapFocus.ON) {
// Give ourselves tabIndex if we are not focusable
if (this.tabIndex < 0) {
/** @ignore */
this.tabIndex = 0;
}
// Insert elements
this.insertBefore(this._elements.topTabCapture, this.firstElementChild);
this.appendChild(this._elements.intermediateTabCapture);
this.appendChild(this._elements.bottomTabCapture);
// Add listeners
this._handleTabCaptureFocus = this._handleTabCaptureFocus.bind(this);
this._handleRootKeypress = this._handleRootKeypress.bind(this);
this._vent.on('keydown', this._handleRootKeypress);
this._vent.on('focus', '[coral-tabcapture]', this._handleTabCaptureFocus);
} else if (this._trapFocus === trapFocus.OFF) {
// Remove elements
this._elements.topTabCapture && this._elements.topTabCapture.remove();
this._elements.intermediateTabCapture && this._elements.intermediateTabCapture.remove();
this._elements.bottomTabCapture && this._elements.bottomTabCapture.remove();
// Remove listeners
this._vent.off('keydown', this._handleRootKeypress);
this._vent.off('focus', '[coral-tabcapture]', this._handleTabCaptureFocus);
}
}
/**
Whether to return focus to the previously focused element when closed. See {@link OverlayReturnFocusEnum}.
@type {String}
@default OverlayReturnFocusEnum.OFF
@htmlattribute returnfocus
*/
get returnFocus() {
return this._returnFocus || returnFocus.OFF;
}
set returnFocus(value) {
value = transform.string(value).toLowerCase();
this._returnFocus = validate.enumeration(returnFocus)(value) && value || returnFocus.OFF;
}
/**
returns element that will receive focus when overlay is closed
@returns {HTMLElement}element passed via returnFocusTo()
*/
get returnFocusToElement() {
return this._returnFocusToElement;
}
/**
returns element that will receive focus when overlay is hidden
@returns {HTMLElement} element cached
*/
get elementToFocusWhenHidden() {
return this._elementToFocusWhenHidden;
}
/**
Whether the browser should scroll the document to bring the newly-focused element into view. See {@link OverlayScrollOnFocusEnum}.
@type {String}
@default OverlayScrollOnFocusEnum.ON
@htmlattribute scrollonfocus
*/
get scrollOnFocus() {
return this._scrollOnFocus || scrollOnFocus.ON;
}E
set scrollOnFocus(value) {
value = transform.string(value).toLowerCase();
this._scrollOnFocus = validate.enumeration(scrollOnFocus)(value) && value || scrollOnFocus.ON;
}
/**
Whether to focus the overlay, when opened or not. By default the overlay itself will get the focus. It also accepts
an instance of HTMLElement or a selector like ':first-child' or 'button:last-of-type'. If the selector returns
multiple elements, it will focus the first element inside the overlay that matches the selector.
See {@link OverlayFocusOnShowEnum}.
@type {HTMLElement|String}
@default OverlayFocusOnShowEnum.ON
@htmlattribute focusonshow
*/
get focusOnShow() {
return this._focusOnShow || focusOnShow.ON;
}
set focusOnShow(value) {
if (typeof value === 'string' || value instanceof HTMLElement) {
this._focusOnShow = value;
}
}
/**
Whether this overlay is open or not.
@type {Boolean}
@default false
@htmlattribute open
@htmlattributereflected
@emits {coral-overlay:open}
@emits {coral-overlay:close}
@emits {coral-overlay:beforeopen}
@emits {coral-overlay:beforeclose}
*/
get open() {
return this._open || false;
}
set open(value) {
const silenced = this._silenced;
value = transform.booleanAttr(value);
// UIsed for global animations
this.trigger('coral-overlay:_animate');
const beforeEvent = this.trigger(value ? 'coral-overlay:beforeopen' : 'coral-overlay:beforeclose');
if (!beforeEvent.defaultPrevented) {
const open = this._open = value;
this._reflectAttribute('open', open);
// Remove aria-hidden attribute before we show.
// Otherwise, screen readers will not announce
// Doesn't matter when we set aria-hidden true (nothing being announced)
if (open) {
this.removeAttribute('aria-hidden');
} else {
this.setAttribute('aria-hidden', !open);
}
// Don't do anything if we're not in the DOM yet
// This prevents errors related to allocating a zIndex we don't need
if (this.parentNode) {
// Do this check afterwards as we may have been appended inside of _show()
if (open) {
// Set z-index
this._pushOverlay();
if (this.returnFocus === returnFocus.ON) {
this._elementToFocusWhenHidden =
// cached element
this._elementToFocusWhenHidden ||
// element passed via returnFocusTo()
this._returnFocusToElement ||
// element that had focus before opening the overlay
(document.activeElement === document.body ? null : document.activeElement);
}
} else {
// Release zIndex
this._popOverlay();
}
}
// Don't force reflow
window.requestAnimationFrame(() => {
// Keep it silenced
this._silenced = silenced;
if (open) {
if (this.trapFocus === trapFocus.ON) {
// Make sure tab capture elements are positioned correctly
if (
// Tab capture elements are no longer at the bottom
this._elements.topTabCapture !== this.firstElementChild ||
this._elements.bottomTabCapture !== this.lastElementChild ||
// Tab capture elements have been separated
this._elements.bottomTabCapture.previousElementSibling !== this._elements.intermediateTabCapture
) {
this.insertBefore(this._elements.intermediateTabCapture, this.firstElementChild);
this.appendChild(this._elements.intermediateTabCapture);
this.appendChild(this._elements.bottomTabCapture);
}
}
// visibility should revert to whatever is specified in CSS, so that transition renders.
this.style.visibility = '';
// The default style should be display: none for overlays
// Show ourselves first for centering calculations etc
this.style.display = '';
// Do it in the next frame to make the animation happen
window.requestAnimationFrame(() => {
this.classList.add('is-open');
});
const openComplete = () => {
if (this.open) {
this._debounce(() => {
// handles the focus behavior based on accessibility recommendations
this._handleFocus();
this.trigger('coral-overlay:open');
this._silenced = false;
});
}
};
if (this._overlayAnimationTime) {
// Wait for animation to complete
commons.transitionEnd(this, openComplete);
} else {
// Execute immediately
openComplete();
}
} else {
// Fade out
this.classList.remove('is-open');
const closeComplete = () => {
E if (!this.open) {
// When the CSS transition has finished, set visibility to browser default, `visibility: visible`,
// to ensure that the overlay will be included in accessibility name or description
// of an element that references it using `aria-labelledby` or `aria-describedby`.
this.style.visibility = 'visible';
// makes sure the focus is returned per accessibility recommendations
this._handleReturnFocus();
// Hide self
this.style.display = 'none';
this._debounce(() => {
// Inform child overlays that we're closing
this._closeChildOverlays();
this.trigger('coral-overlay:close');
this._silenced = false;
});
}
};
if (this._overlayAnimationTime) {
// Wait for animation to complete
commons.transitionEnd(this, closeComplete);
} else {
// Execute immediately
closeComplete();
}
}
});
}
}
_closeChildOverlays() {
const components = this.querySelectorAll(COMPONENTS_WITH_OVERLAY);
// Close all children overlays and components with overlays
for (let i = 0 ; i < components.length ; i++) {
coInst component = components[i];
// Overlay component
if (component.hasAttribute('open')) {
component.removeAttribute('open');
}
// Component that uses an overlay
else if (component._elements && component._elements.overlay && component._elements.overlay.hasAttribute('open')) {
component._elements.overlay.removeAttribute('open');
}
}
}
/** @private */
_debounce(f) {
// Used to avoid triggering open/close event continuously
window.clearTimeout(this._debounceId);
this._deboIunceId = window.setTimeout(() => {
f();
}, 10);
}
/**
Check if this overlay is the topmost.
@protected
*/
_isTopOverlay() {
const top = OverlayManager.top();
return top && top.instance === this;
}
/**
Push the overlay to the top of the stack.
@protected
*/
_pushOverlay() {
OverlayManager.push(this);
}
/**
Remove the overlay from the stack.
@protected
*/
_popOverlay() {
OverlayManager.pop(this);
// AEutomatically hide the backdrop if required
hideOrRepositionBackdrop();
}
/**
Show the backdrop.
@protected
*/
_showBackdrop() {
const overlay = OverlayManager.get(this);
// Overlay is not tracked unless the component is in the DOM
// Hence, we need to check
if (overlay) {
overlay.backdrop = true;
doBackdropShow(overlay.zIndex, this);
}
// Mark on the instance that the backdrop has been requested for this overlay
this._requestedBackdrop = true;
// Mark that the backdrop was requested when not attached to the DOM
// This allows us to know whether to push the overlay when the component is attached
if (!this.parentNode) {
this._showBackdropOnAttached = true;
}
if (this.trapFocus === trapFocus.ON) {
createDocumentTabCaptureEls();
}
}
/**
Show the backdrop.
@protected
*/
_hideBackdrop() {
const overlay = OverlayManager.get(this);
if (overlay) {
overlay.backdrop = false;
// If that was the last overlay using the backdrop, hide it
hideOrRepositionBackdrop();
}
// Mark on the instance that the backdrop is no longer needed
this._requestedBackdrop = false;
}
/**
Handles keypresses on the root of the overlay and marshalls focus accordingly.
@protected
*/
_handleRootKeypress(event) {
if (event.target === this && event.keyCode === TAB_KEY) {
// Skip the top tabcapture and focus on the first focusable element
this._focusOn('first');
// Stop the normal tab behavior
event.preventDefault();
}
}
/**
Handles focus events on tab capture elements.
@protected
*/
_handleTabCaptureFocus(event) {
// Avoid moving around if we're trying to focus on coral-tabcapture
if (this._ignoreTabCapture) {
this._ignoreTabCapture = false;
return;
}
// Focus on the correct tabbable element
const target = event.target;
const which = target === this._elements.intermediateTabCapture ? 'first' : 'last';
this._focusOn(which);
}
/**
Handles the focus behavior. When "on" is specified it would try to find the first tababble descendent in the
content and if there are no valid candidates it will focus the element itself.
@protected
*/
_handleFocus() {
// ON handles the focusing per accessibility recommendations
if (this.focusOnShow === focusOnShow.ON) {
this._focusOn('first');
if (this._elementToFocusWhenHidden) {
this._elementToFocusWhenHidden.setAttribute('aria-expanded', 'true');
}
} else if (this.focusOnShow instanceof HTMLElement) {
this.focusOnShow.focus(preventScroll(this));
} else if (typeof this.focusOnShow === 'string' && this.focusOnShow !== focusOnShow.OFF) {
// we need to add :not([coral-tabcapture]) to avoid selecting the tab captures
const selEectedElement = this.querySelector(`${this.focusOnShow}:not([coral-tabcapture])`);
if (selectedElement) {
selectedElement.focus(preventScroll(this));
}
// in case the selector does not match, it should fallback to the default behavior
else {
this._focusOn('first');
}
}
}
/**
@protected
*/
_handleReturnFocus() {
if (this.returnFocus === returnFocus.ON && this._elementToFocusWhenHidden) {
if (document.activeElement && !this.contains(document.activeElement)) {
// Don't return focus if the user focused outside of the overlay
return;
}
this._elementToFocusWhenHidden.setAttribute('aria-expanded', 'false');
// Return focus, ignoring tab capture if it is an overlay
this._elementToFocusWhenHidden._ignoreTabCapture = true;
this._elementToFocusWhenHidden.focus(preventScroll(this));
this._elementToFocusWhenHidden._ignoreTabCapture = false;
// Drop the reference to avoid memory leaks
this._elementToFocusWhenHidden = null;
}
}
/**
Focus on the first or last element.
@param {String} which
one of "first" or "last"
@protected
*/
_focusOn(which) {
const focusableTarget = this._getFocusableElement(which);
// if we found a focusing target we focus it
if (focusableTarget) {
focusableTarget.focus(preventScroll(this));
}
// otherwise the element itself should get focus
else {
this.focus(preventScroll(this));
}
}
_getFocusableElements() {
return Array.prototype.filter.call(this.querySelectorAll(commons.FOCUSABLE_ELEMENT_SELECTOR), item => item.offsetParent !== null && !item.hasAttribute('coral-tabcapture'));
}
_getFocusableElement(which) {
let focusableTarget;
if (which === 'first' || which === 'last') {
const focusableElements = this._getFocusableElements();
focusableTarget = focusableElements[which === 'first' ? 'shift' : 'pop']();
}
return focusableTarget;
}
/**
Open the overlay and set the z-index accordingly.
@returns {BaseOverlay} this, chainable
*/
show() {
this.open = true;
return this;
}
E
/**
Close the overlay.
@returns {BaseOverlay} this, chainable
*/
hide() {
this.open = false;
return this;
}
/**
Set the element that focus should be returned to when the overlay is hidden.
@param {HTMLElement} element
The element to return focus to. This must be a DOM element, not a jQuery object or selector.
@returns {BaseOverlay} this, chainable
*/
returnFocusTo(element) {
if (this.returnFocus === returnFocus.OFF) {
// Switch on returning focus if it's off
this.returnFocus = returnFocus.ON;
}
// If the element is not focusable,
if (!element.matches(commons.FOCUSABLE_ELEMENT_SELECTOR)) {
// add tabindex so that it is programmatically focusable.
element.setAttribute('tabindex', -1);
// On blur, restore element to its prior, not-focusable state
const tempVent = new Vent(element);
tempVent.on('blur.afterFocus', (event) => {
// Wait a frame before testing whether focus has moved to an open overlay or to some other element.
window.requestAnimationFrame(() => {
// If overlay remains open, don't remove tabindex event handler until after it has been closed
const top = OverlayManager.top();
if (top && top.instance.contains(document.activeElement)) {
return;
}
tempVent.off('blur.afterFocus');
event.matchedTarget.removeAttribute('tabindex');
});
}, true);
}
this._returnFocusToElement = element;
return this;
}
static get _OverlayManager() {
return OverlayManager;
}
/**
Returns {@link BaseOverlay} trap focus options.
@return {OverlayTrapFocusEnum}
*/
static get trapFocus() {
return trapFocus;
}
/**
Returns {@link BaseOverlay} return focus options.
@return {OverlayReturnFocusEnum}
*/
static get returnFocus() {
return returnFocus;
}
/**
Returns {@link BaseOverlay} scroll focus options.
@return {OverlayScrollOnFocusEnum}
*/
static get scrollOnFocus() {
return scrollOnFocus;
}
/**
Returns {@link BaseOverlay} focus on show options.
@return {OverlayFocusOnShowEnum}
*/
static get focusOnShow() {
return focusOnShow;
}
/**
Returns {@link BaseOverlay} fadetime in milliseconds.
@return {Number}
*/
static get FADETIME() {
return FADETIME;
}
static get _attributePropertyMap() {
return commons.extend(super._attributePropertyMap, {
trapfocus: 'trapFocus',
returnfocus: 'returnFocus',
focusonshow: 'focusOnShow',
});
}
/** @ignore */
static get observedAttributes() {
return super.observedAttributes.concat([
'trapfocus',
'returnfocus',
'focusonshow',
'open'
]);
}
/** @ignore */
connectedCallback() {
super.connectedCallback();
if (!this.hasAttribute('trapfocus')) {
this.trapFocus = this.trapFocus;
}
if (!this.hasAttribute('returnfocus')) {
this.returnFocus = this.returnFocus;
}
if (!this.hasAttribute('focusonshow')) {
this.focusOnShow = this.focusOnShow;
}
if (!this.hasAttribute('scrollonfocus')) {
this.scrollOnFocus = this.scrollOnFocus;
}
if (this.open) {
this._pushOverlay();
if (this._showBackdropOnAttached) {
// Show the backdrop again
this._showBackdrop();
}
} else {
// If overlay is closed, make sure that it is hidden with `display: none`,
// but set `visibility: visible` to ensure that the overlay will be included in accessibility name or description
// of an element that references it using `aria-labelledby` or `aria-describedby`.
this.style.display = 'none';
this.style.visibility = 'visible';
}
}
/** @ignore */
render() {
super.render();
this.classList.add(CLASSNAME);
}
/** @ignore */
disconnectedCallback() {
super.disconnectedCallback();
if (this.open) {
// Release zIndex as we're not in the DOM any longer
// When we're re-added, we'll get a new zIndex
this._popOverlay();
if (this._requestedBackdrop) {
// Mark that we'll need to show the backdrop when attached
this._showBackdropOnAttached = true;
}
}
}
/**
Called when the {@link BaseOverlay} is clicked.
@function backdropClickedCallback
@protected
*/
/**
Triggered before the {@link BaseOverlay} is opened with <code>show()</code> or <code>instance.open = true</code>.
@typedef {CustomEvent} coral-overlay:beforeopen
@property {function} preventDefault
Call to stop the overlay from opening.
*/
/**
Triggered after the {@link BaseOverlay} is opened with <code>show()</code> or <code>instance.open = true</code>
@typedef {CustomEvent} coral-overlay:open
*/
/**
Triggered before the {@link BaseOverlay} is closed with <code>hide()</code> or <code>instance.open = false</code>.
@typedef {CustomEvent} coral-overlay:beforeclose
@property {function} preventDefault
Call to stop the overlay from closing.
*/
/**
Triggered after the {@link BaseOverlay} is closed with <code>hide()</code> or <code>instance.open = false</code>
@typedef {CustomEvent} coral-overlay:close
*/
};
export default BaseOverlay;
|