Skip to content

Commit 4423627

Browse files
xidedixxidedix
committed
refactor(carousels): cleanup, add config
1 parent 65e73b9 commit 4423627

File tree

3 files changed

+93
-100
lines changed

3 files changed

+93
-100
lines changed

‎src/app/views/base/carousels/carousel.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable({ providedIn: 'root' })
4+
export class CarouselCustomConfig {
5+
/* Animate transition of slides */
6+
activeIndex = 0;
7+
/* Animate transition of slides */
8+
animate = true;
9+
/* Default direction of auto changing of slides */
10+
direction: 'next' | 'prev' = 'next';
11+
/* Default interval of auto changing of slides */
12+
interval = 1000;
13+
}

‎src/app/views/base/carousels/carousels.component.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
</c-carousel-item>
4949
}
5050
</c-carousel-inner>
51-
<c-carousel-control caption="Previous" direction="prev" i18n-caption></c-carousel-control>
52-
<c-carousel-control caption="Next" direction="next" i18n-caption></c-carousel-control>
51+
<c-carousel-control caption="Previous" direction="prev" i18n-caption />
52+
<c-carousel-control caption="Next" direction="next" i18n-caption />
5353
</c-carousel>
5454
</app-docs-example>
5555
</c-card-body>
@@ -101,9 +101,8 @@
101101
You can attach the indicators to the carousel, lengthwise the controls, too.
102102
</p>
103103
<app-docs-example href="components/carousel/#with-indicators">
104-
<c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000"
105-
direction="prev">
106-
<c-carousel-indicators></c-carousel-indicators>
104+
<c-carousel (itemChange)="onItemChange($event)" [activeIndex]="1" [dark]="true" [interval]="5000" direction="prev">
105+
<c-carousel-indicators />
107106
<c-carousel-inner>
108107
@for (slide of slides[0]; track slide.src) {
109108
<c-carousel-item>
@@ -137,7 +136,7 @@
137136
</p>
138137
<app-docs-example href="components/carousel/#with-captions">
139138
<c-carousel (itemChange)="onItemChange($event)" [interval]="3000" transition="slide" [wrap]="false">
140-
<c-carousel-indicators></c-carousel-indicators>
139+
<c-carousel-indicators />
141140
<c-carousel-inner>
142141
@for (slide of slides[1]; track slide.src) {
143142
<c-carousel-item>
@@ -154,8 +153,8 @@ <h3>{{ slide.title }}</h3>
154153
</c-carousel-item>
155154
}
156155
</c-carousel-inner>
157-
<c-carousel-control caption="Previous" direction="prev" i18n-caption></c-carousel-control>
158-
<c-carousel-control caption="Next" direction="next" i18n-caption></c-carousel-control>
156+
<c-carousel-control caption="Previous" direction="prev" i18n-caption />
157+
<c-carousel-control caption="Next" direction="next" i18n-caption />
159158
</c-carousel>
160159
</app-docs-example>
161160
</c-card-body>
@@ -180,7 +179,6 @@ <h3>{{ slide.title }}</h3>
180179
[src]="slide.src"
181180
alt="{{slide.title}}"
182181
class="d-block w-100"
183-
loading="lazy"
184182
/>
185183
<c-carousel-caption class="d-none d-md-block">
186184
<h3>{{ slide.title }}</h3>
@@ -189,8 +187,8 @@ <h3>{{ slide.title }}</h3>
189187
</c-carousel-item>
190188
}
191189
</c-carousel-inner>
192-
<c-carousel-control caption="Previous" direction="prev" i18n-caption></c-carousel-control>
193-
<c-carousel-control caption="Next" direction="next" i18n-caption></c-carousel-control>
190+
<c-carousel-control caption="Previous" direction="prev" i18n-caption />
191+
<c-carousel-control caption="Next" direction="next" i18n-caption />
194192
</c-carousel>
195193
</app-docs-example>
196194
</c-card-body>
@@ -210,7 +208,7 @@ <h3>{{ slide.title }}</h3>
210208
</p>
211209
<app-docs-example href="components/carousel/#dark-variant">
212210
<c-carousel (itemChange)="onItemChange($event)" [dark]="true" [interval]="3000" transition="slide">
213-
<c-carousel-indicators></c-carousel-indicators>
211+
<c-carousel-indicators />
214212
<c-carousel-inner>
215213
@for (slide of slides[2]; track slide.src) {
216214
<c-carousel-item>
@@ -227,8 +225,8 @@ <h3>{{ slide.title }}</h3>
227225
</c-carousel-item>
228226
}
229227
</c-carousel-inner>
230-
<c-carousel-control caption="Previous" direction="prev" i18n-caption></c-carousel-control>
231-
<c-carousel-control caption="Next" direction="next" i18n-caption></c-carousel-control>
228+
<c-carousel-control caption="Previous" direction="prev" i18n-caption />
229+
<c-carousel-control caption="Next" direction="next" i18n-caption />
232230
</c-carousel>
233231
</app-docs-example>
234232
</c-card-body>

‎src/app/views/base/carousels/carousels.component.ts‎

