@ssv/ngx.ux 2.1.2 → 3.0.0-dev.34

package/src/viewport/viewport-data/viewport-data-matcher.spec.ts

@@ -0,0 +1,227 @@
+import { generateViewportSizeTypeInfoList, generateViewportSizeTypeInfoRefs, } from "../viewport.util";
+import { ViewportSizeTypeInfo } from "../viewport.model";
+import {
+	ViewportDataConfig,
+	matchViewportData as matchViewportData_,
+	ViewportDataMatchStrategy
+} from "./viewport-data-matcher";
+import { TestViewportSizeType } from "../viewport.util.spec";
+
+type TestViewportDataConfig<T> = ViewportDataConfig<T, Partial<Record<keyof typeof TestViewportSizeType, T>>>;
+
+const breakpoints: Record<keyof typeof TestViewportSizeType, number> = {
+	xsmall: 450,
+	small: 767,
+	medium: 992,
+	large: 1200,
+	hd: 1280,
+	fullHd: 1920,
+};
+
+const sizeTypes = generateViewportSizeTypeInfoList(breakpoints);
+const sizeRefs = generateViewportSizeTypeInfoRefs(sizeTypes) as Record<keyof typeof TestViewportSizeType, ViewportSizeTypeInfo>;
+
+const matchViewportData = <T>(
+	dataConfig: ViewportDataConfig<T>,
+	currentSizeType: ViewportSizeTypeInfo,
+	strategy: ViewportDataMatchStrategy,
+) => matchViewportData_<T>(dataConfig, currentSizeType, strategy, sizeTypes, sizeRefs);
+
+describe("viewportDataMatcher", () => {
+
+	describe("matchViewportData", () => {
+
+		describe("given strategy is exact", () => {
+			const strategy = ViewportDataMatchStrategy.exact;
+			const dataConfig: TestViewportDataConfig<number> = {
+				default: 15,
+				small: 10,
+				large: 20,
+			};
+
+			describe("when type value exists", () => {
+
+				it("should return matching value", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.small, strategy);
+					expect(result).toBe(dataConfig.small);
+				});
+			});
+
+			describe("when type value does not exists", () => {
+
+				it("should return default", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.hd, strategy);
+					expect(result).toBe(dataConfig.default);
+				});
+			});
+
+		});
+
+
+		describe("given strategy is larger (up)", () => {
+			const strategy = ViewportDataMatchStrategy.larger;
+			const dataConfig: TestViewportDataConfig<number> = {
+				default: 15,
+				small: 10,
+				large: 20,
+				hd: 25,
+			};
+
+
+			describe("when matching is largest", () => {
+				it("should return match", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.hd, strategy);
+					expect(result).toBe(dataConfig.hd);
+				});
+			});
+
+			describe("when matching not exist but larger exists", () => {
+				it("should return first match larger value", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.medium, strategy);
+					expect(result).toBe(dataConfig.large);
+				});
+			});
+
+			describe("when type is larger than data defined", () => {
+				it("should return default", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.fullHd, strategy);
+					expect(result).toBe(dataConfig.default);
+				});
+			});
+
+			describe("when type defined index far apart", () => {
+				it("should return largest", () => {
+					const result = matchViewportData({ default: dataConfig.default, hd: dataConfig.hd }, sizeRefs.xsmall, strategy);
+					expect(result).toBe(25);
+				});
+			});
+
+		});
+
+
+		describe("given strategy is smaller (down)", () => {
+			const dataConfig: TestViewportDataConfig<number> = {
+				default: 15,
+				small: 10,
+				large: 20,
+				hd: 25,
+			};
+			const strategy = ViewportDataMatchStrategy.smaller;
+
+			describe("when matching is smallest", () => {
+				it("should return match", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.small, strategy);
+					expect(result).toBe(dataConfig.small);
+				});
+			});
+
+			describe("when match not exist but smaller exists", () => {
+				it("should return first match larger value", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.medium, strategy);
+					expect(result).toBe(dataConfig.small);
+				});
+			});
+
+			describe("when type is smaller than data defined", () => {
+				it("should return default", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.xsmall, strategy);
+					expect(result).toBe(dataConfig.default);
+				});
+			});
+
+			describe("when type defined index far apart", () => {
+				it("should return smallest", () => {
+					const result = matchViewportData({ default: dataConfig.default, xsmall: 5 }, sizeRefs.fullHd, strategy);
+					expect(result).toBe(5);
+				});
+			});
+
+		});
+
+
+		describe("given strategy is closestSmallerFirst (down)", () => {
+			const dataConfig: TestViewportDataConfig<number> = {
+				default: 15,
+				small: 10,
+				large: 20,
+				hd: 25,
+			};
+			const strategy = ViewportDataMatchStrategy.closestSmallerFirst;
+
+			describe("when closest is smaller", () => {
+				it("should return smaller", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.medium, strategy);
+					expect(result).toBe(dataConfig.small);
+				});
+			});
+
+			describe("when closest is smaller and current not specified", () => {
+				it("should return smaller", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.fullHd, strategy);
+					expect(result).toBe(dataConfig.hd);
+				});
+			});
+
+			describe("when closest is larger", () => {
+				it("should return larger", () => {
+					const result = matchViewportData({
+						default: 15,
+						xsmall: 5, // -3
+						small: undefined,
+						medium: undefined,
+						large: undefined, // <--
+						hd: undefined,
+						fullHd: 20, // +2
+					}, sizeRefs.large, strategy);
+					expect(result).toBe(20);
+				});
+			});
+
+		});
+
+
+		describe("given strategy is closestLargerFirst (up)", () => {
+			const dataConfig: TestViewportDataConfig<number> = {
+				default: 15,
+				small: 10,
+				large: 20,
+				hd: 25,
+			};
+			const strategy = ViewportDataMatchStrategy.closestLargerFirst;
+
+			describe("when closest is larger", () => {
+				it("should return larger", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.medium, strategy);
+					expect(result).toBe(dataConfig.large);
+				});
+			});
+
+			describe("when closest is larger and current not specified", () => {
+				it("should return larger", () => {
+					const result = matchViewportData(dataConfig, sizeRefs.xsmall, strategy);
+					expect(result).toBe(dataConfig.small);
+				});
+			});
+
+			describe("when closest is smaller", () => {
+				it("should return smaller", () => {
+					const result = matchViewportData({
+						default: 15,
+						xsmall: 5, // -2
+						small: undefined,
+						medium: undefined, // <--
+						large: undefined,
+						hd: undefined,
+						fullHd: 20, // +3
+					}, sizeRefs.medium, strategy);
+					expect(result).toBe(5);
+				});
+			});
+
+		});
+
+
+	});
+
+
+});

