Added full animation according to specs, 2 additional animations, uni…

…t test, ready for release
motss · Nov 9, 2015 · 8be5050 · 8be5050
1 parent fd15d51
commit 8be5050
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 94 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jv-datepicker",
-  "version": "1.7.2",
+  "version": "2.0.0",
   "authors": [
     "motss <[email protected]>"
   ],
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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(),