angular/projects/angular-library/src/lib/cloudinary-image.component.ts

import {Component, OnInit, Input, ElementRef, Renderer2} from '@angular/core';
import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
import {
  HtmlLayer,
  plugins
} from '../../../../../html/dist';

/**
 * @mixin AngularSDK
 * @description This is our Angular SDK. The objective of this library is to render images
 * as is or with our plugins
 *
 * @example
 * <caption>
 *  Please note that the order of the plugins is important. See home for more details.
 * </caption>
 * // In your app.module.ts inject the library
 * import { AngularLibraryModule} from '@cloudinary/angular';
 *
 * imports: [
 *   ...,
 *   AngularLibraryModule,
 * ],
 *
 * // In your component.ts use `@cloudinary/base` to generate your transformations
 * // Import the plugins you wish to use
 *
 * import {CloudinaryImage} from "@cloudinary/base/assets/CloudinaryImage";
 * import {
 *  CldImg,
 *  accessibility,
 *  responsive,
 *  lazyload,
 *  placeholder
 * } from '@cloudinary/angular';
 *
 * ngOnInit() {
 *   this.img = new CloudinaryImage().setConfig({
 *       cloud: {
 *         cloudName: 'demo'
 *       }
 *     })
 *     .setPublicID('sample');
 *
 *   this.plugins = [lazyload(), placeholder()]
 * }
 *
 * // In your view add the component with your transformation
 * <cld-img [transformation]="this.img" [plugins]="this.plugins"></cld-img>
 */

/**
 * @memberOf AngularSDK
 * @type {Component}
 * @description The Cloudinary image component
 * @prop {CloudinaryImage} transformation Generated by @cloudinary/base
 * @prop {plugins} plugins Advanced image component plugins accessibility(), responsive(), lazyload(), placeholder()
 */
@Component({
  selector: 'cld-img',
  template: `
    <img />
  `,
  styleUrls: ['./cloudinary-image.component.css']
})
export class CloudinaryImageComponent implements OnInit {
  @Input('transformation') transformation: CloudinaryImage;
  @Input('plugins') plugins: plugins;
  htmlLayerInstance: HtmlLayer;
  constructor(private el: ElementRef) { }

  /**
   * On init creates a new HTMLLayer instance and initialises with ref to img element,
   * user generated cloudinaryImage and the plugins to be used
   */
  ngOnInit() {
    this.htmlLayerInstance = new HtmlLayer(this.el.nativeElement.children[0], this.transformation, this.plugins);
  }

  /**
   * On update we cancel running plugins and update image instance with the state of user
   * cloudinaryImage and the state of plugins
   */
  ngOnChanges() {
    if(this.htmlLayerInstance){
      this.htmlLayerInstance.cancelCurrentlyRunningPlugins();
      this.htmlLayerInstance.update(this.transformation, this.plugins)
    }
  }

  /**
   * On destroy we cancel the currently running plugins
   */
  ngOnDestroy() {
    // safely cancel running events on destroy
    this.htmlLayerInstance.cancelCurrentlyRunningPlugins()
  }
}