package/src/viewport/viewport-data/viewport-data-matcher.ts

@@ -0,0 +1,175 @@
+import type { Dictionary } from "../../internal/internal.model";
+import type { ViewportSizeTypeInfo } from "../viewport.model";
+
+export type ViewportDataConfig<TValue = unknown, TData = Dictionary<TValue>> = TData & {
+	default?: TValue
+};
+
+export enum ViewportDataMatchStrategy {
+	/** Indicates that size should match exact or default. */
+	exact,
+
+	/** Indicates that size matches when exact match, first match smaller (down) or default. */
+	smaller,
+
+	/** Indicates that size matches when exact match, first match larger (up) or default. */
+	larger,
+
+	/** Indicates that size matches when exact match, or it tries both smaller/larger (smaller is preferred) until match or default. */
+	closestSmallerFirst,
+
+	/** Indicates that size matches when exact match, or it tries both larger/smaller (larger is preferred) until match or default. */
+	closestLargerFirst,
+}
+export type ViewportDataMatchStrategyLiteral = keyof typeof ViewportDataMatchStrategy;
+
+export interface ViewportDataMatcher<T = unknown> {
+	(
+		dataConfig: ViewportDataConfig<T>,
+		currentSizeType: ViewportSizeTypeInfo,
+		sizeTypes: ViewportSizeTypeInfo[],
+		sizeTypeMap: Dictionary<ViewportSizeTypeInfo>,
+	): T | undefined;
+}
+
+/**
+ * Utility function to match data based on strategy and size.
+ *
+ * @param dataConfig Data config to generate rules based on.
+ * @param sizeType Size type to get data for.
+ * @param strategy Strategy to use when building rules.
+ * @param sizeTypes Available size types ordered by index type. (Can be obtained from `ViewportService`)
+ * @param sizeTypeMap Available size type map. (Can be obtained from `ViewportService`)
+ * @returns Returns the matched data value.
+ */
+export function matchViewportData<T>(
+	dataConfig: ViewportDataConfig<T>,
+	sizeType: ViewportSizeTypeInfo,
+	strategy: ViewportDataMatchStrategy,
+	sizeTypes: ViewportSizeTypeInfo[],
+	sizeTypeMap: Dictionary<ViewportSizeTypeInfo>,
+): T | undefined {
+	const matchFn = matchStrategyHandlerMap[strategy];
+	if (!matchFn) {
+		throw Error(`matchViewportData: Viewport Data strategy not implemented. Strategy: '${strategy}'`);
+	}
+	const data = matchFn(dataConfig, sizeType, sizeTypes, sizeTypeMap) as T;
+	if (data !== undefined) {
+		return data;
+	}
+	return dataConfig.default;
+}
+
+
+const matchStrategyHandlerMap: Dictionary<ViewportDataMatcher> = {
+	[ViewportDataMatchStrategy.exact]: matchWithExact,
+	[ViewportDataMatchStrategy.larger]: matchWithLargerMatch,
+	[ViewportDataMatchStrategy.smaller]: matchWithSmallerMatch,
+	[ViewportDataMatchStrategy.closestSmallerFirst]: matchWithClosestSmallerFirstMatch,
+	[ViewportDataMatchStrategy.closestLargerFirst]: matchWithClosestLargerFirstMatch,
+};
+
+function matchWithExact<T>(
+	dataConfig: ViewportDataConfig<T>,
+	currentSizeType: ViewportSizeTypeInfo,
+): T | undefined {
+	return dataConfig[currentSizeType.name];
+}
+
+function matchWithLargerMatch<T>(
+	dataConfig: ViewportDataConfig<T>,
+	currentSizeType: ViewportSizeTypeInfo,
+	sizeTypes: ViewportSizeTypeInfo[],
+): T | undefined {
+	let data = dataConfig[currentSizeType.name];
+	if (data !== undefined) {
+		return data;
+	}
+
+	const largestTypeIdx = sizeTypes[sizeTypes.length - 1].type;
+	if (currentSizeType.type >= largestTypeIdx) {
+		return undefined;
+	}
+
+	for (let index = currentSizeType.type; index < sizeTypes.length; index++) {
+		const sizeType = sizeTypes[index];
+		data = dataConfig[sizeType.name];
+		if (data !== undefined) {
+			return data;
+		}
+	}
+
+	return undefined;
+}
+
+function matchWithSmallerMatch<T>(
+	dataConfig: ViewportDataConfig<T>,
+	currentSizeType: ViewportSizeTypeInfo,
+	sizeTypes: ViewportSizeTypeInfo[],
+): T | undefined {
+	let data = dataConfig[currentSizeType.name];
+	if (data !== undefined) {
+		return data;
+	}
+
+	if (currentSizeType.type <= 0) {
+		return undefined;
+	}
+
+	// eslint-disable-next-line for-direction
+	for (let index = currentSizeType.type; index < sizeTypes.length; index--) {
+		const sizeType = sizeTypes[index];
+		data = dataConfig[sizeType.name];
+		if (data !== undefined) {
+			return data;
+		}
+	}
+
+	return undefined;
+}
+
+function matchWithClosestSmallerFirstMatch<T>(
+	dataConfig: ViewportDataConfig<T>,
+	currentSizeType: ViewportSizeTypeInfo,
+	sizeTypes: ViewportSizeTypeInfo[],
+): T | undefined {
+	return closestMatch(dataConfig, currentSizeType, sizeTypes, true);
+}
+
+function matchWithClosestLargerFirstMatch<T>(
+	dataConfig: ViewportDataConfig<T>,
+	currentSizeType: ViewportSizeTypeInfo,
+	sizeTypes: ViewportSizeTypeInfo[],
+): T | undefined {
+	return closestMatch(dataConfig, currentSizeType, sizeTypes, false);
+}
+
+function closestMatch<T>(
+	dataConfig: ViewportDataConfig<T>,
+	currentSizeType: ViewportSizeTypeInfo,
+	sizeTypes: ViewportSizeTypeInfo[],
+	isSmallerFirst: boolean
+): T | undefined {
+	let data = dataConfig[currentSizeType.name];
+	if (data !== undefined) {
+		return data;
+	}
+
+	let downIndex = currentSizeType.type;
+	let upIndex = currentSizeType.type;
+
+	 
+	for (let index = 0; index < sizeTypes.length; index++) {
+		for (const idx of isSmallerFirst ? [--downIndex, ++upIndex] : [++upIndex, --downIndex]) {
+			const sizeType = sizeTypes[idx];
+			if (sizeType) {
+				data = dataConfig[sizeType.name];
+				if (data !== undefined) {
+					return data;
+				}
+			}
+		}
+	}
+
+	return undefined;
+}

