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.

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

Adding locale and moment computeds #139

Merged
merged 5 commits into from
Jan 23, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
46 changes: 9 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,21 @@ It's advisable to run `ember g ember-moment` between upgrades as dependencies ma

## Usage

## Computed Property Macros

Ships with the following computed property macros: `duration`, `humanize`, `locale`, `tz`, `format`, `calendar`, `moment`, `toNow`, `fromNow`. They can be used individually or composed together.

[Computed Property Macro Documentation](https://github.com/stefanpenner/ember-moment/wiki/Computed-Property-Macros)

## Helpers

```hbs
{{moment-format date}}
{{moment-from-now date}}
{{moment-to-now date}}
{{moment-duration ms}}
{{moment-calendar date}}
```

### Advanced Usage

```hbs
{{moment-format date outputFormat inputFormat}}
{{moment-from-now date}}
{{moment-to-now date}}
Expand All @@ -50,41 +54,9 @@ Recomputes the time ago every 1-second (1000 milliseconds). This is useful for
## ES6 Moment

This addon provides the ability to import moment as an ES6 module.
```js
import moment from 'moment';
```

## Computed Macro

```js
import momentDuration from 'ember-moment/computeds/duration';
import momentFormat from 'ember-moment/computeds/format';
import momentFromNow from 'ember-moment/computeds/from-now';
import momentToNow from 'ember-moment/computeds/to-now';

export default Ember.Controller.extend({
date: new Date('2013-02-08T09:30:26'),

// Takes on the behavior of moment().format()
// http://momentjs.com/docs/#/displaying/format/
shortDate: momentFormat('date', 'MM/DD/YYYY'),

// first param: date input
// second param: date format http://momentjs.com/docs/#/parsing/string-format/ (optional)
// third param: hide suffix (optional, false by default)
// http://momentjs.com/docs/#/displaying/fromnow/
timeSince: momentFromNow("12-25-1995", "MM-DD-YYYY", false), // -> output: "2 years ago"

// first param: date input
// second param: date format http://momentjs.com/docs/#/parsing/string-format/ (optional)
// third param: hide prefix (optional, false by default)
// http://momentjs.com/docs/#/displaying/tonow
computedNumHours: momentToNow("12-25-1995", "MM-DD-YYYY", false), // -> output: "in 20 years"

// duration units: seconds, minutes, hours, days, weeks, months, years
// http://momentjs.com/docs/#/durations/
computedNumHours: momentDuration(10, 'hours')
});
import moment from 'moment';
```

## Include Moment Timezone
Expand Down
4 changes: 3 additions & 1 deletion addon/computeds/-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Ember from 'ember';
import getValue from '../utils/get-value';
import getDependentKeys from '../utils/get-dependent-keys';

const { computed } = Ember;

export default function computedFactory(fn) {
return function(...args) {
const computedArgs = [].concat(getDependentKeys(args));
Expand All @@ -13,6 +15,6 @@ export default function computedFactory(fn) {
return fn.call(this, params);
});

return Ember.computed(...computedArgs);
return computed(...computedArgs);
};
}
13 changes: 13 additions & 0 deletions addon/computeds/calendar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import moment from 'moment';

import computedFactory from './-base';

export default computedFactory(function calendarComputed(params) {
if (!params || params && params.length > 2) {
throw new TypeError('ember-moment: Invalid Number of arguments, at most 2');
}

const [ date, referenceTime ] = params;

return moment(date).calendar(referenceTime);
});
2 changes: 1 addition & 1 deletion addon/computeds/duration.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import moment from 'moment';
import computedFactory from './-base';

export default computedFactory(function durationComputed(params) {
return moment.duration(...params).humanize();
return moment.duration(...params);
});
27 changes: 10 additions & 17 deletions addon/computeds/format.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,20 @@ import getOwner from 'ember-getowner-polyfill';
import computedFactory from './-base';

const CONFIG_KEY = 'config:environment';
const { get } = Ember;

const { get, assert } = Ember;
export default computedFactory(function formatComtputed([value, optionalFormat]) {
if (!optionalFormat) {
const owner = getOwner(this);

export default computedFactory(function formatComputed(params) {
assert('At least one datetime argument required for moment computed', params.length);
if (owner && owner.hasRegistration && owner.hasRegistration(CONFIG_KEY)) {
const config = owner.resolveRegistration(CONFIG_KEY);

const owner = getOwner(this);
const momentArgs = [params[0]];

let maybeOutputFormat = params[1];

if (params.length > 2) {
momentArgs.push(params[2]);
}
else if (owner && owner.hasRegistration && owner.hasRegistration(CONFIG_KEY)) {
const config = owner.resolveRegistration(CONFIG_KEY);

if (config) {
maybeOutputFormat = get(config, 'moment.outputFormat');
if (config) {
optionalFormat = get(config, 'moment.outputFormat');
}
}
}

return moment.apply(this, momentArgs).format(maybeOutputFormat);
return moment(value).format(optionalFormat);
});
2 changes: 1 addition & 1 deletion addon/computeds/from-now.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import computedFactory from './-base';
export default computedFactory(function fromNowComputed(params) {
let maybeHideSuffix;

if (params.length > 2) {
if (params.length > 1) {
maybeHideSuffix = params.pop();
}

Expand Down
10 changes: 10 additions & 0 deletions addon/computeds/humanize.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import moment from 'moment';
import computedFactory from './-base';

export default computedFactory(function humanizeComputed([duration, suffixless]) {
if (!moment.isDuration(duration)) {
duration = moment.duration(duration);
}

return duration.humanize(suffixless);
});
11 changes: 11 additions & 0 deletions addon/computeds/locale.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import moment from 'moment';

import computedFactory from './-base';

export default computedFactory(function localeComputed([date, locale]) {
if (!moment.isDuration(date)) {
date = moment(date);
}

return date.locale(locale);
});
7 changes: 7 additions & 0 deletions addon/computeds/moment.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import moment from 'moment';

import computedFactory from './-base';

export default computedFactory(function momentComputed(params) {
return moment(...params);
});
2 changes: 1 addition & 1 deletion addon/computeds/to-now.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import computedFactory from './-base';
export default computedFactory(function toNowComputed(params) {
let maybeHidePrefix;

if (params.length > 2) {
if (params.length > 1) {
maybeHidePrefix = params.pop();
}

Expand Down
7 changes: 7 additions & 0 deletions addon/computeds/tz.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import moment from 'moment';

import computedFactory from './-base';

export default computedFactory(function tzComputed([date, tz]) {
return moment(date).tz(tz);
});
15 changes: 9 additions & 6 deletions tests/dummy/app/controllers/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import Ember from 'ember';
import momentDuration from 'ember-moment/computeds/duration';
import momentFormat from 'ember-moment/computeds/format';
import momentFromNow from 'ember-moment/computeds/from-now';
import duration from 'ember-moment/computeds/duration';
import format from 'ember-moment/computeds/format';
import fromNow from 'ember-moment/computeds/from-now';
import locale from 'ember-moment/computeds/locale';
import humanize from 'ember-moment/computeds/humanize';
import momentComputed from 'ember-moment/computeds/moment';

export default Ember.Controller.extend({
moment: Ember.inject.service(),
Expand All @@ -18,8 +21,8 @@ export default Ember.Controller.extend({
lastHour: new Date(new Date().valueOf() - (60*60*1000)),
date: new Date(),
numHours: 822,
computedDate: momentFormat('date'),
computedOneHourAgo: momentFromNow('lastHour'),
computedNumHours: momentDuration('numHours', 'hours'),
computedDate: format(locale(momentComputed('date'), 'moment.locale')),
computedOneHourAgo: fromNow(locale(momentComputed('lastHour'), 'moment.locale')),
computedNumHours: humanize(locale(duration('numHours', 'hours'), 'moment.locale')),
usIndependenceDay: new Date(1776, 6, 4, 12, 0, 0)
});
13 changes: 13 additions & 0 deletions tests/dummy/app/styles/app.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
html, body {
margin: 20px;
font-family: Helvetica, sans-serif;
font-size: 14px;
}

.example {
padding: 5px;
margin: 2px 0;
background: #f1f1f1;
}

code {
color: #333;
font-size: 13px;
}
4 changes: 2 additions & 2 deletions tests/dummy/app/templates/application.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<h2 id="title">Welcome to Ember.js</h2>
<h2 id="title">ember-moment</h2>

{{outlet}}
{{outlet}}
114 changes: 12 additions & 102 deletions tests/dummy/app/templates/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -11,124 +11,34 @@ Default Format:

<hr>

{{moment-format now 'LLLL'}}
<code>
\{{moment-format now 'LLLL'}}
</code>
<h3>Format</h3>

<hr>

{{moment-format now}}
<code>
\{{moment-format now}}
</code>

<hr>

{{moment-format usIndependenceDay 'LLLL'}}
<code>
\{{moment-format usIndependenceDay 'LLLL'}}
</code>

<hr>

{{moment-format usIndependenceDay 'MMM DD, YYYY'}}
<code>
\{{moment-format usIndependenceDay 'MMM DD, YYYY'}}
</code>

<hr>

{{moment-format now 'LL' 'LLLL'}}
<code>
\{{moment-format now 'LL' 'LLLL'}}
</code>

<hr>

{{moment-from-now now}}
<code>
\{{moment-from-now now}}
</code>
{{partial 'partials/format'}}

<hr>

{{moment-from-now lastHour interval=1000}}
<code>
\{{moment-from-now lastHour interval=1000}}
</code>

<hr>
<h3>From Now</h3>

{{moment-from-now usIndependenceDay}}
<code>
\{{moment-from-now usIndependenceDay}}
</code>
{{partial 'partials/from-now'}}

<hr>
<h3>To Now</h3>

{{moment-duration 5000}}
<code>
\{{moment-duration 5000}}
</code>
{{partial 'partials/to-now'}}

<hr>

{{moment-duration 600000}}
<code>
\{{moment-duration 600000}}
</code>
<h3>Calendar</h3>

<hr>

{{moment-duration 86400000}}
<code>
\{{moment-duration 86400000}}
</code>
{{partial 'partials/calendar'}}

<hr>

{{moment-duration '7.23:59:59'}}
<code>
\{{moment-duration '7.23:59:59'}}
</code>
<h3>Duration</h3>

<hr>

{{moment-duration 210 'days'}}
<code>
\{{moment-duration 210 'days'}}
</code>

<hr>

{{computedDate}}
<br />
<code>
export default Ember.Controller.extend({<br />
date: new Date(), /* in the route I am looping this */ <br />
computedDate: moment('date', 'MM/DD/YY hh:mm:ss')<br />
});
</code>
{{partial 'partials/duration'}}

<hr>

{{computedOneHourAgo}}
<br />
<code>
export default Ember.Controller.extend({<br />
lastHour: new Date(new Date().valueOf() - (60*60*1000)),<br />
computedOneHourAgo: ago('lastHour', 'MM/DD/YY hh:mm:ss')<br />
});
</code>

<hr>
<h3>Computed Property Macros</h3>

{{computedNumHours}}
<br />
<code>
export default Ember.Controller.extend({<br />
numHours: 822,<br />
computedNumHours: duration('numHours', 'hours'),<br />
});
</code>
{{partial 'partials/cps'}}
6 changes: 6 additions & 0 deletions tests/dummy/app/templates/partials/calendar.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="example">
{{moment-calendar now lastHour}}
<code>
\{{moment-calendar now lastHour}}
</code>
</div>
Loading