@skyux/core 4.8.1 → 4.9.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 4.9.0 (2021-11-02)
+
+- Added the `SkyScrollableHostService` to be able to get and watch for an element's scrollable host. [#269](https://github.com/blackbaud/skyux-core/pull/269)
+- Updated the viewkeeper directive to watch for scrollable hosts when positioning elements. [#269](https://github.com/blackbaud/skyux-core/pull/269)
+
 # 4.8.1 (2021-09-29)
 
 - Fixed the dock component to properly position elements when docked to the bottom of the screen and the `body` element does not fill the entire height of the viewport. [#258](https://github.com/blackbaud/skyux-core/pull/258)

package/bundles/skyux-core.umd.js

@@ -1491,7 +1491,7 @@
                     SkyDockDomAdapterService
                 ],
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}"]
+                styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:-webkit-sticky;position:sticky}"]
             })
         ], SkyDockComponent);
         return SkyDockComponent;
@@ -2743,6 +2743,87 @@
         return SkyPercentPipeModule;
     }());
 
+    var SkyScrollableHostService = /** @class */ (function () {
+        function SkyScrollableHostService(mutationObserverSvc, windowRef) {
+            this.mutationObserverSvc = mutationObserverSvc;
+            this.windowRef = windowRef;
+        }
+        SkyScrollableHostService.prototype.getScrollabeHost = function (elementRef) {
+            return this.findScrollableHost(elementRef.nativeElement);
+        };
+        SkyScrollableHostService.prototype.watchScrollableHost = function (elementRef, completionObservable) {
+            var _this = this;
+            var scrollableHost = this.findScrollableHost(elementRef.nativeElement);
+            var behaviorSubject = new rxjs.BehaviorSubject(scrollableHost);
+            var mutationObserver = this.mutationObserverSvc.create(function () {
+                var newScrollableHost = _this.findScrollableHost(elementRef.nativeElement);
+                if (newScrollableHost !== scrollableHost) {
+                    scrollableHost = newScrollableHost;
+                    _this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+                    behaviorSubject.next(scrollableHost);
+                }
+            });
+            this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+            completionObservable.pipe(operators.take(1)).subscribe(function () {
+                mutationObserver.disconnect();
+            });
+            return behaviorSubject;
+        };
+        SkyScrollableHostService.prototype.findScrollableHost = function (element) {
+            var regex = /(auto|scroll)/;
+            var windowObj = this.windowRef.nativeWindow;
+            var bodyObj = windowObj.document.body;
+            /* Sanity check */
+            if (!element) {
+                return windowObj;
+            }
+            var style = windowObj.getComputedStyle(element);
+            var parent = element;
+            do {
+                parent = parent.parentNode;
+                /* Sanity check for if this function is called for an element which has been removed from the DOM */
+                if (!(parent instanceof HTMLElement)) {
+                    return windowObj;
+                }
+                style = windowObj.getComputedStyle(parent);
+            } while (!regex.test(style.overflow) &&
+                !regex.test(style.overflowY) &&
+                parent !== bodyObj);
+            if (parent === bodyObj) {
+                return windowObj;
+            }
+            return parent;
+        };
+        SkyScrollableHostService.prototype.observeForScrollableHostChanges = function (element, mutationObserver) {
+            mutationObserver.disconnect();
+            if (element instanceof HTMLElement) {
+                mutationObserver.observe(element, {
+                    attributes: true,
+                    attributeFilter: ['class', 'style.overflow', 'style.overflow-y'],
+                    subtree: true
+                });
+            }
+            else {
+                mutationObserver.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ['class', 'style.overflow', 'style.overflow-y'],
+                    subtree: true
+                });
+            }
+        };
+        SkyScrollableHostService.ctorParameters = function () { return [
+            { type: MutationObserverService },
+            { type: SkyAppWindowRef }
+        ]; };
+        SkyScrollableHostService.ɵprov = core.ɵɵdefineInjectable({ factory: function SkyScrollableHostService_Factory() { return new SkyScrollableHostService(core.ɵɵinject(MutationObserverService), core.ɵɵinject(SkyAppWindowRef)); }, token: SkyScrollableHostService, providedIn: "root" });
+        SkyScrollableHostService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], SkyScrollableHostService);
+        return SkyScrollableHostService;
+    }());
+
     /**
      * Provides a method for setting a formatted title on the current window.
      */