package/src/viewport/viewport-data/viewport-data.pipe.ts

@@ -0,0 +1,51 @@
+import { Subscription, tap } from "rxjs";
+import { Pipe, PipeTransform, OnDestroy, ChangeDetectorRef } from "@angular/core";
+
+import { ViewportDataConfig, ViewportDataMatchStrategy, ViewportDataMatchStrategyLiteral } from "./viewport-data-matcher";
+import { ViewportDataService } from "./viewport-data.service";
+
+
+@Pipe({
+	name: "ssvViewportData",
+	pure: false,
+	standalone: true,
+})
+export class ViewportDataPipe implements PipeTransform, OnDestroy {
+
+	private markForTransform = true;
+	private value: unknown;
+	private data: ViewportDataConfig | undefined;
+	private strategy: ViewportDataMatchStrategyLiteral | undefined;
+	private data$$ = Subscription.EMPTY;
+
+	constructor(
+		private viewportData: ViewportDataService,
+		private cdr: ChangeDetectorRef
+	) {
+	}
+
+	transform(data: ViewportDataConfig, strategy: ViewportDataMatchStrategyLiteral): unknown {
+		if (!this.markForTransform && data === this.data && strategy === this.strategy) {
+			return this.value;
+		}
+		this.data = data;
+		this.strategy = strategy;
+
+		this.data$$.unsubscribe();
+		this.data$$ = this.viewportData.get$(data, ViewportDataMatchStrategy[strategy]).pipe(
+			tap(value => {
+				this.markForTransform = true;
+				this.value = value;
+				this.cdr.markForCheck();
+			}),
+		).subscribe();
+
+		this.markForTransform = false;
+		return this.value;
+	}
+
+	ngOnDestroy(): void {
+		this.data$$.unsubscribe();
+	}
+
+}

