This repository has been archived by the owner on Sep 23, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(cl-image): Better management of changes on component input
All changes on input are propagated to the imageUrl Support `format` input Add new image service to retrieve the cloudinary image urls
- Loading branch information
jboulay
committed
Oct 13, 2016
1 parent
1609381
commit 41bf4be
Showing
6 changed files
with
115 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,67 @@ | ||
| import { Component, Input, OnInit } from '@angular/core'; | ||
| import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; | ||
| import { CloudinaryOptions } from './cloudinary-options.class'; | ||
| import { CloudinaryTransforms } from './cloudinary-transforms.class'; | ||
| import { CloudinaryImageService } from './cloudinary-image.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'cl-image', | ||
| template: ` | ||
| <img [src]="imageUrl" [style.height.px]="height" [style.width.px]="width"> | ||
| <img [src]="imageUrl"> | ||
| ` | ||
| }) | ||
| export class CloudinaryImageComponent implements OnInit { | ||
| export class CloudinaryImageComponent implements OnInit, OnChanges { | ||
| imageUrl: string = ''; | ||
| transforms: CloudinaryTransforms = new CloudinaryTransforms(); | ||
|
|
||
| @Input('public-id') publicId: string; | ||
| @Input() options: CloudinaryOptions; | ||
| @Input() height: string; | ||
| @Input() width: string; | ||
| @Input() crop: string; | ||
| @Input() gravity: string; | ||
| @Input() x: string; | ||
| @Input() y: string; | ||
|
|
||
| constructor(private _imageService: CloudinaryImageService) { } | ||
|
|
||
| ngOnInit(): void { | ||
| if (!this.options) throw new Error('CloudinaryOptions are required for cl-image component'); | ||
| } | ||
|
|
||
| @Input('public-id') | ||
| set publicId(value: string) { | ||
| this.imageUrl = this.getImageUrl(value); | ||
| } | ||
|
|
||
| private getImageUrl(publicId: string): string { | ||
| let resourceUrl: string = ''; | ||
|
|
||
| if (publicId) { | ||
| resourceUrl = 'https://res.cloudinary.com/' + | ||
| this.options.cloud_name + '/' + | ||
| 'image/upload/' + | ||
| this.getTransformationForUrlSegment() + | ||
| publicId + '.jpg'; | ||
| ngOnChanges(changes: SimpleChanges): void { | ||
| if (this.publicId && this.options) { | ||
| this.imageUrl = this._imageService.getImageUrl(this.publicId, this.options, this.transforms); | ||
| }else { | ||
| this.imageUrl = ''; | ||
| } | ||
| return resourceUrl; | ||
| } | ||
|
|
||
| private getTransformationForUrlSegment(): string { | ||
| let transformSegment: string = ''; | ||
| @Input() | ||
| set format(value: string){ | ||
| this.transforms.format = value; | ||
| } | ||
|
|
||
| transformSegment += this.toPropertySegment(transformSegment, 'height', this.height); | ||
| transformSegment += this.toPropertySegment(transformSegment, 'width', this.width); | ||
| transformSegment += this.toPropertySegment(transformSegment, 'gravity', this.gravity); | ||
| transformSegment += this.toPropertySegment(transformSegment, 'crop', this.crop); | ||
| transformSegment += this.toPropertySegment(transformSegment, 'x', this.x); | ||
| transformSegment += this.toPropertySegment(transformSegment, 'y', this.y); | ||
| @Input() | ||
| set height(value: string) { | ||
| this.transforms.height = value; | ||
| } | ||
|
|
||
| if (transformSegment.length > 0) { | ||
| transformSegment += '/'; | ||
| } | ||
| @Input() | ||
| set width(value: string) { | ||
| this.transforms.width = value; | ||
| } | ||
|
|
||
| return transformSegment; | ||
| @Input() | ||
| set crop(value: string) { | ||
| this.transforms.crop = value; | ||
| } | ||
|
|
||
| private toPropertySegment(segment: string, name: string, value: any): string { | ||
| let newSegment: string = ''; | ||
| @Input() | ||
| set gravity(value: string) { | ||
| this.transforms.gravity = value; | ||
| } | ||
|
|
||
| if (name && value) { | ||
| if (segment.length > 0) { | ||
| newSegment += ','; | ||
| } | ||
| @Input() | ||
| set x(value: string) { | ||
| this.transforms.x = value; | ||
| } | ||
|
|
||
| newSegment += name.substring(0, 1).toLowerCase() + '_' + value; | ||
| } | ||
| return newSegment; | ||
| @Input() | ||
| set y(value: string) { | ||
| this.transforms.y = value; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import { CloudinaryOptions } from './cloudinary-options.class.ts'; | ||
| import { CloudinaryTransforms } from './cloudinary-transforms.class.ts'; | ||
|
|
||
| const CLOUDINARY_URL: string = 'https://res.cloudinary.com/'; | ||
|
|
||
| @Injectable() | ||
| export class CloudinaryImageService { | ||
|
|
||
| getImageUrl(publicId: string, options: CloudinaryOptions, transforms: CloudinaryTransforms): string { | ||
| return CLOUDINARY_URL + | ||
| options.cloud_name + '/' + | ||
| 'image/upload/' + | ||
| getTransformationForUrlSegment(transforms) + | ||
| publicId + '.' + (transforms.format || 'jpg'); | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
| function getTransformationForUrlSegment(transforms: CloudinaryTransforms): string { | ||
| let transformSegment: string = ''; | ||
|
|
||
| transformSegment += toPropertySegment(transformSegment, 'height', transforms.height); | ||
| transformSegment += toPropertySegment(transformSegment, 'width', transforms.width); | ||
| transformSegment += toPropertySegment(transformSegment, 'gravity', transforms.gravity); | ||
| transformSegment += toPropertySegment(transformSegment, 'crop', transforms.crop); | ||
| transformSegment += toPropertySegment(transformSegment, 'x', transforms.x); | ||
| transformSegment += toPropertySegment(transformSegment, 'y', transforms.y); | ||
|
|
||
| if (transformSegment.length > 0) { | ||
| transformSegment += '/'; | ||
| } | ||
|
|
||
| return transformSegment; | ||
| } | ||
|
|
||
| function toPropertySegment(segment: string, name: string, value: any): string { | ||
| let newSegment: string = ''; | ||
|
|
||
| if (name && value) { | ||
| if (segment.length > 0) { | ||
| newSegment += ','; | ||
| } | ||
|
|
||
| newSegment += name.substring(0, 1).toLowerCase() + '_' + value; | ||
| } | ||
| return newSegment; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export class CloudinaryTransforms { | ||
| format: string; | ||
| height: string; | ||
| width: string; | ||
| crop: string; | ||
| gravity: string; | ||
| x: string; | ||
| y: string; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters