From 416493787df811638b2e1c3674725c35acc8b35e Mon Sep 17 00:00:00 2001 From: flxi Date: Thu, 18 Jan 2018 16:44:33 +0100 Subject: [PATCH] fix(carousel): toggle carousel-indicators via property (#3319) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit сloses #1021 --- .../app/components/+carousel/demos/config/config.ts | 2 +- .../components/+carousel/demos/dynamic/dynamic.html | 5 ++++- .../app/components/+carousel/demos/dynamic/dynamic.ts | 5 +++++ demo/src/ng-api-doc.ts | 11 +++++++++++ src/carousel/carousel.component.html | 2 +- src/carousel/carousel.component.ts | 2 ++ src/carousel/carousel.config.ts | 3 +++ src/spec/carousel.component.spec.ts | 10 ++++++++-- src/spec/ng-bootstrap/carousel.spec.ts | 5 +++++ 9 files changed, 40 insertions(+), 5 deletions(-) diff --git a/demo/src/app/components/+carousel/demos/config/config.ts b/demo/src/app/components/+carousel/demos/config/config.ts index 8d1dc91ec2..af025a8ff2 100644 --- a/demo/src/app/components/+carousel/demos/config/config.ts +++ b/demo/src/app/components/+carousel/demos/config/config.ts @@ -5,7 +5,7 @@ import { CarouselConfig } from 'ngx-bootstrap/carousel'; selector: 'demo-carousel-config', templateUrl: './config.html', providers: [ - { provide: CarouselConfig, useValue: { interval: 1500, noPause: true } } + { provide: CarouselConfig, useValue: { interval: 1500, noPause: true, showIndicators: true } } ] }) export class DemoCarouselConfigComponent {} diff --git a/demo/src/app/components/+carousel/demos/dynamic/dynamic.html b/demo/src/app/components/+carousel/demos/dynamic/dynamic.html index ae8687046d..c2b3f234c2 100644 --- a/demo/src/app/components/+carousel/demos/dynamic/dynamic.html +++ b/demo/src/app/components/+carousel/demos/dynamic/dynamic.html @@ -1,4 +1,4 @@ - + image slide @@ -19,6 +19,9 @@

Slide {{index}}

+
diff --git a/demo/src/app/components/+carousel/demos/dynamic/dynamic.ts b/demo/src/app/components/+carousel/demos/dynamic/dynamic.ts index ac61d5f65b..eb7da2b4ac 100644 --- a/demo/src/app/components/+carousel/demos/dynamic/dynamic.ts +++ b/demo/src/app/components/+carousel/demos/dynamic/dynamic.ts @@ -9,6 +9,7 @@ export class DemoCarouselDynamicComponent { slides: any[] = []; activeSlideIndex: number = 0; noWrapSlides: boolean = false; + showIndicator: boolean = true; constructor() { for (let i = 0; i < 4; i++) { @@ -26,4 +27,8 @@ export class DemoCarouselDynamicComponent { const toRemove = index ? index : this.activeSlideIndex; this.slides.splice(toRemove, 1); } + + switchIndicator(): void { + this.showIndicator = !this.showIndicator; + } } diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts index fc46655808..7a2f89739d 100644 --- a/demo/src/ng-api-doc.ts +++ b/demo/src/ng-api-doc.ts @@ -370,6 +370,11 @@ export const ngdoc: any = { "type": "boolean", "description": "

If true — will disable pausing on carousel mouse hover

\n" }, + { + "name": "showIndicators", + "type": "boolean", + "description": "

If true — carousel-indicators are visible

\n" + }, { "name": "noWrap", "type": "boolean", @@ -532,6 +537,12 @@ export const ngdoc: any = { "type": "boolean", "description": "

Is loop of auto changing of slides can be paused

\n" }, + { + "name": "showIndicators", + "defaultValue": "true", + "type": "boolean", + "description": "

Show carousel-indicators

\n" + }, { "name": "noWrap", "defaultValue": "false", diff --git a/src/carousel/carousel.component.html b/src/carousel/carousel.component.html index a8363df0ab..bee77c6994 100644 --- a/src/carousel/carousel.component.html +++ b/src/carousel/carousel.component.html @@ -1,5 +1,5 @@
-
    +
    diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts index 24a16958bb..94c8c314d9 100644 --- a/src/carousel/carousel.component.ts +++ b/src/carousel/carousel.component.ts @@ -42,6 +42,8 @@ export class CarouselComponent implements OnDestroy { @Input() noWrap: boolean; /** If `true` — will disable pausing on carousel mouse hover */ @Input() noPause: boolean; + /** If `true` — carousel-indicators are visible */ + @Input() showIndicators: boolean; /** Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property */ @Output() diff --git a/src/carousel/carousel.config.ts b/src/carousel/carousel.config.ts index 833cd4bb23..9cc5cc0d79 100644 --- a/src/carousel/carousel.config.ts +++ b/src/carousel/carousel.config.ts @@ -10,4 +10,7 @@ export class CarouselConfig { /** Is slides can wrap from the last to the first slide */ noWrap = false; + + /** Show carousel-indicators */ + showIndicators = true; } diff --git a/src/spec/carousel.component.spec.ts b/src/spec/carousel.component.spec.ts index e04248ca3b..2455d36deb 100644 --- a/src/spec/carousel.component.spec.ts +++ b/src/spec/carousel.component.spec.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { CarouselModule } from '../carousel/carousel.module'; @Component({selector: 'carousel-test', template: ''}) class TestCarouselComponent { myInterval = 5000; noWrapSlides = false; + showIndicators = true; slides: any[] = [ {image: '//placekitten.com/600/300', text: 'slide0'}, {image: '//placekitten.com/600/300', text: 'slide1'}, @@ -16,7 +16,7 @@ class TestCarouselComponent { const html = `
    - + @@ -153,6 +153,12 @@ describe('Component: Carousel', () => { expectActiveSlides(element, [false, true, false]); }); + it('should hide carousel-indicators if property showIndicators is == false', () => { + context.showIndicators = false; + fixture.detectChanges(); + expect(element.querySelector('ol')).toBeNull(); + }); + it('should change slide on carousel control click', () => { const prev = element.querySelector('a.left'); const next = element.querySelector('a.right'); diff --git a/src/spec/ng-bootstrap/carousel.spec.ts b/src/spec/ng-bootstrap/carousel.spec.ts index 3c2bb31940..b828740e41 100644 --- a/src/spec/ng-bootstrap/carousel.spec.ts +++ b/src/spec/ng-bootstrap/carousel.spec.ts @@ -56,6 +56,7 @@ describe('ngb-carousel', () => { expect(carousel.interval).toBe(defaultConfig.interval); expect(carousel.noWrap).toBe(defaultConfig.noWrap); + expect(carousel.showIndicators).toBe(defaultConfig.showIndicators); // expect(carousel.keyboard).toBe(defaultConfig.keyboard); }); @@ -463,6 +464,7 @@ describe('ngb-carousel', () => { config = c; config.interval = 1000; config.noWrap = true; + config.showIndicators = true; // config.keyboard = false; }) ); @@ -474,6 +476,7 @@ describe('ngb-carousel', () => { const carousel = fixture.componentInstance; expect(carousel.interval).toBe(config.interval); expect(carousel.noWrap).toBe(config.noWrap); + expect(carousel.showIndicators).toBe(config.showIndicators); // expect(carousel.keyboard).toBe(config.keyboard); }); }); @@ -482,6 +485,7 @@ describe('ngb-carousel', () => { const config = new CarouselConfig(); config.interval = 1000; config.noWrap = true; + config.showIndicators = true; // config.keyboard = false; beforeEach(() => { @@ -498,6 +502,7 @@ describe('ngb-carousel', () => { const carousel = fixture.componentInstance; expect(carousel.interval).toBe(config.interval); expect(carousel.noWrap).toBe(config.noWrap); + expect(carousel.showIndicators).toBe(config.showIndicators); // expect(carousel.keyboard).toBe(config.keyboard); }); });