diff --git a/addon/components/power-calendar/days.js b/addon/components/power-calendar/days.js index 3162153c..a84ea8d0 100644 --- a/addon/components/power-calendar/days.js +++ b/addon/components/power-calendar/days.js @@ -26,7 +26,8 @@ export default Component.extend({ weekdayFormat: 'short', // "min" | "short" | "long" powerCalendarService: service('power-calendar'), attributeBindings: [ - 'data-power-calendar-id' + 'data-power-calendar-id', + 'data-start-of-week' ], // CPs @@ -35,6 +36,10 @@ export default Component.extend({ return withLocale(this.get('calendar.locale'), () => moment.weekdaysMin()); }), + 'data-start-of-week': computed('localeStartOfWeek', function() { + return withLocale(this.get('calendar.locale'), () => moment().startOf('week').format('ddd').toLowerCase()); + }), + weekdaysShort: computed('calendar.locale', function() { return withLocale(this.get('calendar.locale'), () => moment.weekdaysShort()); }), @@ -74,14 +79,11 @@ export default Component.extend({ }), weeks: computed('showDaysAround', 'days', function() { - let { showDaysAround, days } = this.getProperties('showDaysAround', 'days'); + let { days } = this.getProperties('days'); let weeks = []; let i = 0; while (days[i]) { let daysOfWeek = days.slice(i, i + 7); - if (!showDaysAround) { - daysOfWeek = daysOfWeek.filter((d) => d.isCurrentMonth); - } weeks.push({ id: days[i].moment.format('YYYY-w'), days: daysOfWeek, @@ -160,15 +162,18 @@ export default Component.extend({ buildDay(dayMoment, today, calendar) { let id = dayMoment.format('YYYY-MM-DD'); let momentDate = dayMoment.clone(); + let isCurrentMonth = momentDate.month() === calendar.center.month(); return { id, number: momentDate.date(), date: momentDate._d, moment: momentDate, + dayOfWeek: momentDate.format('ddd').toLowerCase(), isDisabled: this.dayIsDisabled(momentDate), isFocused: this.get('focusedId') === id, - isCurrentMonth: momentDate.month() === calendar.center.month(), + isCurrentMonth, + isVisible: isCurrentMonth || this.get('showDaysAround'), isToday: momentDate.isSame(today, 'day'), isSelected: this.dayIsSelected(momentDate, calendar) }; diff --git a/addon/templates/components/power-calendar/days.hbs b/addon/templates/components/power-calendar/days.hbs index 2266f5f7..01ace0a3 100644 --- a/addon/templates/components/power-calendar/days.hbs +++ b/addon/templates/components/power-calendar/days.hbs @@ -1,4 +1,4 @@ -
+
{{#each weekdaysNames as |wdn|}}
{{wdn}}
{{/each}} @@ -6,21 +6,27 @@
{{#each weeks key='id' as |week|}} -
+
{{#each week.days key='id' as |day|}} - + {{#if day.isVisible}} + + + {{else}} + + {{/if}} {{/each}}
{{/each}} diff --git a/app/styles/ember-power-calendar.scss b/app/styles/ember-power-calendar.scss index d74489de..1c7182ef 100644 --- a/app/styles/ember-power-calendar.scss +++ b/app/styles/ember-power-calendar.scss @@ -1,3 +1,6 @@ +$cell-spacing: 2px; +$row-spacing: 2px; + .ember-power-calendar { box-sizing: border-box; position: relative; @@ -24,6 +27,7 @@ .ember-power-calendar-row { display: flex; justify-content: space-between; + margin: $row-spacing 0; } .ember-power-calendar-weekday { -webkit-appearance: none; @@ -96,6 +100,9 @@ .ember-power-calendar-day:not([disabled]):hover { background-color: #eee; } +.ember-power-calendar-day.ember-power-calendar-day--blank:hover { + background-color: inherit; +} .ember-power-calendar-day--other-month:not([disabled]):hover { color: #aaa; } @@ -123,7 +130,7 @@ $cell-size: null, $cell-width: $cell-size, $cell-height: $cell-size, - $cell-with-spacing-width: $cell-width + 2px, + $cell-with-spacing-width: $cell-width + $cell-spacing, $row-padding-top: 0, $row-padding-bottom: 0, $row-padding-left: 0, @@ -132,49 +139,16 @@ width: $row-width; .ember-power-calendar-week:first-child { - &[data-missing-days="1"] { - padding-left: $cell-with-spacing-width * 1; - } - &[data-missing-days="2"] { - padding-left: $cell-with-spacing-width * 2; - } - &[data-missing-days="3"] { - padding-left: $cell-with-spacing-width * 3; - } - &[data-missing-days="4"] { - padding-left: $cell-with-spacing-width * 4; - } - &[data-missing-days="5"] { - padding-left: $cell-with-spacing-width * 5; - } - &[data-missing-days="6"] { - padding-left: $cell-with-spacing-width * 6; - } + justify-content: flex-end; } .ember-power-calendar-week:last-child { - &[data-missing-days="1"] { - padding-right: $cell-with-spacing-width * 1; - } - &[data-missing-days="2"] { - padding-right: $cell-with-spacing-width * 2; - } - &[data-missing-days="3"] { - padding-right: $cell-with-spacing-width * 3; - } - &[data-missing-days="4"] { - padding-right: $cell-with-spacing-width * 4; - } - &[data-missing-days="5"] { - padding-right: $cell-with-spacing-width * 5; - } - &[data-missing-days="6"] { - padding-right: $cell-with-spacing-width * 6; - } + justify-content: flex-start; } .ember-power-calendar-day, .ember-power-calendar-weekday { max-width: $cell-width; max-height: $cell-height; width: $cell-width; + margin: 0 $cell-spacing; height: $cell-height; } .ember-power-calendar-weekdays, .ember-power-calendar-week { diff --git a/package.json b/package.json index b91fb95b..38e59258 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "component" ], "dependencies": { - "ember-assign-helper": "0.1.1", + "ember-assign-helper": "^0.1.2", "ember-cli-babel": "^6.0.0-beta.9", "ember-cli-htmlbars": "^1.1.1", "ember-cli-moment-shim": "^3.0.1", diff --git a/testem.js b/testem.js index 26044b2f..392ef4f4 100644 --- a/testem.js +++ b/testem.js @@ -1,13 +1,11 @@ -/*jshint node:true*/ module.exports = { "framework": "qunit", "test_page": "tests/index.html?hidepassed", "disable_watching": true, "launch_in_ci": [ - "PhantomJS" + "Chrome" ], "launch_in_dev": [ - "PhantomJS", "Chrome" ] }; diff --git a/tests/integration/components/power-calendar/days-test.js b/tests/integration/components/power-calendar/days-test.js index 3c4d98bf..1ec8bdfd 100644 --- a/tests/integration/components/power-calendar/days-test.js +++ b/tests/integration/components/power-calendar/days-test.js @@ -115,3 +115,19 @@ test('It can receive `data-power-calendar-id` and it is bound to an attribute', this.render(hbs`{{power-calendar/days calendar=calendar data-power-calendar-id="foobar"}}`); assert.equal(find('.ember-power-calendar-days').dataset.powerCalendarId, 'foobar', 'The attribute is bound'); }); + +// test('[start-of-week] The DOM data attribute "start-of-week" respects the locale set in the moment service', function(assert) { +// assert.expect(1); +// run(() => momentService.changeLocale('pt')); +// this.render(hbs`{{#power-calendar as |cal|}}{{cal.days}}{{/power-calendar}}`); +// assert.equal(find('.ember-power-calendar-days').dataset['start-of-week'], 'seg'); +// }); + +// test('[start-of-week] The DOM data attribute "start-of-week" responds to when a container passes in a locale value directly', function(assert) { +// assert.expect(2); +// this.calendar = calendar; +// this.render(hbs`{{power-calendar/days calendar=calendar}}`); +// assert.equal(find('.ember-power-calendar-days').dataset['start-of-week'], 'sun'); +// run(() => this.set('calendar.locale', 'es')); +// assert.equal(find('.ember-power-calendar-days').dataset['start-of-week'], 'lun'); +// }); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index bcb3e4f2..7bcb38b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2245,11 +2245,11 @@ ember-ajax@^2.4.1: dependencies: ember-cli-babel "^5.1.5" -ember-assign-helper@0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/ember-assign-helper/-/ember-assign-helper-0.1.1.tgz#217f221f37781b64657bd371d9da911768c3fbd1" +ember-assign-helper@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/ember-assign-helper/-/ember-assign-helper-0.1.2.tgz#3d1d575f3d4457b3662b214d4c6e671bd462cad0" dependencies: - ember-cli-babel "^5.1.7" + ember-cli-babel "^6.0.0-beta.9" ember-basic-dropdown@0.31.0: version "0.31.0"