diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index ad3738d16787a19c86f986ed5f95c4f4f7a6bec9..567d2e5e6541eda7895f4dc04ac40b4c3c9dfcdb 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,17 +1,16 @@
import UserCard from '../user_card/user_card.vue'
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
-
-// TODO: separate touch gesture stuff into their own utils if more components want them
-const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
-
-const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
+import GestureService from '../../services/gesture_service/gesture_service'
const SideDrawer = {
props: [ 'logout' ],
data: () => ({
closed: true,
- touchCoord: [0, 0]
+ closeGesture: undefined
}),
+ created () {
+ this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
+ },
components: { UserCard },
computed: {
currentUser () {
@@ -46,13 +45,10 @@ const SideDrawer = {
this.toggleDrawer()
},
touchStart (e) {
- this.touchCoord = touchEventCoord(e)
+ GestureService.beginSwipe(e, this.closeGesture)
},
touchMove (e) {
- const delta = deltaCoord(this.touchCoord, touchEventCoord(e))
- if (delta[0] < -30 && Math.abs(delta[1]) < Math.abs(delta[0]) && !this.closed) {
- this.toggleDrawer()
- }
+ GestureService.updateSwipe(e, this.closeGesture)
}
}
}
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 95ee21b44962ad5a3afc6705a019fc488b332362..e5046496a6a3a6993254a20160fdb7b24492781b 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -2,6 +2,7 @@
<div class="side-drawer-container"
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
>
+ <div class="side-drawer-darken" :class="{ 'side-drawer-darken-closed': closed}" />
<div class="side-drawer"
:class="{'side-drawer-closed': closed}"
@touchstart="touchStart"
@@ -111,16 +112,32 @@
height: 100%;
display: flex;
align-items: stretch;
+ transition-duration: 0s;
+ transition-property: transform;
}
.side-drawer-container-open {
+ transform: translate(0%);
+}
+
+.side-drawer-container-closed {
+ transition-delay: 0.35s;
+ transform: translate(-100%);
+}
+
+.side-drawer-darken {
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ z-index: -1;
transition: 0.35s;
transition-property: background-color;
background-color: rgba(0, 0, 0, 0.5);
}
-.side-drawer-container-closed {
- left: -100%;
+.side-drawer-darken-closed {
background-color: rgba(0, 0, 0, 0);
}
@@ -130,8 +147,9 @@
.side-drawer {
overflow-x: hidden;
- transition: 0.35s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+ transition: 0.35s;
+ transition-property: transform;
margin: 0 0 0 -100px;
padding: 0 0 1em 100px;
width: 80%;
diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
new file mode 100644
index 0000000000000000000000000000000000000000..88a328f3c81b0edb3c72b492228df9f737317893
--- /dev/null
+++ b/src/services/gesture_service/gesture_service.js
@@ -0,0 +1,74 @@
+
+const DIRECTION_LEFT = [-1, 0]
+const DIRECTION_RIGHT = [1, 0]
+const DIRECTION_UP = [0, -1]
+const DIRECTION_DOWN = [0, 1]
+
+const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
+
+const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
+
+const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1])
+
+const perpendicular = v => [v[1], -v[0]]
+
+const dotProduct = (v1, v2) => v1[0] * v2[0] + v1[1] * v2[1]
+
+const project = (v1, v2) => {
+ const scalar = (dotProduct(v1, v2) / dotProduct(v2, v2))
+ return [scalar * v2[0], scalar * v2[1]]
+}
+
+// direction: either use the constants above or an arbitrary 2d vector.
+// threshold: how many Px to move from touch origin before checking if the
+// callback should be called.
+// divergentTolerance: a scalar for much of divergent direction we tolerate when
+// above threshold. for example, with 1.0 we only call the callback if
+// divergent component of delta is < 1.0 * direction component of delta.
+const swipeGesture = (direction, onSwipe, threshold = 30, perpendicularTolerance = 1.0) => {
+ return {
+ direction,
+ onSwipe,
+ threshold,
+ perpendicularTolerance,
+ _startPos: [0, 0],
+ _swiping: false
+ }
+}
+
+const beginSwipe = (event, gesture) => {
+ gesture._startPos = touchEventCoord(event)
+ gesture._swiping = true
+}
+
+const updateSwipe = (event, gesture) => {
+ if (!gesture._swiping) return
+ // movement too small
+ const delta = deltaCoord(gesture._startPos, touchEventCoord(event))
+ if (vectorLength(delta) < gesture.threshold) return
+ // movement is opposite from direction
+ if (dotProduct(delta, gesture.direction) < 0) return
+ // movement perpendicular to direction is too much
+ const towardsDir = project(delta, gesture.direction)
+ const perpendicularDir = perpendicular(gesture.direction)
+ const towardsPerpendicular = project(delta, perpendicularDir)
+ if (
+ vectorLength(towardsDir) * gesture.perpendicularTolerance <
+ vectorLength(towardsPerpendicular)
+ ) return
+
+ gesture.onSwipe()
+ gesture._swiping = false
+}
+
+const GestureService = {
+ DIRECTION_LEFT,
+ DIRECTION_RIGHT,
+ DIRECTION_UP,
+ DIRECTION_DOWN,
+ swipeGesture,
+ beginSwipe,
+ updateSwipe
+}
+
+export default GestureService
diff --git a/test/unit/specs/services/gesture_service/gesture_service.spec.js b/test/unit/specs/services/gesture_service/gesture_service.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a1b009a25b1c612b5c1680758a1a5f46177dac1
--- /dev/null
+++ b/test/unit/specs/services/gesture_service/gesture_service.spec.js
@@ -0,0 +1,120 @@
+import GestureService from 'src/services/gesture_service/gesture_service.js'
+
+const mockTouchEvent = (x, y) => ({
+ touches: [
+ {
+ screenX: x,
+ screenY: y
+ }
+ ]
+})
+
+describe.only('GestureService', () => {
+ describe('swipeGesture', () => {
+ it('calls the callback on a successful swipe', () => {
+ let swiped = false
+ const callback = () => { swiped = true }
+ const gesture = GestureService.swipeGesture(
+ GestureService.DIRECTION_RIGHT,
+ callback
+ )
+
+ GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(200, 100), gesture)
+
+ expect(swiped).to.eql(true)
+ })
+
+ it('calls the callback only once per begin', () => {
+ let hits = 0
+ const callback = () => { hits += 1 }
+ const gesture = GestureService.swipeGesture(
+ GestureService.DIRECTION_RIGHT,
+ callback
+ )
+
+ GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(150, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(200, 100), gesture)
+
+ expect(hits).to.eql(1)
+ })
+
+ it('doesn\'t call the callback on an opposite swipe', () => {
+ let swiped = false
+ const callback = () => { swiped = true }
+ const gesture = GestureService.swipeGesture(
+ GestureService.DIRECTION_RIGHT,
+ callback
+ )
+
+ GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(0, 100), gesture)
+
+ expect(swiped).to.eql(false)
+ })
+
+ it('doesn\'t call the callback on a swipe below threshold', () => {
+ let swiped = false
+ const callback = () => { swiped = true }
+ const gesture = GestureService.swipeGesture(
+ GestureService.DIRECTION_RIGHT,
+ callback,
+ 100
+ )
+
+ GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(150, 100), gesture)
+
+ expect(swiped).to.eql(false)
+ })
+
+ it('doesn\'t call the callback on a perpendicular swipe', () => {
+ let swiped = false
+ const callback = () => { swiped = true }
+ const gesture = GestureService.swipeGesture(
+ GestureService.DIRECTION_RIGHT,
+ callback,
+ 30,
+ 0.5
+ )
+
+ GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(150, 200), gesture)
+
+ expect(swiped).to.eql(false)
+ })
+
+ it('calls the callback on perpendicular swipe if within tolerance', () => {
+ let swiped = false
+ const callback = () => { swiped = true }
+ const gesture = GestureService.swipeGesture(
+ GestureService.DIRECTION_RIGHT,
+ callback,
+ 30,
+ 2.0
+ )
+
+ GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(150, 150), gesture)
+
+ expect(swiped).to.eql(true)
+ })
+
+ it('works with any arbitrary 2d directions', () => {
+ let swiped = false
+ const callback = () => { swiped = true }
+ const gesture = GestureService.swipeGesture(
+ [-1, -1],
+ callback,
+ 30,
+ 0.1
+ )
+
+ GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
+ GestureService.updateSwipe(mockTouchEvent(60, 60), gesture)
+
+ expect(swiped).to.eql(true)
+ })
+ })
+})