feat: stash

treadpit · Aug 10, 2019 · 4d2fa07 · 4d2fa07
1 parent 5d550c3
commit 4d2fa07
Show file tree

Hide file tree

Showing 5 changed files with 521 additions and 254 deletions.
diff --git a/src/component/calendar/index.js b/src/component/calendar/index.js
@@ -1,8 +1,6 @@
-import { warn } from './utils';
+import { Logger, Slide } from './utils';
 import initCalendar, {
   jump,
-  isLeftSlide,
-  isRightSlide,
   whenChangeDate,
   renderCalendar,
   whenMulitSelect,
@@ -11,6 +9,9 @@ import initCalendar, {
   calculatePrevWeekDays
 } from './main.js';
 
+const slide = new Slide();
+const logger = new Logger();
+
 Component({
   options: {
     multipleSlots: true // 在组件定义时的选项中启用多slot支持
@@ -21,14 +22,6 @@ Component({
       value: {}
     }
   },
-  lifetimes: {
-    attached: function() {
-      initCalendar(this, this.data.calendarConfig);
-    }
-  },
-  attached: function() {
-    initCalendar(this, this.data.calendarConfig);
-  },
   data: {
     handleMap: {
       prev_year: 'chooseYear',
@@ -37,6 +30,14 @@ Component({
       next_year: 'chooseYear'
     }
   },
+  lifetimes: {
+    attached: function() {
+      initCalendar(this, this.data.calendarConfig);
+    }
+  },
+  attached: function() {
+    initCalendar(this, this.data.calendarConfig);
+  },
   methods: {
     chooseDate(e) {
       const { type } = e.currentTarget.dataset;
@@ -46,7 +47,7 @@ Component({
     },
     chooseYear(type) {
       const { curYear, curMonth } = this.data.calendar;
-      if (!curYear || !curMonth) return warn('异常：未获取到当前年月');
+      if (!curYear || !curMonth) return logger.warn('异常：未获取到当前年月');
       if (this.weekMode) {
         return console.warn('周视图下不支持点击切换年月');
       }
@@ -61,7 +62,7 @@ Component({
     },
     chooseMonth(type) {
       const { curYear, curMonth } = this.data.calendar;
-      if (!curYear || !curMonth) return warn('异常：未获取到当前年月');
+      if (!curYear || !curMonth) return logger.warn('异常：未获取到当前年月');
       if (this.weekMode) {
         return console.warn('周视图下不支持点击切换年月');
       }
@@ -159,19 +160,23 @@ Component({
      * @param {object} e
      */
     calendarTouchmove(e) {
-      if (isLeftSlide.call(this, e)) {
+      const { gesture } = this.data;
+      if (!this.slideLock) return;
+      if (slide.isLeft(gesture, e.touches[0])) {
         this.setData({
           'calendar.leftSwipe': 1
         });
         if (this.weekMode) return calculateNextWeekDays.call(this);
         this.chooseMonth('next_month');
+        this.slideLock = false;
       }
-      if (isRightSlide.call(this, e)) {
+      if (slide.isRight(gesture, e.touches[0])) {
         this.setData({
           'calendar.rightSwipe': 1
         });
         if (this.weekMode) return calculatePrevWeekDays.call(this);
         this.chooseMonth('prev_month');
+        this.slideLock = false;
       }
     },
     calendarTouchend(e) {

diff --git a/src/component/calendar/index.wxml b/src/component/calendar/index.wxml
@@ -1,5 +1,6 @@
 <view class="flex b tb ac" wx:if="{{calendar}}">
   <view class="calendar pink-color b tb">
+    <!-- 头部操作栏 -->
     <view wx:if="{{!calendarConfig.hideHeadOnWeekMode}}" class="top-handle fs28 b lr ac pc">
       <view class="prev fs36" wx:if="{{calendarConfig.showHandlerOnWeekMode || !calendar.weekMode}}">
         <text class="prev-handle iconfont icon-doubleleft" bindtap="chooseDate" data-type="prev_year"></text>
@@ -11,20 +12,24 @@
         <text class="next-handle iconfont icon-doubleright" bindtap="chooseDate" data-type="next_year"></text>
       </view>
     </view>
+    <!-- 星期栏 -->
     <view class="weeks b lr ac">
       <view class="week fs28" wx:for="{{calendar.weeksCh}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
     </view>
+    <!-- 日历面板主体 -->
     <view class="perspective">
       <view class="days b lr box-wrap {{calendar.leftSwipe ? 'leftRoate' : ''}}  {{calendar.rightSwipe ? 'rightRoate' : ''}}"
         bindtouchstart="calendarTouchstart"
         bindtouchmove="calendarTouchmove"
         bindtouchend="calendarTouchend">
+        <!-- 上月日期格子 -->
         <view wx:if="{{calendar.empytGrids}}" class="grid disable-day-color b ac pc"
           wx:for="{{calendar.empytGrids}}"
           wx:key="{{index}}"
           data-idx="{{index}}">
             <view class="day b ac pc">{{item}}</view>
         </view>
+        <!-- 本月日期格子 -->
         <view class="grid normal-day-color b ac pc"
           wx:for="{{calendar.days}}"
           wx:key="{{index}}"
@@ -48,6 +53,7 @@
               <view class="day border-radius {{(item.week === 0 || item.week === 6) ? 'pink-color' : ''}} {{item.showTodoLabel && !item.choosed ? 'day-circle' : '' }} {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} b ac pc">{{item.day}}</view>
             </view>
         </view>
+        <!-- 下月日期格子 -->
         <view class="grid disable-day-color b ac pc"
           wx:for="{{calendar.lastEmptyGrids}}"
           wx:key="{{index}}"