From cdd4de9e13b36de1aac79a82c08bd6d9ae94a9f6 Mon Sep 17 00:00:00 2001
From: Brendan Rius <brendan.rius@gmail.com>
Date: Wed, 16 Sep 2015 12:11:43 +0200
Subject: [PATCH] Add possibility to show/hide the calendar (fix #46)

---
 README.md                            | 16 +++++++++++++
 addon/components/date-picker.js      | 34 +++++++++++++++++++++++++++-
 tests/dummy/app/controllers/index.js |  9 +++++++-
 tests/dummy/app/templates/index.hbs  | 10 ++++++++
 4 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 941489c..788e2a1 100644
--- a/README.md
+++ b/README.md
@@ -97,3 +97,19 @@ still in 1999. This is technically correct, but may not be what you want.
 
 If you want to have easy-to-compare date strings in your JSON, set `utc` to `true`
 and you will get `"2000-01-01T00:00:00.000Z"` as expected.
+
+#### visible
+Type: `Boolean`
+Default: `false`
+
+The visibility state of the calendar.
+ * If you set this property to `true`, the calendar will be shown
+ * If you set this property to `false`, the calendar will be hidden
+ * If you close the calendar (by clicking outside for example), this property will be set to `false`
+ * If you open the calendar (by clicking on the input for example), this property will be set to `true`
+
+An example is available in this application.
+
+## Contributors
+
+ * [Brendan Rius](https://github.com/brendan-rius)
diff --git a/addon/components/date-picker.js b/addon/components/date-picker.js
index a14e8bf..bc90328 100644
--- a/addon/components/date-picker.js
+++ b/addon/components/date-picker.js
@@ -13,6 +13,7 @@ export default Em.TextField.extend({
     var cy = window.moment().year();
     return "%@,%@".fmt(cy-3, cy+4);
   }.property(), // default yearRange from -3 to +4 years
+  visible: false,             // true is visible, false otherwise
   // A private method which returns the year range in absolute terms
   _yearRange: function() {
     var yr = this.get('yearRange');
@@ -48,6 +49,10 @@ export default Em.TextField.extend({
            * the `date` binding will be set to `null` or to the current date.
            *
            * Format the "outgoing" date with respect to the given `format`.
+           *
+           * Also allows the "visible" property to stay synchronized with the real
+           * state of the calendar by updating the state to false when the calender
+           * closes.
            */
           onClose: function() {
             // use `moment` or `moment.utc` depending on `utc` flag
@@ -66,6 +71,16 @@ export default Em.TextField.extend({
             }
 
             that._setControllerDate(d);
+
+            that.set('visible', false); // We update the "visible" state when the calendar is hidden.
+          },
+
+          /**
+           * Allows the "visible" property to stay synchronized with the real state
+           * of the calendar by updating the state to true when the calendar opens.
+           */
+          onOpen: function () {
+            that.set('visible', true); // we update the "visible" state when the calendar is shown
           }
         },
         picker = null;
@@ -143,5 +158,22 @@ export default Em.TextField.extend({
       }
     }
     this.get('_picker').setDate(d.format());
-  }.observes('date')
+  }.observes('date'),
+
+  /**
+   * Show/hide the calendar depending on the "visible" property.
+   * Is "visible" is set to true, show the calendar, otherwise
+   * hide it.
+   */
+  onVisibleChanged: function () {
+    var picker = this.get('_picker');
+    var visible = this.get('visible');
+
+    if (visible === true) {
+      picker.show();
+    }
+    else {
+      picker.hide();
+    }
+  }.observes('visible')
 });
diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/controllers/index.js
index 75a7452..c8aee88 100644
--- a/tests/dummy/app/controllers/index.js
+++ b/tests/dummy/app/controllers/index.js
@@ -1,5 +1,6 @@
 import Em from 'ember';
 export default Em.Controller.extend({
+  visible: false,
   date: '2014-02-01',
   formattedDate: function() {
     return window.moment(this.get('date'), 'YYYY-MM-DD').format('DD/MM/YYYY');
@@ -10,5 +11,11 @@ export default Em.Controller.extend({
   jsDate: new Date(),
   jsUTCString: function() {
     return this.get('jsDate').toUTCString();
-  }.property('jsDate')
+  }.property('jsDate'),
+
+  actions: {
+    'toggleVisibility': function () {
+      this.set('visible', !this.get('visible'));
+    }
+  }
 });
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index a99c5ae..35d6396 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -22,3 +22,13 @@
     <dt>UTC String</dt><dd>{{jsUTCString}}</dd>
   </dl>
 </div>
+
+<div style="clear: both"></div>
+<hr/>
+
+<div>
+    <h6>Visibility toggling</h6>
+    <button {{action 'toggleVisibility'}}>Toggle visibility</button>
+    {{date-picker visible=visible}}<br/>
+    Current visibility is set to "{{visible}}"
+</div>