feat(client): add carousel with autumn camp banners (banners stored o… (#319)

* feat(client): add carousel with autumn camp banners (banners stored on client side)

KAP-243

* feat: add link to autumn camp banners

Author: dokolyski

apps/blog/src/app/app.config.ts

@@ -9,20 +9,20 @@ import {
   provideExperimentalZonelessChangeDetection,
 } from '@angular/core';
 import { provideClientHydration } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import {
   IsActiveMatchOptions,
   provideRouter,
   Router,
   withComponentInputBinding,
-  withDisabledInitialNavigation,
   withInMemoryScrolling,
   withRouterConfig,
   withViewTransitions,
 } from '@angular/router';
+import { provideFastSVG } from '@push-based/ngx-fast-svg';
 
 import { provideI18n } from '@angular-love/blog/i18n/data-access';
 import { blogShellRoutes } from '@angular-love/blog/shell/feature';
-import { provideFastSVG } from '@push-based/ngx-fast-svg';
 
 import { environment } from '../environments/environment';
 
@@ -70,6 +70,7 @@ export const appConfig: ApplicationConfig = {
     provideFastSVG({
       url: (name: string) => `assets/icons/${name}.svg`,
     }),
+    provideAnimationsAsync(),
     environment.providers,
   ],
 };

apps/blog/src/assets/autumn-camp-images/1.png

@@ -2,3 +2,4 @@ export * from './lib/ad-banner/ad-banner.component';
 export * from './lib/ad-image-banner/ad-image-banner.component';
 export * from './lib/ad-image-banner/ad-image-banner-data.interface';
 export * from './lib/instances/al-indepth-banner.component';
+export * from './lib/instances/autumn-camp/al-autumn-camp-banner.component';

apps/blog/src/assets/autumn-camp-images/2.png

@@ -1,5 +1,5 @@
 export interface AdImageBanner {
   url: string;
   alt: string;
-  slug: string;
+  action: { type: 'slug'; slug: string } | { type: 'url'; url: string };
 }

apps/blog/src/assets/autumn-camp-images/3.png

@@ -19,8 +19,16 @@ export class AdImageBannerComponent {
   private readonly _localizeService = inject(AlLocalizeService);
 
   navigateFromBanner(): void {
-    this._router.navigate(
-      this._localizeService.localizePath(['/', this.banner()!.slug]),
-    );
+    const banner = this.banner();
+    switch (banner.action.type) {
+      case 'slug':
+        this._router.navigate(
+          this._localizeService.localizePath(['/', banner.action.slug]),
+        );
+        break;
+      case 'url':
+        window.location.href = banner.action.url;
+        break;
+    }
   }
 }

libs/blog/ad-banner/ui/src/index.ts

@@ -0,0 +1,98 @@
+import { animate, AnimationBuilder, style } from '@angular/animations';
+import {
+  afterNextRender,
+  DestroyRef,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { debounceTime, interval, tap } from 'rxjs';
+
+/**
+ * This directive creates an infinite slider from a collection of items (e.g. banners).
+ * @example
+ * ```html
+ * <div class="overflow-hidden">
+ *   <div class="flex">
+ *     <some-banner-component
+ *        *alInfiniteSlider="let banner of banners()"
+ *        class="flex-shrink-0 flex-grow-0 basis-full"
+ *        [banner]="banner"
+ *     />
+ *   </div>
+ * </div>
+ * ```
+ **/
+@Directive({
+  selector: '[alInfiniteSlider]',
+  standalone: true,
+})
+export class AlInfiniteSliderDirective {
+  readonly alInfiniteSliderOf = input.required<unknown[]>();
+  readonly msPerSlide = input<number>(7000);
+  readonly msPerAnimation = input<number>(1000);
+
+  private readonly _templateRef = inject(TemplateRef);
+  private readonly _viewContainerRef = inject(ViewContainerRef);
+  private readonly _builder = inject(AnimationBuilder);
+  private readonly _element = inject(ElementRef);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  constructor() {
+    this._initView();
+    this._startSlider();
+  }
+
+  private _initView() {
+    effect(() => {
+      this.alInfiniteSliderOf()?.forEach((item, index) => {
+        // Create a new embedded view for each item in the collection
+        this._viewContainerRef.createEmbeddedView(this._templateRef, {
+          $implicit: item, // Pass the current item as the context
+          index: index, // Pass the current index as part of the context
+        });
+      });
+    });
+  }
+
+  private _startSlider() {
+    afterNextRender(() => {
+      const animationPlayer = this._builder
+        .build([
+          style({ transform: `translateX(0%)` }),
+          animate(
+            `${this.msPerAnimation()}ms ease-in-out`,
+            style({ transform: `translateX(-100%)` }),
+          ),
+        ])
+        .create(this._element.nativeElement.parentElement);
+
+      interval(this.msPerSlide())
+        .pipe(
+          tap(() => animationPlayer.play()),
+          debounceTime(this.msPerSlide() / 2),
+          tap(() => {
+            // rearrange the slides so 1 | 2 | 3 becomes 2 | 3 | 1
+            this._moveFirstSlideAtTheEnd();
+            // reset the animation to compensate rearranging the slides
+            animationPlayer.reset();
+          }),
+          takeUntilDestroyed(this._destroyRef),
+        )
+        .subscribe();
+    });
+  }
+
+  private _moveFirstSlideAtTheEnd() {
+    // Detach the first view and append it to the end
+    this._viewContainerRef.move(
+      this._viewContainerRef.get(0)!,
+      this._viewContainerRef.length - 1,
+    );
+  }
+}

libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner-data.interface.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
+import { AdImageBanner } from '../ad-image-banner/ad-image-banner-data.interface';
 import { AdImageBannerComponent } from '../ad-image-banner/ad-image-banner.component';
 
 @Component({
@@ -8,13 +9,16 @@ import { AdImageBannerComponent } from '../ad-image-banner/ad-image-banner.compo
   imports: [AdImageBannerComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <al-ad-image-banner [banner]="banner()!" />
+    <al-ad-image-banner [banner]="banner()" />
   `,
 })
 export class AlIndepthBannerComponent {
-  protected readonly banner = signal({
+  protected readonly banner = signal<AdImageBanner>({
     url: 'assets/AL-AID-banner.png',
     alt: 'Banner - Two blogs join forces',
-    slug: 'angular-love-joins-forces-with-angular-in-depth-to-bring-you-the-best-angular-on-the-web',
+    action: {
+      type: 'slug',
+      slug: 'angular-love-joins-forces-with-angular-in-depth-to-bring-you-the-best-angular-on-the-web',
+    },
   });
 }

libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+import { AdImageBanner } from '../../ad-image-banner/ad-image-banner-data.interface';
+import { AdImageBannerComponent } from '../../ad-image-banner/ad-image-banner.component';
+import { AlInfiniteSliderDirective } from '../../infinite-slider-directive/al-infinite-slider.directive';
+
+import { AUTUMN_CAMP_BANNERS } from './autumn-camp-banners.const';
+
+@Component({
+  selector: 'al-autumn-camp-banner',
+  standalone: true,
+  imports: [AdImageBannerComponent, AlInfiniteSliderDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="overflow-hidden">
+      <div class="flex">
+        <al-ad-image-banner
+          *alInfiniteSlider="let banner of banners()"
+          class="flex-shrink-0 flex-grow-0 basis-full"
+          [banner]="banner"
+        ></al-ad-image-banner>
+      </div>
+    </div>
+  `,
+})
+export class AlAutumnCampBannerComponent {
+  protected readonly banners = signal<AdImageBanner[]>(AUTUMN_CAMP_BANNERS);
+}