feat(notification-panel): add scroll strategy provider (#537)

allianz · Mar 16, 2022 · 2248cea · 2248cea
1 parent 3561416
commit 2248cea
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 5 deletions.
diff --git a/...ng-aquila/documentation/examples/notification-panel/notification-panel-examples.module.ts b/...ng-aquila/documentation/examples/notification-panel/notification-panel-examples.module.ts
@@ -8,11 +8,13 @@ import { ExamplesSharedModule } from '../examples-shared.module';
 import { NotificationPanelActionsExampleComponent } from './notification-panel-actions/notification-panel-actions-example';
 import { NotificationPanelClickableExampleComponent } from './notification-panel-clickable/notification-panel-clickable-example';
 import { NotificationPanelMixedExampleComponent } from './notification-panel-mixed/notification-panel-mixed-example';
+import { NotificationPanelScrollStrategyProviderExampleComponent } from './notification-panel-scroll-strategy-provider/notification-panel-scroll-strategy-provider-example';
 
 const EXAMPLES = [
     NotificationPanelActionsExampleComponent,
     NotificationPanelClickableExampleComponent,
     NotificationPanelMixedExampleComponent,
+    NotificationPanelScrollStrategyProviderExampleComponent,
 ];
 
 @NgModule({
@@ -35,6 +37,8 @@ export class NotificationExamplesModule {
             'notification-panel-clickable':
                 NotificationPanelClickableExampleComponent,
             'notification-panel-mixed': NotificationPanelMixedExampleComponent,
+            'notification-panel-scroll-strategy-provider':
+                NotificationPanelScrollStrategyProviderExampleComponent,
         };
     }
 }
diff --git a/...on-panel-scroll-strategy-provider/notification-panel-scroll-strategy-provider-example.css b/...on-panel-scroll-strategy-provider/notification-panel-scroll-strategy-provider-example.css
diff --git a/...n-panel-scroll-strategy-provider/notification-panel-scroll-strategy-provider-example.html b/...n-panel-scroll-strategy-provider/notification-panel-scroll-strategy-provider-example.html
@@ -0,0 +1,44 @@
+<button
+    nxIconButton="small tertiary"
+    class="nx-margin-0"
+    [nxNotificationPanelTriggerFor]="panel1"
+    title="Notifications"
+>
+    <nx-icon name="bell-o"></nx-icon>
+</button>
+
+<ng-template #panel1>
+    <nx-notification-panel>
+        <nx-notification-header>
+            <h3 nxCopytext="large" class="nx-font-weight-semibold">Unread</h3>
+            <button nxPlainButton="small" type="button"
+                >Mark all as read
+                <nx-icon name="check" class="nx-margin-left-2xs"></nx-icon
+            ></button>
+        </nx-notification-header>
+
+        <a nxNotificationPanelItem clickable="false" [attr.href]="null">
+            <nx-notification-item-metadata>
+                <nx-icon
+                    size="s"
+                    class="nx-margin-right-2xs"
+                    name="lock-o"
+                    aria-hidden="true"
+                ></nx-icon
+                >File lock release &middot; 16:53
+            </nx-notification-item-metadata>
+            <nx-notification-item-content>
+                <span class="nx-font-weight-semibold"
+                    >The file you tried to edit (XY12345) is now
+                    available.</span
+                >
+            </nx-notification-item-content>
+            <nx-notification-item-actions>
+                <nx-link><a href="#file-link">Edit file</a></nx-link>
+                <button nxPlainButton="small" type="button" title="Delete">
+                    <nx-icon name="trash-o" aria-hidden="true"></nx-icon>
+                </button>
+            </nx-notification-item-actions>
+        </a>
+    </nx-notification-panel>
+</ng-template>
diff --git a/...ion-panel-scroll-strategy-provider/notification-panel-scroll-strategy-provider-example.ts b/...ion-panel-scroll-strategy-provider/notification-panel-scroll-strategy-provider-example.ts
@@ -0,0 +1,24 @@
+import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { NX_NOTIFICATION_PANEL_SCROLL_STRATEGY } from '@aposin/ng-aquila/notification-panel';
+
+function scrollStrategyFactory(overlay: Overlay): () => ScrollStrategy {
+    return () => overlay.scrollStrategies.close({ threshold: 100 });
+}
+
+/**
+ * @title Scroll Strategy Provider Example
+ */
+@Component({
+    selector: 'notification-panel-scroll-strategy-provider-example',
+    templateUrl: './notification-panel-scroll-strategy-provider-example.html',
+    styleUrls: ['./notification-panel-scroll-strategy-provider-example.css'],
+    providers: [
+        {
+            provide: NX_NOTIFICATION_PANEL_SCROLL_STRATEGY,
+            useFactory: scrollStrategyFactory,
+            deps: [Overlay],
+        },
+    ],
+})
+export class NotificationPanelScrollStrategyProviderExampleComponent {}
diff --git a/projects/ng-aquila/src/notification-panel/notification-panel-trigger.directive.ts b/projects/ng-aquila/src/notification-panel/notification-panel-trigger.directive.ts
@@ -1,7 +1,23 @@
-import { Directive, ElementRef, Input, Optional, Self, TemplateRef } from '@angular/core';
+import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { Directive, ElementRef, Inject, InjectionToken, Input, Optional, Self, TemplateRef } from '@angular/core';
 import { NxOverlayConfig, NxOverlayRef, NxOverlayService, NxTriggerButton } from '@aposin/ng-aquila/overlay';
 import { take } from 'rxjs/operators';
 
+/** Injection token that determines the scroll handling while a notification-panel is open. */
+export const NX_NOTIFICATION_PANEL_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>('nx-notification-panel-scroll-strategy');
+
+/** @docs-private */
+export function NX_NOTIFICATION_PANEL_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy {
+    return () => overlay.scrollStrategies.reposition();
+}
+
+/** @docs-private */
+export const NX_NOTIFICATION_PANEL_SCROLL_STRATEGY_PROVIDER = {
+    provide: NX_NOTIFICATION_PANEL_SCROLL_STRATEGY,
+    useFactory: NX_NOTIFICATION_PANEL_SCROLL_STRATEGY_PROVIDER_FACTORY,
+    deps: [Overlay],
+};
+
 const DEFAULT_CONFIG: NxOverlayConfig = {
     direction: 'bottom-start',
     fallbackOrientation: 'vertical',
@@ -27,13 +43,21 @@ export class NxNotificationPanelTriggerDirective {
         return this._panelTemplate;
     }
 
-    constructor(private _nxOverlay: NxOverlayService, private _element: ElementRef<HTMLElement>, @Optional() @Self() private _triggerButton: NxTriggerButton) {}
+    /** Strategy factory that will be used to handle scrolling while the notification-panel panel is open. */
+    private _scrollStrategyFactory = this._defaultScrollStrategyFactory;
+
+    constructor(
+        private _nxOverlay: NxOverlayService,
+        private _element: ElementRef<HTMLElement>,
+        @Optional() @Self() private _triggerButton: NxTriggerButton,
+        @Inject(NX_NOTIFICATION_PANEL_SCROLL_STRATEGY) private _defaultScrollStrategyFactory: () => ScrollStrategy,
+    ) {}
 
     open() {
         if (this._overlayRef) {
             return;
         }
-        const config = { ...DEFAULT_CONFIG, ...{ triggerButton: this._triggerButton } };
+        const config: NxOverlayConfig = { ...DEFAULT_CONFIG, scrollStrategy: this._scrollStrategyFactory(), triggerButton: this._triggerButton };
         this._overlayRef = this._nxOverlay.open(this._panelTemplate, this._element, config);
         this._overlayRef
             .afterClosed()

diff --git a/projects/ng-aquila/src/notification-panel/notification-panel.md b/projects/ng-aquila/src/notification-panel/notification-panel.md
@@ -26,6 +26,17 @@ If you need more actions inside a notification set the property `clickable` to f
 
 <!-- example(notification-panel-actions) -->
 
+## Global Settings
+
+If you want to use a custom scroll strategy, you can use the `NX_NOTIFICATION_PANEL_SCROLL_STRATEGY` injection token with a factory provider. The `Overlay` service from `@angular/cdk/overlay` offers 4 different scroll strategy options:
+
+-   **reposition:** allow background scroll, the overlay moves with the background (default).
+-   **close:** allow background scroll, closes the overlay on scroll.
+-   **block:** disallow background scroll, the overlay does not move.
+-   **noop:** allow background scroll, the overlay does not move.
+
+<!-- example(notification-panel-scroll-strategy-provider) -->
+
 ## Accessibility
 
 Don't forget to add an title aria-label to the trigger button. Use an anchor tag if the whole notification is supposed to be clickable. A good way to help screen reader users is to add a wrapper around the triggering button defining an region, e.g. `region="Notifications"`. That helps screen reader users to quickly access the trigger button from anywhere in the page.

diff --git a/projects/ng-aquila/src/notification-panel/notification-panel.module.ts b/projects/ng-aquila/src/notification-panel/notification-panel.module.ts
@@ -9,7 +9,7 @@ import {
     NxNotificationItemHeaderDirective,
     NxNotificationItemMetadataDirective,
 } from './notification-item/notification-item-slots';
-import { NxNotificationPanelTriggerDirective } from './notification-panel-trigger.directive';
+import { NX_NOTIFICATION_PANEL_SCROLL_STRATEGY_PROVIDER, NxNotificationPanelTriggerDirective } from './notification-panel-trigger.directive';
 import { NxNotificationPanelComponent } from './panel/notification-panel.component';
 
 @NgModule({
@@ -32,6 +32,6 @@ import { NxNotificationPanelComponent } from './panel/notification-panel.compone
         NxNotificationItemMetadataDirective,
         NxNotificationItemHeaderDirective,
     ],
-    providers: [],
+    providers: [NX_NOTIFICATION_PANEL_SCROLL_STRATEGY_PROVIDER],
 })
 export class NxNotificationPanelModule {}