Lines changed: 68 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,82 @@
11
import { Component } from '@angular/core';
2-
import { DomSanitizer } from '@angular/platform-browser';
3-
import { IconDirective } from '@coreui/icons-angular';
2+
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
43
import { DocsExampleComponent } from '@docs-components/public-api';
5-
import { RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, ThemeDirective, CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, CarouselIndicatorsComponent, CarouselCaptionComponent } from '@coreui/angular';
4+
import {
5+
CardBodyComponent,
6+
CardComponent,
7+
CardHeaderComponent,
8+
CarouselCaptionComponent,
9+
CarouselComponent,
10+
CarouselControlComponent,
11+
CarouselIndicatorsComponent,
12+
CarouselInnerComponent,
13+
CarouselItemComponent,
14+
ColComponent,
15+
RowComponent,
16+
TemplateIdDirective,
17+
TextColorDirective,
18+
ThemeDirective
19+
} from '@coreui/angular';
20+
import { IconDirective } from '@coreui/icons-angular';
21+
22+
export type Slide = { id: number, src: SafeUrl | string, title: string, subtitle: string };
623

724
@Component({
8-
selector: 'app-carousels',
9-
templateUrl: './carousels.component.html',
10-
styleUrls: ['./carousels.component.scss'],
11-
imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ThemeDirective, CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, IconDirective, CarouselIndicatorsComponent, CarouselCaptionComponent]
25+
selector: 'app-carousels',
26+
templateUrl: './carousels.component.html',
27+
styleUrls: ['./carousels.component.scss'],
28+
imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, DocsExampleComponent, ThemeDirective, CarouselComponent, CarouselInnerComponent, CarouselItemComponent, CarouselControlComponent, IconDirective, CarouselIndicatorsComponent, CarouselCaptionComponent, TemplateIdDirective]
29+
// providers: [{ provide: CarouselConfig, useClass: CarouselCustomConfig }]
1230
})
1331
export class CarouselsComponent {
1432

15-
readonly imageSrc: string[] = [
16-
'assets/images/angular.jpg',
17-
'assets/images/react.jpg',
18-
'assets/images/vue.jpg',
19-
'https://picsum.photos/id/1/800/400',
20-
'https://picsum.photos/id/1026/800/400',
21-
'https://picsum.photos/id/1031/800/400'
22-
];
23-
24-
readonly slidesLight: string[] = [
25-
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
26-
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
27-
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
28-
];
29-
30-
readonly slides: any[][] = [];
3133

32-
constructor(
33-
private domSanitizer: DomSanitizer
34-
) {
35-
this.slides[0] = [
36-
{
37-
id: 0,
38-
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[0]),
39-
title: 'First slide',
40-
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
41-
},
42-
{
43-
id: 1,
44-
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[1]),
45-
title: 'Second slide',
46-
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
47-
},
48-
{
49-
id: 2,
50-
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[2]),
51-
title: 'Third slide',
52-
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
53-
}
54-
];
34+
readonly imageSrc: string[] = ['assets/images/angular.jpg', 'assets/images/react.jpg', 'assets/images/vue.jpg', 'https://picsum.photos/id/1/800/400', 'https://picsum.photos/id/1026/800/400', 'https://picsum.photos/id/1031/800/400'];
35+
readonly slidesLight: string[] = ['data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23AAA%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23F5F5F5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23BBB%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23E5E5E5%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'];
36+
readonly slides: Slide[][] = [];
5537

56-
this.slides[1] = [
57-
{
58-
id: 0,
59-
src: this.imageSrc[3],
60-
title: 'First slide',
61-
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
62-
},
63-
{
64-
id: 1,
65-
src: this.imageSrc[4],
66-
title: 'Second slide',
67-
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
68-
},
69-
{
70-
id: 2,
71-
src: this.imageSrc[5],
72-
title: 'Third slide',
73-
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
74-
}
75-
];
38+
constructor(private domSanitizer: DomSanitizer) {
39+
this.slides[0] = [{
40+
id: 0,
41+
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[0]),
42+
title: 'First slide',
43+
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
44+
}, {
45+
id: 1,
46+
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[1]),
47+
title: 'Second slide',
48+
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
49+
}, {
50+
id: 2,
51+
src: domSanitizer.bypassSecurityTrustUrl(this.imageSrc[2]),
52+
title: 'Third slide',
53+
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
54+
}];
7655

77-
this.slides[2] = [
78-
{
79-
id: 0,
80-
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[0]),
81-
title: 'First slide',
82-
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
83-
},
84-
{
85-
id: 1,
86-
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[1]),
87-
title: 'Second slide',
88-
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
89-
},
90-
{
91-
id: 2,
92-
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[2]),
93-
title: 'Third slide',
94-
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
95-
}
96-
];
56+
this.slides[1] = [{
57+
id: 0, src: this.imageSrc[3], title: 'First slide', subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
58+
}, {
59+
id: 1, src: this.imageSrc[4], title: 'Second slide', subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
60+
}, {
61+
id: 2, src: this.imageSrc[5], title: 'Third slide', subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
62+
}];
9763

64+
this.slides[2] = [{
65+
id: 0,
66+
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[0]),
67+
title: 'First slide',
68+
subtitle: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
69+
}, {
70+
id: 1,
71+
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[1]),
72+
title: 'Second slide',
73+
subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
74+
}, {
75+
id: 2,
76+
src: domSanitizer.bypassSecurityTrustUrl(this.slidesLight[2]),
77+
title: 'Third slide',
78+
subtitle: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
79+
}];
9880
}
9981

10082
onItemChange($event: any): void {

0 commit comments

Comments
 (0)