@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
69 lines • 12.7 kB
JavaScript
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { isNotNullable } from '@spartacus/core';
import { BehaviorSubject, combineLatest, of } from 'rxjs';
import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../current-product.service";
import * as i2 from "../../../shared/components/media/media.component";
import * as i3 from "../../../shared/components/carousel/carousel.component";
import * as i4 from "@angular/common";
export class ProductImagesComponent {
constructor(currentProductService) {
this.currentProductService = currentProductService;
this.mainMediaContainer = new BehaviorSubject(null);
this.product$ = this.currentProductService
.getProduct()
.pipe(filter(isNotNullable), distinctUntilChanged(), tap((p) => {
var _a;
this.mainMediaContainer.next(((_a = p.images) === null || _a === void 0 ? void 0 : _a.PRIMARY) ? p.images.PRIMARY : {});
}));
this.thumbs$ = this.product$.pipe(map((p) => this.createThumbs(p)));
this.mainImage$ = combineLatest([this.product$, this.mainMediaContainer]).pipe(map(([, container]) => container));
}
openImage(item) {
this.mainMediaContainer.next(item);
}
isActive(thumbnail) {
return this.mainMediaContainer.pipe(filter(Boolean), map((container) => {
return (container.zoom &&
container.zoom.url &&
thumbnail.zoom &&
thumbnail.zoom.url &&
container.zoom.url === thumbnail.zoom.url);
}));
}
/** find the index of the main media in the list of media */
getActive(thumbs) {
return this.mainMediaContainer.pipe(filter(Boolean), map((container) => {
const current = thumbs.find((t) => t.media &&
container.zoom &&
t.media.container &&
t.media.container.zoom &&
t.media.container.zoom.url === container.zoom.url);
return thumbs.indexOf(current);
}));
}
/**
* Return an array of CarouselItems for the product thumbnails.
* In case there are less then 2 thumbs, we return null.
*/
createThumbs(product) {
if (!product.images ||
!product.images.GALLERY ||
product.images.GALLERY.length < 2) {
return [];
}
return product.images.GALLERY.map((c) => of({ container: c }));
}
}
ProductImagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductImagesComponent, deps: [{ token: i1.CurrentProductService }], target: i0.ɵɵFactoryTarget.Component });
ProductImagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ProductImagesComponent, selector: "cx-product-images", ngImport: i0, template: "<ng-container *ngIf=\"mainImage$ | async as main\">\n <cx-media [container]=\"main\"></cx-media>\n</ng-container>\n\n<ng-container *ngIf=\"thumbs$ | async as thumbs\">\n <cx-carousel\n *ngIf=\"thumbs.length\"\n class=\"thumbs\"\n [items]=\"thumbs\"\n itemWidth=\"120px\"\n [hideIndicators]=\"false\"\n [template]=\"thumb\"\n ></cx-carousel>\n</ng-container>\n\n<ng-template #thumb let-item=\"item\">\n <cx-media\n [container]=\"item.container\"\n tabindex=\"0\"\n (focus)=\"openImage(item.container)\"\n [class.is-active]=\"isActive(item.container) | async\"\n format=\"product\"\n >\n </cx-media>\n</ng-template>\n", components: [{ type: i2.MediaComponent, selector: "cx-media", inputs: ["container", "format", "alt", "role", "loading"], outputs: ["loaded"] }, { type: i3.CarouselComponent, selector: "cx-carousel", inputs: ["title", "items", "template", "itemWidth", "hideIndicators", "indicatorIcon", "previousIcon", "nextIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductImagesComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-product-images',
templateUrl: './product-images.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i1.CurrentProductService }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1pbWFnZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9jbXMtY29tcG9uZW50cy9wcm9kdWN0L3Byb2R1Y3QtaW1hZ2VzL3Byb2R1Y3QtaW1hZ2VzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvY21zLWNvbXBvbmVudHMvcHJvZHVjdC9wcm9kdWN0LWltYWdlcy9wcm9kdWN0LWltYWdlcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ25FLE9BQU8sRUFBYyxhQUFhLEVBQVcsTUFBTSxpQkFBaUIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsZUFBZSxFQUFFLGFBQWEsRUFBYyxFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdEUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7OztBQVF4RSxNQUFNLE9BQU8sc0JBQXNCO0lBcUJqQyxZQUFzQixxQkFBNEM7UUFBNUMsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUF1QjtRQXBCeEQsdUJBQWtCLEdBQUcsSUFBSSxlQUFlLENBQU0sSUFBSSxDQUFDLENBQUM7UUFFcEQsYUFBUSxHQUF3QixJQUFJLENBQUMscUJBQXFCO2FBQ2pFLFVBQVUsRUFBRTthQUNaLElBQUksQ0FDSCxNQUFNLENBQUMsYUFBYSxDQUFDLEVBQ3JCLG9CQUFvQixFQUFFLEVBQ3RCLEdBQUcsQ0FBQyxDQUFDLENBQVUsRUFBRSxFQUFFOztZQUNqQixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLENBQUEsTUFBQSxDQUFDLENBQUMsTUFBTSwwQ0FBRSxPQUFPLEVBQUMs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IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEltYWdlR3JvdXAsIGlzTm90TnVsbGFibGUsIFByb2R1Y3QgfSBmcm9tICdAc3BhcnRhY3VzL2NvcmUnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0LCBjb21iaW5lTGF0ZXN0LCBPYnNlcnZhYmxlLCBvZiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZGlzdGluY3RVbnRpbENoYW5nZWQsIGZpbHRlciwgbWFwLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBDdXJyZW50UHJvZHVjdFNlcnZpY2UgfSBmcm9tICcuLi9jdXJyZW50LXByb2R1Y3Quc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N4LXByb2R1Y3QtaW1hZ2VzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Byb2R1Y3QtaW1hZ2VzLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFByb2R1Y3RJbWFnZXNDb21wb25lbnQge1xuICBwcm90ZWN0ZWQgbWFpbk1lZGlhQ29udGFpbmVyID0gbmV3IEJlaGF2aW9yU3ViamVjdDxhbnk+KG51bGwpO1xuXG4gIHByb3RlY3RlZCBwcm9kdWN0JDogT2JzZXJ2YWJsZTxQcm9kdWN0PiA9IHRoaXMuY3VycmVudFByb2R1Y3RTZXJ2aWNlXG4gICAgLmdldFByb2R1Y3QoKVxuICAgIC5waXBlKFxuICAgICAgZmlsdGVyKGlzTm90TnVsbGFibGUpLFxuICAgICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKSxcbiAgICAgIHRhcCgocDogUHJvZHVjdCkgPT4ge1xuICAgICAgICB0aGlzLm1haW5NZWRpYUNvbnRhaW5lci5uZXh0KHAuaW1hZ2VzPy5QUklNQVJZID8gcC5pbWFnZXMuUFJJTUFSWSA6IHt9KTtcbiAgICAgIH0pXG4gICAgKTtcblxuICB0aHVtYnMkOiBPYnNlcnZhYmxlPGFueVtdPiA9IHRoaXMucHJvZHVjdCQucGlwZShcbiAgICBtYXAoKHA6IFByb2R1Y3QpID0+IHRoaXMuY3JlYXRlVGh1bWJzKHApKVxuICApO1xuXG4gIG1haW5JbWFnZSQgPSBjb21iaW5lTGF0ZXN0KFt0aGlzLnByb2R1Y3QkLCB0aGlzLm1haW5NZWRpYUNvbnRhaW5lcl0pLnBpcGUoXG4gICAgbWFwKChbLCBjb250YWluZXJdKSA9PiBjb250YWluZXIpXG4gICk7XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGN1cnJlbnRQcm9kdWN0U2VydmljZTogQ3VycmVudFByb2R1Y3RTZXJ2aWNlKSB7fVxuXG4gIG9wZW5JbWFnZShpdGVtOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm1haW5NZWRpYUNvbnRhaW5lci5uZXh0KGl0ZW0pO1xuICB9XG5cbiAgaXNBY3RpdmUodGh1bWJuYWlsOiBJbWFnZUdyb3VwKTogT2JzZXJ2YWJsZTxib29sZWFuPiB7XG4gICAgcmV0dXJuIHRoaXMubWFpbk1lZGlhQ29udGFpbmVyLnBpcGUoXG4gICAgICBmaWx0ZXIoQm9vbGVhbiksXG4gICAgICBtYXAoKGNvbnRhaW5lcjogYW55KSA9PiB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgY29udGFpbmVyLnpvb20gJiZcbiAgICAgICAgICBjb250YWluZXIuem9vbS51cmwgJiZcbiAgICAgICAgICB0aHVtYm5haWwuem9vbSAmJlxuICAgICAgICAgIHRodW1ibmFpbC56b29tLnVybCAmJlxuICAgICAgICAgIGNvbnRhaW5lci56b29tLnVybCA9PT0gdGh1bWJuYWlsLnpvb20udXJsXG4gICAgICAgICk7XG4gICAgICB9KVxuICAgICk7XG4gIH1cblxuICAvKiogZmluZCB0aGUgaW5kZXggb2YgdGhlIG1haW4gbWVkaWEgaW4gdGhlIGxpc3Qgb2YgbWVkaWEgKi9cbiAgZ2V0QWN0aXZlKHRodW1iczogYW55W10pOiBPYnNlcnZhYmxlPG51bWJlcj4ge1xuICAgIHJldHVybiB0aGlzLm1haW5NZWRpYUNvbnRhaW5lci5waXBlKFxuICAgICAgZmlsdGVyKEJvb2xlYW4pLFxuICAgICAgbWFwKChjb250YWluZXI6IGFueSkgPT4ge1xuICAgICAgICBjb25zdCBjdXJyZW50ID0gdGh1bWJzLmZpbmQoXG4gICAgICAgICAgKHQpID0+XG4gICAgICAgICAgICB0Lm1lZGlhICYmXG4gICAgICAgICAgICBjb250YWluZXIuem9vbSAmJlxuICAgICAgICAgICAgdC5tZWRpYS5jb250YWluZXIgJiZcbiAgICAgICAgICAgIHQubWVkaWEuY29udGFpbmVyLnpvb20gJiZcbiAgICAgICAgICAgIHQubWVkaWEuY29udGFpbmVyLnpvb20udXJsID09PSBjb250YWluZXIuem9vbS51cmxcbiAgICAgICAgKTtcbiAgICAgICAgcmV0dXJuIHRodW1icy5pbmRleE9mKGN1cnJlbnQpO1xuICAgICAgfSlcbiAgICApO1xuICB9XG5cbiAgLyoqXG4gICAqIFJldHVybiBhbiBhcnJheSBvZiBDYXJvdXNlbEl0ZW1zIGZvciB0aGUgcHJvZHVjdCB0aHVtYm5haWxzLlxuICAgKiBJbiBjYXNlIHRoZXJlIGFyZSBsZXNzIHRoZW4gMiB0aHVtYnMsIHdlIHJldHVybiBudWxsLlxuICAgKi9cbiAgcHJpdmF0ZSBjcmVhdGVUaHVtYnMocHJvZHVjdDogUHJvZHVjdCk6IE9ic2VydmFibGU8YW55PltdIHtcbiAgICBpZiAoXG4gICAgICAhcHJvZHVjdC5pbWFnZXMgfHxcbiAgICAgICFwcm9kdWN0LmltYWdlcy5HQUxMRVJZIHx8XG4gICAgICBwcm9kdWN0LmltYWdlcy5HQUxMRVJZLmxlbmd0aCA8IDJcbiAgICApIHtcbiAgICAgIHJldHVybiBbXTtcbiAgICB9XG5cbiAgICByZXR1cm4gKDxhbnlbXT5wcm9kdWN0LmltYWdlcy5HQUxMRVJZKS5tYXAoKGMpID0+IG9mKHsgY29udGFpbmVyOiBjIH0pKTtcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cIm1haW5JbWFnZSQgfCBhc3luYyBhcyBtYWluXCI+XG4gIDxjeC1tZWRpYSBbY29udGFpbmVyXT1cIm1haW5cIj48L2N4LW1lZGlhPlxuPC9uZy1jb250YWluZXI+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJ0aHVtYnMkIHwgYXN5bmMgYXMgdGh1bWJzXCI+XG4gIDxjeC1jYXJvdXNlbFxuICAgICpuZ0lmPVwidGh1bWJzLmxlbmd0aFwiXG4gICAgY2xhc3M9XCJ0aHVtYnNcIlxuICAgIFtpdGVtc109XCJ0aHVtYnNcIlxuICAgIGl0ZW1XaWR0aD1cIjEyMHB4XCJcbiAgICBbaGlkZUluZGljYXRvcnNdPVwiZmFsc2VcIlxuICAgIFt0ZW1wbGF0ZV09XCJ0aHVtYlwiXG4gID48L2N4LWNhcm91c2VsPlxuPC9uZy1jb250YWluZXI+XG5cbjxuZy10ZW1wbGF0ZSAjdGh1bWIgbGV0LWl0ZW09XCJpdGVtXCI+XG4gIDxjeC1tZWRpYVxuICAgIFtjb250YWluZXJdPVwiaXRlbS5jb250YWluZXJcIlxuICAgIHRhYmluZGV4PVwiMFwiXG4gICAgKGZvY3VzKT1cIm9wZW5JbWFnZShpdGVtLmNvbnRhaW5lcilcIlxuICAgIFtjbGFzcy5pcy1hY3RpdmVdPVwiaXNBY3RpdmUoaXRlbS5jb250YWluZXIpIHwgYXN5bmNcIlxuICAgIGZvcm1hdD1cInByb2R1Y3RcIlxuICA+XG4gIDwvY3gtbWVkaWE+XG48L25nLXRlbXBsYXRlPlxuIl19