feat: global ad banner (#346)

Author: DDonochVA

libs/blog/home/feature-home/src/lib/home-page/home-page.component.html

@@ -1,6 +1,3 @@
-@if (slides(); as slides) {
-  <al-banner-carousel [banners]="slides" [msPerSlide]="msPerSlide()!" />
-}
 <al-latest-articles />
 <al-articles-list />
 <al-partners [partnerList]="[hoaHireUs]" title="homePage.mainPartner" />

libs/blog/home/feature-home/src/lib/home-page/home-page.component.ts

@@ -1,21 +1,10 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { ArticlesListContainerComponent } from '@angular-love/blog/articles/feature-list';
 import { UiArticleCardComponent } from '@angular-love/blog/articles/ui-article-card';
 import { NewsletterComponent } from '@angular-love/blog/newsletter';
 import { PartnersComponent } from '@angular-love/blog/partners/ui-partners';
-import {
-  AdImageBanner,
-  AdImageBannerComponent,
-  AlBannerCarouselComponent,
-} from '@angular-love/blog/shared/ad-banner';
 import { CardComponent } from '@angular-love/blog/shared/ui-card';
 import { FeatureLatestArticlesComponent } from '@angular-love/feature-latest-articles';
 
@@ -33,8 +22,6 @@ import { hoaHireUs, partnersList } from './partners';
     FeatureLatestArticlesComponent,
     UiArticleCardComponent,
     ArticlesListContainerComponent,
-    AdImageBannerComponent,
-    AlBannerCarouselComponent,
   ],
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
@@ -43,22 +30,4 @@ import { hoaHireUs, partnersList } from './partners';
 export class HomePageComponent {
   protected readonly hoaHireUs = hoaHireUs;
   protected readonly partnersList = partnersList;
-  protected readonly sliderStore = inject(AdBannerStore);
-  protected readonly slides = computed<AdImageBanner[] | undefined>(() =>
-    this.sliderStore.slider()?.slides.map((slide) => ({
-      url: slide.url,
-      alt: slide.alt,
-      action: {
-        type: 'url',
-        url: slide.navigateTo,
-      },
-    })),
-  );
-  protected readonly msPerSlide = computed(
-    () => this.sliderStore.slider()?.slideDisplayTimeMs,
-  );
-
-  constructor() {
-    this.sliderStore.getData();
-  }
 }

libs/blog/shell/feature-shell-web/src/lib/root-shell.component.ts

@@ -5,26 +5,23 @@ import { Router, RouterOutlet } from '@angular/router';
 import { TranslocoService } from '@jsverse/transloco';
 import { startWith } from 'rxjs';
 
+import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { AlLocalizeService } from '@angular-love/blog/i18n/util';
 import {
   FooterComponent,
   HeaderComponent,
   LayoutComponent,
 } from '@angular-love/blog/layouts/ui-layouts';
 import { SearchComponent } from '@angular-love/blog/search/feature-search';
+import {
+  AdImageBanner,
+  AlBannerCarouselComponent,
+} from '@angular-love/blog/shared/ad-banner';
 
 @Component({
   selector: 'al-root-shell',
   template: `
     <div class="fixed top-0 z-10 w-full">
-      <!--top screen closable banner-->
-      <!--@if (adBannerVisible()) {
-        <al-ad-banner
-          class="block"
-          [data]="adBanner()"
-          (closed)="adBannerStore.onClose()"
-        />
-      }-->
       <al-header
         class="block w-full"
         [language]="language()"
@@ -34,6 +31,9 @@ import { SearchComponent } from '@angular-love/blog/search/feature-search';
       </al-header>
     </div>
     <al-layout class="mt-20" [ngClass]="{ 'mt-40': adBannerVisible() }">
+      @if (slides(); as slides) {
+        <al-banner-carousel [banners]="slides" [msPerSlide]="msPerSlide()!" />
+      }
       <router-outlet />
     </al-layout>
     <al-footer class="mt-auto block" />
@@ -46,9 +46,25 @@ import { SearchComponent } from '@angular-love/blog/search/feature-search';
     LayoutComponent,
     SearchComponent,
     NgClass,
+    AlBannerCarouselComponent,
   ],
 })
 export class RootShellComponent {
+  protected readonly sliderStore = inject(AdBannerStore);
+  protected readonly slides = computed<AdImageBanner[] | undefined>(() =>
+    this.sliderStore.slider()?.slides.map((slide) => ({
+      url: slide.url,
+      alt: slide.alt,
+      action: {
+        type: 'url',
+        url: slide.navigateTo,
+      },
+    })),
+  );
+  protected readonly msPerSlide = computed(
+    () => this.sliderStore.slider()?.slideDisplayTimeMs,
+  );
+
   readonly translocoService = inject(TranslocoService);
 
   // todo: temporary solution to keep in mind how banner influence the layout
@@ -79,5 +95,6 @@ export class RootShellComponent {
         ? viewport.setOffset([0, 160])
         : viewport.setOffset([0, 80]);
     });
+    this.sliderStore.getData();
   }
 }