<template>
<div class="ion-item-sliding item-wrapper"
@touchstart="onDragStart"
@touchend="onDragEnd"
@touchmove="onDragMove"
:class="activeClass">
<slot></slot>
</div>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
/**
* @component Item/ItemSliding
* @description
*
* ## 列表组件 / ItemSliding滑动选择组件
*
* 这个组件是对Item组件的拓展, 当左右滑动时出现可选择的按钮, 这个组件在部分安卓机上卡顿明显, 使用起来效果不太好, 但是在IOS上很流畅.
*
*
* ### 子组件ItemSlidingOptions
*
* ItemSlidingOptions只能在ItemSliding组件中使用
*
* ### 如何使用
*
* ```
* // 引入
* import { ItemSlidingOptions, ItemSliding } from 'vimo'
* // 安装
* export default{
* components: { ItemSlidingOptions, ItemSliding }
* }
* ```
*
*
* @props {Boolean} disabled - 是否禁用
*
* @fires component:ItemSliding#onDrag
* @fires component:ItemSliding#onSwipe
* @fires component:ItemSliding#onSwipeRight
* @fires component:ItemSliding#onSwipeLeft
*
* @demo #/slidingList
* @see component:ItemOptions
*
* @usage
*
* <ItemSliding>
* <Item>
* <Avatar slot="item-left">
* <img src="./img/avatar-ts-woody.png">
* </Avatar>
* <Label>
* <h2>两边都有按钮</h2>
* <p>试试 ↔️️ 都滑动</p>
* </Label>
* </Item>
* <ItemSlidingOptions side="left">
* <Button color="primary" @click="clickText">
* <Icon name="text"></Icon>
* <span>Text</span>
* </Button>
* <Button color="secondary" @click="clickCall">
* <Icon name="call"></Icon>
* <span>Call</span>
* </Button>
* </ItemSlidingOptions>
* <ItemSlidingOptions side="right">
* <Button color="primary" @click="clickEmail">
* <Icon name="mail"></Icon>
* <span>Email</span>
* </Button>
* </ItemSlidingOptions>
* </ItemSliding>
* */
import { pointerCoord, transitionEnd } from '../../util/util.js'
const SWIPE_MARGIN = 30 * 2 // 触发swipe的值
const ELASTIC_FACTOR = 0.55 // 0.55
const ITEM_SIDE_FLAGS = {
None: 0,
Left: 1,
Right: 2,
Both: 3
}
const SLIDING_STATE = {
Disabled: 2, // 关闭状态
Enabled: 4, // 滑动状态, 不清楚方向和程度
Right: 8, // 向右滑动
Left: 16, // 向左滑动
SwipeRight: 32, // 向右滑动且滑动距离大
SwipeLeft: 64 // 向左滑动且滑动距离大
}
const DIRECTION_NONE = 1
const DIRECTION_LEFT = 2
const DIRECTION_RIGHT = 4
const DIRECTION_UP = 8
const DIRECTION_DOWN = 16
const MAX_DELTAX = 20
export default {
name: 'ItemSliding',
data () {
return {
timer: null,
isDragging: false, // 是否正在左右滑动
isDraggingConfirm: false, // 当次滚动方向确认与否
isDraggingFromStart: false, // 滚动是否从start开始
itemComponent: null, // 父组件Item的实例
ListComponent: null, // 父组件List的实例
leftOptions: null, // 左边的选项 实例
rightOptions: null, // 右边的选项 实例
optsWidthRightSide: 0, // 右边选项的宽度 number
optsWidthLeftSide: 0, // 左边选项的宽度 number
openAmount: 0, // 开启值 number
startX: 0, // 初始的位置 number
sides: 0, // 当前滑动的方向 ItemSideFlags的枚举值 标识options的left/right/both的状态
unregister: null, // itemComponent组件关闭动画的解绑函数
optsDirty: true, // boolean true:还未计算options的宽度，false:已计算
state: SLIDING_STATE.Disabled, // 滑动程度及状态
firstCoord: 0, // {x,y} 记录点击开始的位置，用于计算速度
firstTimestamp: new Date().getTime(), // number 记录点击开始的时间，用于计算速度
activeClass: {} // 根据滑动状态设置active的class类型
}
},
props: {
disabled: Boolean
},
methods: {
/**
* @function getOpenAmount
* @description
* 获取ion-item的开启值
* @return {number}
* */
getOpenAmount () {
return this.openAmount
},
/**
* @function getSlidingPercent
* @description
* 获取开口的百分比
* @return {number}
* */
getSlidingPercent () {
let openAmount = this.openAmount
if (openAmount > 0) {
return openAmount / this.optsWidthRightSide
} else if (openAmount < 0) {
return openAmount / this.optsWidthLeftSide
} else {
return 0
}
},
/**
* @function openLeftOptions
* @description
* 开启左边的选项卡
* @return {*} ins - 开启的组件示例的this，默认是当前组件自己的this
* */
openLeftOptions (ins = this) {
if (ins === this && this.leftOptions) {
if (this.state === SLIDING_STATE.Left || this.state === SLIDING_STATE.SwipeLeft) {
return
}
this.activeClass = {
'active-slide': true
}
this.$nextTick(() => {
if (this.optsDirty) {
this.calculateOptsWidth()
}
if (this.optsWidthLeftSide > 0) {
this.setOpenAmount(-this.optsWidthLeftSide, false)
}
})
}
},
/**
* @function openRightOptions
* @description
* 开启右边的选项卡
* @return {*} ins - 开启的组件示例的this，默认是当前组件自己的this
* */
openRightOptions (ins = this) {
if (ins === this && this.rightOptions) {
if (this.state === SLIDING_STATE.Right || this.state === SLIDING_STATE.SwipeRight) {
return
}
this.activeClass = {
'active-slide': true
}
this.$nextTick(() => {
if (this.optsDirty) {
this.calculateOptsWidth()
}
if (this.optsWidthRightSide > 0) {
this.setOpenAmount(this.optsWidthRightSide, false)
}
})
}
},
/**
* @function close
* @description
* 关闭当前的sliding
* */
close () {
// 关闭的条件：必须是开启状态，并且不是disable状态
if (Math.abs(this.openAmount) > 0 && this.state !== SLIDING_STATE.Disabled) {
this.setOpenAmount(0, true)
}
},
// ------------- @private -------------
/**
* 判断是否能拖动
* @private
* */
canDrag () {
if (this.disabled) return false
// 表示还在动画transition中
if (this.unregister) {
this.unregister()
this.unregister = null
}
return true
},
/**
* onDragStart
* @param {any} ev
* @return {*}
* @private
*/
onDragStart (ev) {
if (!this.canDrag()) return
this.firstCoord = pointerCoord(ev)
this.firstTimestamp = new Date().getTime()
this.startSliding(this.firstCoord.x)
this.$root && this.$root.$emit('onItemSlidingOpen', this)
this.isDraggingFromStart = true
},
/**
* onDragMove
* @param {any} ev
* @return {*}
* @private
*/
onDragMove (ev) {
if (!this.canDrag()) return
if (!this.isDraggingFromStart) return false
let coordX = pointerCoord(ev).x
// 判断当前的移动是滚动还是组件的左右移动
if (!this.isDraggingConfirm && Math.abs(coordX - this.firstCoord.x) > MAX_DELTAX) {
this.isDraggingConfirm = true
let directionCode = this.getDirection(this.firstCoord, pointerCoord(ev))
if (directionCode === DIRECTION_LEFT || directionCode === DIRECTION_RIGHT) {
this.isDragging = true
ev.preventDefault && ev.preventDefault()
} else {
this.isDragging = false
}
}
if (this.isDraggingConfirm && this.isDragging) {
this.moveSliding(coordX)
ev.preventDefault && ev.preventDefault()
}
},
/**
* onDragEnd
* @param {any} ev
* @private
*/
onDragEnd (ev) {
let coordX = pointerCoord(ev).x
let deltaX = (coordX - this.firstCoord.x)
let deltaT = (Date.now() - this.firstTimestamp)
if (deltaX === 0) {
this.close()
} else {
this.endSliding(deltaX / deltaT)
}
this.isDragging = false
this.isDraggingConfirm = false
this.isDraggingFromStart = false
if (this.openAmount === 0 && !this.unregister) {
// 如果点击结束后, 组件未开启, 且未动画, 则设为disabled状态
window.setTimeout(() => {
this.activeClass = {'active-slide': false}
}, 300)
this.state = SLIDING_STATE.Disabled
}
},
/**
* 获取方向
* @private
*/
getDirection (start, end) {
let deltaX = end.x - start.x
let deltaY = end.y - start.y
if (deltaX > 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
return DIRECTION_RIGHT
}
if (deltaX < 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
return DIRECTION_LEFT
}
if (deltaY > 0 && Math.abs(deltaX) < Math.abs(deltaY)) {
return DIRECTION_DOWN
}
if (deltaY < 0 && Math.abs(deltaX) < Math.abs(deltaY)) {
return DIRECTION_UP
}
return DIRECTION_NONE
},
/**
* 初始化：获取子组件实例，ItemSideFlags状态变更
* @private
* */
init () {
// 获取子组件实例
let side = 0 // ITEM_SIDE_FLAGS None=0
let componentIs = (component, name = '') => {
return component.$options && component.$options._componentTag && component.$options._componentTag.toLowerCase() === name.toLowerCase()
}
this.$children.forEach((item) => {
if (componentIs(item, 'item')) {
this.itemComponent = item
}
if (componentIs(item, 'ItemSlidingOptions') && item.side === 'left') {
this.leftOptions = item
side |= this.getSides(item)
}
if (componentIs(item, 'ItemSlidingOptions') && item.side === 'right') {
this.rightOptions = item
side |= this.getSides(item)
}
})
// ITEM_SIDE_FLAGS 的状态记录
this.sides = side // option的可滑动方向 none:0 left:1 right:2 both:3
this.optsDirty = true
// 事件注册
this.$root && this.$root.$on('onItemSlidingOpen', (ins) => {
if (this !== ins) {
this.close()
}
})
this.$root && this.$root.$on('onScroll', () => {
this.close()
})
},
/**
* 设置起始点，因为有原始点与options点
* @param {number} startX
* @private
* */
startSliding (startX) {
if (this.openAmount === 0) {
this.setState(SLIDING_STATE.Enabled)
}
this.startX = startX + this.openAmount
},
/**
* 计算openAmount，算入阻尼，最后执行item定位
* @param {number} x
* @return {number}
* @private
*/
moveSliding (x) {
if (this.optsDirty) {
this.calculateOptsWidth()
return 0
}
let openAmount = (this.startX - x)
switch (this.sides) {
case ITEM_SIDE_FLAGS.Right:
openAmount = Math.max(0, openAmount)
break
case ITEM_SIDE_FLAGS.Left:
openAmount = Math.min(0, openAmount)
break
case ITEM_SIDE_FLAGS.Both:
break
case ITEM_SIDE_FLAGS.None:
return 0
default:
console.assert(false, 'invalid ITEM_SIDE_FLAGS value')
break
}
if (openAmount > this.optsWidthRightSide) {
let optsWidth = this.optsWidthRightSide
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR
} else if (openAmount < -this.optsWidthLeftSide) {
let optsWidth = -this.optsWidthLeftSide
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR
}
this.setOpenAmount(openAmount, false)
return openAmount
},
/**
* 松手后的移动特性决定最终停在哪个位置
* @param {number} velocity 移动速度(惯性)
* @return {number}
* @private
*/
endSliding (velocity) {
// 松手后的停留点
let restingPoint = (this.openAmount > 0)
? this.optsWidthRightSide
: -this.optsWidthLeftSide
// Check if the drag didn't clear the buttons mid-point
// and we aren't moving fast enough to swipe open
let isResetDirection = (this.openAmount > 0) === !(velocity < 0)
let isMovingFast = Math.abs(velocity) > 0.3
let isOnCloseZone = Math.abs(this.openAmount) < Math.abs(restingPoint / 2)
if (swipeShouldReset(isResetDirection, isMovingFast, isOnCloseZone)) {
restingPoint = 0
}
this.setOpenAmount(restingPoint, true)
this.fireSwipeEvent()
return restingPoint
},
/**
* 计算子组件的左右options的宽度
* @private
* */
calculateOptsWidth () {
if (!this.optsDirty) {
return
}
this.optsWidthRightSide = 0
if (this.rightOptions) {
this.optsWidthRightSide = this.rightOptions.width()
}
this.optsWidthLeftSide = 0
if (this.leftOptions) {
this.optsWidthLeftSide = this.leftOptions.width()
}
this.optsDirty = false
},
/**
* 获取options子组件的side属性对应的ItemSideFlags值
* @param {any} ins options子组件的实例
* @private
* */
getSides (ins) {
if (ins.side === 'left') {
return ITEM_SIDE_FLAGS.Left
} else {
return ITEM_SIDE_FLAGS.Right
}
},
/**
* 根据openAmount设置item的开闭位置
* @param {number} openAmount
* @param {boolean} isFinal - 是否关闭(随手拖动 还是 松手关闭)
* @private
* */
setOpenAmount (openAmount, isFinal) {
this.openAmount = openAmount
if (isFinal) {
// 松手关闭状态, 可以是到起始位置, 也可以是到中途点, 全部打回初始状态
this.isDragging = false
this.isDraggingConfirm = false
this.isDraggingFromStart = false
this.unregister && this.unregister()
if (openAmount === 0) {
// 动画过程禁止点击操作
this.unregister = transitionEnd(this.itemComponent.$el, () => {
this.setState(SLIDING_STATE.Disabled)
this.unregister = null
})
this.setItemTransformX(0)
} else {
this.unregister = transitionEnd(this.itemComponent.$el, () => {
this.unregister = null
})
this.setItemTransformX(-openAmount)
}
} else {
// 随手滚动阶段
if (openAmount > 0) {
let state = (openAmount >= (this.optsWidthRightSide + SWIPE_MARGIN))
? SLIDING_STATE.Right | SLIDING_STATE.SwipeRight
: SLIDING_STATE.Right
this.setState(state)
} else if (openAmount < 0) {
let state = (openAmount <= (-this.optsWidthLeftSide - SWIPE_MARGIN))
? SLIDING_STATE.Left | SLIDING_STATE.SwipeLeft
: SLIDING_STATE.Left
this.setState(state)
}
this.setItemTransformX(-openAmount)
/**
* @event component:ItemSliding#onDrag
* @description 正在拖动时触发
* @property {ItemSlidingComponent} this - 当前ItemSliding实例
*/
this.$emit('onDrag', this)
}
},
/**
* @param {String} state
* @private
* */
setState (state) {
if (state === this.state) return
this.timer && window.clearTimeout(this.timer)
this.activeClass = {
'active-slide': true,
'active-options-right': (state & SLIDING_STATE.Right),
'active-options-left': (state & SLIDING_STATE.Left),
'active-swipe-right': (state & SLIDING_STATE.SwipeRight),
'active-swipe-left': (state & SLIDING_STATE.SwipeLeft)
}
// bugFix
if (state === SLIDING_STATE.Disabled) {
this.timer = window.setTimeout(() => {
this.activeClass['active-slide'] = false
}, 16 * 5)
}
this.state = state
},
/**
* 设置子组件ion-item的transformX属性
* @param {number} val
* @private
* */
setItemTransformX (val = 0) {
if (this.itemComponent) {
window.requestAnimationFrame(() => {
this.itemComponent.$el.style.transform = `translate3d(${val >> 0}px, 0px, 0px)`
})
}
},
/**
* 对外发出swipe事件，
* @param {number} val
* @private
* */
fireSwipeEvent () {
if (this.state & SLIDING_STATE.SwipeRight) {
/**
* @event component:ItemSliding#onSwipe
* @description 当滑动超过一定阈值时触发, 这个事件不确定方向
* @property {ItemSlidingComponent} this - 当前ItemSliding实例
*/
/**
* @event component:ItemSliding#onSwipeLeft
* @description 向左滑动 超过按钮最大距离+SWIPE_MARGIN时触
* @property {ItemSlidingComponent} this - 当前ItemSliding实例
*/
this.$emit('onSwipe', this)
this.$emit('onSwipeLeft', this)
} else if (this.state & SLIDING_STATE.SwipeLeft) {
/**
* @event component:ItemSliding#onSwipeRight
* @description 向右滑动 超过按钮最大距离+SWIPE_MARGIN时触发
* @property {ItemSlidingComponent} this - 当前ItemSliding实例
*/
this.$emit('onSwipe', this)
this.$emit('onSwipeRight', this)
}
}
},
mounted () {
// 此时子组件才初始化完毕
this.init()
},
destroyed () {
this.$root && this.$root.$off('onItemSlidingOpen')
this.$root && this.$root.$off('onScroll')
}
}
/**
* 根据传入条件判断是否执行swipeReset
* @param {boolean} isResetDirection
* @param {boolean} isMovingFast
* @param {boolean} isOnResetZone
* @return {boolean}
* @private
*/
function swipeShouldReset (isResetDirection, isMovingFast, isOnResetZone) {
// The logic required to know when the sliding item should close (openAmount=0)
// depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone)
// and it ended up being too complicated to be written manually without errors
// so the truth table is attached below: (0=false, 1=true)
// isCloseDirection | isMovingFast | isOnCloseZone || shouldClose
// 0 | 0 | 0 || 0
// 0 | 0 | 1 || 1
// 0 | 1 | 0 || 0
// 0 | 1 | 1 || 0
// 1 | 0 | 0 || 0
// 1 | 0 | 1 || 1
// 1 | 1 | 0 || 1
// 1 | 1 | 1 || 1
// The resulting expression was generated by resolving the K-map (Karnaugh map):
let shouldClose = (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast)
return shouldClose
}
</script>