Skip to content

Commit d1568eb

Browse files
pawelphilipczyk-cloudinarypawelphilipczyk-cloudinary
authored
Merge pull request #192 from cloudinary/angular-playground
feat: add angular playground
2 parents 87e5bd8 + e01e8e3 commit d1568eb

File tree

19 files changed

+671
-0
lines changed

19 files changed

+671
-0
lines changed

‎packages/angular/playground/.gitignore‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
speed-measure-plugin*.json
16+
17+
# IDEs and editors
18+
/.idea
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
# IDE - VSCode
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
# misc
35+
/.sass-cache
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
npm-debug.log
40+
yarn-error.log
41+
testem.log
42+
/typings
43+
44+
# System Files
45+
.DS_Store
46+
Thumbs.db

‎packages/angular/playground/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Playground
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.3.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8+
9+
## Further help
10+
11+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

‎packages/angular/playground/angular.json‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"playground": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist/playground",
17+
"index": "src/index.html",
18+
"main": "src/main.ts",
19+
"polyfills": "src/polyfills.ts",
20+
"tsConfig": "tsconfig.app.json",
21+
"aot": true,
22+
"assets": [
23+
"src/favicon.ico",
24+
"src/assets"
25+
],
26+
"styles": [
27+
"src/styles.css"
28+
],
29+
"scripts": []
30+
},
31+
"configurations": {
32+
"production": {
33+
"fileReplacements": [
34+
{
35+
"replace": "src/environments/environment.ts",
36+
"with": "src/environments/environment.prod.ts"
37+
}
38+
],
39+
"optimization": true,
40+
"outputHashing": "all",
41+
"sourceMap": false,
42+
"extractCss": true,
43+
"namedChunks": false,
44+
"extractLicenses": true,
45+
"vendorChunk": false,
46+
"buildOptimizer": true,
47+
"budgets": [
48+
{
49+
"type": "initial",
50+
"maximumWarning": "2mb",
51+
"maximumError": "5mb"
52+
},
53+
{
54+
"type": "anyComponentStyle",
55+
"maximumWarning": "6kb",
56+
"maximumError": "10kb"
57+
}
58+
]
59+
}
60+
}
61+
},
62+
"serve": {
63+
"builder": "@angular-devkit/build-angular:dev-server",
64+
"options": {
65+
"browserTarget": "playground:build"
66+
},
67+
"configurations": {
68+
"production": {
69+
"browserTarget": "playground:build:production"
70+
}
71+
}
72+
},
73+
"extract-i18n": {
74+
"builder": "@angular-devkit/build-angular:extract-i18n",
75+
"options": {
76+
"browserTarget": "playground:build"
77+
}
78+
},
79+
"lint": {
80+
"builder": "@angular-devkit/build-angular:tslint",
81+
"options": {
82+
"tsConfig": [
83+
"tsconfig.app.json",
84+
"tsconfig.spec.json",
85+
"e2e/tsconfig.json"
86+
],
87+
"exclude": [
88+
"**/node_modules/**"
89+
]
90+
}
91+
}
92+
}
93+
}},
94+
"defaultProject": "playground"
95+
}

‎packages/angular/playground/package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "cloudinary-angular-playground",
3+
"version": "0.1.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve"
7+
},
8+
"private": true,
9+
"dependencies": {
10+
"@angular/animations": "~10.2.4",
11+
"@angular/common": "~10.2.4",
12+
"@angular/compiler": "~10.2.4",
13+
"@angular/core": "~10.2.4",
14+
"@angular/forms": "~10.2.4",
15+
"@angular/platform-browser": "~10.2.4",
16+
"@angular/platform-browser-dynamic": "~10.2.4",
17+
"@angular/router": "~10.2.4",
18+
"@cloudinary/url-gen": "~1.8.7",
19+
"rxjs": "~6.6.0",
20+
"tslib": "^2.0.0",
21+
"zone.js": "~0.10.2"
22+
},
23+
"devDependencies": {
24+
"@angular-devkit/build-angular": "~0.1002.3",
25+
"@angular/cli": "~10.2.3",
26+
"@angular/compiler-cli": "~10.2.4",
27+
"@types/node": "^12.11.1",
28+
"@types/jasmine": "~3.5.0",
29+
"@types/jasminewd2": "~2.0.3",
30+
"codelyzer": "^6.0.0",
31+
"protractor": "~7.0.0",
32+
"ts-node": "~8.3.0",
33+
"tslint": "~6.1.0",
34+
"typescript": "~4.0.2"
35+
}
36+
}

‎packages/angular/playground/src/app/app.component.css‎

Whitespace-only changes.

