| 1 | /*
|
| 2 | * Copyright 2020 Adobe. All rights reserved.
|
| 3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
| 4 | * you may not use this file except in compliance with the License. You may obtain a copy
|
| 5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0
|
| 6 | *
|
| 7 | * Unless required by applicable law or agreed to in writing, software distributed under
|
| 8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
| 9 | * OF ANY KIND, either express or implied. See the License for the specific language
|
| 10 | * governing permissions and limitations under the License.
|
| 11 | */
|
| 12 |
|
| 13 | import {getScrollParent} from './';
|
| 14 |
|
| 15 | interface ScrollIntoViewportOpts {
|
| 16 | /** The optional containing element of the target to be centered in the viewport. */
|
| 17 | containingElement?: Element
|
| 18 | }
|
| 19 |
|
| 20 | /**
|
| 21 | * Scrolls `scrollView` so that `element` is visible.
|
| 22 | * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
|
| 23 | * but doesn't affect parents above `scrollView`.
|
| 24 | */
|
| 25 | export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
|
| 26 | let offsetX = relativeOffset(scrollView, element, 'left');
|
| 27 | let offsetY = relativeOffset(scrollView, element, 'top');
|
| 28 | let width = element.offsetWidth;
|
| 29 | let height = element.offsetHeight;
|
| 30 | let x = scrollView.scrollLeft;
|
| 31 | let y = scrollView.scrollTop;
|
| 32 |
|
| 33 | // Account for top/left border offsetting the scroll top/Left
|
| 34 | let {borderTopWidth, borderLeftWidth} = getComputedStyle(scrollView);
|
| 35 | let borderAdjustedX = scrollView.scrollLeft + parseInt(borderLeftWidth, 10);
|
| 36 | let borderAdjustedY = scrollView.scrollTop + parseInt(borderTopWidth, 10);
|
| 37 | // Ignore end/bottom border via clientHeight/Width instead of offsetHeight/Width
|
| 38 | let maxX = borderAdjustedX + scrollView.clientWidth;
|
| 39 | let maxY = borderAdjustedY + scrollView.clientHeight;
|
| 40 |
|
| 41 | if (offsetX <= x) {
|
| 42 | x = offsetX - parseInt(borderLeftWidth, 10);
|
| 43 | } else if (offsetX + width > maxX) {
|
| 44 | x += offsetX + width - maxX;
|
| 45 | }
|
| 46 | if (offsetY <= borderAdjustedY) {
|
| 47 | y = offsetY - parseInt(borderTopWidth, 10);
|
| 48 | } else if (offsetY + height > maxY) {
|
| 49 | y += offsetY + height - maxY;
|
| 50 | }
|
| 51 | scrollView.scrollLeft = x;
|
| 52 | scrollView.scrollTop = y;
|
| 53 | }
|
| 54 |
|
| 55 | /**
|
| 56 | * Computes the offset left or top from child to ancestor by accumulating
|
| 57 | * offsetLeft or offsetTop through intervening offsetParents.
|
| 58 | */
|
| 59 | function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|'top') {
|
| 60 | const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
|
| 61 | let sum = 0;
|
| 62 | while (child.offsetParent) {
|
| 63 | sum += child[prop];
|
| 64 | if (child.offsetParent === ancestor) {
|
| 65 | // Stop once we have found the ancestor we are interested in.
|
| 66 | break;
|
| 67 | } else if (child.offsetParent.contains(ancestor)) {
|
| 68 | // If the ancestor is not `position:relative`, then we stop at
|
| 69 | // _its_ offset parent, and we subtract off _its_ offset, so that
|
| 70 | // we end up with the proper offset from child to ancestor.
|
| 71 | sum -= ancestor[prop];
|
| 72 | break;
|
| 73 | }
|
| 74 | child = child.offsetParent as HTMLElement;
|
| 75 | }
|
| 76 | return sum;
|
| 77 | }
|
| 78 |
|
| 79 | /**
|
| 80 | * Scrolls the `targetElement` so it is visible in the viewport. Accepts an optional `opts.containingElement`
|
| 81 | * that will be centered in the viewport prior to scrolling the targetElement into view. If scrolling is prevented on
|
| 82 | * the body (e.g. targetElement is in a popover), this will only scroll the scroll parents of the targetElement up to but not including the body itself.
|
| 83 | */
|
| 84 | export function scrollIntoViewport(targetElement: Element, opts?: ScrollIntoViewportOpts) {
|
| 85 | if (document.contains(targetElement)) {
|
| 86 | let root = document.scrollingElement || document.documentElement;
|
| 87 | let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
|
| 88 | // If scrolling is not currently prevented then we aren’t in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
|
| 89 | if (!isScrollPrevented) {
|
| 90 | let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
|
| 91 |
|
| 92 | // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
|
| 93 | // won't cause a scroll if the element is already focused and doesn't behave consistently when an element is partially out of view horizontally vs vertically
|
| 94 | targetElement?.scrollIntoView?.({block: 'nearest'});
|
| 95 | let {left: newLeft, top: newTop} = targetElement.getBoundingClientRect();
|
| 96 | // Account for sub pixel differences from rounding
|
| 97 | if ((Math.abs(originalLeft - newLeft) > 1) || (Math.abs(originalTop - newTop) > 1)) {
|
| 98 | opts?.containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
|
| 99 | targetElement.scrollIntoView?.({block: 'nearest'});
|
| 100 | }
|
| 101 | } else {
|
| 102 | let scrollParent = getScrollParent(targetElement);
|
| 103 | // If scrolling is prevented, we don't want to scroll the body since it might move the overlay partially offscreen and the user can't scroll it back into view.
|
| 104 | while (targetElement && scrollParent && targetElement !== root && scrollParent !== root) {
|
| 105 | scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
|
| 106 | targetElement = scrollParent;
|
| 107 | scrollParent = getScrollParent(targetElement);
|
| 108 | }
|
| 109 | }
|
| 110 | }
|
| 111 | }
|