Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
dist: trusty
sudo: required
language: node_js
node_js:
- "node"
node_js: "14"
os:
- linux
script:
Expand Down
22 changes: 5 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ Cloudinary
==========
The official [Cloudinary](https://cloudinary.com) SDK for Angular.

Cloudinary's AngularJS (AKA Angular1) SDK can be found [here](https://github.com/cloudinary/cloudinary_angular/tree/angular-1.x)
We maintain difference branches for different versions. Cloudinary's latest Angular SDK can be found [here](https://github.com/cloudinary/cloudinary_angular/tree/angular-5.x)

[Cloudinary](https://cloudinary.com) is a cloud service that offers a solution to a web application's entire image management pipeline.

Expand All @@ -14,15 +14,8 @@ Cloudinary offers comprehensive APIs and administration capabilities and is easy
Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.

For Angular, Cloudinary provides an SDK for simplifying the integration even further.
The SDK serves as a layer on top of one of Cloudinary's Javascript libraries:
The SDK serves as a layer on top of one of [Cloudinary's Javascript library](https://github.com/cloudinary/cloudinary_js).

| Github Repository | Package name | Description |
|-------------------|--------------|-------------|
| [pkg-cloudinary-core](https://github.com/cloudinary/pkg-cloudinary-core) | cloudinary-core | Core Cloudinary Library. Use this if you do not intend to use jQuery |
| [pkg-cloudinary-jquery](https://github.com/cloudinary/pkg-cloudinary-jquery) | cloudinary-jquery | Core Library + jQuery plugin |
| [pkg-cloudinary-jquery-file-upload](https://github.com/cloudinary/pkg-cloudinary-jquery-file-upload) | cloudinary-jquery-file-upload | Core Library + jQuery plugin + Blueimp File Upload adapter |

<a href="https://cloudinary.com/signup" style="background-color:#ff7829; border:1px solid; color: white; border-color: black; padding: 8px; text-decoration: none; box-shadow: 1px 1px 3px #224488; width: 500px">Signup for free</a>

## Live examples ##################################################################
Start experimenting right away with one of these live examples:
Expand All @@ -36,19 +29,14 @@ Install the SDK version that supports the Angular version you are using:

* For Angular 2, use `2.x`
* For Angular 4, use `4.x`
* For Angular 5-10, use `5.x`
* For Angular 5-11, use `5.x`

For example:

```shell
npm install @cloudinary/angular-5.x --save
npm install @cloudinary/angular-5.x cloudinary-core --save
```

## Setup ######################################################################

Follow the setup procedure described in the [Cloudinary jQuery plugin](https://github.com/cloudinary/cloudinary_js#setup) setup procedure.
Refer to the sample projects in this repository for usage examples.

## Usage ######################################################################

The module provides three types of directives:
Expand All @@ -64,7 +52,7 @@ Further video manipulation and delivery capabilities see listed in [this referen
Note that the attribute names in the docs are using snake_case, however this SDK supports both snake_case and kebab-case for attribute names,
e.g. both `fetch_format: 'auto'` and `'fetch-format': 'auto'` are eventually translated to `f_auto`.

### Cloudinary module configuration ##################################
### Cloudinary module configuration and setup ##################################
This SDK is based on the Cloudinary JS module, however the two are decoupled, i.e. this module's `Cloudinary` is a configurable service
to which you provide your choice of our JS module.

Expand Down
4 changes: 2 additions & 2 deletions projects/angular-cld/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"name": "@cloudinary/angular-5.x",
"version": "1.3.4",
"peerDependencies": {
"@angular/common": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
"@angular/core": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0"
"@angular/common": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0",
"@angular/core": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
},
"devDependencies": {
"cloudinary-core": "^2.10.2",
Expand Down
46 changes: 46 additions & 0 deletions projects/angular-cld/src/lib/cloudinary-sdk-analytics.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { CloudinaryImage } from './cloudinary-image.component';
import { CloudinaryTransformationDirective } from './cloudinary-transformation.directive';
import {LazyLoadDirective } from './cloudinary-lazy-load.directive';
import { CloudinaryPlaceHolder } from'./cloudinary-placeholder.component';
import { SDKAnalyticsConstants } from './SDKAnalyticsConstants';
import { APP_VERSION } from './version';


describe('Tests for sdk versionID on image tag', () => {
describe('Config with urlAnalytics not set', () => {
Expand All @@ -17,6 +20,7 @@ describe('Tests for sdk versionID on image tag', () => {
spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
spyOn(localCloudinary, 'url').and.callThrough();
spyOn(localCloudinary, 'responsive').and.callThrough();

});
@Component({
template: `<cl-image responsive public-id="sample"></cl-image>`
Expand Down Expand Up @@ -50,9 +54,15 @@ describe('Tests for sdk versionID on image tag', () => {
{ cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true} as CloudinaryConfiguration);

beforeEach(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
spyOn(localCloudinary, 'url').and.callThrough();
});

afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});

@Component({
template: `<cl-image public-id="sample"></cl-image>`
})
Expand All @@ -62,6 +72,7 @@ describe('Tests for sdk versionID on image tag', () => {
let des: DebugElement; // the elements w/ the directive

beforeEach(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
fixture = TestBed.configureTestingModule({
declarations: [CloudinaryImage, TestComponent],
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
Expand All @@ -73,6 +84,10 @@ describe('Tests for sdk versionID on image tag', () => {
des = fixture.debugElement.query(By.directive(CloudinaryImage));
});

afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});

it('creates an img without a feature- resulting in 0', () => {
const img = des.children[0].nativeElement as HTMLImageElement;
expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/sample?_a=AKHZdAH0');
Expand All @@ -84,9 +99,16 @@ describe('Tests for sdk versionID on image tag', () => {
{ cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true} as CloudinaryConfiguration);

beforeEach(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
spyOn(localCloudinary, 'url').and.callThrough();
spyOn(SDKAnalyticsConstants, 'sdkSemver').and.returnValue('1.3.3');
});

afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});

@Component({
template: `<cl-image accessibility="darkmode" public-id="sample"></cl-image>`
})
Expand All @@ -96,6 +118,7 @@ describe('Tests for sdk versionID on image tag', () => {
let des: DebugElement; // the elements w/ the directive

beforeEach(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
fixture = TestBed.configureTestingModule({
declarations: [CloudinaryImage, TestComponent],
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
Expand All @@ -107,6 +130,10 @@ describe('Tests for sdk versionID on image tag', () => {
des = fixture.debugElement.query(By.directive(CloudinaryImage));
});

afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});

it('creates an img with feature accessibility D', () => {
const img = des.children[0].nativeElement as HTMLImageElement;
expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/e_tint:75:black/sample?_a=AKHZdAHD');
Expand All @@ -118,10 +145,16 @@ describe('Tests for sdk versionID on image tag', () => {
{ cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true } as CloudinaryConfiguration);

beforeEach(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
spyOn(localCloudinary, 'url').and.callThrough();
spyOn(localCloudinary, 'responsive').and.callThrough();
});

afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});

@Component({
template: `<cl-image responsive public-id="sample"></cl-image>`
})
Expand All @@ -131,6 +164,7 @@ describe('Tests for sdk versionID on image tag', () => {
let des: DebugElement; // the elements w/ the directive

beforeEach(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
fixture = TestBed.configureTestingModule({
declarations: [CloudinaryImage, TestComponent],
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
Expand All @@ -143,6 +177,10 @@ describe('Tests for sdk versionID on image tag', () => {
des = fixture.debugElement.query(By.directive(CloudinaryImage));
});

afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});

it('creates an img with feature responsive A', () => {
const img = des.children[0].nativeElement as HTMLImageElement;
expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/sample?_a=AKHZdAHA');
Expand All @@ -162,6 +200,7 @@ describe('Tests for sdk versionID on image tag', () => {
let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
{ cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true } as CloudinaryConfiguration);
beforeEach(fakeAsync(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
fixture = TestBed.configureTestingModule({
declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent, LazyLoadDirective, CloudinaryPlaceHolder],
providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
Expand All @@ -174,6 +213,9 @@ describe('Tests for sdk versionID on image tag', () => {
tick();
fixture.detectChanges();
}));
afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});
it('placeholder img should encode with B', async () => {
const placeholderimg = placeholder[0].children[0].nativeElement as HTMLImageElement;
expect(placeholderimg.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/e_blur:2000,f_auto,q_1/sample?_a=AKHZdAHB');
Expand All @@ -195,6 +237,7 @@ describe('Tests for sdk versionID on image tag', () => {
let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
{ cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true } as CloudinaryConfiguration);
beforeEach(fakeAsync(() => {
SDKAnalyticsConstants.sdkSemver = '1.3.3';
fixture = TestBed.configureTestingModule({
declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent, LazyLoadDirective, CloudinaryPlaceHolder],
providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
Expand All @@ -207,6 +250,9 @@ describe('Tests for sdk versionID on image tag', () => {
tick();
fixture.detectChanges();
}));
afterEach(() => {
SDKAnalyticsConstants.sdkSemver = APP_VERSION;
});
it('creates an img with feature lazy load C', async () => {
const wait = (ms) => new Promise(res => setTimeout(res, ms));
await wait(300);
Expand Down
9 changes: 5 additions & 4 deletions projects/angular-cld/src/lib/cloudinary.service.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe('Cloudinary service', () => {
});

it('updates the configuration', () => {

const newConfig: CloudinaryConfiguration = {
cloud_name: 'new-service-test'
};
Expand All @@ -48,14 +48,15 @@ describe('Cloudinary service', () => {
});

it('creates an image url', () => {
const publicId = 'image_public_id.jpg';
const options = {
const publicId = 'image_public_id.jpg';

const options = {
width: '100',
crop: 'fill',
responsive: true
};
expect(service.url(publicId, options)).toEqual(
'http://res.cloudinary.com/service-test/image/upload/c_fill,w_100/image_public_id.jpg');
'http://res.cloudinary.com/new-service-test/image/upload/c_fill,w_100/image_public_id.jpg');
});

describe('isJsonLikeString', () => {
Expand Down