Skip to content

Commit e1b0689

Browse files
farfromrefugfarfromrefug
committed
test: updated demo app
1 parent 7324cd9 commit e1b0689

File tree

1 file changed

+82
-102
lines changed

1 file changed

+82
-102
lines changed

‎demo_vue/app/App.vue‎

Lines changed: 82 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
<template>
2-
<Page @navigatedTo="onNavigatedTo">
2+
<Page >
33
<ActionBar title="GestureHandler Demo" />
44

5-
<BottomSheetHolder ref="bottomSheetHolder" :peekerSteps="[70, 120, 400]" :scrollViewTag="12">
6-
<GridLayout ref="testView" backgroundColor="white">
7-
<MDButton ref="button" text="test" @tap="onButtonTap" verticalAlignment="top" />
8-
<Label text="test label for gestures" @doubletap="printGestureResult" @swipe="printGestureResult" marginTop="100" verticalAlignment="top" />
9-
<StackLayout ref="subView" width="50" height="50" backgroundColor="yellow" horizontalAlignment="center" verticalAlignment="center" :translateX="translateX" :translateY="translateY" />
10-
</GridLayout>
11-
<BottomSheet slot="bottomSheet" />
12-
</BottomSheetHolder>
5+
<GridLayout>
6+
<CollectionView
7+
ref="collectionView"
8+
iosOverflowSafeArea="true"
9+
:items="items"
10+
itemIdGenerator="index"
11+
colWidth="50%"
12+
rowHeight="200"
13+
>
14+
<v-template>
15+
<GridLayout rows="*, auto" :backgroundColor="item.color" class="item">
16+
<StackLayout row="1">
17+
<Label row="1" :text="item.name" class="title" />
18+
<Label row="1" :text="item.color" class="subtitle" />
19+
</StackLayout>
20+
</GridLayout>
21+
</v-template>
22+
</CollectionView>
23+
</GridLayout>
1324
</Page>
1425
</template>
1526

