From 8be505090c93a5d2f99f20d589a2597d21cc9bd5 Mon Sep 17 00:00:00 2001
From: motss <wes_ngrongsen@hotmail.com>
Date: Mon, 9 Nov 2015 18:35:16 +0800
Subject: [PATCH] Added full animation according to specs, 2 additional
 animations, unit test, ready for release

---
 bower.json                                 |   6 +-
 datepicker-slide-from-left-animation.html  |  44 ++++++++
 datepicker-slide-from-right-animation.html |  44 ++++++++
 demo/index.html                            |  11 +-
 jv-datepicker-dialog-theme.html            |   2 +-
 jv-datepicker-dialog.html                  |   5 +-
 jv-datepicker-theme.html                   |   5 +
 jv-datepicker.html                         | 113 +++++++++++++++++----
 test/jv-datepicker-test.html               |  83 +++++----------
 9 files changed, 219 insertions(+), 94 deletions(-)
 create mode 100644 datepicker-slide-from-left-animation.html
 create mode 100644 datepicker-slide-from-right-animation.html

diff --git a/bower.json b/bower.json
index b2d7597a..29aca073 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jv-datepicker",
-  "version": "1.7.2",
+  "version": "2.0.0",
   "authors": [
     "motss <wes_ngrongsen@hotmail.com>"
   ],
@@ -35,7 +35,9 @@
     "paper-dialog": "PolymerElements/paper-dialog#~1.0.1",
     "paper-icon-button": "PolymerElements/paper-icon-button#~1.0.3",
     "iron-list": "PolymerElements/iron-list#~1.1.5",
