minor fixes

Author: calebpitan

src/drawer/snapped-drawer/index.js

@@ -27,7 +27,7 @@ export default class SnappedDrawer {
     this._target = options.TARGET
     this._handlers = null
     this._direction = options.DIRECTION
-    this._callibration = null
+    this._calibration = null
     this._callbacks = null
     this._context = this
     this._id = 0
@@ -58,25 +58,25 @@ export default class SnappedDrawer {
 
     const startHandler = (touchEvent) => {
       const activity = this._drawerManager.getRunningActivity()
-      if (this._callibration &&
+      if (this._calibration &&
         (this._id && activity && activity.id === this._id ||
           !activity && this._isCoolSignal(this._getSignal(touchEvent)))) {
-        this._callibration.start(touchEvent, startfn)
+        this._calibration.start(touchEvent, startfn)
       }
     }
 
     const moveHandler = (touchEvent) => {
       const activity = this._drawerManager.getRunningActivity()
-      if (this._callibration && activity && activity.id === this._id) {
-        this._callibration.move(touchEvent, movefn)
+      if (this._calibration && activity && activity.id === this._id) {
+        this._calibration.move(touchEvent, movefn)
       }
     }
 
     const endHandler = (touchEvent) => {
       const activity = this._drawerManager.getRunningActivity()
-      if (this._callibration && activity && activity.id === this._id) {
+      if (this._calibration && activity && activity.id === this._id) {
         const state = {}
-        this._callibration.end(touchEvent, endfn, state) // state by Ref
+        this._calibration.end(touchEvent, endfn, state) // state by Ref
         this._processThresholdState(state)
       }
     }
@@ -149,7 +149,7 @@ export default class SnappedDrawer {
 
   setContext(ctx) {
     this._context = ctx
-    this._callibration.setContext(ctx)
+    this._calibration.setContext(ctx)
     return this
   }
 
@@ -182,24 +182,24 @@ export default class SnappedDrawer {
   _setCalibration(point, bound) {
     switch (point) {
       case SnappedDrawer.UP:
-        this._callibration = new Top(this._options, bound)
+        this._calibration = new Top(this._options, bound)
         break
       case SnappedDrawer.LEFT:
-        this._callibration = new Left(this._options, bound)
+        this._calibration = new Left(this._options, bound)
         break
       case SnappedDrawer.DOWN:
-        this._callibration = new Bottom(this._options, bound)
+        this._calibration = new Bottom(this._options, bound)
         break
       case SnappedDrawer.RIGHT:
-        this._callibration = new Right(this._options, bound)
+        this._calibration = new Right(this._options, bound)
         break
       default:
         throw RangeError('Direction out of range')
     }
   }
 
   _isCoolSignal(signal) {
-    const size = this._direction === SnappedDrawer.UP || this._direction === SnappedDrawer.DOWN ? WINDOW.screen.availHeight : WINDOW.screen.availWidth
+    const size = this._direction === SnappedDrawer.UP || this._direction === SnappedDrawer.DOWN ? WINDOW.screen.height : WINDOW.screen.width
     switch (this._direction) {
       case SnappedDrawer.UP:
       case SnappedDrawer.LEFT:
@@ -238,7 +238,6 @@ export default class SnappedDrawer {
     }
   }
 
-  // private
   _register(...handlers) {
     this._handlers = handlers
   }

src/nav/drawer.js

@@ -15,7 +15,7 @@ const KILO = 1e3
 const MIN_TIME_TO_OVERRIDE_BELOWTHRESHOLD = 0.5
 const MIN_POSITIVE_DISPLACEMENT = 10
 const MIN_NEGATIVE_DISPLACEMENT = -MIN_POSITIVE_DISPLACEMENT
-const TRANSITION_STYLE = 'linear'
+const TRANSITION_STYLE = 'linear'// 'cubic-bezier(0, 0.5, 0, 1)'
 const EFFECT = 'transition'
 const OVERFLOW = 'overflow'
 const TRANS_TIMING = '0.1s'
@@ -29,7 +29,7 @@ const START = 'start'
 const MOVE = 'move'
 const THRESHOLD = 'threshold'
 const BELOW_THRESHOLD = `below${THRESHOLD}`
-const MAX_TIME = KILO
+const MIN_SPEED = 100
 const MAX_SPEED = 500
 
 class NavDrawer {
@@ -94,7 +94,7 @@ class NavDrawer {
   get _bound() {
     const upperBound = this.elementSize
     if (this.direction === Drawer.RIGHT) {
-      const lowerBound = WINDOW.screen.availWidth - this.element.offsetLeft
+      const lowerBound = WINDOW.screen.width - this.element.offsetLeft
       return new Bound(lowerBound, upperBound)
     }
     const lowerBound = upperBound + this.element.offsetLeft
@@ -121,20 +121,20 @@ class NavDrawer {
       [OVERFLOW]: HIDDEN
     })
     if (this.direction === Drawer.RIGHT) {
-      const WIN_SIZE = WINDOW.screen.availWidth
+      const WIN_SIZE = WINDOW.screen.width
       curPos = WIN_SIZE - curPos
       this._backdrop.setOpacity(curPos / this.elementSize)
       return
     }
     this._backdrop.setOpacity(curPos / this.elementSize)
   }
 
-  _threshold(service, state, stateObj) {
+  _threshold(service, state, stateObj, rect) {
     service.lock()
     const isOpen = state[1] === 'open'
     const options = {
       stateObj,
-      transition: `${this.directionString} ease ${this._calcSpeed(stateObj.TIMING) / KILO}s`
+      transition: `${this.directionString} ${TRANSITION_STYLE} ${this._calcSpeed(stateObj.TIMING, rect.width) / KILO}s`
     }
     if (isOpen) {
       this._hide(options)
@@ -154,7 +154,7 @@ class NavDrawer {
       ? rect.displacementY : rect.displacementX
     const options = {
       stateObj,
-      transition: `${this.directionString} ease ${this._calcSpeed(stateObj.TIMING) / KILO}s`
+      transition: `${this.directionString} ${TRANSITION_STYLE} ${this._calcSpeed(stateObj.TIMING, rect.width) / KILO}s`
     }
     let LOGIC
     if (this.direction === Drawer.LEFT && isClosed || this.direction === Drawer.RIGHT && !isClosed) {
@@ -242,13 +242,18 @@ class NavDrawer {
     }
   }
 
-  _calcSpeed(time) {
-    if (time >= MAX_TIME) {
-      return MAX_SPEED
+  _calcSpeed(time, distance) {
+    const distanceRemain = this.elementSize - distance
+    if (~Math.sign(distanceRemain)) {
+      let newTime = distanceRemain * time / distance
+      if (newTime > MAX_SPEED) {
+        newTime = MAX_SPEED
+      } else if (newTime < MIN_SPEED) {
+        newTime = MIN_SPEED
+      }
+      return newTime
     }
-    const percent = 100
-    const percentage = time / MAX_TIME * percent
-    return percentage / percent * MAX_SPEED
+    return 0
   }
 
   _checkDirection() {

src/util.js

@@ -136,11 +136,11 @@ export function getData(el, dataName) {
 }
 
 export function offsetRight(el) {
-  return WINDOW.screen.availWidth - el.offsetLeft - el.offsetWidth
+  return WINDOW.screen.width - el.offsetLeft - el.offsetWidth
 }
 
 export function offsetBottom(el) {
-  return WINDOW.screen.availHeight - el.offsetTop - el.offsetHeight
+  return WINDOW.screen.height - el.offsetTop - el.offsetHeight
 }
 
 export function resolveThreshold(threshold) {