Merge pull request #64 from octronic/support-focus-events

Support focus events

Author: soulim

README.md

@@ -203,6 +203,50 @@ Default: `0` (Sunday)
 {{bootstrap-datepicker value=expiresAt weekStart=1}}
 ```
 
+### Actions
+
+#### changeDate
+
+The changeDate action is triggered when the selected date changes. It can be specified like this:
+
+
+```handlebars
+{{bootstrap-datepicker changeDate="changeDateAction"}}
+```
+
+The action can be handled by a parent component, controller or route:
+
+```javascript
+actions {
+  changeDateAction(date) {
+    // do sth with the new date
+  }
+}
+```
+
+#### focus-in & focus-out
+
+The focus-in and focus-out actions are triggered when the respective focus events occur on the input field.
+
+```handlebars
+{{bootstrap-datepicker focus-in="focusInAction" focus-out="focusOutAction"}}
+```
+
+The actions can be handled by a parent component, controller or route:
+
+```javascript
+actions {
+  focusInAction(component, event) {
+    // handle event
+  },
+  focusOutAction(component, event) {
+    // handle event
+  }
+}
+```
+
+
+
 ## Contributing
 
 1. Fork it

addon/components/datepicker-support.js

@@ -52,6 +52,12 @@ export default Ember.Mixin.create({
         if (!self.$().val()) {
           self._applyDateValue(null);
         }
+      }).
+      on('focusout', function(event) {
+        self.sendAction('focus-out', self, event);
+      }).
+      on('focusin', function(event) {
+        self.sendAction('focus-in', self, event);
       });
 
     this._updateDatepicker();

tests/integration/components/bootstrap-datepicker-integration-test.js

@@ -49,3 +49,38 @@ test('triggers changeDate action when input field is cleared', function (assert)
 
   assert.ok(actionIsTriggered, 'action is triggered');
 });
+
+test('triggers specified action on focusout event', function (assert) {
+  assert.expect(1);
+
+  this.render(hbs`
+    {{bootstrap-datepicker focus-out="focusOutAction"}}
+  `);
+
+  var actionIsTriggered = false;
+  this.on('focusOutAction', () => {
+    actionIsTriggered = true;
+  });
+
+  this.$('input.ember-text-field').trigger('focusout');
+
+  assert.ok(actionIsTriggered, 'action is triggered on focusout');
+});
+
+
+test('triggers specified action on focusin event', function (assert) {
+  assert.expect(1);
+
+  this.render(hbs`
+    {{bootstrap-datepicker focus-in="focusInAction"}}
+  `);
+
+  var actionIsTriggered = false;
+  this.on('focusInAction', () => {
+    actionIsTriggered = true;
+  });
+
+  this.$('input.ember-text-field').trigger('focusin');
+
+  assert.ok(actionIsTriggered, 'action is triggered on focusin');
+});