feat: lecture-5 HW

src/app/app.module.ts

@@ -21,5 +21,6 @@ import {PopupHostModule} from './components/popup-host/popup-host.module';
         PopupHostModule,
     ],
     bootstrap: [AppComponent],
+    exports: [],
 })
 export class AppModule {}

src/app/pages/products-list/products-list.component.html

@@ -1,19 +1,19 @@
 <ng-template let-productsFromNgIf [ngIf]="getFilteredProducts" [ngIfElse]="loader">
     <!-- Раскомментировать div при выполнении ДЗ -->
-    <!-- <div appScrollWithLoading class="scroll-container" (loadData)="onLoad($event)"> -->
-    <!-- <ng-template [appDumpNgIf]="getFilteredProducts" let-productsFromNgIf> -->
-    <!-- {{productsFromNgIf}} -->
-    <app-card class="card" [product]="productsFromNgIf?.[0]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[1]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[2]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[3]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[4]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[0]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[1]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[2]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[3]"></app-card>
-    <app-card class="card" [product]="productsFromNgIf?.[4]"></app-card>
-    <!-- </div> -->
+    <div appScrollWithLoading class="scroll-container" (loadData)="onLoad($event)">
+        <!-- <ng-template [appDumpNgIf]="getFilteredProducts" let-productsFromNgIf> -->
+        <!-- {{productsFromNgIf}} -->
+        <app-card class="card" [product]="productsFromNgIf?.[0]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[1]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[2]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[3]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[4]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[0]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[1]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[2]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[3]"></app-card>
+        <app-card class="card" [product]="productsFromNgIf?.[4]"></app-card>
+    </div>
 </ng-template>
 
 <!-- <ng-template [ngIf]="!products"> -->

src/app/pages/products-list/products-list.component.ts

@@ -26,4 +26,9 @@ export class ProductsListComponent implements OnInit {
         // eslint-disable-next-line no-console
         console.log(event);
     }
+
+    onLoad(event: unknown) {
+        // eslint-disable-next-line no-console
+        console.log(event);
+    }
 }

src/app/pages/products-list/products-list.module.ts

@@ -1,13 +1,20 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {ScrollWithLoadModule} from 'src/app/shared/scroll-with-load/scroll-with-load.module';
 import {ProductsListComponent} from './products-list.component';
 import {CardModule} from './card/card.module';
 import {DumpNgIfModule} from '../../shared/dump-ng-if/dump-ng-if.module';
 
 @NgModule({
     declarations: [ProductsListComponent],
-    imports: [CommonModule, CardModule, DumpNgIfModule, MatProgressSpinnerModule],
+    imports: [
+        CommonModule,
+        CardModule,
+        DumpNgIfModule,
+        MatProgressSpinnerModule,
+        ScrollWithLoadModule,
+    ],
     exports: [ProductsListComponent],
 })
 export class ProductsListModule {}

src/app/shared/scroll-with-load/load-direction.ts

@@ -0,0 +1,4 @@
+export enum LoadDirection {
+    UP,
+    DOWN,
+}

src/app/shared/scroll-with-load/scroll-const.ts

@@ -0,0 +1 @@
+export const SCROLL_CONST = 100;

src/app/shared/scroll-with-load/scroll-with-load.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ScrollWithLoadingDirective} from './scroll-with-loading.directive';
+
+@NgModule({
+    declarations: [ScrollWithLoadingDirective],
+    imports: [CommonModule],
+    exports: [ScrollWithLoadingDirective],
+})
+export class ScrollWithLoadModule {}

src/app/shared/scroll-with-load/scroll-with-loading.directive.spec.ts

@@ -0,0 +1,9 @@
+import {ScrollWithLoadingDirective} from './scroll-with-loading.directive';
+
+describe('ScrollWithLoadingDirective', () => {
+    it('should create an instance', () => {
+        const directive = new ScrollWithLoadingDirective();
+
+        expect(directive).toBeTruthy();
+    });
+});

src/app/shared/scroll-with-load/scroll-with-loading.directive.ts

@@ -0,0 +1,39 @@
+import {Directive, Output, EventEmitter, HostListener} from '@angular/core';
+import {LoadDirection} from './load-direction';
+import {bottomLoadCondition} from './utils/bottom-load-condition';
+import {upLoadCondition} from './utils/up-load-condition';
+
+@Directive({
+    selector: '[appScrollWithLoading]',
+})
+export class ScrollWithLoadingDirective {
+    @Output() loadData = new EventEmitter<LoadDirection>();
+
+    private prevScrollTop = -1; // Значение требуется для сравнения, из него можно вычислить направление скролла.
+
+    @HostListener('scroll', ['$event.target']) scrollAction({
+        scrollHeight,
+        clientHeight,
+        scrollTop,
+    }: HTMLElement) {
+        const prevScrollTop = this.prevScrollTop; // Сохраняем предыдущее значение скролла
+
+        this.prevScrollTop = scrollTop; // Заменяем текущим значением скролла
+
+        const lowerScrollPosition = scrollHeight - clientHeight; // Нижнее значение на которое может быть промотан скролл. lowerScrollPosition + clientHeight = scrollHeight
+
+        const loadDown = bottomLoadCondition(scrollTop, lowerScrollPosition, prevScrollTop);
+
+        if (loadDown) {
+            this.loadData.emit(LoadDirection.DOWN);
+
+            return;
+        }
+
+        const loadUp = upLoadCondition(scrollTop, prevScrollTop);
+
+        if (loadUp) {
+            this.loadData.emit(LoadDirection.UP);
+        }
+    }
+}

src/app/shared/scroll-with-load/utils/bottom-load-condition.ts

@@ -0,0 +1,14 @@
+import {SCROLL_CONST} from '../scroll-const';
+
+export function bottomLoadCondition(
+    scrollTop: number,
+    lowerScrollPosition: number,
+    prevScrollTop: number,
+): boolean {
+    const nearBotttomBorder = lowerScrollPosition - scrollTop < SCROLL_CONST;
+    // true, когда до нижней границы останется меньше значения SCROLL_CONST;
+    const bottomScrollContinue = scrollTop > prevScrollTop;
+    // Проверяет направление промотки, и не даёт сработать если промотка идёт вверх.
+
+    return nearBotttomBorder && bottomScrollContinue;
+}

src/app/shared/scroll-with-load/utils/up-load-condition.ts

@@ -0,0 +1,10 @@
+import {SCROLL_CONST} from '../scroll-const';
+
+export function upLoadCondition(scrollTop: number, prevScrollTop: number): boolean {
+    const nearUpBorder = scrollTop < SCROLL_CONST;
+    // true, когда попадаем в диапазон 0 - SCROLL_CONST
+    const scrollUpContinue = scrollTop < prevScrollTop;
+    // проверяет направление, выбросит false если промотка направлена вниз
+
+    return nearUpBorder && scrollUpContinue;
+}