index.js
3.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var component_1 = require("../common/component");
var touch_1 = require("../mixins/touch");
var THRESHOLD = 0.3;
component_1.VantComponent({
props: {
disabled: Boolean,
leftWidth: {
type: Number,
value: 0
},
rightWidth: {
type: Number,
value: 0
},
asyncClose: Boolean
},
mixins: [touch_1.touch],
data: {
catchMove: false
},
created: function () {
this.offset = 0;
},
methods: {
open: function (position) {
var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
var offset = position === 'left' ? leftWidth : -rightWidth;
this.swipeMove(offset);
},
close: function () {
this.swipeMove(0);
},
swipeMove: function (offset) {
if (offset === void 0) { offset = 0; }
this.offset = offset;
var transform = "translate3d(" + offset + "px, 0, 0)";
var transition = this.draging
? 'none'
: '.6s cubic-bezier(0.18, 0.89, 0.32, 1)';
this.set({
wrapperStyle: "\n -webkit-transform: " + transform + ";\n -webkit-transition: " + transition + ";\n transform: " + transform + ";\n transition: " + transition + ";\n "
});
},
swipeLeaveTransition: function () {
var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
var offset = this.offset;
if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
this.open('right');
}
else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
this.open('left');
}
else {
this.swipeMove(0);
}
this.set({ catchMove: false });
},
startDrag: function (event) {
if (this.data.disabled) {
return;
}
this.draging = true;
this.startOffset = this.offset;
this.firstDirection = '';
this.touchStart(event);
},
noop: function () { },
onDrag: function (event) {
if (this.data.disabled) {
return;
}
this.touchMove(event);
if (!this.firstDirection) {
this.firstDirection = this.direction;
this.set({ catchMove: this.firstDirection === 'horizontal' });
}
if (this.firstDirection === 'vertical') {
return;
}
var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
var offset = this.startOffset + this.deltaX;
if ((rightWidth > 0 && -offset > rightWidth) ||
(leftWidth > 0 && offset > leftWidth)) {
return;
}
this.swipeMove(offset);
},
endDrag: function () {
if (this.data.disabled) {
return;
}
this.draging = false;
this.swipeLeaveTransition();
},
onClick: function (event) {
var _a = event.currentTarget.dataset.key, position = _a === void 0 ? 'outside' : _a;
this.$emit('click', position);
if (!this.offset) {
return;
}
if (this.data.asyncClose) {
this.$emit('close', { position: position, instance: this });
}
else {
this.swipeMove(0);
}
}
}
});