add active effect

src/css/index.css

@@ -19,6 +19,9 @@
 
 .picker-container {position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:280px;opacity:1;font-family:'PingFang SC', 'HanHei SC', 'Helvetica Neue', 'Helvetica', sans-serif;line-height:1.5;box-shadow:0 0 10px rgba(0, 0, 0, .8);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
 .picker-container i {font-style:normal;}
+.picker-container [data-active] {position:relative;}
+.picker-container [data-active]:after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:-webkit-radial-gradient(circle, #000000 10%, transparent 10.01%);background-image:-o-radial-gradient(circle, #000000 10%, transparent 10.01%);background-image:radial-gradient(circle, #000000 10%, transparent 10.01%);background-repeat:no-repeat;background-position:50%;pointer-events:none;-webkit-background-size:0% 0%;background-size:0% 0%;opacity:0;-webkit-transition:background .5s, opacity 1s;transition: background .5s, opacity 1s;}
+.picker-container .active:after {-webkit-background-size:1000% 1000%;background-size:1000% 1000%;opacity:0.2;}
 
 .picker-head {padding:10px 16px;line-height:1.5;color:#ececec;background-color:#00bcd4;}
 .picker-head-active {color:#fff;}
@@ -43,6 +46,7 @@
 .picker-actions-arrow {z-index:1;position:absolute;top:0;left:8px;right:8px;font-size:14px;line-height:20px;}
 .picker-actions-arrow i {cursor:pointer;float:left;padding:16px 14px;}
 .picker-actions-arrow i:last-child {float:right;}
+.picker-actions-arrow i[data-active]:after {height:42px;top:50%;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);border-radius:50%;}
 
 .picker-bdy {float:left;width:100%;padding:0 8px;margin-right:-100%;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;}
 .picker-bdy-curr {left:100%;}
@@ -52,6 +56,7 @@
 
 .date-picker-days {/*padding-bottom:8px;*/}
 .date-picker-days i {position:relative;width:14.28%;height:12px;padding:6px 0;text-align:center;display:inline-block;line-height:1;vertical-align:top;cursor:pointer;overflow:hidden;}
+.date-picker-days i[data-active]:after {width:24px;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);border-radius:50%;}
 
 .date-picker-days-bdy i span {position:relative;}
 .date-picker-days-bdy i:before {content:"";left:50%;top:50%;width:0;height:0;position:absolute;border-radius:50%;background-color:#00bcd4;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
@@ -73,6 +78,7 @@
 .time-picker-container .picker-head {text-align:center;font-size:38px;font-weight:300;}
 /*.time-picker-container .picker-content {height:200px;}*/
 .time-picker-container .picker-cell {margin-left:-20px;}
+.time-picker-container .picker-cell[data-active]:after {width:30px;height:30px;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:50%;}
 .time-picker-container .picker-cell-inner {margin-left:-12px;}
 .time-picker-container .picker-active {z-index:1;color:#fff;pointer-events:none;}
 .time-picker-container .picker-active b {position:absolute;left:50%;top:50%;margin-top:-1px;margin-left:-1px;width:2px;height:2px;background-color:#fff;border-radius:50%;}
@@ -89,9 +95,10 @@
 .time-picker-minutes-10 .picker-cell {width:80px;margin-left:-40px;}
 
 .picker-hour, .picker-minute {display:inline-block;width:46px;}
+.picker-hour[data-active]:after, .picker-minute[data-active]:after {height:46px;top:5px;}
 .picker-hour {text-align:right;}
 .picker-minute {text-align:left;}
-.picker-cell {position:absolute;color:rgba(0, 0, 0, 0.8);top:0;left:50%;width:40px;height:28px;-webkit-transform-origin:50% 99px;transform-origin:50% 99px;-webkit-transition:all .2s;transition:all .2s;}
+.picker-cell {position:absolute!important;color:rgba(0, 0, 0, 0.8);top:0;left:50%;width:40px;height:28px;-webkit-transform-origin:50% 99px;transform-origin:50% 99px;-webkit-transition:all .2s;transition:all .2s;}
 .picker-cell i {position:absolute;top:50%;left:50%;pointer-events:none;}
 .picker-cell-inner {top:30px;width:24px;height:24px;-webkit-transform-origin:50% 69px;transform-origin:50% 69px;}
 

src/panel/days.js

@@ -19,8 +19,8 @@ utils.extend(DaysPanel.prototype, {
   },
   _renderHead: function () {
     this.picker.head.innerHTML = (
-      '<div class="picker-year" data-click="toYears">' + this.picker.dateTime.parsedNow.year + '</div>' +
-      '<div class="picker-date picker-head-active" data-click="toMonths">' +
+      '<div class="picker-year" data-click="toYears" data-active="active">' + this.picker.dateTime.parsedNow.year + '</div>' +
+      '<div class="picker-date picker-head-active" data-click="toMonths" data-active="active">' +
         utils.formatDate(
           this.picker.dateTime.now,
           this.picker.config.MDW.replace('D', '#')
@@ -56,7 +56,7 @@ utils.extend(DaysPanel.prototype, {
     this.arrow = utils.createElement('div', {
       className: 'picker-actions-arrow'
     })
-    this.arrow.innerHTML = '<i data-click="prevMonth">←</i><i data-click="nextMonth">→</i>'
+    this.arrow.innerHTML = '<i data-click="prevMonth" data-active="active">←</i><i data-click="nextMonth" data-active="active">→</i>'
     this.arrowStyle = this.arrow.style
     this.picker.content.appendChild(this.arrow)
   },
@@ -194,7 +194,11 @@ function buildCalendar (datetime, config, cls) {
                   if (klass) {
                     klass = ' class="' + klass + '"'
                   }
-                  return '<i data-click="selV" data-val="' + d + '" ' + klass + '><span>' + d + '</span></i>'
+                  var attr = ' data-val="' + d + '" '
+                  if (d) {
+                    attr += 'data-active="active" data-click="selV" data-val="' + d + '"'
+                  }
+                  return '<i' + attr + klass + '><span>' + d + '</span></i>'
                 }).join('') +
               '</div>'
             )

src/panel/scroller.js

@@ -26,8 +26,8 @@ utils.extend(ScrollerPanel.prototype, {
   _renderHead: function () {
     var isYears = this.type === 'C'
     this.picker.head.innerHTML = (
-      '<div class="picker-year' + (isYears ? ' picker-head-active' : '') + '"' + (isYears ? '' : ' data-click="toYears"') + '>' + this.picker.dateTime.parsedNow.year + '</div>' +
-      '<div class="picker-date" data-click="toDays">' +
+      '<div class="picker-year' + (isYears ? ' picker-head-active' : '') + '"' + (isYears ? '' : ' data-click="toYears" data-active="active"') + '>' + this.picker.dateTime.parsedNow.year + '</div>' +
+      '<div class="picker-date" data-click="toDays" data-active="active">' +
         utils.formatDate(
           this.picker.dateTime.now,
           this.picker.config.MDW.replace('D', '#')

src/picker/index.js

@@ -22,8 +22,6 @@ function Picker (options, config) {
   }
   this.config = utils.extend(defConfig, config || {})
 
-  this.formatValue = null
-
   this.options = options
   this.needDefFormat = !this.options.format
   this.init()
@@ -103,8 +101,8 @@ utils.extend(pickerPro, {
     this.foot = utils.createElement('div', {
       className: 'picker-foot',
       innerHTML: (
-        '<a href="javascript:;" class="picker-act picker-act-0" data-click="cancel">' + this.config.CANCEL + '</a>' +
-        '<a href="javascript:;" class="picker-act picker-act-1" data-click="ok">' + this.config.OK + '</a>'
+        '<a href="javascript:;" class="picker-act picker-act-0" data-active="active" data-click="cancel">' + this.config.CANCEL + '</a>' +
+        '<a href="javascript:;" class="picker-act picker-act-1" data-active="active" data-click="ok">' + this.config.OK + '</a>'
       )
     })
     this.ele.appendChild(this.foot)
@@ -173,7 +171,21 @@ utils.extend(pickerPro, {
     this.hide()
     this.destroy()
   },
+  __activeStart: function (e) {
+    this.__activeEnd()
+    var targetAction = this._getTargetAction(e, 'active')
+    if (!targetAction.action) {
+      return
+    }
+    this.activeTA = targetAction
+    targetAction.target.classList.add(targetAction.action)
+  },
+  __activeEnd: function () {
+    this.activeTA && this.activeTA.target.classList.remove(this.activeTA.action)
+    this.activeTA = null
+  },
   __touchstart: function (e) {
+    this.__activeStart(e)
     this.__start(e)
     var target = e.target
     var point = e.targetTouches[0]
@@ -194,6 +206,7 @@ utils.extend(pickerPro, {
     }
   },
   __touchend: function (e) {
+    this.__activeEnd(e)
     this.__end(e)
     // check click event
     if (!this.__target) {
@@ -213,6 +226,7 @@ utils.extend(pickerPro, {
     e.__type = 'click'
   },
   __touchcancel: function (e) {
+    this.__activeEnd(e)
     this.__end(e)
     this.__target = null
   },
@@ -222,21 +236,28 @@ utils.extend(pickerPro, {
     this['__' + type](e)
     this._handleEvent(e)
   },
-  _handleEvent: function (e) {
+  _getTargetAction: function (e, type) {
     var target = e.__target || e.target
-    var typeAttr = 'data-' + (e.__type || e.type)
+    var typeAttr = 'data-' + (type || e.__type || e.type)
     var action = ''
     while ((target && target !== this.rootEle) && !(action = target.getAttribute(typeAttr))) {
       target = target.parentNode
     }
-    if (!action) {
+    return {
+      target: target,
+      action: action
+    }
+  },
+  _handleEvent: function (e) {
+    var targetAction = this._getTargetAction(e)
+    if (!targetAction.action) {
       return
     }
-    e.realTarget = target
-    if (this.panel && this.panel[action]) {
-      this.panel[action](e)
-    } else if (this[action]) {
-      this[action](e)
+    e.realTarget = targetAction.target
+    if (this.panel && this.panel[targetAction.action]) {
+      this.panel[targetAction.action](e)
+    } else if (this[targetAction.action]) {
+      this[targetAction.action](e)
     }
   },
   show: function () {
@@ -252,7 +273,7 @@ utils.extend(pickerPro, {
     this.container.removeChild(this.rootEle)
     this.dateTime.destroy()
     this.panel && this.panel.destroy()
-    utils.set2Null(['container', 'rootEle', 'ele', 'head', 'content', 'foot', 'dateTime', 'panel', 'config', 'formatValue', 'lang'], this)
+    utils.set2Null(['container', 'rootEle', 'ele', 'head', 'content', 'foot', 'dateTime', 'panel', 'config', 'lang'], this)
   }
 }, events)