From c9c959ce76f7fa7d9f7daa63e642890d7b321da7 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Mon, 15 Jul 2024 00:05:58 +0300
Subject: [PATCH] feat: started work with directive

---
 .../components/reader/lazyscroll.directive.ts | 19 +++++++++++++++++++
 .../components/reader/reader.component.html   |  1 +
 .../app/components/reader/reader.component.ts | 13 +++++++------
 3 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 apps/NwaifuAnime/src/app/components/reader/lazyscroll.directive.ts

diff --git a/apps/NwaifuAnime/src/app/components/reader/lazyscroll.directive.ts b/apps/NwaifuAnime/src/app/components/reader/lazyscroll.directive.ts
new file mode 100644
index 0000000..09fb31c
--- /dev/null
+++ b/apps/NwaifuAnime/src/app/components/reader/lazyscroll.directive.ts
@@ -0,0 +1,19 @@
+import { Directive, ElementRef } from "@angular/core";
+
+@Directive({
+  selector: "[appLazyLoad]",
+  standalone: true,
+})
+export class LazyLoadDirective {
+  constructor({ nativeElement }: ElementRef) {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        console.log(entries);
+      },
+      {
+        rootMargin: "1000px",
+      },
+    );
+    observer.observe(nativeElement);
+  }
+}
diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.html b/apps/NwaifuAnime/src/app/components/reader/reader.component.html
index 7e14264..4226a99 100644
--- a/apps/NwaifuAnime/src/app/components/reader/reader.component.html
+++ b/apps/NwaifuAnime/src/app/components/reader/reader.component.html
@@ -21,6 +21,7 @@
         }
       }
     </div>
+    <div appLazyLoad></div>
     <div class="flex items-center justify-center space-x-4 my-10">
       <button (click)="prevPage()" class="p-3 text-white bg-slate-600 w-[100px] rounded-lg">
         ←
diff --git a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts b/apps/NwaifuAnime/src/app/components/reader/reader.component.ts
index c66db08..64eb657 100644
--- a/apps/NwaifuAnime/src/app/components/reader/reader.component.ts
+++ b/apps/NwaifuAnime/src/app/components/reader/reader.component.ts
@@ -15,6 +15,7 @@ import { Chapter, Page } from "../../services/parsers/rulib/rulib.chapter.dto";
 import { IRulibChapter } from "../../services/parsers/rulib/rulib.chapters.dto";
 import { SearchService } from "../../services/search.service";
 import { ScaleImageComponent } from "../scale-image/scale-image.component";
+import { LazyLoadDirective } from "./lazyscroll.directive";
 import { CachedPage, CachedPages } from "./reader.dto";
 
 @Component({
@@ -22,7 +23,7 @@ import { CachedPage, CachedPages } from "./reader.dto";
   templateUrl: "./reader.component.html",
   styleUrls: ["./reader.component.less"],
   standalone: true,
-  imports: [CommonModule, ScaleImageComponent, RouterLink],
+  imports: [CommonModule, ScaleImageComponent, RouterLink, LazyLoadDirective],
 })
 export class ReaderComponent implements AfterViewInit, OnDestroy {
   //FIXME: Scrolling to top when manhwa
@@ -79,11 +80,11 @@ export class ReaderComponent implements AfterViewInit, OnDestroy {
         this.router.navigate(["/"]);
       }
     });
-    this.isManhwa$.pipe(takeUntil(this.destroy$)).subscribe((isManhwa) => {
-      this.isManhwa = isManhwa;
-      if (isManhwa) this.initManhwaScroll();
-      else this.noManhwaScroll();
-    });
+    // this.isManhwa$.pipe(takeUntil(this.destroy$)).subscribe((isManhwa) => {
+    //   this.isManhwa = isManhwa;
+    //   if (isManhwa) this.initManhwaScroll();
+    //   else this.noManhwaScroll();
+    // });
   }
 
   private handleScrollManhwa(event: Event) {