From 76d65584fe9a667a4c6cef3415b50e523ee21427 Mon Sep 17 00:00:00 2001 From: Przemyslaw Olszewski Date: Thu, 27 Oct 2016 00:14:29 +0200 Subject: [PATCH 1/8] One active slide which is changed via model - outside carouselComponent. --- src/carousel/carousel.component.ts | 39 ++++++++++++------------------ src/carousel/slide.component.ts | 20 ++++++--------- 2 files changed, 22 insertions(+), 37 deletions(-) diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts index c9999722bf..baab643280 100644 --- a/src/carousel/carousel.component.ts +++ b/src/carousel/carousel.component.ts @@ -31,11 +31,11 @@ export enum Direction {UNKNOWN, NEXT, PREV}
  • - + Previous - + Next @@ -69,7 +69,8 @@ export class CarouselComponent implements OnDestroy { protected isPlaying:boolean; protected destroyed:boolean = false; protected currentSlide:SlideComponent; - protected _interval:number; + protected _interval:number = 5000; + private _lastAddedSlide:SlideComponent; public get isBs4():boolean { return !isBs3(); @@ -79,14 +80,9 @@ export class CarouselComponent implements OnDestroy { this.destroyed = true; } - public select(nextSlide:SlideComponent, direction:Direction = Direction.UNKNOWN):void { + public select(nextSlide: SlideComponent):void { let nextIndex = nextSlide.index; - if (direction === Direction.UNKNOWN) { - direction = nextIndex > this.getCurrentIndex() - ? Direction.NEXT - : Direction.PREV; - } - + let direction = nextIndex > this.getCurrentIndex() ? Direction.NEXT : Direction.PREV; // Prevent this user-triggered transition from occurring if there is // already one in progress if (nextSlide && nextSlide !== this.currentSlide) { @@ -116,7 +112,7 @@ export class CarouselComponent implements OnDestroy { return; } - return this.select(this.getSlideByIndex(newIndex), Direction.NEXT); + return this.select(this.getSlideByIndex(newIndex)); } public prev():any { @@ -129,20 +125,21 @@ export class CarouselComponent implements OnDestroy { return; } - return this.select(this.getSlideByIndex(newIndex), Direction.PREV); + return this.select(this.getSlideByIndex(newIndex)); } public addSlide(slide:SlideComponent):void { slide.index = this.slides.length; this.slides.push(slide); if (this.slides.length === 1 || slide.active) { - this.select(this.slides[this.slides.length - 1]); - if (this.slides.length === 1) { - this.play(); - } - } else { - slide.active = false; + this.select(slide); + this.play(); + } + slide.previousSiblingSlide = this._lastAddedSlide; + if (this._lastAddedSlide) { + this._lastAddedSlide.nextSiblingSlide = slide; } + this._lastAddedSlide = slide; } public removeSlide(slide:SlideComponent):void { @@ -165,12 +162,6 @@ export class CarouselComponent implements OnDestroy { slide.direction = direction; slide.active = true; - - if (this.currentSlide) { - this.currentSlide.direction = direction; - this.currentSlide.active = false; - } - this.currentSlide = slide; // every time you change slides, reset the timer diff --git a/src/carousel/slide.component.ts b/src/carousel/slide.component.ts index b4cf0a146b..acf8d6fe42 100644 --- a/src/carousel/slide.component.ts +++ b/src/carousel/slide.component.ts @@ -1,13 +1,7 @@ -/*** - * todo: - * direction (?string) (not yet supported) - actual (not yet supported) (?any) - will be bind to slider context, to be used from template - */ -import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, HostBinding, OnDestroy, Input, OnInit } from '@angular/core'; -import { CarouselComponent, Direction } from './carousel.component'; +import { CarouselComponent } from './carousel.component'; -/** Wrap your content with `slide` component */ @Component({ selector: 'slide', template: ` @@ -17,28 +11,28 @@ import { CarouselComponent, Direction } from './carousel.component'; ` }) export class SlideComponent implements OnInit, OnDestroy { - /** index of slide in carousel's slides */ - @Input() public index:number; - @Input() public direction:Direction; - - /** does current slide is active */ + /** Specified slide as currently displayed */ @HostBinding('class.active') @Input() public active:boolean; + /** Wraps element by appropriate CSS classes */ @HostBinding('class.item') @HostBinding('class.carousel-item') public addClass:boolean = true; + /** Link to Parent(container-collection) component */ protected carousel:CarouselComponent; public constructor(carousel:CarouselComponent) { this.carousel = carousel; } + /** Fires changes in container collection after adding a new slide instance */ public ngOnInit():void { this.carousel.addSlide(this); } + /** Fires changes in container collection after removing of this slide instance */ public ngOnDestroy():void { this.carousel.removeSlide(this); } From 35102e67404ac446a3491298555f4ea702d2a62c Mon Sep 17 00:00:00 2001 From: "oleg.rybnikov" Date: Tue, 13 Dec 2016 14:41:57 +0200 Subject: [PATCH 2/8] feat(carousel): Changed data structure to linked list. --- .../demos/carousel-demo.component.html | 16 +- .../carousel/demos/carousel-demo.component.ts | 10 +- src/carousel/carousel.component.ts | 184 +++++++------ src/carousel/carousel.config.ts | 8 + src/carousel/carousel.module.ts | 4 +- src/carousel/index.ts | 1 + src/spec/carousel.component.spec.ts | 12 +- .../ng-bootstrap/utils/linkedlist.spec.ts | 159 +++++++++++ src/utils/linked-list.class.ts | 258 ++++++++++++++++++ 9 files changed, 552 insertions(+), 100 deletions(-) create mode 100644 src/carousel/carousel.config.ts create mode 100644 src/spec/ng-bootstrap/utils/linkedlist.spec.ts create mode 100644 src/utils/linked-list.class.ts diff --git a/demo/src/app/components/carousel/demos/carousel-demo.component.html b/demo/src/app/components/carousel/demos/carousel-demo.component.html index 977637c912..ea71e9ce52 100644 --- a/demo/src/app/components/carousel/demos/carousel-demo.component.html +++ b/demo/src/app/components/carousel/demos/carousel-demo.component.html @@ -1,8 +1,7 @@
    - - + +
    @@ -18,10 +17,13 @@

    Slide {{index}}

    - - - - + + +
    diff --git a/demo/src/app/components/carousel/demos/carousel-demo.component.ts b/demo/src/app/components/carousel/demos/carousel-demo.component.ts index 028fd5c8b8..648209b7d3 100644 --- a/demo/src/app/components/carousel/demos/carousel-demo.component.ts +++ b/demo/src/app/components/carousel/demos/carousel-demo.component.ts @@ -8,6 +8,7 @@ export class CarouselDemoComponent { public myInterval:number = 5000; public noWrapSlides:boolean = false; public slides:any[] = []; + public currentSlideIndex: number; public constructor() { for (let i = 0; i < 4; i++) { @@ -24,7 +25,12 @@ export class CarouselDemoComponent { }); } - public removeSlide(index:number):void { - this.slides.splice(index, 1); + public activeSlideChanged(index: number): void { + this.currentSlideIndex = index; + } + + public removeSlide(index?: number):void { + const toRemove = index ? index : this.currentSlideIndex; + this.slides.splice(toRemove, 1); } } diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts index baab643280..f9a92b9a1a 100644 --- a/src/carousel/carousel.component.ts +++ b/src/carousel/carousel.component.ts @@ -13,10 +13,13 @@ * 4) default interval should be equal 5000 */ -import { Component, Input, OnDestroy } from '@angular/core'; +import { Component, Input, OnDestroy, Output, EventEmitter } from '@angular/core'; import { isBs3 } from '../utils/ng2-bootstrap-config'; import { SlideComponent } from './slide.component'; +import { CarouselConfig } from './carousel.config'; + +import LinkedList from './../utils/linked-list.class'; export enum Direction {UNKNOWN, NEXT, PREV} @@ -28,14 +31,14 @@ export enum Direction {UNKNOWN, NEXT, PREV} template: `
      -
    1. +
    - + Previous - + Next @@ -47,8 +50,6 @@ export class CarouselComponent implements OnDestroy { @Input() public noWrap:boolean; /** if `true` will disable pausing on carousel mouse hover */ @Input() public noPause:boolean; - /** if `true` will disable transitions on the carousel */ - @Input() public noTransition:boolean; /** * Amount of time in milliseconds to delay between automatically @@ -58,38 +59,76 @@ export class CarouselComponent implements OnDestroy { public get interval():number { return this._interval; } - public set interval(value:number) { this._interval = value; this.restartTimer(); } - public slides:SlideComponent[] = []; + @Output() public activeSlideChanged: EventEmitter = new EventEmitter(false); + + protected _slides: LinkedList = new LinkedList(); + public get slides(): SlideComponent[] { + return this._slides.toArray(); + } + protected currentInterval:any; protected isPlaying:boolean; protected destroyed:boolean = false; - protected currentSlide:SlideComponent; - protected _interval:number = 5000; - private _lastAddedSlide:SlideComponent; + protected _interval:number; public get isBs4():boolean { return !isBs3(); } + public constructor(config: CarouselConfig) { + Object.assign(this, config); + } + public ngOnDestroy():void { this.destroyed = true; } - public select(nextSlide: SlideComponent):void { - let nextIndex = nextSlide.index; - let direction = nextIndex > this.getCurrentIndex() ? Direction.NEXT : Direction.PREV; - // Prevent this user-triggered transition from occurring if there is - // already one in progress - if (nextSlide && nextSlide !== this.currentSlide) { - this.goNext(nextSlide, direction); + public addSlide(slide: SlideComponent): void { + this._slides.add(slide); + if (this._slides.length === 1) { + slide.active = true; + this.play(); } } + public removeSlide(slide: SlideComponent): void { + const remIndex = this._slides.indexOf(slide); + + if (this.getCurrentSlideIndex() === remIndex) { + + // behavior in case removing of a current active slide + if (this._slides.length > 1) { + if (this.isLast(remIndex) && this.noWrap) { + + // last slide and looping is disabled - step backward + this._select(Direction.PREV, undefined, true); + } else { + this._select(Direction.NEXT, undefined, true); + } + } + } + + this._slides.remove(remIndex); + this.activeSlideChanged.emit(this.getCurrentSlideIndex()); + } + + public nextSlide(): void { + this._select(Direction.NEXT); + } + + public previousSlide(): void { + this._select(Direction.PREV); + } + + public selectSlide(index: number): void { + this._select(undefined, index, true); + } + public play():void { if (!this.isPlaying) { this.isPlaying = true; @@ -104,85 +143,64 @@ export class CarouselComponent implements OnDestroy { } } - public next():any { - let newIndex = (this.getCurrentIndex() + 1) % this.slides.length; - - if (newIndex === 0 && this.noWrap) { - this.pause(); - return; - } - - return this.select(this.getSlideByIndex(newIndex)); - } - - public prev():any { - let newIndex = this.getCurrentIndex() - 1 < 0 - ? this.slides.length - 1 - : this.getCurrentIndex() - 1; - - if (this.noWrap && newIndex === this.slides.length - 1) { - this.pause(); - return; - } - - return this.select(this.getSlideByIndex(newIndex)); + public getCurrentSlideIndex(): number { + return this._slides.findIndex((slide: SlideComponent) => slide.active); } - public addSlide(slide:SlideComponent):void { - slide.index = this.slides.length; - this.slides.push(slide); - if (this.slides.length === 1 || slide.active) { - this.select(slide); - this.play(); - } - slide.previousSiblingSlide = this._lastAddedSlide; - if (this._lastAddedSlide) { - this._lastAddedSlide.nextSiblingSlide = slide; - } - this._lastAddedSlide = slide; + public isLast(index: number): boolean { + return index + 1 >= this._slides.length; } - public removeSlide(slide:SlideComponent):void { - this.slides.splice(slide.index, 1); + /** + * Select slide + * @param direction: {Direction} + * @param nextIndex: {number}(optional) - index of next active slide + * @param force: boolean {optional} - if true, selection will ignore this.noWrap flag(for jumping after removing a current slide) + * @private + */ + private _select(direction: Direction = 0, nextIndex?: number, force: boolean = false): void { + const currentSlideIndex = this.getCurrentSlideIndex(); - if (this.slides.length === 0) { - this.currentSlide = void 0; + // if this is last slide, need to going forward but looping is disabled + if (!force && (this.isLast(currentSlideIndex) && direction && direction !== Direction.PREV && this.noWrap)) { + this.pause(); return; } - for (let i = 0; i < this.slides.length; i++) { - this.slides[i].index = i; + let currentSlide = this._slides.get(currentSlideIndex); + let nextSlideIndex: number = !isNaN(nextIndex) ? nextIndex : undefined; + + if (direction !== undefined && direction !== Direction.UNKNOWN) { + switch (direction) { + case Direction.NEXT: + + // if this is last slide, not force, looping is disabled and need to going forward - select current slide, as a next + nextSlideIndex = (!this.isLast(currentSlideIndex)) ? currentSlideIndex + 1 : + (!force && this.noWrap ) ? currentSlideIndex : 0; + break; + case Direction.PREV: + + // if this is first slide, not force, looping is disabled and need to going backward - select current slide, as a next + nextSlideIndex = (currentSlideIndex > 0) ? currentSlideIndex - 1 : + (!force && this.noWrap ) ? currentSlideIndex : this._slides.length - 1; + break; + default: + throw new Error('Wrong direction'); + } } - } - protected goNext(slide:SlideComponent, direction:Direction):void { - if (this.destroyed) { + if (nextSlideIndex === currentSlideIndex) { return; } - slide.direction = direction; - slide.active = true; - this.currentSlide = slide; - - // every time you change slides, reset the timer - this.restartTimer(); - } - - protected getSlideByIndex(index:number):any { - let len = this.slides.length; - for (let i = 0; i < len; ++i) { - if (this.slides[i].index === index) { - return this.slides[i]; - } - } - return void 0; - } + let nextSlide = this._slides.get(nextSlideIndex); + currentSlide.active = false; + nextSlide.active = true; + this.activeSlideChanged.emit(nextSlideIndex); - protected getCurrentIndex():number { - return !this.currentSlide ? 0 : this.currentSlide.index; } - protected restartTimer():any { + private restartTimer():any { this.resetTimer(); let interval = +this.interval; if (!isNaN(interval) && interval > 0) { @@ -190,7 +208,7 @@ export class CarouselComponent implements OnDestroy { () => { let nInterval = +this.interval; if (this.isPlaying && !isNaN(this.interval) && nInterval > 0 && this.slides.length) { - this.next(); + this._select(Direction.NEXT); } else { this.pause(); } @@ -199,7 +217,7 @@ export class CarouselComponent implements OnDestroy { } } - protected resetTimer():void { + private resetTimer():void { if (this.currentInterval) { clearInterval(this.currentInterval); this.currentInterval = void 0; diff --git a/src/carousel/carousel.config.ts b/src/carousel/carousel.config.ts new file mode 100644 index 0000000000..32e2702d10 --- /dev/null +++ b/src/carousel/carousel.config.ts @@ -0,0 +1,8 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class CarouselConfig { + public interval: number = 5000; + public noPause: boolean = false; + public noWrap: boolean = false; +} diff --git a/src/carousel/carousel.module.ts b/src/carousel/carousel.module.ts index 23fa0c7671..777217cd51 100644 --- a/src/carousel/carousel.module.ts +++ b/src/carousel/carousel.module.ts @@ -3,11 +3,13 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CarouselComponent } from './carousel.component'; import { SlideComponent } from './slide.component'; +import { CarouselConfig } from './carousel.config'; @NgModule({ imports: [CommonModule], declarations: [SlideComponent, CarouselComponent], - exports: [SlideComponent, CarouselComponent] + exports: [SlideComponent, CarouselComponent], + providers: [CarouselConfig] }) export class CarouselModule { public static forRoot(): ModuleWithProviders { diff --git a/src/carousel/index.ts b/src/carousel/index.ts index 476bb3b7a3..322baeaabb 100644 --- a/src/carousel/index.ts +++ b/src/carousel/index.ts @@ -1,3 +1,4 @@ export { CarouselComponent } from './carousel.component'; export { CarouselModule } from './carousel.module'; export { SlideComponent } from './slide.component'; +export { CarouselConfig } from './carousel.config'; diff --git a/src/spec/carousel.component.spec.ts b/src/spec/carousel.component.spec.ts index b1a7e582a0..d88c970521 100644 --- a/src/spec/carousel.component.spec.ts +++ b/src/spec/carousel.component.spec.ts @@ -99,8 +99,7 @@ describe('Component: Carousel', () => { expect(indicators.length).toBe(3); }); - // TODO: - xit('should hide navigation when only one slide', () => { + it('should hide navigation when only one slide', () => { context.slides.splice(0, 2); fixture.detectChanges(); expect(context.slides.length).toBe(1); @@ -112,18 +111,17 @@ describe('Component: Carousel', () => { expect(next.length).toBe(0); }); - // TODO: - xit('should disable prev button when slide index is 0 and noWrap is truthy', () => { + it('should disable prev button when slide index is 0 and noWrap is truthy', () => { context.noWrapSlides = true; fixture.detectChanges(); let prev = element.querySelector('a.left'); expect(prev.classList).toContain('disabled'); }); - // TODO: - xit('should disable next button when last slide is active and noWrap is truthy', () => { + it('should disable next button when last slide is active and noWrap is truthy', () => { context.noWrapSlides = true; - context.slides[2].active = true; + let indicators = element.querySelectorAll('ol.carousel-indicators > li'); + indicators[2].click(); fixture.detectChanges(); let next = element.querySelector('a.right'); expect(next.classList).toContain('disabled'); diff --git a/src/spec/ng-bootstrap/utils/linkedlist.spec.ts b/src/spec/ng-bootstrap/utils/linkedlist.spec.ts new file mode 100644 index 0000000000..71af9f8bb8 --- /dev/null +++ b/src/spec/ng-bootstrap/utils/linkedlist.spec.ts @@ -0,0 +1,159 @@ +import LinkedList from '../../../utils/linked-list.class'; + +let list: LinkedList; + +describe('Linked List. Base functions.', () => { + + beforeEach(() => { + + list = new LinkedList(); + list.add('1'); + list.add('2'); + list.add('3'); + list.add('4'); + list.add('5'); + }); + + it('List length must available', () => { + expect(list.length).toEqual(5); + }); + + it('Check get()', () => { + expect(list.length).toEqual(5); + expect(list.get(2)).toEqual('3'); + }); + + it('Check toArray function', () => { + expect(list.toArray().join()).toEqual('1,2,3,4,5'); + }); + + it('Check remove(0)', () => { + list.remove(0); + expect(list.toArray().join()).toEqual('2,3,4,5'); + }); + + it('Check remove()', () => { + list.remove(0); + expect(list.toArray().join()).toEqual('2,3,4,5'); + }); + + it('Check remove(2)', () => { + list.remove(2); + expect(list.toArray().join()).toEqual('1,2,4,5'); + }); + + it('Check remove(4)', () => { + list.remove(4); + expect(list.toArray().join()).toEqual('1,2,3,4'); + }); + + it('Check add(4, 2)', () => { + list.add(4, 2); + expect(list.toArray().join()).toEqual('1,2,4,3,4,5'); + }); + + it('Check set(4, 2)', () => { + list.set(4, 2); + expect(list.toArray().join()).toEqual('1,2,3,4,2'); + }); +}); + +describe('Linked List. Overridden (from Array) methods.', () => { + + beforeEach(() => { + list = new LinkedList(); + list.add('1'); + list.add('2'); + list.add('3'); + list.add('4'); + list.add('5'); + }); + it('Check instance of Array', () => { + expect(list instanceof Array).toBeTruthy(); + }); + + it('Check instance of indexOf', () => { + expect(list.indexOf('3')).toEqual(2); + }); + + it('Check push(6, 7, 8)', () => { + expect(list.push(6, 7, 8)).toEqual(8); + expect(list.toArray().join()).toEqual('1,2,3,4,5,6,7,8'); + }); + + it('Check pop()', () => { + expect(list.pop()).toEqual('5'); + expect(list.toArray().join()).toEqual('1,2,3,4'); + }); + + it('Check unshift(a, b, c)', () => { + expect(list.unshift('a', 'b', 'c')).toEqual(8); + expect(list.toArray().join()).toEqual('a,b,c,1,2,3,4,5'); + }); + + it('Check shift()', () => { + expect(list.shift()).toEqual('1'); + expect(list.toArray().join()).toEqual('2,3,4,5'); + }); + + it('Check forEach', () => { + list.forEach((item: string, index: number) => { + list.set(index, 'new_' + item); + }); + expect(list.toArray().join()).toEqual('new_1,new_2,new_3,new_4,new_5'); + }); + + it('Check toString', () => { + expect(list.toString()).toEqual('[Linked List]'); + }); + + it('Positive check some()', () => { + expect(list.some((item: string) => item === '2')); + }); + + it('Negative check some()', () => { + expect(list.some((item: string) => item === '6')).toBeFalsy(); + }); + + it('Negative check every()', () => { + expect(list.every((item: string) => item === '2')).toBeFalsy(); + }); + + it('Positive check every()', () => { + expect(list.every((item: string) => item !== '0')).toBeTruthy(); + }); + +}); + +describe('Linked List. Working with objects.', () => { + + beforeEach(() => { + list = new LinkedList(); + list.add({stringProperty: 'String1', numberProperty: 10}); + list.add({stringProperty: 'String2', numberProperty: 20}); + list.add({stringProperty: 'String3', numberProperty: 30}); + list.add({stringProperty: 'String4', numberProperty: 40}); + list.add({stringProperty: 'String5', numberProperty: 50}); + }); + + it('Check find', () => { + let result: any = list.find((item: any) => item.numberProperty === 20); + expect(result.stringProperty).toEqual('String2'); + + result = list.find((item: any, index: number) => index === 2); + expect(result.stringProperty).toEqual('String3'); + }); + + it('Check findIndex', () => { + let result: number = list.findIndex((item: any) => item.numberProperty === 20); + expect(result).toEqual(1); + + result = list.findIndex((item: any, index: number) => index === 2); + expect(result).toEqual(2); + }); + + it('Check findAll', () => { + const result: any = list.findAll((item: any) => item.numberProperty > 20); + expect(result.length).toEqual(3); + }); +}); diff --git a/src/utils/linked-list.class.ts b/src/utils/linked-list.class.ts new file mode 100644 index 0000000000..a63b5cddd6 --- /dev/null +++ b/src/utils/linked-list.class.ts @@ -0,0 +1,258 @@ +export default class LinkedList extends Array { + + public length: number = 0; + protected head: any; + protected tail: any; + protected current: any; + protected asArray: T[] = []; + + protected getNode(position: number): any { + if (this.length === 0 || position < 0 || position >= this.length) { + throw new Error('Position is out of the list'); + } + + let current = this.head; + + for (let index = 0; index < position; index++) { + current = current.next; + } + return current; + } + + protected createInternalArrayRepresentation(): void { + let outArray: any[] = []; + let current = this.head; + + while (current) { + outArray.push(current.value); + current = current.next; + } + this.asArray = outArray; + } + + public get(position: number): T { + if (this.length === 0 || position < 0 || position >= this.length) { + throw new Error('Position is out of the list'); + } + + let current = this.head; + + for (let index = 0; index < position; index++) { + current = current.next; + } + return current.value; + } + + public add(value: T, position: number = this.length): void { + if (position < 0 || position > this.length) { + throw new Error('Position is out of the list'); + } + + let node = { + value: value as any, + next: undefined as any, + previous: undefined as any + }; + + if (this.length === 0) { + this.head = node; + this.tail = node; + this.current = node; + } else { + if (position === 0) { + // first node + node.next = this.head; + this.head.previous = node; + this.head = node; + } else if (position === this.length) { + // last node + this.tail.next = node; + node.previous = this.tail; + this.tail = node; + } else { + // node in middle + let currentPreviousNode = this.getNode(position - 1); + let currentNextNode = currentPreviousNode.next; + + currentPreviousNode.next = node; + currentNextNode.previous = node; + + node.previous = currentPreviousNode; + node.next = currentNextNode; + } + + } + this.length++; + this.createInternalArrayRepresentation(); + } + + public remove(position: number = 0): void { + if (this.length === 0 || position < 0 || position >= this.length) { + throw new Error('Position is out of the list'); + } + + if (position === 0) { + // first node + this.head = this.head.next; + + if (this.head) { + // there is no second node + this.head.previous = undefined; + } else { + // there is no second node + this.tail = undefined; + } + } else if (position === this.length - 1) { + // last node + this.tail = this.tail.previous; + this.tail.next = undefined; + } else { + // middle node + let removedNode = this.getNode(position); + removedNode.next.previous = removedNode.previous; + removedNode.previous.next = removedNode.next; + } + + this.length--; + this.createInternalArrayRepresentation(); + } + + public set(position: number, value: T): void { + if (this.length === 0 || position < 0 || position >= this.length) { + throw new Error('Position is out of the list'); + } + + let node = this.getNode(position); + node.value = value; + this.createInternalArrayRepresentation(); + } + + public toArray(): T[] { + return this.asArray; + } + + public findAll(fn: any): any[] { + let current = this.head; + let result: any[] = []; + for (let index = 0; index < this.length; index++) { + if (fn(current.value, index)) { + result.push({index, value: current.value}); + } + current = current.next; + } + return result; + } + // Array methods overriding start + public push(...args: T[]): number { + args.forEach((arg: any) => { + this.add(arg); + }); + return this.length; + } + + public pop(): T { + if (this.length === 0) { + return undefined; + } + const last = this.tail; + this.remove(this.length - 1); + return last.value; + } + + public unshift(...args: T[]): number { + args.reverse(); + args.forEach((arg: any) => { + this.add(arg, 0); + }); + return this.length; + } + + public shift(): T { + if (this.length === 0) { + return undefined; + } + const lastItem = this.head.value; + this.remove(); + return lastItem; + } + + public forEach(fn: any): void { + let current = this.head; + for (let index = 0; index < this.length; index++) { + fn(current.value, index); + current = current.next; + } + } + + public indexOf(value: T): number { + let current = this.head; + let position = 0; + + for (let index = 0; index < this.length; index++) { + if (current.value === value) { + + position = index; + break; + } + current = current.next; + } + return position; + } + + public some(fn: any): boolean { + let current = this.head; + let result = false; + while (current && !result) { + if (fn(current.value)) { + result = true; + break; + } + current = current.next; + } + return result; + } + + public every(fn: any): boolean { + let current = this.head; + let result = true; + while (current && result) { + if (!fn(current.value)) { + result = false; + } + current = current.next; + } + return result; + } + + public toString(): string { + return '[Linked List]'; + } + + public find(fn: any): T { + let current = this.head; + let result: T; + for (let index = 0; index < this.length; index++) { + if (fn(current.value, index)) { + result = current.value; + break; + } + current = current.next; + } + return result; + } + + public findIndex(fn: any): number { + let current = this.head; + let result: number; + for (let index = 0; index < this.length; index++) { + if (fn(current.value, index)) { + result = index; + break; + } + current = current.next; + } + return result; + } + + // Array methods overriding END +} From c0f41cf811bb8b364e6ac111bb455a88b5b2be07 Mon Sep 17 00:00:00 2001 From: "oleg.rybnikov" Date: Thu, 15 Dec 2016 16:47:51 +0200 Subject: [PATCH 3/8] feat(carousel): direct setting of an active slide. Applying ng-bootstrap tests --- .../demos/carousel-demo.component.html | 10 +- .../carousel/demos/carousel-demo.component.ts | 8 +- src/carousel/carousel.component.ts | 220 +++++---- src/carousel/carousel.config.ts | 5 + src/spec/ng-bootstrap/carousel.spec.ts | 418 ++++++++++++++++++ .../utils/linkedlist.spec.ts | 2 +- src/utils/linked-list.class.ts | 2 +- 7 files changed, 582 insertions(+), 83 deletions(-) create mode 100644 src/spec/ng-bootstrap/carousel.spec.ts rename src/spec/{ng-bootstrap => }/utils/linkedlist.spec.ts (98%) diff --git a/demo/src/app/components/carousel/demos/carousel-demo.component.html b/demo/src/app/components/carousel/demos/carousel-demo.component.html index ea71e9ce52..4baedd97be 100644 --- a/demo/src/app/components/carousel/demos/carousel-demo.component.html +++ b/demo/src/app/components/carousel/demos/carousel-demo.component.html @@ -1,6 +1,6 @@
    - + @@ -19,10 +19,14 @@

    Slide {{index}}

    + + git
    diff --git a/demo/src/app/components/carousel/demos/carousel-demo.component.ts b/demo/src/app/components/carousel/demos/carousel-demo.component.ts index 648209b7d3..ad933d0444 100644 --- a/demo/src/app/components/carousel/demos/carousel-demo.component.ts +++ b/demo/src/app/components/carousel/demos/carousel-demo.component.ts @@ -8,7 +8,7 @@ export class CarouselDemoComponent { public myInterval:number = 5000; public noWrapSlides:boolean = false; public slides:any[] = []; - public currentSlideIndex: number; + public activeSlideIndex: number; public constructor() { for (let i = 0; i < 4; i++) { @@ -25,12 +25,12 @@ export class CarouselDemoComponent { }); } - public activeSlideChanged(index: number): void { - this.currentSlideIndex = index; + public selectSlide(index: number): void { + this.activeSlideIndex = index; } public removeSlide(index?: number):void { - const toRemove = index ? index : this.currentSlideIndex; + const toRemove = index ? index : this.activeSlideIndex; this.slides.splice(toRemove, 1); } } diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts index f9a92b9a1a..caadb11a3d 100644 --- a/src/carousel/carousel.component.ts +++ b/src/carousel/carousel.component.ts @@ -34,11 +34,11 @@ export enum Direction {UNKNOWN, NEXT, PREV}
  • - + Previous - + Next @@ -47,34 +47,50 @@ export enum Direction {UNKNOWN, NEXT, PREV} }) export class CarouselComponent implements OnDestroy { /** if `true` carousel will not cycle continuously and will have hard stops (prevent looping) */ - @Input() public noWrap:boolean; + @Input() public noWrap: boolean; + /** if `true` will disable pausing on carousel mouse hover */ - @Input() public noPause:boolean; + @Input() public noPause: boolean; + + protected _currentActiveSlide: number; + + /** Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property */ + @Output() public activeSlideChange: EventEmitter = new EventEmitter(false); + + /** Index of currently displayed slide(started for 0) */ + @Input() + public set activeSlide(index: number) { + if (this._slides.length && index !== this._currentActiveSlide) { + this._select(index); + } + } + public get activeSlide(): number { + return this._currentActiveSlide; + } + + protected _interval: number; /** * Amount of time in milliseconds to delay between automatically * cycling an item. If false, carousel will not automatically cycle */ @Input() - public get interval():number { + public get interval(): number { return this._interval; } - public set interval(value:number) { + public set interval(value: number) { this._interval = value; this.restartTimer(); } - @Output() public activeSlideChanged: EventEmitter = new EventEmitter(false); - protected _slides: LinkedList = new LinkedList(); public get slides(): SlideComponent[] { return this._slides.toArray(); } - protected currentInterval:any; - protected isPlaying:boolean; - protected destroyed:boolean = false; - protected _interval:number; + protected currentInterval: any; + protected isPlaying: boolean; + protected destroyed: boolean = false; public get isBs4():boolean { return !isBs3(); @@ -84,123 +100,176 @@ export class CarouselComponent implements OnDestroy { Object.assign(this, config); } - public ngOnDestroy():void { + public ngOnDestroy(): void { this.destroyed = true; } + /** + * Adds new slide. If this slide is first in collection - set it as active and starts auto changing + * @param slide + */ public addSlide(slide: SlideComponent): void { this._slides.add(slide); if (this._slides.length === 1) { - slide.active = true; + this._currentActiveSlide = void 0; + this.activeSlide = 0; this.play(); } } + /** + * Removes specified slide. If this slide is active - will roll to another slide + * @param slide + */ public removeSlide(slide: SlideComponent): void { const remIndex = this._slides.indexOf(slide); - if (this.getCurrentSlideIndex() === remIndex) { + if (this._currentActiveSlide === remIndex) { - // behavior in case removing of a current active slide + // removing of active slide + let nextSlideIndex: number = void 0; if (this._slides.length > 1) { - if (this.isLast(remIndex) && this.noWrap) { - - // last slide and looping is disabled - step backward - this._select(Direction.PREV, undefined, true); - } else { - this._select(Direction.NEXT, undefined, true); - } + // if this slide last - will roll to first slide, if noWrap flag is FALSE or to previous, if noWrap is TRUE + // in case, if this slide in middle of collection, index of next slide is same to removed + nextSlideIndex = !this.isLast(remIndex) ? remIndex : + this.noWrap ? remIndex - 1 : 0; } - } + this._slides.remove(remIndex); + + // prevents exception with changing some value after checking + setTimeout(() => { + this._select(nextSlideIndex); + }, 0); + } else { + this._slides.remove(remIndex); + const currentSlideIndex = this.getCurrentSlideIndex(); + setTimeout(() => { + // after removing, need to actualize index of current active slide + this._currentActiveSlide = currentSlideIndex; + this.activeSlideChange.emit(this._currentActiveSlide); + }, 0); - this._slides.remove(remIndex); - this.activeSlideChanged.emit(this.getCurrentSlideIndex()); + } } - public nextSlide(): void { - this._select(Direction.NEXT); + /** + * Rolling to next slide + * @param force: {boolean} if true - will ignore noWrap flag + */ + public nextSlide(force: boolean = false): void { + this.activeSlide = this.findNextSlideIndex(Direction.NEXT, force); } - public previousSlide(): void { - this._select(Direction.PREV); + /** + * Rolling to previous slide + * @param force: {boolean} if true - will ignore noWrap flag + */ + public previousSlide(force: boolean = false): void { + this.activeSlide = this.findNextSlideIndex(Direction.PREV, force); } + /** + * Rolling to specified slide + * @param index: {number} index of slide, which must be shown + */ public selectSlide(index: number): void { - this._select(undefined, index, true); + this.activeSlide = index; } - public play():void { + /** + * Starts a auto changing of slides + */ + public play(): void { if (!this.isPlaying) { this.isPlaying = true; this.restartTimer(); } } - public pause():void { + /** + * Stops a auto changing of slides + */ + public pause(): void { if (!this.noPause) { this.isPlaying = false; this.resetTimer(); } } + /** + * Finds and returns index of currently displayed slide + * @returns {number} + */ public getCurrentSlideIndex(): number { return this._slides.findIndex((slide: SlideComponent) => slide.active); } + /** + * Defines, whether the specified index is last in collection + * @param index + * @returns {boolean} + */ public isLast(index: number): boolean { return index + 1 >= this._slides.length; } /** - * Select slide - * @param direction: {Direction} - * @param nextIndex: {number}(optional) - index of next active slide - * @param force: boolean {optional} - if true, selection will ignore this.noWrap flag(for jumping after removing a current slide) - * @private + * Defines next slide index, depending of direction + * @param direction: Direction(UNKNOWN|PREV|NEXT) + * @param force: {boolean} if TRUE - will ignore noWrap flag, else will return undefined if next slide require wrapping + * @returns {any} */ - private _select(direction: Direction = 0, nextIndex?: number, force: boolean = false): void { - const currentSlideIndex = this.getCurrentSlideIndex(); + private findNextSlideIndex(direction: Direction, force: boolean): number { + let nextSlideIndex: number = 0; - // if this is last slide, need to going forward but looping is disabled - if (!force && (this.isLast(currentSlideIndex) && direction && direction !== Direction.PREV && this.noWrap)) { - this.pause(); - return; + if (!force && (this.isLast(this.activeSlide) && direction !== Direction.PREV && this.noWrap)) { + return void 0; } - let currentSlide = this._slides.get(currentSlideIndex); - let nextSlideIndex: number = !isNaN(nextIndex) ? nextIndex : undefined; - - if (direction !== undefined && direction !== Direction.UNKNOWN) { - switch (direction) { - case Direction.NEXT: - - // if this is last slide, not force, looping is disabled and need to going forward - select current slide, as a next - nextSlideIndex = (!this.isLast(currentSlideIndex)) ? currentSlideIndex + 1 : - (!force && this.noWrap ) ? currentSlideIndex : 0; - break; - case Direction.PREV: - - // if this is first slide, not force, looping is disabled and need to going backward - select current slide, as a next - nextSlideIndex = (currentSlideIndex > 0) ? currentSlideIndex - 1 : - (!force && this.noWrap ) ? currentSlideIndex : this._slides.length - 1; - break; - default: - throw new Error('Wrong direction'); - } + switch (direction) { + case Direction.NEXT: + // if this is last slide, not force, looping is disabled and need to going forward - select current slide, as a next + nextSlideIndex = (!this.isLast(this._currentActiveSlide)) ? this._currentActiveSlide + 1 : + (!force && this.noWrap ) ? this._currentActiveSlide : 0; + break; + case Direction.PREV: + // if this is first slide, not force, looping is disabled and need to going backward - select current slide, as a next + nextSlideIndex = (this._currentActiveSlide > 0) ? this._currentActiveSlide - 1 : + (!force && this.noWrap ) ? this._currentActiveSlide : this._slides.length - 1; + break; + default: + throw new Error('Unknown direction'); } + return nextSlideIndex; + } - if (nextSlideIndex === currentSlideIndex) { + /** + * Sets a slide, which specified through index, as active + * @param index + * @private + */ + private _select(index: number): void { + if (isNaN(index)) { + this.pause(); return; } - - let nextSlide = this._slides.get(nextSlideIndex); - currentSlide.active = false; - nextSlide.active = true; - this.activeSlideChanged.emit(nextSlideIndex); - + let currentSlide = this._slides.get(this._currentActiveSlide); + if (currentSlide) { + currentSlide.active = false; + } + let nextSlide = this._slides.get(index); + if (nextSlide) { + this._currentActiveSlide = index; + nextSlide.active = true; + this.activeSlide = index; + this.activeSlideChange.emit(index); + } } - private restartTimer():any { + /** + * Starts loop of auto changing of slides + */ + private restartTimer(): any { this.resetTimer(); let interval = +this.interval; if (!isNaN(interval) && interval > 0) { @@ -208,7 +277,7 @@ export class CarouselComponent implements OnDestroy { () => { let nInterval = +this.interval; if (this.isPlaying && !isNaN(this.interval) && nInterval > 0 && this.slides.length) { - this._select(Direction.NEXT); + this.nextSlide(); } else { this.pause(); } @@ -217,7 +286,10 @@ export class CarouselComponent implements OnDestroy { } } - private resetTimer():void { + /** + * Stops loop of auto changing of slides + */ + private resetTimer(): void { if (this.currentInterval) { clearInterval(this.currentInterval); this.currentInterval = void 0; diff --git a/src/carousel/carousel.config.ts b/src/carousel/carousel.config.ts index 32e2702d10..e6a8dafac4 100644 --- a/src/carousel/carousel.config.ts +++ b/src/carousel/carousel.config.ts @@ -2,7 +2,12 @@ import { Injectable } from '@angular/core'; @Injectable() export class CarouselConfig { + /** Default interval of auto changing of slides */ public interval: number = 5000; + + /** Is loop of auto changing of slides can be paused */ public noPause: boolean = false; + + /** Is slides can wrap from the last to the first slide */ public noWrap: boolean = false; } diff --git a/src/spec/ng-bootstrap/carousel.spec.ts b/src/spec/ng-bootstrap/carousel.spec.ts new file mode 100644 index 0000000000..71e4825f04 --- /dev/null +++ b/src/spec/ng-bootstrap/carousel.spec.ts @@ -0,0 +1,418 @@ +/* tslint:disable:max-classes-per-file max-file-line-count component-class-suffix */ +/** + * @copyright Angular ng-bootstrap team + */ +import { fakeAsync, discardPeriodicTasks, tick, TestBed, ComponentFixture, inject } from '@angular/core/testing'; +import { createGenericTestComponent } from './test/common'; + +import { By } from '@angular/platform-browser'; +import { Component } from '@angular/core'; + +import { CarouselModule, CarouselComponent, CarouselConfig } from '../../carousel'; + +const createTestComponent = (html: string) => + createGenericTestComponent(html, TestComponent) as ComponentFixture; + +function expectActiveSlides(nativeEl: HTMLDivElement, active: boolean[]): void { + const slideElms = nativeEl.querySelectorAll('.carousel-item'); + const indicatorElms = nativeEl.querySelectorAll('ol.carousel-indicators > li'); + + expect(slideElms.length).toBe(active.length); + expect(indicatorElms.length).toBe(active.length); + + for (let i = 0; i < active.length; i++) { + if (active[i]) { + expect(slideElms[i]).toHaveCssClass('active'); + expect(indicatorElms[i]).toHaveCssClass('active'); + } else { + expect(slideElms[i]).not.toHaveCssClass('active'); + expect(indicatorElms[i]).not.toHaveCssClass('active'); + } + } +} + +describe('ngb-carousel', () => { + beforeEach(() => { + TestBed.configureTestingModule({declarations: [TestComponent], imports: [CarouselModule.forRoot()]}); + }); + + it('should initialize inputs with default values', () => { + const defaultConfig = new CarouselConfig(); + const carousel = new CarouselComponent(new CarouselConfig()); + + expect(carousel.interval).toBe(defaultConfig.interval); + expect(carousel.noWrap).toBe(defaultConfig.noWrap); + // expect(carousel.keyboard).toBe(defaultConfig.keyboard); + }); + + it('should render slides and navigation indicators', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + const fixture = createTestComponent(html); + + const slideElms = fixture.nativeElement.querySelectorAll('.carousel-item'); + expect(slideElms.length).toBe(2); + expect(slideElms[0].textContent).toMatch(/slide1/); + expect(slideElms[1].textContent).toMatch(/slide2/); + + expect(fixture.nativeElement.querySelectorAll('ol.carousel-indicators > li').length).toBe(2); + + discardPeriodicTasks(); + })); + + it('should mark the first slide as active by default', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + expectActiveSlides(fixture.nativeElement, [true, false]); + + discardPeriodicTasks(); + })); + + it('should mark the requested slide as active', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + + fixture.componentInstance.activeSlideIndex = 1; + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + discardPeriodicTasks(); + })); + + it('should auto-correct when slide index is undefined', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + expectActiveSlides(fixture.nativeElement, [true, false]); + + discardPeriodicTasks(); + })); + + it('should change slide on indicator click', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + const indicatorElms = fixture.nativeElement.querySelectorAll('ol.carousel-indicators > li'); + + expectActiveSlides(fixture.nativeElement, [true, false]); + + indicatorElms[1].click(); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + discardPeriodicTasks(); + })); + + it('should change slide on carousel control click', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + + const controlElms = fixture.nativeElement.querySelectorAll('.carousel-control'); + + expectActiveSlides(fixture.nativeElement, [true, false]); + + controlElms[1].click(); // next + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + controlElms[0].click(); // prev + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + discardPeriodicTasks(); + })); + + it('should change slide on time passage (default interval value)', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + expectActiveSlides(fixture.nativeElement, [true, false]); + + tick(6000); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + discardPeriodicTasks(); + })); + + it('should change slide on time passage (custom interval value)', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + + expectActiveSlides(fixture.nativeElement, [true, false]); + + tick(1000); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + tick(1200); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + discardPeriodicTasks(); + })); + + it('should not change slide on time passage (custom interval value is zero)', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + + expectActiveSlides(fixture.nativeElement, [true, false]); + + tick(1000); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + tick(1200); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + discardPeriodicTasks(); + })); + + it('should pause / resume slide change with time passage on mouse enter / leave', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + + const carouselDebugEl = fixture.debugElement.query(By.directive(CarouselComponent)); + + expectActiveSlides(fixture.nativeElement, [true, false]); + + carouselDebugEl.children[0].triggerEventHandler('mouseenter', {}); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + tick(6000); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + carouselDebugEl.children[0].triggerEventHandler('mouseleave', {}); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + tick(6000); + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + discardPeriodicTasks(); + })); + + it('should wrap slide changes by default', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + + const controlElms = fixture.nativeElement.querySelectorAll('.carousel-control'); + + expectActiveSlides(fixture.nativeElement, [true, false]); + + controlElms[1].click(); // next + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + controlElms[1].click(); // next + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + controlElms[0].click(); // prev + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + discardPeriodicTasks(); + })); + + it('should not wrap slide changes by when requested', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + + const controlElms = fixture.nativeElement.querySelectorAll('.carousel-control'); + + expectActiveSlides(fixture.nativeElement, [true, false]); + + controlElms[0].click(); // prev + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + controlElms[1].click(); // next + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + controlElms[1].click(); // next + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + discardPeriodicTasks(); + })); + + xit('should change on key arrowRight and arrowLeft', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + expectActiveSlides(fixture.nativeElement, [true, false]); + + fixture.debugElement.query(By.directive(CarouselComponent)).triggerEventHandler('keydown.arrowRight', {}); // next() + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + fixture.debugElement.query(By.directive(CarouselComponent)).triggerEventHandler('keydown.arrowLeft', {}); // prev() + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + fixture.componentInstance.keyboard = false; + fixture.detectChanges(); + fixture.debugElement.query(By.directive(CarouselComponent)).triggerEventHandler('keydown.arrowRight', {}); // prev() + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + discardPeriodicTasks(); + + })); + + xit('should listen to keyevents based on keyboard attribute', fakeAsync(() => { + const html = ` + + slide1 + slide2 + + `; + + const fixture = createTestComponent(html); + expectActiveSlides(fixture.nativeElement, [true, false]); + + fixture.componentInstance.keyboard = false; + fixture.detectChanges(); + fixture.debugElement.query(By.directive(CarouselComponent)).triggerEventHandler('keydown.arrowRight', {}); // prev() + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [true, false]); + + fixture.componentInstance.keyboard = true; + fixture.detectChanges(); + fixture.debugElement.query(By.directive(CarouselComponent)).triggerEventHandler('keydown.arrowRight', {}); // next() + fixture.detectChanges(); + expectActiveSlides(fixture.nativeElement, [false, true]); + + discardPeriodicTasks(); + + })); + + describe('Custom config', () => { + let config: CarouselConfig; + + beforeEach(() => { TestBed.configureTestingModule({imports: [CarouselModule.forRoot()]}); }); + + beforeEach(inject([CarouselConfig], (c: CarouselConfig) => { + config = c; + config.interval = 1000; + config.noWrap = true; + // config.keyboard = false; + })); + + it('should initialize inputs with provided config', () => { + const fixture = TestBed.createComponent(CarouselComponent); + fixture.detectChanges(); + + const carousel = fixture.componentInstance; + expect(carousel.interval).toBe(config.interval); + expect(carousel.noWrap).toBe(config.noWrap); + // expect(carousel.keyboard).toBe(config.keyboard); + }); + }); + + describe('Custom config as provider', () => { + const config = new CarouselConfig(); + config.interval = 1000; + config.noWrap = true; + // config.keyboard = false; + + beforeEach(() => { + TestBed.configureTestingModule( + {imports: [CarouselModule.forRoot()], providers: [{provide: CarouselConfig, useValue: config}]}); + }); + + it('should initialize inputs with provided config as provider', () => { + const fixture = TestBed.createComponent(CarouselComponent); + fixture.detectChanges(); + + const carousel = fixture.componentInstance; + expect(carousel.interval).toBe(config.interval); + expect(carousel.noWrap).toBe(config.noWrap); + // expect(carousel.keyboard).toBe(config.keyboard); + }); + }); + +}); + +@Component({selector: 'test-cmp', template: ''}) +class TestComponent { + public activeSlideIndex: number; + // keyboard = true; +} diff --git a/src/spec/ng-bootstrap/utils/linkedlist.spec.ts b/src/spec/utils/linkedlist.spec.ts similarity index 98% rename from src/spec/ng-bootstrap/utils/linkedlist.spec.ts rename to src/spec/utils/linkedlist.spec.ts index 71af9f8bb8..84378b5bbb 100644 --- a/src/spec/ng-bootstrap/utils/linkedlist.spec.ts +++ b/src/spec/utils/linkedlist.spec.ts @@ -1,4 +1,4 @@ -import LinkedList from '../../../utils/linked-list.class'; +import LinkedList from '../../utils/linked-list.class'; let list: LinkedList; diff --git a/src/utils/linked-list.class.ts b/src/utils/linked-list.class.ts index a63b5cddd6..6093df856c 100644 --- a/src/utils/linked-list.class.ts +++ b/src/utils/linked-list.class.ts @@ -32,7 +32,7 @@ export default class LinkedList extends Array { public get(position: number): T { if (this.length === 0 || position < 0 || position >= this.length) { - throw new Error('Position is out of the list'); + return void 0; } let current = this.head; From 789985afa666ece52948de60eefa923a32827597 Mon Sep 17 00:00:00 2001 From: Nikita Date: Mon, 26 Dec 2016 16:41:09 +0200 Subject: [PATCH 4/8] chode(docs): Update collapse.directive.ts (#1393) --- src/collapse/collapse.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/collapse/collapse.directive.ts b/src/collapse/collapse.directive.ts index 579a797c7a..45e3b5cfa6 100644 --- a/src/collapse/collapse.directive.ts +++ b/src/collapse/collapse.directive.ts @@ -18,9 +18,9 @@ import { ]*/ }) export class CollapseDirective { - /** This event fired as soon as content is collapsed */ + /** This event fires as soon as content collapses */ @Output() public collapsed: EventEmitter = new EventEmitter(); - /** This event fired as soon as content becomes visible */ + /** This event fires as soon as content becomes visible */ @Output() public expanded: EventEmitter = new EventEmitter(); @HostBinding('style.display') From dd54f63d09c0f425ed04b494667a19d4627d9b25 Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Mon, 26 Dec 2016 17:03:44 +0200 Subject: [PATCH 5/8] chore(merge): fixed linting issue --- src/carousel/slide.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/carousel/slide.component.ts b/src/carousel/slide.component.ts index a1811bc625..f0659c640f 100644 --- a/src/carousel/slide.component.ts +++ b/src/carousel/slide.component.ts @@ -11,7 +11,7 @@ import { CarouselComponent } from './carousel.component'; ` }) export class SlideComponent implements OnInit, OnDestroy { - + /** Is current slide active */ @HostBinding('class.active') @Input() public active:boolean; From c6d483535a36b5814d1f3ff708752ec0d882c8f2 Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Tue, 27 Dec 2016 16:01:18 +0200 Subject: [PATCH 6/8] fix(typeahead): fixed typeahead positioning inside form-inline fixes #1396 --- src/positioning/ng-positioning.ts | 4 ++-- src/typeahead/typeahead-container.component.ts | 2 +- src/typeahead/typeahead.directive.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/positioning/ng-positioning.ts b/src/positioning/ng-positioning.ts index c9cd5dc442..9fcf9a754c 100644 --- a/src/positioning/ng-positioning.ts +++ b/src/positioning/ng-positioning.ts @@ -83,8 +83,8 @@ export class Positioning { bottom: hostElPosition.top + hostElPosition.height }; const targetElBCR = targetElement.getBoundingClientRect(); - const placementPrimary = placement.split('-')[0] || 'top'; - const placementSecondary = placement.split('-')[1] || 'center'; + const placementPrimary = placement.split(' ')[0] || 'top'; + const placementSecondary = placement.split(' ')[1] || 'center'; let targetElPosition: ClientRect = { height: targetElBCR.height || targetElement.offsetHeight, diff --git a/src/typeahead/typeahead-container.component.ts b/src/typeahead/typeahead-container.component.ts index 9d5a826b9b..d92e54e7b6 100644 --- a/src/typeahead/typeahead-container.component.ts +++ b/src/typeahead/typeahead-container.component.ts @@ -60,7 +60,7 @@ import { TypeaheadMatch } from './typeahead-match.class';
    `, // tslint:disable-next-line - host: {'[class]': '"dropdown open"'}, + host: {'class': 'dropdown open', style: 'position: absolute;' }, encapsulation: ViewEncapsulation.None }) export class TypeaheadContainerComponent { diff --git a/src/typeahead/typeahead.directive.ts b/src/typeahead/typeahead.directive.ts index 5cabc8a686..c8669a9a8a 100644 --- a/src/typeahead/typeahead.directive.ts +++ b/src/typeahead/typeahead.directive.ts @@ -217,8 +217,8 @@ export class TypeaheadDirective implements OnInit, OnDestroy { this._typeahead .attach(TypeaheadContainerComponent) // todo: add append to body, after updating positioning service - // .to(this.container) - // .position({attachment: 'bottom left'}) + .to(this.container) + .position({attachment: 'bottom left'}) .show({ typeaheadRef: this, placement: this.placement, From 92f82c019a8c8ac79583491d56c00abc3545f5be Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Tue, 27 Dec 2016 17:49:05 +0200 Subject: [PATCH 7/8] v1.1.16-10 --- package.json | 2 +- src/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1109441e5b..893212bbac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-bootstrap-base", - "version": "1.1.16-9", + "version": "1.1.16-10", "description": "angular2 bootstrap components", "private": true, "scripts": { diff --git a/src/package.json b/src/package.json index 693013d458..bea7180555 100644 --- a/src/package.json +++ b/src/package.json @@ -1,6 +1,6 @@ { "name": "ng2-bootstrap", - "version": "1.1.16-9", + "version": "1.1.16-10", "dependencies": { "moment": "*" }, From 78f6e49f92a247963db09f8d892ad53bbe2b273a Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Wed, 28 Dec 2016 13:47:00 +0200 Subject: [PATCH 8/8] fix(tabs): removed onDestroy event fixes #696, fixes #610 --- src/tabs/tab.directive.ts | 45 +++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/src/tabs/tab.directive.ts b/src/tabs/tab.directive.ts index 31947970d5..71926db536 100644 --- a/src/tabs/tab.directive.ts +++ b/src/tabs/tab.directive.ts @@ -1,28 +1,25 @@ -import { - Directive, EventEmitter, HostBinding, Input, OnDestroy, Output, TemplateRef, OnInit -} from '@angular/core'; - +import { Directive, EventEmitter, HostBinding, Input, Output, TemplateRef, OnInit } from '@angular/core'; import { TabsetComponent } from './tabset.component'; @Directive({selector: 'tab, [tab]'}) -export class TabDirective implements OnDestroy, OnInit { +export class TabDirective implements OnInit { /** tab header text */ - @Input() public heading:string; + @Input() public heading: string; /** if true tab can not be activated */ - @Input() public disabled:boolean; + @Input() public disabled: boolean; /** if true tab can be removable, additional button will appear */ - @Input() public removable:boolean; + @Input() public removable: boolean; /** if set, will be added to the tab's class atribute */ - @Input() public customClass:string; + @Input() public customClass: string; /** tab active state toggle */ @HostBinding('class.active') @Input() - public get active():boolean { + public get active(): boolean { return this._active; } - public set active(active:boolean) { + public set active(active: boolean) { if (this.disabled && active || !active) { if (!active) { this._active = active; @@ -34,7 +31,7 @@ export class TabDirective implements OnDestroy, OnInit { this._active = active; this.select.emit(this); - this.tabset.tabs.forEach((tab:TabDirective) => { + this.tabset.tabs.forEach((tab: TabDirective) => { if (tab !== this) { tab.active = false; } @@ -42,28 +39,24 @@ export class TabDirective implements OnDestroy, OnInit { } /** fired when tab became active, $event:Tab equals to selected instance of Tab component */ - @Output() public select:EventEmitter = new EventEmitter(); + @Output() public select: EventEmitter = new EventEmitter(); /** fired when tab became inactive, $event:Tab equals to deselected instance of Tab component */ - @Output() public deselect:EventEmitter = new EventEmitter(); + @Output() public deselect: EventEmitter = new EventEmitter(); /** fired before tab will be removed */ - @Output() public removed:EventEmitter = new EventEmitter(); + @Output() public removed: EventEmitter = new EventEmitter(); - @HostBinding('class.tab-pane') public addClass:boolean = true; + @HostBinding('class.tab-pane') public addClass: boolean = true; - public headingRef:TemplateRef; - public tabset:TabsetComponent; - protected _active:boolean; + public headingRef: TemplateRef; + public tabset: TabsetComponent; + protected _active: boolean; - public constructor(tabset:TabsetComponent) { + public constructor(tabset: TabsetComponent) { this.tabset = tabset; this.tabset.addTab(this); } - public ngOnInit():void { - this.removable = !!this.removable; - } - - public ngOnDestroy():void { - this.tabset.removeTab(this); + public ngOnInit(): void { + this.removable = this.removable; } }