diff --git a/addon/components/power-calendar-range.js b/addon/components/power-calendar-range.js index 03a7ff06..70fda007 100644 --- a/addon/components/power-calendar-range.js +++ b/addon/components/power-calendar-range.js @@ -77,7 +77,7 @@ export default CalendarComponent.extend({ if (date && (date.hasOwnProperty('start') || date.hasOwnProperty('end'))) { range = { date }; } else { - range = this._buildRange({ date }); + range = this._buildRange({ date }, e); } let { start, end } = range.date; @@ -97,11 +97,11 @@ export default CalendarComponent.extend({ }, // Methods - _buildRange(day) { + _buildRange(day, e) { let selected = this.get('publicAPI.selected') || { start: null, end: null }; let { start, end } = getProperties(selected, 'start', 'end'); - if (this.get('proximitySelection')) { + if (this.get('proximitySelection') || (e && e.shiftKey)) { return this._buildRangeByProximity(day, start, end); } diff --git a/tests/integration/components/power-calendar-range-test.js b/tests/integration/components/power-calendar-range-test.js index cdb73449..1d707894 100644 --- a/tests/integration/components/power-calendar-range-test.js +++ b/tests/integration/components/power-calendar-range-test.js @@ -379,4 +379,48 @@ module('Integration | Component | power calendar range', function(hooks) { 'The end of the range has a special class' ); }); + + test('when shift+click it changes range to closest date', async function(assert) { + assert.expect(7); + this.selected = { start: new Date(2016, 1, 5), end: new Date(2016, 1, 9) }; + + await render(hbs` + {{#power-calendar-range selected=selected onSelect=(action (mut selected) value="date") as |calendar|}} + {{calendar.nav}} + {{calendar.days}} + {{/power-calendar-range}} + `); + let allDaysInRangeAreSelected = this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-05"]').classList.contains('ember-power-calendar-day--selected') + && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-06"]').classList.contains('ember-power-calendar-day--selected') + && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-07"]').classList.contains('ember-power-calendar-day--selected') + && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-08"]').classList.contains('ember-power-calendar-day--selected') + && this.element.querySelector('.ember-power-calendar-day[data-date="2016-02-09"]').classList.contains('ember-power-calendar-day--selected'); + assert.ok(allDaysInRangeAreSelected, 'All days in range are selected'); + assert.dom('.ember-power-calendar-day[data-date="2016-02-05"]').hasClass( + 'ember-power-calendar-day--range-start', + 'The start of the range has a special class' + ); + assert.dom('.ember-power-calendar-day[data-date="2016-02-09"]').hasClass( + 'ember-power-calendar-day--range-end', + 'The end of the range has a special class' + ); + await click('.ember-power-calendar-day[data-date="2016-02-10"]', { shiftKey: true }); + assert.dom('.ember-power-calendar-day[data-date="2016-02-05"]').hasClass( + 'ember-power-calendar-day--range-start', + 'The start of the range has a special class' + ); + assert.dom('.ember-power-calendar-day[data-date="2016-02-10"]').hasClass( + 'ember-power-calendar-day--range-end', + 'The end of the range has a special class' + ); + await click('.ember-power-calendar-day[data-date="2016-02-04"]', { shiftKey: true }); + assert.dom('.ember-power-calendar-day[data-date="2016-02-04"]').hasClass( + 'ember-power-calendar-day--range-start', + 'The start of the range has a special class' + ); + assert.dom('.ember-power-calendar-day[data-date="2016-02-10"]').hasClass( + 'ember-power-calendar-day--range-end', + 'The end of the range has a special class' + ); + }); });