package/src/viewport/viewport-data/viewport-data.service.ts

@@ -0,0 +1,48 @@
+import { inject, Injectable } from "@angular/core";
+import { Observable, distinctUntilChanged, map } from "rxjs";
+
+import { ViewportSizeTypeInfo } from "../viewport.model";
+import { ViewportService } from "../viewport.service";
+import { matchViewportData, ViewportDataConfig, ViewportDataMatchStrategy } from "./viewport-data-matcher";
+import { generateViewportRulesRangeFromDataMatcher, ViewportDataRule } from "./viewport-data.utils";
+import { VIEWPORT_OPTIONS } from "../viewport.options";
+
+@Injectable({
+	providedIn: "root",
+})
+export class ViewportDataService {
+
+	private readonly viewport = inject(ViewportService);
+	private readonly config = inject(VIEWPORT_OPTIONS);
+
+	/** Get data for match. */
+	get<T>(
+		dataConfig: ViewportDataConfig<T>,
+		strategy: ViewportDataMatchStrategy = this.config.defaultDataMatchStrategy,
+		sizeType: ViewportSizeTypeInfo = this.viewport.sizeTypeSnapshot
+	): T | undefined {
+		return matchViewportData(dataConfig, sizeType, strategy, this.viewport.sizeTypes, this.viewport.sizeTypeMap);
+	}
+
+	/** Get data for match as observable. */
+	get$<T>(dataConfig: ViewportDataConfig<T>, strategy?: ViewportDataMatchStrategy, throttle = true): Observable<T | undefined> {
+		return (throttle ? this.viewport.sizeType$ : this.viewport.sizeTypeSnap$).pipe(
+			map(sizeType => this.get<T>(dataConfig, strategy, sizeType)),
+			distinctUntilChanged(),
+		);
+	}
+
+	/** Generate rules based on strategies for data. */
+	generateRules<T>(
+		dataConfig: ViewportDataConfig<T>,
+		strategy: ViewportDataMatchStrategy = this.config.defaultDataMatchStrategy,
+	): ViewportDataRule<T>[] {
+		return generateViewportRulesRangeFromDataMatcher(
+			dataConfig,
+			strategy,
+			this.viewport.sizeTypes,
+			this.viewport.sizeTypeMap
+		);
+	}
+
+}