‎packages/angular/playground/src/app/app.component.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
2+
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
3+
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
4+
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
5+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
6+
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
7+
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
8+
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
9+
10+
<style>
11+
:host {
12+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
13+
font-size: 14px;
14+
color: #333;
15+
box-sizing: border-box;
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
18+
}
19+
20+
.content {
21+
display: flex;
22+
margin: 82px auto 32px;
23+
padding: 0 16px;
24+
max-width: 960px;
25+
flex-direction: column;
26+
align-items: center;
27+
}
28+
29+
.card-container {
30+
display: flex;
31+
flex-wrap: wrap;
32+
justify-content: center;
33+
margin-top: 16px;
34+
}
35+
36+
.card {
37+
border-radius: 4px;
38+
border: 1px solid #eee;
39+
background-color: #fafafa;
40+
height: 40px;
41+
width: 200px;
42+
margin: 0 8px 16px;
43+
padding: 16px;
44+
display: flex;
45+
flex-direction: row;
46+
justify-content: center;
47+
align-items: center;
48+
transition: all 0.2s ease-in-out;
49+
line-height: 24px;
50+
}
51+
52+
.card-container .card:not(:last-child) {
53+
margin-right: 0;
54+
}
55+
56+
.card.card-small {
57+
height: 16px;
58+
width: 168px;
59+
}
60+
61+
.card-container .card:not(.highlight-card) {
62+
cursor: pointer;
63+
}
64+
65+
.card-container .card:not(.highlight-card):hover {
66+
transform: translateY(-3px);
67+
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
68+
}
69+
70+
.card.highlight-card {
71+
background-color: #1976d2;
72+
color: white;
73+
font-weight: 600;
74+
border: none;
75+
width: auto;
76+
min-width: 30%;
77+
position: relative;
78+
}
79+
80+
.card.card.highlight-card span {
81+
margin-left: 60px;
82+
}
83+
84+
svg#rocket {
85+
width: 80px;
86+
position: absolute;
87+
left: -10px;
88+
top: -24px;
89+
}
90+
91+
svg#rocket-smoke {
92+
height: calc(100vh - 95px);
93+
position: absolute;
94+
top: 10px;
95+
right: 180px;
96+
z-index: -10;
97+
}
98+
99+
advanced-image {
100+
border-top: 10px solid black;
101+
}
102+
</style>
103+
104+
<div class="content" role="main">
105+
106+
<!-- Highlight Card -->
107+
<div class="card highlight-card card-small">
108+
109+
<svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678"
110+
viewBox="0 0 101.678 101.678">
111+
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
112+
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)"
113+
fill="#dd0031" />
114+
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
115+
<path id="Path_33" data-name="Path 33"
116+
d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
117+
transform="translate(0.371 3.363)" fill="#fff" />
118+
<path id="Path_34" data-name="Path 34"
119+
d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
120+
transform="translate(0 0.005)" fill="#fff" />
121+
</g>
122+
</g>
123+
</svg>
124+
125+
<span>{{ title }} app is running!</span>
126+
127+
<svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632"
128+
viewBox="0 0 516.119 1083.632">
129+
<path id="Path_40" data-name="Path 40"
130+
d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
131+
transform="translate(-147.025 -140.939)" fill="#f5f5f5" />
132+
</svg>
133+
134+
</div>
135+
136+
<div class="card-container">
137+
<div class="card-">
138+
<advanced-image [cldImg]="img" alt="test" title="test" class="cld-image"></advanced-image>
139+
</div>
140+
</div>
141+
</div>

‎packages/angular/playground/src/app/app.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Cloudinary, CloudinaryImage } from '@cloudinary/url-gen';
2+
import { Component, OnInit } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-root',
6+
templateUrl: './app.component.html',
7+
styleUrls: ['./app.component.css'],
8+
})
9+
export class AppComponent implements OnInit {
10+
title = 'playground';
11+
people: string[] = [];
12+
img?: CloudinaryImage;
13+
attributes = { class: 'attr-class' };
14+
15+
ngOnInit() {
16+
this.people = ['spiderman', 'tim', 'timmy'];
17+
18+
// Create and configure your Cloudinary instance.
19+
const cld = new Cloudinary({
20+
cloud: {
21+
cloudName: 'demo',
22+
},
23+
});
24+
25+
this.img = cld.image('front_face');
26+
}
27+
}

‎packages/angular/playground/src/app/app.module.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { BrowserModule } from '@angular/platform-browser';
2+
import { NgModule } from '@angular/core';
3+
4+
import { AppComponent } from './app.component';
5+
import { CloudinaryModule } from '../../../projects/cloudinary-library/src/lib/cloudinary.module';
6+
7+
@NgModule({
8+
declarations: [
9+
AppComponent
10+
],
11+
imports: [
12+
BrowserModule,
13+
CloudinaryModule,
14+
],
15+
providers: [],
16+
bootstrap: [AppComponent]
17+
})
18+
export class AppModule { }

‎packages/angular/playground/src/assets/.gitkeep‎

Whitespace-only changes.

‎packages/angular/playground/src/environments/environment.prod.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const environment = {
2+
production: true
3+
};

0 commit comments

Comments
 (0)