Merge pull request #10 from jasonmit/computed

[Enhancement] Adding moment computed fixes #6

README.md

@@ -19,6 +19,18 @@ advance
 {{ago date inputFormat}}}
 ```
 
+## Computed Macro
+
+```js
+import { moment, ago } from 'ember-moment/computed';
+
+export default Ember.Controller.extend({
+  date: new Date('2013-02-08T09:30:26'),
+  shortDate: moment('date', 'MM/DD/YYYY')
+  timeSince: ago('date', true)
+});
+```
+
 ## Development
 
 * `git clone` this repository

addon/computed.js

@@ -0,0 +1,7 @@
+import moment from './computeds/moment';
+import ago from './computeds/ago';
+
+export {
+  moment,
+  ago
+};

addon/computeds/ago.js

@@ -0,0 +1,30 @@
+import Ember from 'ember';
+import moment from 'moment';
+import { descriptorFor } from './moment';
+
+var get = Ember.get;
+var emberComputed = Ember.computed;
+
+export default function computedAgo(date, maybeInputFormat) {
+  var args = [date];
+  var momentArgs, computed, desc, input;
+
+  computed = emberComputed(date, function () {
+    momentArgs = [get(this, date)];
+
+    if (arguments.length > 1) {
+      desc = descriptorFor.call(this, maybeInputFormat);
+      input = desc ? get(this, maybeInputFormat) : maybeInputFormat;
+
+      if (desc && computed._dependentKeys.indexOf(maybeInputFormat) === -1) {
+        computed.property(maybeInputFormat);
+      }
+
+      momentArgs.push(input);
+    }
+
+    return moment.apply(this, momentArgs).fromNow();
+  });
+
+  return computed.property.apply(computed, args).readOnly();
+}

addon/computeds/moment.js

@@ -0,0 +1,48 @@
+import Ember from 'ember';
+import moment from 'moment';
+
+var get = Ember.get;
+var emberComputed = Ember.computed;
+var EnumerableUtils = Ember.EnumerableUtils;
+var a_slice = Array.prototype.slice;
+
+export function descriptorFor(propertyName) {
+  var meta = Ember.meta(this);
+
+  if (meta && meta.descs) {
+    return meta.descs[propertyName];
+  }
+}
+
+export default function computedMoment(date, outputFormat, maybeInputFormat) {
+  Ember.assert('More than one argument passed into moment computed', arguments.length > 1);
+
+  var args = a_slice.call(arguments);
+  var computed, self, momentArgs, desc;
+
+  args.shift();
+
+  return computed = emberComputed(date, function () {
+    self = this;
+    momentArgs = [get(this, date)];
+
+    var propertyValues = EnumerableUtils.map(args, function (arg) {
+      desc = descriptorFor.call(self, arg);
+
+      if (desc && computed._dependentKeys.indexOf(arg) === -1) {
+        computed.property(arg);
+      }
+
+      return desc ? get(self, arg) : arg;
+    });
+
+    outputFormat = propertyValues[0];
+
+    if (propertyValues.length > 1) {
+      maybeInputFormat = propertyValues[1];
+      momentArgs.push(maybeInputFormat);
+    }
+
+    return moment.apply(this, momentArgs).format(outputFormat);
+  }).readOnly();
+}

addon/helpers/ago.js

@@ -1,20 +1,17 @@
 import Ember from 'ember';
-import momentjs from 'moment';
+import moment from 'moment';
 
-function ago(value, maybeInput, maybeOutput) {
+function ago(value, maybeInput) {
   var length = arguments.length;
-  var input, output;
+  var args = [value];
 
   if (length === 1) {
     throw new TypeError('Invalid Number of arguments, expected atleast 1');
-  } else if (length === 2 ) {
-    input = 'LLLL';
   } else if (length > 3) {
-    input  = maybeInput;
-    output = maybeOutput;
+    args.push(maybeInput);
   }
 
-  return momentjs(value, input).fromNow();
+  return moment.apply(this, args).fromNow();
 }
 
 export {

addon/helpers/moment.js

@@ -1,20 +1,25 @@
 import Ember from 'ember';
 import momentjs from 'moment';
 
-function moment(value, maybeInput, maybeOutput) {
+function moment(value, maybeOutput, maybeInput) {
   var length = arguments.length;
-  var input, output;
+  var args = [];
+  var output;
 
   if (length === 1) {
     throw new TypeError('Invalid Number of arguments, expected atleast 1');
-  } else if (length === 2) {
-    input = 'LLLL';
+  }
+
+  args.push(value);
+
+  if (length === 2) {
+    args.push('LLLL');
   } else if (length > 3) {
-    input  = maybeInput;
+    args.push(maybeInput);
     output = maybeOutput;
   }
 
-  return momentjs(value, input).format(output);
+  return momentjs.apply(this, args).format(output);
 }
 
 export {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-moment",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Moment.js template helpers for ember",
   "directories": {
     "doc": "doc",
@@ -34,6 +34,5 @@
   ],
   "ember-addon": {
     "configPath": "tests/dummy/config"
-  },
-  "dependencies": {}
+  }
 }

tests/dummy/app/controllers/index.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+import { moment, ago } from 'ember-moment/computed';
+
+export default Ember.Controller.extend({
+  now: new Date(),
+  lastHour: new Date(new Date().valueOf() - (60*60*1000)),
+  date: new Date(),
+  computedDate: moment('date', 'MM/DD/YY hh:mm:ss'),
+  computedOneHourAgo: ago('lastHour')
+});

tests/dummy/app/routes/index.js

@@ -1,10 +1,13 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
-  model: function() {
-    return {
-      now: new Date(),
-      lastHour: new Date(new Date().valueOf() - (60*60*1000))
-    };
+  setupController: function (controller, model) {
+    this._super(controller, model);
+
+    setInterval(function () {
+      Ember.run(function () {
+        controller.set('date', new Date());
+      });
+    }, 1000);
   }
 });

tests/dummy/app/templates/index.hbs

@@ -15,10 +15,10 @@
 
 <hr>
 
-{{moment now 'LLLL' 'LL'}}
+{{moment now 'LL' 'LLLL'}}
 
 <code>
-  \{{moment now 'LLLL' 'LL'}}
+  \{{moment now 'LL' 'LLLL'}}
 </code>
 
 
@@ -38,3 +38,25 @@
 <code>
   \{{ago lastHour}}
 </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>
+
+<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>

tests/unit/computeds/ago-test.js

@@ -0,0 +1,25 @@
+import Ember from 'ember';
+import date from '../helpers/date';
+import moment from 'moment';
+import { ago as computedAgo } from 'ember-moment/computed';
+
+module('momentComputed');
+
+var createSubject = function (attrs) {
+  return Ember.Object.extend(Ember.$.extend({
+    date: new Date(new Date().valueOf() - (60*60*1000)),
+    ago: computedAgo('date')
+  }, attrs || {})).create();
+};
+
+test('Formatter - get', function() {
+  var subject = createSubject();
+  equal(subject.get('ago'), 'an hour ago');
+});
+
+test('Formatter - get #2', function() {
+  var subject = createSubject();
+  equal(subject.get('ago'), 'an hour ago');
+	subject.set('date', new Date(new Date().valueOf() - (60*60*2000)));
+	equal(subject.get('ago'), '2 hours ago');
+});

tests/unit/computeds/moment-computed-test.js

@@ -0,0 +1,77 @@
+import Ember from 'ember';
+import date from '../helpers/date';
+import { moment as computedMoment } from 'ember-moment/computed';
+
+module('momentComputed');
+
+var alias = Ember.computed.alias;
+
+var createSubject = function (attrs) {
+  return Ember.Object.extend(Ember.$.extend({
+    date: date(0),
+    shortDate: computedMoment('date', 'MM/DD')
+  }, attrs || {})).create();
+};
+
+test('Formatter - get', function() {
+  var subject = createSubject();
+  equal(subject.get('shortDate'), '12/31');
+});
+
+test('Date - set', function() {
+  var subject = createSubject();
+  subject.set('date', date('2013-02-08T09:30:26'));
+  equal(subject.get('shortDate'), '02/08');
+});
+
+test('Formatter - invalid date', function() {
+  var subject = createSubject({ date: 'ZZZZZ' });
+  equal(subject.get('shortDate'), 'Invalid date');
+});
+
+test('Formatter - is computed handled', function() {
+  var subject = createSubject({
+    _format: 'MM/DD',
+    format: alias('_format'),
+    shortDate: computedMoment('date', 'format')
+  });
+
+  equal(subject.get('shortDate'), '12/31');
+  subject.set('_format', 'MM');
+  equal(subject.get('shortDate'), '12');
+});
+
+test('Observers trigger on date change', function() {
+  var observeFired = false;
+
+  var subject = createSubject({
+    _format: 'MM/DD',
+    format: alias('_format'),
+    shortDate: computedMoment('date', 'format'),
+    shortDateChanged: function () {
+      observeFired = true;
+    }.observes('shortDate')
+  });
+
+  equal(subject.get('shortDate'), '12/31');
+  subject.set('_format', 'MM');
+  equal(observeFired, true);
+});
+
+test('Observers trigger on date change', function() {
+  var observeFired = false;
+
+  var subject = createSubject({
+    shortDateChanged: function () {
+      observeFired = true;
+    }.observes('shortDate')
+  });
+
+  equal(subject.get('shortDate'), '12/31');
+
+  subject.set('date', date('2013-02-08T09:30:26'));
+
+  equal(subject.get('shortDate'), '02/08');
+
+  equal(observeFired, true);
+});

tests/unit/helpers/moment-test.js

@@ -12,12 +12,12 @@ test('one arg (date)', function() {
   equal(moment(date(60*60*24), FAKE_HANDLEBARS_CONTEXT), '1969-12-31T19:01:26-05:00');
 });
 
-test('two args (date, inputFormat)', function() {
+test('two args (date, outputFormat)', function() {
   equal(moment(date(0),  'LLLL', FAKE_HANDLEBARS_CONTEXT), '1969-12-31T19:00:00-05:00');
   equal(moment(date(60*60*24), 'LLLL', FAKE_HANDLEBARS_CONTEXT), '1969-12-31T19:01:26-05:00');
 });
 
-test('three args (date, inputFormat, outputFormat)', function() {
+test('three args (date, outputFormat, inputFormat)', function() {
   equal(moment(date(0),  'LLLL', 'LLLL', FAKE_HANDLEBARS_CONTEXT), 'Wednesday, December 31, 1969 7:00 PM');
   equal(moment(date(60*60*24), 'LLLL', 'LLLL', FAKE_HANDLEBARS_CONTEXT), 'Wednesday, December 31, 1969 7:01 PM');
 });