@WidgetComponent

nm-asset-details-head

File

src/app/shared/widgets/buy/head-assetdetails/head-assetdetails.component.ts

Metadata

selector nm-asset-details-head
styleUrls head-assetdetails.component.scss
templateUrl ./head-assetdetails.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor(_widgetframeService: WidgetframeService)
Parameters :
Name Type Optional
_widgetframeService WidgetframeService no

Methods

Protected configureWidget
configureWidget(configuration: WidgetConfig)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig no
Returns : void
ngOnInit
ngOnInit()
Returns : void
setParam
setParam(uri: , key: , val: )
Parameters :
Name Optional
uri no
key no
val no
Returns : any

Properties

Public _id
_id:
Decorators : WidgetId
Public asset
asset: any[]
Type : any[]
Public assetHref
assetHref: string
Type : string
Public assetTitle
assetTitle:
Default value : new Subject<any>()
Decorators : WidgetInput
Public backgroundImage
backgroundImage: string
Type : string
Default value : ""
Public cols
cols: any[]
Type : any[]
Public configuration
configuration: WidgetConfig
Type : WidgetConfig
Decorators : WidgetConfiguration
Private gallery
gallery: ElementRef
Type : ElementRef
Decorators : ViewChild
Public header
header: any
Type : any
Public manufacturerImage
manufacturerImage: any
Type : any
Default value : ""
Public profiles
profiles: any[]
Type : any[]
Public reload
reload:
Default value : new Subject<any>()
Decorators : WidgetInput
Public selectedLocale
selectedLocale: string
Type : string
Public videoUrl
videoUrl: string
Type : string
Default value : ""
import {
  combineLatest as observableCombineLatest,
  Subject,
  Observable,
} from "rxjs";

import { map, mergeMap, distinctUntilChanged } from "rxjs/operators";
import { Component, ViewChild, ElementRef } from "@angular/core";
import {
  DomSanitizer,
  SafeStyle,
  SafeResourceUrl,
} from "@angular/platform-browser";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../widget.configuration";
import { UtilService } from "../../../components/util";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;
declare var jQuery: any;
declare var contextPath: string;

@WidgetComponent("nm-asset-details-head")
@Component({
  selector: "nm-asset-details-head",
  templateUrl: "./head-assetdetails.component.html",
  styleUrls: ["./head-assetdetails.component.scss"],
})
export class HeaderAssetDetailsWidgetComponent {
  public cols: any[];
  public header: any;
  public profiles: any[];
  public asset: any[];
  public manufacturerImage: any = "";
  public assetHref: string;
  public backgroundImage: string = "";
  public videoUrl: string = "";
  public selectedLocale: string;

  @ViewChild("gallery")
  private gallery: ElementRef;

  @WidgetId()
  public _id;

  @WidgetInput()
  public assetTitle = new Subject<any>();

  @WidgetInput()
  public reload = new Subject<any>();

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  constructor(private _widgetframeService: WidgetframeService) {
    this.header = {};
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    let headerHref = configuration._links["asset"]["href"];
    let exportProfilesHref = configuration._links["export-profiles"]["href"];

    let headerTemplate = uriTemplates(headerHref);
    let exportProfilesTemplate = uriTemplates(exportProfilesHref);

    observableCombineLatest(
      this.assetTitle.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (assetNo, reloadEvent) => assetNo
    )
      .pipe(
        map((number) => exportProfilesTemplate.fill({ asset: number })),
        mergeMap((href) => this._widgetframeService.getData(href)),
        map((data) => data["export-profiles"])
      )
      .subscribe((profiles) => {
        this.profiles = <any[]>profiles;
      });

    observableCombineLatest(
      this.assetTitle.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (assetNo, reloadEvent) => {
        this.selectedLocale = reloadEvent;
        return assetNo;
      }
    )
      .pipe(
        map((number) => headerTemplate.fill({ asset: number })),
        mergeMap((href) => this._widgetframeService.getData(href))
      )
      .subscribe(
        (data) => {
          this.header = data;
          this.asset = [data];
          if (this.header["file-size"]) {
            this.header["formatted-file-size"] = UtilService.byteToMBLocalized(
              this.header["file-size"],
              this.selectedLocale
            );
          }
        },
        (error) => {
          console.log(error);
        }
      );
  }
  //For width and height of video iframe
  setParam(uri, key, val) {
    return uri
      .replace(
        RegExp("([?&]" + key + "(?=[=&#]|$)[^#&]*|(?=#|$))"),
        "&" + key + "=" + encodeURIComponent(val)
      )
      .replace(/^([^?&]+)&/, "$1?");
  }

  ngOnInit() {}
}
<nm-widgetframe
  [header]="configuration.configuration['header']"
  [infoText]="configuration.configuration['infoText']"
  widgetId="{{ _id }}"
  infoPlacement="bottom"
>
  <div slot="title" class="nm-widgetframe__title">{{ header.title }}</div>
  {{ header?._links?.default?.href }}(
  <div slot="content" class="nm-widgetframe__content">
    <div class="gallery-single">
      <nm-gallery
        [assets]="asset"
        [thumbnailsEnabled]="false"
        [width]="'460px'"
        [height]="'460px'"
      >
      </nm-gallery>
    </div>

    <div class="info">
      <img
        *ngIf="manufacturerImage.length > 0"
        class="nm-manufacturerImage"
        src="{{ manufacturerImage }}"
      />
      <h3>{{ header.description }}</h3>
      <span *ngIf="header"
        >{{ header.type }}
        <span *ngIf="header.extension"> / {{ header.extension }}</span>
        <span *ngIf="header['formatted-file-size']">
          / {{ header["formatted-file-size"] }} MB
        </span>
        <span *ngIf="header">
          ({{ "asset-detail-description-original" | translate }})</span
        >
      </span>
      <br />

      <ul class="nm-featurelist" *ngIf="header.type === 'image'">
        <h5>{{ "asset-detail-link-header" | translate }}</h5>
        <li *ngFor="let profile of profiles">
          <a
            href="{{ profile.uri }}"
            target="_blank"
            title="{{ profile.description }}"
            >{{ profile.name }}</a
          >
        </li>
      </ul>

      <ul class="nm-featurelist" *ngIf="header.type !== 'image'">
        <li>
          <a href="{{ header?._links?.default?.href }}" target="_blank"
            >{{ "download" | translate }}
          </a>
        </li>
      </ul>

      <div class="nm-bottom">
        <button
          class="nm-add-to-card-button"
          mat-raised-button
          color="primary"
          *ngFor="let act of header._actions | iterable"
          [nm-action]="act.value"
          [action-name]="act.key"
          popover="{{
            'infotext.asset-search-button' | translate: { value: header.title }
          }}"
          placement="top"
        >
          <mat-icon>add_shopping_cart</mat-icon>
          {{ "addproducttocart" | translate }}
        </button>
      </div>
    </div>
  </div>
</nm-widgetframe>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""