Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/days of week #72

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+65 −66
Open

Feature/days of week #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
64777a0
add start-of-week attribute and day-of-week class
yankeeinlondon Mar 27, 2017
f1a6850
added integration tests (commented out at moment)
yankeeinlondon Mar 28, 2017
3900c61
remove unneeded spaces in class
yankeeinlondon Mar 29, 2017
fa31c67
remove "missing-days" implementation
yankeeinlondon Mar 29, 2017
a8ca50f
update to latest assign helper
yankeeinlondon Apr 17, 2017
fe7ac6a
dow => dayOfWeek
yankeeinlondon Apr 17, 2017
284f727
updated testem to avoid phantom
yankeeinlondon Apr 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions addon/components/power-calendar/days.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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());
}),
Expand Down Expand Up @@ -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) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you removing this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handled in template instead; allows for better screen layout in the false state of this condition

daysOfWeek = daysOfWeek.filter((d) => d.isCurrentMonth);
}
weeks.push({
id: days[i].moment.format('YYYY-w'),
days: daysOfWeek,
Expand Down Expand Up @@ -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'),
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. If tests pass then 👍

isToday: momentDate.isSame(today, 'day'),
isSelected: this.dayIsSelected(momentDate, calendar)
};
Expand Down
36 changes: 21 additions & 15 deletions addon/templates/components/power-calendar/days.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,32 @@
<div class="ember-power-calendar-row ember-power-calendar-weekdays">
<div class="ember-power-calendar-row ember-power-calendar-weekdays ember-power-calendar--days-of-week">
{{#each weekdaysNames as |wdn|}}
<div class="ember-power-calendar-weekday">{{wdn}}</div>
{{/each}}
</div>

<div class="ember-power-calendar-day-grid" onkeydown={{action "onKeyDown" calendar}}>
{{#each weeks key='id' as |week|}}
<div class="ember-power-calendar-row ember-power-calendar-week" data-missing-days={{week.missingDays}}>
<div class="ember-power-calendar-row ember-power-calendar-week" >
{{#each week.days key='id' as |day|}}
<button type="button"
data-date="{{day.id}}"
class="ember-power-calendar-day {{if onSelect 'ember-power-calendar-day--interactive'}} {{if day.isCurrentMonth 'ember-power-calendar-day--current-month' 'ember-power-calendar-day--other-month'}} {{if day.isSelected 'ember-power-calendar-day--selected'}} {{if day.isToday 'ember-power-calendar-day--today'}} {{if day.isFocused 'ember-power-calendar-day--focused'}} {{if day.isRangeStart 'ember-power-calendar-day--range-start'}} {{if day.isRangeEnd 'ember-power-calendar-day--range-end'}}"
onclick={{action calendar.actions.select day calendar}}
onfocus={{action 'onFocusDay' day}}
onblur={{action 'onBlurDay'}}
disabled={{day.isDisabled}}>
{{#if hasBlock}}
{{yield day publicAPI}}
{{else}}
{{day.number}}
{{/if}}
</button>
{{#if day.isVisible}}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After your changes in the component you need to do this {{if}} for every day in the month. Why do this? It seems unrelated with the overall goal of the PR, which is add data-day-of-week="{{day.dow}}" to the days.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it ensures that each day -- whether visible or not -- has a ember-power-calendar-day block in it. This makes the CSS styling easier and allows you to take fuller advantage of flexbox.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

days which are "not visible" are easily targeted via the .ember-power-calendar-day--blank selector

<button type="button"
data-day-of-week="{{day.dayOfWeek}}"
data-date="{{day.id}}"
class="ember-power-calendar-day{{if onSelect ' ember-power-calendar-day--interactive'}} {{if day.isCurrentMonth 'ember-power-calendar-day--current-month' 'ember-power-calendar-day--other-month'}}{{if day.isSelected 'ember-power-calendar-day--selected'}} {{if day.isToday 'ember-power-calendar-day--today'}} {{if day.isFocused 'ember-power-calendar-day--focused'}} {{if day.isRangeStart ' ember-power-calendar-day--range-start'}}{{if day.isRangeEnd ' ember-power-calendar-day--range-end'}}"
onclick={{action calendar.actions.select day calendar}}
onfocus={{action 'onFocusDay' day}}
onblur={{action 'onBlurDay'}}
disabled={{day.isDisabled}}>
{{#if hasBlock}}
{{yield day publicAPI}}
{{else}}
{{day.number}}
{{/if}}
</button>

{{else}}
<span class="ember-power-calendar-day ember-power-calendar-day--blank"></span>
{{/if}}
{{/each}}
</div>
{{/each}}
Expand Down
48 changes: 11 additions & 37 deletions app/styles/ember-power-calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
$cell-spacing: 2px;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All this CSS changes also seem unrelated to the topic of the PR.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

true but it is fixing an existing defect that I messaged to you about ... when days are not visible you start to have layout problems with the old styling

$row-spacing: 2px;

.ember-power-calendar {
box-sizing: border-box;
position: relative;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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,
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 1 addition & 3 deletions testem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
]
};
16 changes: 16 additions & 0 deletions tests/integration/components/power-calendar/days-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
// });
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2245,11 +2245,11 @@ ember-ajax@^2.4.1:
dependencies:
ember-cli-babel "^5.1.5"

[email protected].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"

[email protected]:
version "0.31.0"
Expand Down