@@ -19,114 +30,83 @@ import BaseVueComponent from './BaseVueComponent';
1930
import BottomSheetHolder from './BottomSheetHolder';
2031
import BottomSheet from './BottomSheet';
2132
import Component from 'vue-class-component';
22-
import { GestureState, GestureHandlerTouchEvent, GestureHandlerStateEvent, GestureStateEventData, GestureTouchEventData, HandlerType, Manager } from '@nativescript-community/gesturehandler';
33+
import {
34+
FlingDirection,
35+
FlingGestureHandler,
36+
GestureHandlerStateEvent,
37+
GestureState,
38+
GestureStateEventData,
39+
HandlerType,
40+
Manager,
41+
NativeViewGestureHandler,
42+
} from '@nativescript-community/gesturehandler';
2343
import { View } from '@nativescript/core';
2444
import { Provide } from 'vue-property-decorator';
45+
export const FLING_GESTURE_TAG = 12431;
46+
export const NATIVE_GESTURE_TAG = 12331;
2547
2648
@Component({
2749
components: {
28-
BottomSheetHolder,
29-
BottomSheet
3050
}
3151
})
3252
export default class App extends BaseVueComponent {
33-
// itemList = samples;
34-
translateX = 0;
35-
translateY = 0;
36-
deltaX = 0;
37-
deltaY = 0;
38-
onNavigatedTo() {
39-
// console.log('app', 'onNavigatedTo');
40-
GC();
41-
}
42-
43-
get bottomSheetHolder() {
44-
return this.$refs.bottomSheetHolder as BottomSheetHolder;
45-
}
46-
47-
// mListViewAllowScroll = true;
48-
// get listViewAllowScroll() {
49-
// return this.mListViewAllowScroll;
50-
// }
51-
// onListViewAllowScrollChange(value) {
52-
// console.log('App set listViewAllowScroll', value);
53-
// this.mListViewAllowScroll = value;
54-
// }
55-
// bottomSheetCanPan() {
56-
// console.log('bottomSheetCanPan', this.listViewAllowScroll);
57-
// return this.listViewAllowScroll;
58-
// }
59-
gestureHandler;
60-
tapGestureHandler;
61-
doubleGestureHandler;
62-
mounted() {
63-
super.mounted();
53+
swipeGestureHandler
54+
nativeGestureHandler
55+
items = [
56+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
57+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
58+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
59+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
60+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
61+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
62+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
63+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
64+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
65+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
66+
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
67+
{ index: 11, name: 'CARROT', color: '#e67e22' },
68+
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
69+
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
70+
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
71+
{ index: 15, name: 'ORANGE', color: '#f39c12' },
72+
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
73+
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
74+
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
75+
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
76+
];
77+
initGestures() {
78+
const scrollView = (this.$refs.collectionView as any).nativeView;
6479
const manager = Manager.getInstance();
65-
const gestureHandler = (this.gestureHandler = manager.createGestureHandler(HandlerType.PAN, 10, {
66-
shouldCancelWhenOutside: false
67-
}))
68-
.on(GestureHandlerTouchEvent, this.onGestureTouch, this)
69-
.on(GestureHandlerStateEvent, this.onGestureState, this);
70-
const doubleGestureHandler = (this.doubleGestureHandler = manager.createGestureHandler(HandlerType.TAP, 13, { numberOfTaps: 2 }).on(GestureHandlerStateEvent, this.onDoubleTapGesture, this));
71-
const tapGestureHandler = (this.tapGestureHandler = manager
72-
.createGestureHandler(HandlerType.TAP, 12, {
73-
// waitFor: [13]
74-
})
75-
.on(GestureHandlerStateEvent, this.onTapGesture, this));
76-
// const pinchGestureHandler = (this.tapGestureHandler = manager.createGestureHandler(HandlerType.PINCH, 14).on(GestureHandlerStateEvent, this.onPinchGesture, this));
77-
78-
gestureHandler.attachToView((this.$refs.subView as any).nativeView);
79-
tapGestureHandler.attachToView((this.$refs.subView as any).nativeView);
80-
doubleGestureHandler.attachToView((this.$refs.subView as any).nativeView);
81-
// pinchGestureHandler.attachToView(this.nativeView);
82-
}
83-
onDoubleTapGesture(event: GestureStateEventData) {
84-
// console.log('onDoubleTapGesture', event.data.extraData, event.data.state, event.data.prevState);
85-
if (event.data.state === GestureState.END && event.data.prevState === GestureState.ACTIVE) {
86-
console.log('onDoubleTapGesture', event.data.extraData.x, event.data.extraData.y, event.data.extraData);
87-
}
88-
}
89-
onTapGesture(event: GestureStateEventData) {
90-
// console.log('onTapGesture', event.data.extraData, event.data.state, event.data.prevState);
91-
if (event.data.state === GestureState.END && event.data.prevState === GestureState.ACTIVE) {
92-
console.log('onTapGesture', event.data.extraData.x, event.data.extraData.y, event.data.extraData);
93-
}
94-
}
95-
onPinchGesture(event: GestureStateEventData) {
96-
// console.log('onTapGesture', event.data.extraData, event.data.state, event.data.prevState);
97-
console.log('onPinchGesture', event.data.extraData.positions);
98-
}
99-
onGestureTouch(args: GestureTouchEventData) {
100-
const { state, extraData, view } = args.data;
101-
// console.log('onGestureTouch', state, view, extraData.translationX, extraData.translationY);
102-
this.translateX = extraData.translationX;
103-
this.translateY = extraData.translationY;
80+
const gestureHandler = manager.createGestureHandler(HandlerType.FLING, FLING_GESTURE_TAG, {
81+
// waitFor: [NATIVE_GESTURE_TAG],
82+
simultaneousHandlers: [NATIVE_GESTURE_TAG],
83+
direction: FlingDirection.DIRECTION_RIGHT | FlingDirection.DIRECTION_LEFT,
84+
});
85+
this.swipeGestureHandler = gestureHandler as any;
86+
gestureHandler.on(GestureHandlerStateEvent, this.onGestureState, this);
87+
gestureHandler.attachToView(this.nativeView);
88+
const nativegestureHandler = manager.createGestureHandler(HandlerType.NATIVE_VIEW, NATIVE_GESTURE_TAG, {
89+
// shouldActivateOnStart:true,
90+
disallowInterruption:true,
91+
// waitFor: [FLING_GESTURE_TAG],
92+
// simultaneousHandlers: [FLING_GESTURE_TAG],
93+
// direction: FlingDirection.DIRECTION_RIGHT | FlingDirection.DIRECTION_LEFT,
94+
});
95+
// gestureHandler.on(GestureHandlerStateEvent, this.onGestureState, this);
96+
nativegestureHandler.attachToView(scrollView);
97+
this.nativeGestureHandler = nativegestureHandler as any;
10498
}
10599
onGestureState(args: GestureStateEventData) {
106100
const { state, prevState, extraData, view } = args.data;
107-
// console.log('onGestureState', state, prevState, view, extraData, extraData.translationX);
108-
}
109-
onButtonTap(e) {
110-
const { object, view, ...others } = e;
111-
console.log('onButtonTap', others);
112-
this.bottomSheetHolder.peek();
101+
if (state === GestureState.ACTIVE) {
102+
const direction = extraData.direction as any;
103+
console.log('direction', direction, Date.now())
104+
}
113105
}
106+
mounted() {
107+
this.initGestures();
114108
115-
printGestureResult(e) {
116-
const { object, view, ...others } = e;
117-
console.log('onGesture', others);
118109
}
119-
120-
// onItemTap(item) {
121-
// const module = require(`./examples/${item.component}.vue`).default;
122-
// console.log(`Tapped3 on ${item.title}, ${item.component}`, module);
123-
// this.$navigateTo(module, {
124-
// props: {
125-
// title: item.title,
126-
// description: item.description
127-
// }
128-
// } as any);
129-
// }
130110
}
131111
</script>
132112

0 commit comments

Comments
 (0)