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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| "use strict";
| Object.defineProperty(exports, "__esModule", { value: true });
| var component_1 = require("../common/component");
| var touch_1 = require("../mixins/touch");
| var utils_1 = require("../common/utils");
| var THRESHOLD = 0.3;
| var ARRAY = [];
| (0, component_1.VantComponent)({
| props: {
| disabled: Boolean,
| leftWidth: {
| type: Number,
| value: 0,
| observer: function (leftWidth) {
| if (leftWidth === void 0) { leftWidth = 0; }
| if (this.offset > 0) {
| this.swipeMove(leftWidth);
| }
| },
| },
| rightWidth: {
| type: Number,
| value: 0,
| observer: function (rightWidth) {
| if (rightWidth === void 0) { rightWidth = 0; }
| if (this.offset < 0) {
| this.swipeMove(-rightWidth);
| }
| },
| },
| asyncClose: Boolean,
| name: {
| type: null,
| value: '',
| },
| },
| mixins: [touch_1.touch],
| data: {
| catchMove: false,
| wrapperStyle: '',
| },
| created: function () {
| this.offset = 0;
| ARRAY.push(this);
| },
| destroyed: function () {
| var _this = this;
| ARRAY = ARRAY.filter(function (item) { return item !== _this; });
| },
| methods: {
| open: function (position) {
| var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
| var offset = position === 'left' ? leftWidth : -rightWidth;
| this.swipeMove(offset);
| this.$emit('open', {
| position: position,
| name: this.data.name,
| });
| },
| close: function () {
| this.swipeMove(0);
| },
| swipeMove: function (offset) {
| if (offset === void 0) { offset = 0; }
| this.offset = (0, utils_1.range)(offset, -this.data.rightWidth, this.data.leftWidth);
| var transform = "translate3d(".concat(this.offset, "px, 0, 0)");
| var transition = this.dragging
| ? 'none'
| : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
| this.setData({
| wrapperStyle: "\n -webkit-transform: ".concat(transform, ";\n -webkit-transition: ").concat(transition, ";\n transform: ").concat(transform, ";\n transition: ").concat(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.setData({ catchMove: false });
| },
| startDrag: function (event) {
| if (this.data.disabled) {
| return;
| }
| this.startOffset = this.offset;
| this.touchStart(event);
| },
| noop: function () { },
| onDrag: function (event) {
| var _this = this;
| if (this.data.disabled) {
| return;
| }
| this.touchMove(event);
| if (this.direction !== 'horizontal') {
| return;
| }
| this.dragging = true;
| ARRAY.filter(function (item) { return item !== _this && item.offset !== 0; }).forEach(function (item) { return item.close(); });
| this.setData({ catchMove: true });
| this.swipeMove(this.startOffset + this.deltaX);
| },
| endDrag: function () {
| if (this.data.disabled) {
| return;
| }
| this.dragging = 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,
| name: this.data.name,
| });
| }
| else {
| this.swipeMove(0);
| }
| },
| },
| });
|
|
