From 403e1274f6488f5a9b5190e17038856b70c1676b Mon Sep 17 00:00:00 2001 From: Daan Knippers Date: Wed, 30 May 2018 16:53:29 +0200 Subject: [PATCH] fix(event-clicked): clicking actual events now triggers eventClicked BREAKING CHANGE: eventClicked now fires whenever the event container instead of the event title is clicked Closes #568 --- .../common/calendar-event-title.component.ts | 5 +-- src/modules/common/click.directive.ts | 21 +++++++--- .../day/calendar-all-day-event.component.ts | 6 +-- .../day/calendar-day-view-event.component.ts | 6 +-- src/modules/day/calendar-day-view.scss | 6 +-- src/modules/month/calendar-month-view.scss | 12 ++++-- .../calendar-week-view-event.component.ts | 6 +-- src/modules/week/calendar-week-view.scss | 5 +-- test/calendar-day-view.component.spec.ts | 12 +++--- test/calendar-week-view.component.spec.ts | 39 +++++++++++++++++++ tslint.json | 3 +- 11 files changed, 86 insertions(+), 35 deletions(-) diff --git a/src/modules/common/calendar-event-title.component.ts b/src/modules/common/calendar-event-title.component.ts index 2606e242b..9b09e387e 100644 --- a/src/modules/common/calendar-event-title.component.ts +++ b/src/modules/common/calendar-event-title.component.ts @@ -8,11 +8,10 @@ import { CalendarEvent } from 'calendar-utils'; #defaultTemplate let-event="event" let-view="view"> - - + (); @@ -20,7 +22,8 @@ export class ClickDirective implements OnInit, OnDestroy { constructor( private renderer: Renderer2, - private elm: ElementRef + private elm: ElementRef, + @Inject(DOCUMENT) private document ) {} ngOnInit(): void { @@ -33,9 +36,17 @@ export class ClickDirective implements OnInit, OnDestroy { this.elm.nativeElement, eventName, event => { - const isClickableElement = clickElements.has(event.target); - const isThisClickableElement = this.elm.nativeElement === event.target; - if (!isClickableElement || isThisClickableElement) { + // prevent child click events from firing on parent elements that also have click events + let nearestClickableParent: HTMLElement = event.target; + while ( + !clickElements.has(nearestClickableParent) && + nearestClickableParent !== this.document.body + ) { + nearestClickableParent = nearestClickableParent.parentElement; + } + const isThisClickableElement = + this.elm.nativeElement === nearestClickableParent; + if (isThisClickableElement) { this.click.next(event); } } diff --git a/src/modules/day/calendar-all-day-event.component.ts b/src/modules/day/calendar-all-day-event.component.ts index 96a085954..dc7ff9b5a 100644 --- a/src/modules/day/calendar-all-day-event.component.ts +++ b/src/modules/day/calendar-all-day-event.component.ts @@ -17,14 +17,14 @@ import { CalendarEvent } from 'calendar-utils';
+ [style.borderColor]="event.color?.primary" + (mwlClick)="eventClicked.emit()"> &ngsp; + view="day">
diff --git a/src/modules/day/calendar-day-view-event.component.ts b/src/modules/day/calendar-day-view-event.component.ts index a61e5b380..f85fc8b7c 100644 --- a/src/modules/day/calendar-day-view-event.component.ts +++ b/src/modules/day/calendar-day-view-event.component.ts @@ -25,14 +25,14 @@ import { DayViewEvent } from 'calendar-utils'; [tooltipPlacement]="tooltipPlacement" [tooltipEvent]="dayEvent.event" [tooltipTemplate]="tooltipTemplate" - [tooltipAppendToBody]="tooltipAppendToBody"> + [tooltipAppendToBody]="tooltipAppendToBody" + (mwlClick)="eventClicked.emit()"> &ngsp; + view="day"> diff --git a/src/modules/day/calendar-day-view.scss b/src/modules/day/calendar-day-view.scss index c30af516f..52d20bdb1 100644 --- a/src/modules/day/calendar-day-view.scss +++ b/src/modules/day/calendar-day-view.scss @@ -49,6 +49,7 @@ .cal-event-container { position: absolute; + cursor: pointer; &.resize-active { z-index: 1; @@ -69,10 +70,6 @@ color: #1e90ff; } - .cal-event-title:link { - color: currentColor; - } - .cal-draggable { cursor: move; } @@ -90,6 +87,7 @@ .cal-all-day-event { padding: 8px; border: solid 1px; + cursor: pointer; } .cal-drag-active { diff --git a/src/modules/month/calendar-month-view.scss b/src/modules/month/calendar-month-view.scss index c1809739f..f1df0abb4 100644 --- a/src/modules/month/calendar-month-view.scss +++ b/src/modules/month/calendar-month-view.scss @@ -107,10 +107,6 @@ color: #fff; } - .cal-event-title:link { - color: currentColor; - } - .cal-day-cell.cal-in-month.cal-has-events { cursor: pointer; } @@ -162,4 +158,12 @@ .cal-drag-active * { pointer-events: none; } + + .cal-event-title { + cursor: pointer; + + &:hover { + text-decoration: underline; + } + } } diff --git a/src/modules/week/calendar-week-view-event.component.ts b/src/modules/week/calendar-week-view-event.component.ts index 45a231034..708e99759 100644 --- a/src/modules/week/calendar-week-view-event.component.ts +++ b/src/modules/week/calendar-week-view-event.component.ts @@ -25,14 +25,14 @@ import { WeekViewEvent } from 'calendar-utils'; [tooltipPlacement]="tooltipPlacement" [tooltipEvent]="weekEvent.event" [tooltipTemplate]="tooltipTemplate" - [tooltipAppendToBody]="tooltipAppendToBody"> + [tooltipAppendToBody]="tooltipAppendToBody" + (mwlClick)="eventClicked.emit()"> &ngsp; + view="week"> diff --git a/src/modules/week/calendar-week-view.scss b/src/modules/week/calendar-week-view.scss index fd5591164..808fd1aa7 100644 --- a/src/modules/week/calendar-week-view.scss +++ b/src/modules/week/calendar-week-view.scss @@ -35,6 +35,7 @@ .cal-event-container { display: inline-block; position: absolute; + cursor: pointer; &.resize-active { z-index: 1; @@ -54,10 +55,6 @@ color: #1e90ff; } - .cal-event-title:link { - color: currentColor; - } - .cal-draggable { cursor: move; } diff --git a/test/calendar-day-view.component.spec.ts b/test/calendar-day-view.component.spec.ts index a8f3e6ea4..18938bf7b 100644 --- a/test/calendar-day-view.component.spec.ts +++ b/test/calendar-day-view.component.spec.ts @@ -22,7 +22,6 @@ import { DateAdapter } from '../src'; import { Subject } from 'rxjs'; -import { spy } from 'sinon'; import { triggerDomEvent, ExternalEventComponent } from './util'; import { take } from 'rxjs/operators'; import { adapterFactory } from '../src/date-adapters/date-fns'; @@ -131,7 +130,7 @@ describe('CalendarDayViewComponent component', () => { event: fixture.componentInstance.events[0] }); }); - fixture.nativeElement.querySelector('.cal-event a').click(); + fixture.nativeElement.querySelector('.cal-event-title').click(); })); it('should call the event clicked callback on all day events', async(() => { @@ -157,7 +156,7 @@ describe('CalendarDayViewComponent component', () => { event: fixture.componentInstance.events[0] }); }); - fixture.nativeElement.querySelector('mwl-calendar-event-title a').click(); + fixture.nativeElement.querySelector('.cal-event-title').click(); })); it('should add a custom CSS class to events', () => { @@ -285,6 +284,8 @@ describe('CalendarDayViewComponent component', () => { CalendarDayViewComponent > = TestBed.createComponent(CalendarDayViewComponent); fixture.componentInstance.viewDate = new Date('2016-06-27'); + const eventClicked = sinon.spy(); + fixture.componentInstance.eventClicked.subscribe(eventClicked); fixture.componentInstance.events = [ { start: new Date('2016-06-26'), @@ -297,7 +298,7 @@ describe('CalendarDayViewComponent component', () => { actions: [ { label: '', - onClick: spy(), + onClick: sinon.spy(), cssClass: 'foo' } ] @@ -310,10 +311,11 @@ describe('CalendarDayViewComponent component', () => { ); expect(action.innerHTML).to.equal(''); expect(action.classList.contains('foo')).to.equal(true); - action.click(); + action.querySelector('i').click(); expect( fixture.componentInstance.events[0].actions[0].onClick ).to.have.been.calledWith({ event: fixture.componentInstance.events[0] }); + expect(eventClicked).not.to.have.been.called; }); it('should allow the event width to be customised', () => { diff --git a/test/calendar-week-view.component.spec.ts b/test/calendar-week-view.component.spec.ts index 83ea03f27..2d3bd8ecf 100644 --- a/test/calendar-week-view.component.spec.ts +++ b/test/calendar-week-view.component.spec.ts @@ -1102,4 +1102,43 @@ describe('calendarWeekView component', () => { ).to.equal(true); fixture.destroy(); }); + + it('should add event actions to each event', () => { + const fixture: ComponentFixture< + CalendarWeekViewComponent + > = TestBed.createComponent(CalendarWeekViewComponent); + fixture.componentInstance.viewDate = new Date('2016-06-27'); + const eventClicked = sinon.spy(); + fixture.componentInstance.eventClicked.subscribe(eventClicked); + fixture.componentInstance.events = [ + { + start: new Date('2016-06-26'), + end: new Date('2016-06-28'), + title: 'foo', + color: { + primary: 'blue', + secondary: 'rgb(238, 238, 238)' + }, + actions: [ + { + label: '', + onClick: sinon.spy(), + cssClass: 'foo' + } + ] + } + ]; + fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} }); + fixture.detectChanges(); + const action: HTMLElement = fixture.nativeElement.querySelector( + '.cal-event .cal-event-action' + ); + expect(action.innerHTML).to.equal(''); + expect(action.classList.contains('foo')).to.equal(true); + action.querySelector('i').click(); + expect( + fixture.componentInstance.events[0].actions[0].onClick + ).to.have.been.calledWith({ event: fixture.componentInstance.events[0] }); + expect(eventClicked).not.to.have.been.called; + }); }); diff --git a/tslint.json b/tslint.json index bab4aa3cb..a4d2c60de 100644 --- a/tslint.json +++ b/tslint.json @@ -3,6 +3,7 @@ "rules": { "pipe-naming": [true, "camelCase", "calendar"], "use-host-property-decorator": false, - "no-inferrable-types": false + "no-inferrable-types": false, + "no-unused-expression": false } }