From ec25af968fffa2e081a5c0558056734642a91c2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20St=C4=99pniewski?= <190422+k3nsei@users.noreply.github.com> Date: Tue, 14 Nov 2023 17:38:47 +0100 Subject: [PATCH] feat: emit action before directive destroy chore: extend peer deps to include angular v17 Refs: #1418 Release-As: 16.1.0 --- .all-contributorsrc | 14 ++++++++++++-- README.md | 3 ++- package.json | 2 +- projects/ng-in-viewport/package.json | 6 +++--- .../directives/in-viewport.directive.spec.ts | 16 ++++++++++++++++ .../lib/directives/in-viewport.directive.ts | 18 +++++++++++++----- .../ng-in-viewport/src/lib/values/check-fn.ts | 10 ++++++++++ 7 files changed, 57 insertions(+), 12 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 52ae1c57..85bf7af5 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -144,13 +144,23 @@ "login": "karptonite", "name": "Daniel Karp", "avatar_url": "https://avatars.githubusercontent.com/u/132278?v=4", - "profile": "https://twitter.com/karptonite", + "profile": "https://github.com/karptonite", "contributions": [ "bug" ] + }, + { + "login": "tinesoft", + "name": "Tine Kondo", + "avatar_url": "https://avatars.githubusercontent.com/u/4053092?v=4", + "profile": "https://github.com/tinesoft", + "contributions": [ + "ideas", "review" + ] } ], "contributorsPerLine": 7, "linkToUsage": false, - "skipCi": true + "skipCi": true, + "commitType": "docs" } diff --git a/README.md b/README.md index e917607f..c2a38acc 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d mpschaeuble
mpschaeuble
🐛 - Daniel Karp
Daniel Karp
🐛 + Daniel Karp
Daniel Karp
🐛 + Tine Kondo
Tine Kondo
🤔 👀 diff --git a/package.json b/package.json index 9e1c755e..27ee7060 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng-in-viewport", - "version": "16.0.0", + "version": "16.1.0", "private": true, "license": "MIT", "scripts": { diff --git a/projects/ng-in-viewport/package.json b/projects/ng-in-viewport/package.json index 84694788..7693c855 100644 --- a/projects/ng-in-viewport/package.json +++ b/projects/ng-in-viewport/package.json @@ -1,6 +1,6 @@ { "name": "ng-in-viewport", - "version": "16.0.0", + "version": "16.1.0", "description": "Allows us to check if an element is within the browsers visual viewport", "keywords": [ "angular", @@ -37,8 +37,8 @@ "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": "^14.0.0 || ^15.0.0 || >=16.0.0", - "@angular/core": "^14.0.0 || ^15.0.0 || >=16.0.0" + "@angular/common": "^14.0.0 || ^15.0.0 || ^16.0.0 || >=17.0.0", + "@angular/core": "^14.0.0 || ^15.0.0 || ^16.0.0 || >=17.0.0" }, "publishConfig": { "provenance": true diff --git a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts b/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts index 808523c1..87f097c4 100644 --- a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts +++ b/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts @@ -112,6 +112,14 @@ describe('GIVEN InViewportDirective', () => { it('THEN `unregister` methods from service should be called', () => { expect(service.unregister).toHaveBeenCalledWith(node, config); }); + + it('THEN `action` method from host component should be called by action output', () => { + expect(host.action).toHaveBeenCalledWith({ + [InViewportMetadata]: { entry: undefined }, + target: node, + visible: false, + }); + }); }); }); @@ -169,6 +177,14 @@ describe('GIVEN InViewportDirective', () => { it('THEN `unregister` methods from service should be called', () => { expect(service.unregister).not.toHaveBeenCalled(); }); + + it('THEN `action` method from host component should be called by action output', () => { + expect(host.action).not.toHaveBeenCalledWith({ + [InViewportMetadata]: { entry: undefined }, + target: node, + visible: false, + }); + }); }); }); }); diff --git a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts b/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts index eee5d973..da29bd4b 100644 --- a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts +++ b/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts @@ -61,7 +61,7 @@ export class InViewportDirective implements AfterViewInit, OnDestroy { public ngAfterViewInit(): void { if (!isPlatformBrowser(this.platformId)) { - this.emit(undefined, true); + this.emit(undefined, true, true); return; } @@ -81,6 +81,8 @@ export class InViewportDirective implements AfterViewInit, OnDestroy { public ngOnDestroy(): void { if (isPlatformBrowser(this.platformId)) { this.inViewportService.unregister(this.nativeElement, this.config); + + this.emit(undefined, true, false); } } @@ -89,16 +91,22 @@ export class InViewportDirective implements AfterViewInit, OnDestroy { } private emit(entry: IntersectionObserverEntry, force: false): void; - private emit(entry: undefined, force: true): void; - private emit(entry: IntersectionObserverEntry | undefined, force: boolean): void { + private emit(entry: undefined, force: true, forcedValue: boolean): void; + private emit(entry: IntersectionObserverEntry | undefined, force: boolean, forcedValue?: boolean): void { this.inViewportAction.emit({ [InViewportMetadata]: { entry }, target: this.nativeElement, - visible: force || !entry || this.isVisible(entry), + visible: force ? !!forcedValue : !entry || this.isVisible(entry), }); if (this.config.checkFn) { - this.inViewportCustomCheck.emit(this.config.checkFn(entry, { force, config: this.config })); + this.inViewportCustomCheck.emit( + this.config.checkFn(entry, { + force, + forcedValue: force ? !!forcedValue : undefined, + config: this.config, + }) + ); } } } diff --git a/projects/ng-in-viewport/src/lib/values/check-fn.ts b/projects/ng-in-viewport/src/lib/values/check-fn.ts index c1f3f79a..7f1e5dd0 100644 --- a/projects/ng-in-viewport/src/lib/values/check-fn.ts +++ b/projects/ng-in-viewport/src/lib/values/check-fn.ts @@ -3,7 +3,17 @@ import { isFunction, isNil, uniqueId } from 'lodash-es'; import { Config } from './config'; export interface InViewportCheckFnOptions { + /** + * Whether action was triggered programmatically. + */ force: boolean; + /** + * When an action is triggered programmatically, this property will hold a simulated visibility state. + */ + forcedValue?: boolean; + /** + * Instance of a configuration object. + */ config: Config; }