feat(challenge 49): implement holdable directive for button press functionality

Author: truonghungit

apps/rxjs/49-hold-to-save-button/src/app/app.component.ts

@@ -1,24 +1,31 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { HoldableDirective } from './holdable.directive';
 
 @Component({
-  imports: [],
+  imports: [HoldableDirective],
   selector: 'app-root',
   template: `
     <main class="flex h-screen items-center justify-center">
       <div
         class="flex w-full max-w-screen-sm flex-col items-center gap-y-8 p-4">
         <button
-          class="rounded bg-indigo-600 px-4 py-2 font-bold text-white transition-colors ease-in-out hover:bg-indigo-700">
+          class="cursor-pointer rounded bg-indigo-600 px-4 py-2 font-bold text-white transition-colors ease-in-out hover:bg-indigo-700"
+          holdable
+          [duration]="2000"
+          (complete)="onSend()"
+          (progressUpdated)="progress.set($event)">
           Hold me
         </button>
 
-        <progress [value]="20" [max]="100"></progress>
+        <progress [value]="progress()" [max]="100"></progress>
       </div>
     </main>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
+  progress = signal(0);
+
   onSend() {
     console.log('Save it!');
   }

apps/rxjs/49-hold-to-save-button/src/app/holdable.directive.ts

@@ -0,0 +1,63 @@
+import {
+  Directive,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
+  OnInit,
+  output,
+} from '@angular/core';
+import {
+  filter,
+  fromEvent,
+  interval,
+  map,
+  merge,
+  Subscription,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs';
+
+@Directive({ selector: '[holdable]' })
+export class HoldableDirective implements OnInit, OnDestroy {
+  duration = input.required<number>();
+  complete = output<void>();
+  progressUpdated = output<number>();
+
+  private elementRef = inject(ElementRef);
+  private sub: Subscription | null = null;
+
+  ngOnInit() {
+    const element = this.elementRef.nativeElement as HTMLElement;
+    const resetEvents$ = merge(
+      fromEvent(element, 'mouseup'),
+      fromEvent(element, 'mouseleave'),
+    );
+
+    this.sub = fromEvent(element, 'mousedown')
+      .pipe(
+        switchMap(() => {
+          return interval(10).pipe(
+            takeUntil(resetEvents$),
+            map((value) => (value + 1) * 10),
+            tap((value) => {
+              const progress = Math.round((value / this.duration()) * 100);
+              this.progressUpdated.emit(progress);
+            }),
+            filter((value) => value >= this.duration()),
+            take(1),
+            tap(() => {
+              this.complete.emit();
+            }),
+          );
+        }),
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy() {
+    this.sub?.unsubscribe();
+  }
+}