-    "paper-slider": "PolymerElements/paper-slider#~1.0.7"
+    "paper-slider": "PolymerElements/paper-slider#~1.0.7",
+    "test-fixture": "PolymerElements/test-fixture#~1.0.1",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#~1.0.6"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
diff --git a/datepicker-slide-from-left-animation.html b/datepicker-slide-from-left-animation.html
new file mode 100644
index 00000000..05172b53
--- /dev/null
+++ b/datepicker-slide-from-left-animation.html
@@ -0,0 +1,44 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../neon-animation/neon-animation-behavior.html">
+<link rel="import" href="../neon-animation/web-animations.html">
+
+<!--
+`<datepicker-slide-from-left-animation>` animates the transform of an element from
+`translateX(-100%)` to `none` and animates opacity from 0 to 1.
+The `transformOrigin` defaults to `0 50%`.
+Configuration:
+```
+{
+  name: 'datepicker-slide-from-left-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+  Polymer({
+    is: 'datepicker-slide-from-left-animation',
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+    configure: function(config) {
+      var node = config.node;
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
+      }
+      this._effect = new KeyframeEffect(node, [
+        {offset: 0.0, 'transform': 'translateX(-100%)', 'opacity': 0},
+        {offset: 0.2, 'transform': 'translateX(-80%)', 'opacity': 0},
+        {offset: 0.4, 'transform': 'translateX(-60%)', 'opacity': 0},
+        {offset: 0.6, 'transform': 'translateX(-40%)', 'opacity': 0},
+        {offset: 0.8, 'transform': 'translateX(-20%)', 'opacity': 0.6},
+        {offset: 1.0, 'transform': 'none', 'opacity': 1},
+      ], this.timingFromConfig(config));
+      return this._effect;
+    }
+  });
+</script>
diff --git a/datepicker-slide-from-right-animation.html b/datepicker-slide-from-right-animation.html
new file mode 100644
index 00000000..4f29e61b
--- /dev/null
+++ b/datepicker-slide-from-right-animation.html
@@ -0,0 +1,44 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../neon-animation/neon-animation-behavior.html">
+<link rel="import" href="../neon-animation/web-animations.html">
+
+<!--
+`<datepicker-slide-from-left-animation>` animates the transform of an element from
+`translateX(100%)` to `none` and animates opacity from 0 to 1.
+The `transformOrigin` defaults to `0 50%`.
+Configuration:
+```
+{
+  name: 'datepicker-slide-from-left-animation',
+  node: <node>,
+  transformOrigin: <transform-origin>,
+  timing: <animation-timing>
+}
+```
+-->
+
+<script>
+  Polymer({
+    is: 'datepicker-slide-from-right-animation',
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+    configure: function(config) {
+      var node = config.node;
+      if (config.transformOrigin) {
+        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
+      } else {
+        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
+      }
+      this._effect = new KeyframeEffect(node, [
+        {offset: 0.0, 'transform': 'translateX(100%)', 'opacity': 0},
+        {offset: 0.2, 'transform': 'translateX(80%)', 'opacity': 0},
+        {offset: 0.4, 'transform': 'translateX(60%)', 'opacity': 0},
+        {offset: 0.6, 'transform': 'translateX(40%)', 'opacity': 0},
+        {offset: 0.8, 'transform': 'translateX(20%)', 'opacity': 0.6},
+        {offset: 1.0, 'transform': 'none', 'opacity': 1},
+      ], this.timingFromConfig(config));
+      return this._effect;
+    }
+  });
+</script>
diff --git a/demo/index.html b/demo/index.html
index bbba0a56..58d7f526 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,7 +10,6 @@
   <link rel="import" href="../../paper-slider/paper-slider.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
-  <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
   <link rel="import" href="../../neon-animation/animations/scale-up-animation.html">
   <link rel="import" href="../../neon-animation/animations/fade-out-animation.html">
 
@@ -82,7 +81,6 @@
       font-size: 10px;
     }
 
-
     /* mixin */
     jv-datepicker-dialog#colorDialog {
       background: #424242;
@@ -115,7 +113,7 @@
   </style>
 </head>
 <body unresolved>
-<template is="dom-bind" id="datepicker" strip-whitespace>
+<template is="dom-bind" id="datepicker">
   <div class="horizontal-section-container">
     <div>
       <h4>Simple Styled</h4>
@@ -514,13 +512,6 @@ <h4>Boilerplate Generator</h4>
 
     return _date.getFullYear() + '-' + _zero(_date.getMonth() + 1) + '-' + _zero(_date.getDate());
   }
-
-  // disable context menu on hold (right click on mobile).
-  // function _disableRightClick(ev) {
-  //   ev.preventDefault();
-  //   ev.stopPropagation();
-  //   return false;
-  // }
 </script>
 </body>
 </html>
diff --git a/jv-datepicker-dialog-theme.html b/jv-datepicker-dialog-theme.html
index f8ae7291..d97a77d7 100644
--- a/jv-datepicker-dialog-theme.html
+++ b/jv-datepicker-dialog-theme.html
@@ -7,7 +7,7 @@
         -moz-user-select: none;
         -webkit-user-select: none;
         -ms-user-select: none;
-        display: block;
+        position: fixed !important;
         box-sizing: border-box;
         background: var(--jv-datepicker-dialog-bg, #fafafa);
         @apply(--layout-vertical);
diff --git a/jv-datepicker-dialog.html b/jv-datepicker-dialog.html
index ad969fcb..bedf6bd4 100644
--- a/jv-datepicker-dialog.html
+++ b/jv-datepicker-dialog.html
@@ -1,5 +1,5 @@
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="./jv-datepicker.html">
+<link rel="import" href="jv-datepicker.html">
 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
 <link rel="import" href="../paper-styles/paper-styles.html">
@@ -13,9 +13,6 @@
     <!-- Main codes starts here -->
     <div class="container layout vertical flex-auto">
       <!-- jv-datepicker's code -->
-      <!-- <div class="flex auto" style="background: #9e9e9e;">
-
-      </div> -->
       <jv-datepicker class="flex-auto layout vertical content"
                      first-day-of-week="{{firstDayOfWeek}}"
                      disable-days="{{disableDays}}"
diff --git a/jv-datepicker-theme.html b/jv-datepicker-theme.html
index 28263e5d..1edcb5a6 100644
--- a/jv-datepicker-theme.html
+++ b/jv-datepicker-theme.html
@@ -61,6 +61,10 @@
         padding: 3px 0;
       }
 
+      .pages .calendar-page .full-calendar {
+        overflow: hidden;
+      }
+
       .calendar-page .month-year-bar .selected-month-year {
         text-align: center;
       }
@@ -77,6 +81,7 @@
       }
 
       .calendar-page .full-calendar .calendar-without-weekdays-bar {
+        overflow: hidden;
         padding-bottom: 24px;
       }
 
diff --git a/jv-datepicker.html b/jv-datepicker.html
index 582395d4..54ab3f98 100644
--- a/jv-datepicker.html
+++ b/jv-datepicker.html
@@ -4,7 +4,15 @@
 <link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../neon-animation/neon-animated-pages.html">
-<link rel="import" href="../neon-animation/neon-animations.html">
+<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
+<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
+<link rel="import" href="../neon-animation/animations/slide-left-animation.html">
+<link rel="import" href="../neon-animation/animations/slide-right-animation.html">
+<link rel="import" href="../neon-animation/animations/slide-from-right-animation.html">
+<link rel="import" href="../neon-animation/animations/slide-from-left-animation.html">
+<link rel="import" href="datepicker-slide-from-right-animation.html">
+<link rel="import" href="datepicker-slide-from-left-animation.html">
 <link rel="import" href="../iron-selector/iron-selector.html">
 <link rel="import" href="../iron-list/iron-list.html">
 <link rel="import" href="jv-datepicker-theme.html">
@@ -157,17 +165,17 @@
             </div>
           </div>
 
-          <neon-animatable data-page="year" class="year-page layout vertical">
-              <div class="flex-auto scroll layout vertical year-selector">
-                <iron-list id="yearList" class="flex year-list" items="{{_years}}" as="item" on-tap="_selectYear">
-                  <template>
-                    <div class="layout horizontal center-center year-column">
-                      <span data-year$="{{item.year}}" class$="{{_applyListCls(item.year, _refresh)}}">{{item.year}}</span>
-                    </div>
-                  </template>
-                </iron-list>
-              </div>
-          </neon-animatable>
+          <div data-page="year" class="year-page layout vertical">
+            <div class="flex-auto scroll layout vertical year-selector">
+              <iron-list id="yearList" class="flex year-list" items="{{_years}}" as="item" on-tap="_selectYear">
+                <template>
+                  <div class="layout horizontal center-center year-column">
+                    <span data-year$="{{item.year}}" class$="{{_applyListCls(item.year, _refresh)}}">{{item.year}}</span>
+                  </div>
+                </template>
+              </iron-list>
+            </div>
+          </div>
         </neon-animated-pages>
       </div>
     </div>
@@ -188,6 +196,49 @@
     },
 
     properties: {
+      // Animation Config for calendar.
+      animationConfig: {
+        value: function () {
+          return {
+            'incrementEntry': [
+              {
+                name: 'slide-from-right-animation',
+                node: this.$.days
+              },
+              {
+                name: 'slide-from-right-animation',
+                node: this.$.weekdays
+              },
+              {
+                name: 'datepicker-slide-from-right-animation',
+                node: this.$.selectedMonthYear
+              }
+            ],
+            'decrementEntry': [
+              {
+                name: 'slide-from-left-animation',
+                node: this.$.days
+              },
+              {
+                name: 'slide-from-left-animation',
+                node: this.$.weekdays
+              },
+              {
+                name: 'datepicker-slide-from-left-animation',
+                node: this.$.selectedMonthYear
+              }
+            ],
+            'incrementExit': {
+              name: 'slide-left-animation',
+              node: this.$.days
+            },
+            'decrementExit': {
+              name: 'slide-right-animation',
+              node: this.$.days
+            }
+          }
+        }
+      },
       /**
        * Public properties.
        */
@@ -370,6 +421,11 @@
         value: true,
         readOnly: true
       },
+      // If false, run animation.
+      _animating: {
+        type: Boolean,
+        value: false
+      }
     },
     // Element Lifecycle
     // ready: function () {}, attached: function () {},detached: function () {},
@@ -381,7 +437,12 @@
      * @event format-date
      * @detail {{date: String}}
      */
-
+    behaviors: [
+      Polymer.NeonAnimationRunnerBehavior
+    ],
+    listeners: {
+      'neon-animation-finish': '_onNeonAnimationFinish'
+    },
     observers: [
       '_fireIronResize(_selectedYearOrDate)',
       '_computeCalendar(_activeYear, _activeMonth, firstDayOfWeek)',
@@ -553,8 +614,6 @@
           return _disables.map(function(el) {
             return (el + 7 - _firstDayOfWeek)%7;
           });
-        }else {
-          this.setAttribute('disable-days', 'invalidArr');
         }
       }else {
         // return untouched _disableDays.
@@ -620,12 +679,26 @@
 
     // one month back.
     _prevMonth: function () {
-      this._activeMonth--;
+      if (!this._animating) {
+        this.set('_animating', true);
+        this.cancelAnimation();
+        this.playAnimation('decrementExit');
+        this._activeMonth--;
+        this.cancelAnimation();
+        this.playAnimation('decrementEntry');
+      }
     },
 
     // one month forward.
     _nextMonth: function () {
-      this._activeMonth++;
+      if(!this._animating) {
+        this.set('_animating', true);
+        this.cancelAnimation();
+        this.playAnimation('incrementExit');
+        this._activeMonth++;
+        this.cancelAnimation();
+        this.playAnimation('incrementEntry');
+      }
     },
 
     // Change _activeYear based on transition of value change of _activeMonth.
@@ -787,12 +860,16 @@
     _updateCalendarCls: function(_shiftedDisableDays, _calendar, _firstDayOfWeek) {
       return !this._disableCls;
     },
-
+    // reflectToAttribute for Array.
     _disableDaysFunc: function(newVal, oldVal) {
       // might cause perf issue, leave it for debugging use.
       // might remove in the near future.
       this.setAttribute('disable-days', JSON.stringify(newVal));
     },
+    // Force animation to run completely.
+    _onNeonAnimationFinish: function () {
+      this.set('_animating', false);
+    },
 
 //    _computeWeekNumber: function () {
 //      var now = new Date(),
diff --git a/test/jv-datepicker-test.html b/test/jv-datepicker-test.html
index 2681fc65..fbbe03d3 100644
--- a/test/jv-datepicker-test.html
+++ b/test/jv-datepicker-test.html
@@ -23,74 +23,39 @@
 
     <script>
       'use strict';
-      describe('<compound-datepicker>', function () {
+      describe('<jv-datepicker>', function () {
         var datepicker;
         beforeEach(function () {
           datepicker = fixture('JvDatepicker');
         });
-        context('test inputs for property hours', function () {
-          it('should show correct time in 12-hours when inputs passed in', function () {
-            for (var i = 0; i < 24; i++) {
-              var _h = i % 12;
-              _h = _h === 0 ? 12 : _h;
-              datepicker.setAttribute('hours', i);
-              datepicker.notifyTimeUpdate();
-              if (_h < 10) {
-                expect(datepicker.time.slice(0, 1)).to.be.equal(_h.toString());
-              }else {
-                expect(datepicker.time.slice(0, 2)).to.be.equal(_h.toString());
-              }
-              if (i >= 12) {
-                expect(datepicker.time).to.have.string('PM');
-              }else {
-                expect(datepicker.time).to.have.string('AM');
-              }
-            }
-          });
-          it('should show correct hours in 24-hours when inputs numbers from 0 till 23', function () {
-            datepicker.setAttribute('time-format', 24);
-            for (var i = 0; i < 24; i++) {
-              datepicker.setAttribute('hours', i);
-              expect(datepicker.hours).to.be.equal(i);
-              datepicker.notifyTimeUpdate();
-              expect(datepicker.time).to.not.have.string('M');
-            }
-          });
-          it('should not accept String-typed arguments', function () {
-            datepicker.hours = 'a';
-            expect(datepicker.hours).to.be.within(0, 23);
+
+        context('datepicker has role="datepicker"', function () {
+          it('should show "datepicker" for attribute role', function () {
+            expect(datepicker.getAttribute('role')).to.be.equal('datepicker');
           });
-          it('should not accept number lesser than 0', function () {
-            datepicker.hours = -1;
-            expect(datepicker.hours).to.not.be.below(0);
-          })
-          it('should not accept number greater than 23', function () {
-            datepicker.hours = 99;
-            expect(datepicker.hours).to.be.at.most(23);
+        });
+
+        context('test inputs for correct selected view', function() {
+          it('should select date view on start', function () {
+            var _ironSelector = datepicker.querySelector('iron-selector');
+            expect(_ironSelector.selected).to.be.equal('date');
           });
-          it('should not be undefined when unset', function () {
-            expect(datepicker.hours).to.not.be.undefined;
+
+          it('should select the correct view (year)', function () {
+            var _yearView = datepicker.querySelector('iron-selector #selectionViewYearSelected');
+            _yearView.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+            expect(_yearView.classList.contains('iron-selected'));
           });
-          it('should be equal to current time', function () {
-            var _format = datepicker.timeFormat,
-                _now = new Date().getHours();
-            if (_format >= 24) {
-              expect(datepicker.time.slice(0, 2)).to.be.equal(('0' + _now).slice(-2));
-              expect(datepicker.time).to.not.have.string('M');
-              expect(datepicker.hours).to.be.equal(_now);
-            }else {
-              if (_now < 10) {
-                expect(datepicker.time.slice(0, 1)).to.be.equal(_now.toString());
-                expect(datepicker.hours).to.be.equal(_now);
-              }else {
-                expect(datepicker.time.slice(0, 2)).to.not.be.equal(_now.toString());
-                expect(datepicker.hours).to.be.not.equal(_now);
-              }
-              expect(datepicker.time).to.have.string('M');
-            }
+
+          it('should select the correct view (date)', function () {
+            var _ironSelector = datepicker.querySelector('iron-selector'),
+                _dateView = _ironSelector.querySelector('#selectionViewDateSelected'),
+                _yearView = _ironSelector.querySelector('#selectionViewYearSelected');
+            _yearView.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+            _dateView.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+            expect(_dateView.classList.contains('iron-selected')).to.be.true;
           });
         });
-
       });
     </script>