@@ -2810,11 +2891,12 @@
         nextIdIndex = (nextIdIndex || 0) + 1;
         return 'viewkeeper-' + nextIdIndex;
     }
-    function getOffset(el) {
+    function getOffset(el, scrollableHost) {
         var rect = el.getBoundingClientRect();
+        var parent = scrollableHost ? scrollableHost : document.documentElement;
         return {
-            top: rect.top + document.documentElement.scrollTop,
-            left: rect.left + document.documentElement.scrollLeft
+            top: rect.top + parent.scrollTop,
+            left: rect.left + parent.scrollLeft
         };
     }
     function px(value) {
@@ -2851,6 +2933,7 @@
             this.id = nextId();
             this.el = options.el;
             this.boundaryEl = options.boundaryEl;
+            this.scrollableHost = options.scrollableHost;
             this.verticalOffset = options.verticalOffset || 0;
             this.verticalOffsetEl = options.verticalOffsetEl;
             this.viewportMarginTop = options.viewportMarginTop || 0;
@@ -2858,7 +2941,7 @@
             if (this.verticalOffsetEl) {
                 this.verticalOffsetEl.addEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
             }
-            window.addEventListener('scroll', this.syncElPositionHandler);
+            window.addEventListener('scroll', this.syncElPositionHandler, true);
             window.addEventListener('resize', this.syncElPositionHandler);
             window.addEventListener('orientationchange', this.syncElPositionHandler);
             ensureStyleEl();
@@ -2886,7 +2969,7 @@
         };
         SkyViewkeeper.prototype.destroy = function () {
             if (!this.isDestroyed) {
-                window.removeEventListener('scroll', this.syncElPositionHandler);
+                window.removeEventListener('scroll', this.syncElPositionHandler, true);
                 window.removeEventListener('resize', this.syncElPositionHandler);
                 window.removeEventListener('orientationchange', this.syncElPositionHandler);
                 this.unfixEl();
@@ -2924,16 +3007,19 @@
                 var verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
                 offset += (this.verticalOffsetEl.offsetHeight + verticalOffsetElTop);
             }
+            else if (this.scrollableHost) {
+                offset += this.scrollableHost.getBoundingClientRect().top;
+            }
             return offset;
         };
         SkyViewkeeper.prototype.shouldFixEl = function (boundaryInfo, verticalOffset) {
             var anchorTop;
             var doFixEl;
             if (boundaryInfo.spacerEl) {
-                anchorTop = getOffset(boundaryInfo.spacerEl).top;
+                anchorTop = getOffset(boundaryInfo.spacerEl, this.scrollableHost).top;
             }
             else {
-                anchorTop = getOffset(this.el).top;
+                anchorTop = getOffset(this.el, this.scrollableHost).top;
             }
             doFixEl = boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop > anchorTop;
             return doFixEl;
@@ -2992,11 +3078,11 @@
             var spacerId = this.getSpacerId();
             var spacerEl = document.getElementById(spacerId);
             var boundaryEl = this.boundaryEl;
-            var boundaryOffset = getOffset(boundaryEl);
+            var boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
             var boundaryTop = boundaryOffset.top;
             var boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
-            var scrollLeft = document.documentElement.scrollLeft;
-            var scrollTop = document.documentElement.scrollTop;
+            var scrollLeft = this.scrollableHost ? this.scrollableHost.scrollLeft : document.documentElement.scrollLeft;
+            var scrollTop = this.scrollableHost ? this.scrollableHost.scrollTop : document.documentElement.scrollTop;
             var elHeight = getHeightWithMargin(this.el);
             return {
                 boundaryBottom: boundaryBottom,
@@ -3045,11 +3131,13 @@
     }());
 
     var SkyViewkeeperDirective = /** @class */ (function () {
-        function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc) {
+        function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc, scrollableHostService) {
             this.el = el;
             this.mutationObserverSvc = mutationObserverSvc;
             this.viewkeeperSvc = viewkeeperSvc;
+            this.scrollableHostService = scrollableHostService;
             this.viewkeepers = [];
+            this.scrollableHostWatchUnsubscribe = undefined;
         }
         Object.defineProperty(SkyViewkeeperDirective.prototype, "skyViewkeeper", {
             get: function () {
@@ -3130,37 +3218,51 @@
             return false;
         };
         SkyViewkeeperDirective.prototype.detectElements = function () {
-            var e_3, _a;
+            var _this = this;
             var viewkeeperEls = this.getViewkeeperEls();
             if (this.viewkeeperElsChanged(viewkeeperEls)) {
-                this.destroyViewkeepers();
-                var previousViewkeeperEl = void 0;
-                try {
-                    for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
-                        var viewkeeperEl = viewkeeperEls_1_1.value;
-                        this.viewkeepers.push(this.viewkeeperSvc.create({
-                            boundaryEl: this.el.nativeElement,
-                            el: viewkeeperEl,
-                            setWidth: true,
-                            verticalOffsetEl: previousViewkeeperEl
-                        }));
-                        previousViewkeeperEl = viewkeeperEl;
-                    }
+                if (this.scrollableHostWatchUnsubscribe) {
+                    this.scrollableHostWatchUnsubscribe.next();
+                    this.scrollableHostWatchUnsubscribe = new rxjs.Subject();
                 }
-                catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                finally {
+                else {
+                    this.scrollableHostWatchUnsubscribe = new rxjs.Subject();
+                }
+                this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
+                    .pipe(operators.takeUntil(this.scrollableHostWatchUnsubscribe))
+                    .subscribe(function (scrollableHost) {
+                    var e_3, _a;
+                    _this.destroyViewkeepers();
+                    var previousViewkeeperEl;
                     try {
-                        if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
+                        for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
+                            var viewkeeperEl = viewkeeperEls_1_1.value;
+                            _this.viewkeepers.push(_this.viewkeeperSvc.create({
+                                boundaryEl: _this.el.nativeElement,
+                                scrollableHost: scrollableHost instanceof HTMLElement ? scrollableHost : undefined,
+                                el: viewkeeperEl,
+                                setWidth: true,
+                                verticalOffsetEl: previousViewkeeperEl
+                            }));
+                            previousViewkeeperEl = viewkeeperEl;
+                        }
                     }
-                    finally { if (e_3) throw e_3.error; }
-                }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                });
                 this.currentViewkeeperEls = viewkeeperEls;
             }
         };
         SkyViewkeeperDirective.ctorParameters = function () { return [
             { type: core.ElementRef },
             { type: MutationObserverService },
-            { type: SkyViewkeeperService }
+            { type: SkyViewkeeperService },
+            { type: SkyScrollableHostService, decorators: [{ type: core.Optional }] }
         ]; };
         __decorate([
             core.Input()
@@ -3168,11 +3270,26 @@
         SkyViewkeeperDirective = __decorate([
             core.Directive({
                 selector: '[skyViewkeeper]'
-            })
+            }),
+            __param(3, core.Optional())
         ], SkyViewkeeperDirective);
         return SkyViewkeeperDirective;
     }());
 
+    var SkyScrollableHostModule = /** @class */ (function () {
+        function SkyScrollableHostModule() {
+        }
+        SkyScrollableHostModule = __decorate([
+            core.NgModule({
+                providers: [
+                    MutationObserverService,
+                    SkyAppWindowRef
+                ]
+            })
+        ], SkyScrollableHostModule);
+        return SkyScrollableHostModule;
+    }());
+
     var SkyViewkeeperModule = /** @class */ (function () {
         function SkyViewkeeperModule() {
         }
@@ -3181,6 +3298,9 @@
                 declarations: [
                     SkyViewkeeperDirective
                 ],
+                imports: [
+                    SkyScrollableHostModule
+                ],
                 exports: [
                     SkyViewkeeperDirective
                 ],
@@ -3221,6 +3341,7 @@
     exports.SkyOverlayService = SkyOverlayService;
     exports.SkyPercentPipe = SkyPercentPipe;
     exports.SkyPercentPipeModule = SkyPercentPipeModule;
+    exports.SkyScrollableHostService = SkyScrollableHostService;
     exports.SkyUIConfigService = SkyUIConfigService;
     exports.SkyViewkeeperHostOptions = SkyViewkeeperHostOptions;
     exports.SkyViewkeeperModule = SkyViewkeeperModule;
@@ -3236,6 +3357,7 @@
     exports.ɵh = SkyOverlayContext;
     exports.ɵi = SkyOverlayAdapterService;
     exports.ɵj = SkyViewkeeperDirective;
+    exports.ɵk = SkyScrollableHostModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });