fs-spartacus-view-components documentation
  1. Components
  2. TeaserComponent

File

src/components/teaser/teaser.component.ts

Description

This component displays teasers.

Metadata

selector fs-teaser
styleUrls ./teaser.component.scss
templateUrl ./teaser.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(componentData: CmsComponentData<TeaserComponentData>)
Defined in src/components/teaser/teaser.component.ts:20
Parameters :
Name Type Optional
componentData CmsComponentData<TeaserComponentData> No

Inputs

data$
Type : CmsComponentData<TeaserComponentData>
Defined in src/components/teaser/teaser.component.ts:20

Methods

getActiveTextStyleClasses
getActiveTextStyleClasses(overlayData: Partial<TextData>)
Defined in src/components/teaser/teaser.component.ts:46
Parameters :
Name Type Optional
overlayData Partial<TextData> No
Returns : object | undefined
getOverlayStyles
getOverlayStyles(overlayData)
Defined in src/components/teaser/teaser.component.ts:26
Parameters :
Name Optional
overlayData No
Returns : any
getViewBoxDimension
getViewBoxDimension(overlayData: Partial<OverlayDimension>)
Defined in src/components/teaser/teaser.component.ts:56
Parameters :
Name Type Optional
overlayData Partial<OverlayDimension> No
Returns : string

Properties

Public componentData
Type : CmsComponentData<TeaserComponentData>
Defined in src/components/teaser/teaser.component.ts:22
 
import { Component, Input } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';

import { MediaData, OverlayDimension, OverlayPosition, TeaserComponentData, TextData } from '../../converter/teaser/fs-teaser.model';

/**
 * This component displays teasers.
 *
 * @export
 * @class TeaserComponent
 */
@Component({
    selector: 'fs-teaser',
    templateUrl: './teaser.component.html',
    styleUrls: ['./teaser.component.scss'],
    standalone: false
})
export class TeaserComponent {
  @Input()
  data$: CmsComponentData<TeaserComponentData>;

  constructor(public componentData: CmsComponentData<TeaserComponentData>) {
    this.data$ = componentData;
  }

  getOverlayStyles(overlayData: OverlayPosition & OverlayDimension & Partial<TextData> & Partial<MediaData>) {
    const {
      fontSize,
      value,
      resolution,
      resolutions,
      altText,
      mime,
      widthRatio,
      heightRatio,
      width,
      height,
      ...knownCssProperties
    } = overlayData;
    const additionalSvgStyles = { fill: 'currentColor' };
    const additionalStyles = { width: widthRatio, height: heightRatio };
    const overlayStyles = Object.assign({}, knownCssProperties, additionalStyles, additionalSvgStyles);
    return overlayStyles;
  }

  getActiveTextStyleClasses(overlayData: Partial<TextData>): object | undefined {
    if (overlayData != null) {
      return {
        'small-font': overlayData.fontSize === 'small',
        'medium-font': overlayData.fontSize === 'medium',
        'big-font': overlayData.fontSize === 'big',
      };
    }
  }

  getViewBoxDimension(overlayData: Partial<OverlayDimension>): string {
    return `0 0 ${overlayData.width ? overlayData.width : 100} ${overlayData.height ? overlayData.height : 100}`;
  }
}

<ng-container *ngIf="data$ != null">
  <ng-container *ngIf="data$.data$ | async as data">
    <div class="fs-teaser-container" [attr.data-preview-id]="data.previewId">
      <ng-container *ngTemplateOutlet="data.href ? clickableTeaser : teaser; context: { data: data }"></ng-container>
    </div>
  </ng-container>
</ng-container>

<ng-template #clickableTeaser let-data="data">
  <a [href]="data.href">
    <ng-container *ngTemplateOutlet="teaser; context: { data: data }"></ng-container>
  </a>
</ng-template>

<ng-template #teaser let-data="data">
  <ng-container *ngIf="data && data.media">
    <img class="teaser-background-image" [src]="data.media.url" [alt]="data.media.altText" />
    <ng-container *ngTemplateOutlet="overlayImages; context: { data: data }"></ng-container>
    <ng-container *ngTemplateOutlet="overlayTexts; context: { data: data }"></ng-container>
    <ng-container *ngTemplateOutlet="overlayLinks; context: { data: data }"></ng-container>
  </ng-container>
</ng-template>

<ng-template #overlayImages let-data="data">
  <ng-container *ngIf="data.overlays != null && data.overlays.images != null && data.overlays.images.length > 0">
    <ng-container *ngFor="let image of data.overlays.images">
      <img [ngStyle]="getOverlayStyles(image)" class="overlay-image" [src]="image.url" [alt]="image.altText" />
    </ng-container>
  </ng-container>
</ng-template>

<ng-template #overlayTexts let-data="data">
  <ng-container *ngIf="data.overlays != null && data.overlays.texts != null && data.overlays.texts.length > 0">
    <ng-container *ngFor="let text of data.overlays.texts">
      <svg
        [ngStyle]="getOverlayStyles(text)"
        [ngClass]="getActiveTextStyleClasses(text)"
        class="overlay-text"
        [attr.width]="text.width"
        [attr.height]="text.height"
        [attr.viewBox]="getViewBoxDimension(text)"
        preserveAspectRatio="xMinYMin meet"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns:xhtml="http://www.w3.org/1999/xhtml"
      >
        <style>
          .text {
            font-size: inherit;
            word-break: break-word;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
        <foreignObject x="0" y="0" [attr.width]="text.width" [attr.height]="text.height">
          <xhtml:p class="text">{{ text.value }}</xhtml:p>
        </foreignObject>
      </svg>
    </ng-container>
  </ng-container>
</ng-template>

<ng-template #overlayLinks let-data="data">
  <ng-container *ngIf="data.overlays != null && data.overlays.links != null && data.overlays.links.length > 0">
    <ng-container *ngFor="let link of data.overlays.links">
      <a
        *ngIf="link && (link.href || link.product)"
        [ngStyle]="getOverlayStyles(link)"
        role="link"
        [routerLink]="link.product ? (link.product | async | cxProductUrl) : link.href"
        class="overlay-link"
        [attr.title]="link.tooltip"
      >
      </a>
    </ng-container>
  </ng-container>
</ng-template>

./teaser.component.scss 

.fs-teaser-container {
  display: block;
  position: relative;
  overflow: hidden;
}

.teaser-background-image {
  width: 100%;
}

.overlay-image {
  position: absolute;
  height: unset !important;
}

.overlay-text {
  position: absolute;
}

.overlay-link {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
}

.small-font {
  font-size: 0.9em;
}

.medium-font {
  font-size: 1.5em;
}

.big-font {
  font-size: 2.5em;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""