Skip to content
Permalink
Browse files

chore(ui): Add examples and json docs for touch (#6102)

  • Loading branch information
pdanpdan authored and rstoenescu committed Jan 14, 2020
1 parent d0c584b commit 4de253171f716dc8838905d6f2091b2c814e1518
@@ -1,6 +1,7 @@
<template>
<div>
<div class="q-layout-padding">
<q-toggle v-model="disable" label="Directive disabled" />
<p class="caption">
Please scroll down to see the image have a short bounce effect when being visible for first time.
</p>
@@ -12,7 +13,7 @@
Scroll Fire below. Reload page to see the bounce effect again.
</p>
<p class="text-center">
<img v-scroll-fire="bounceImage" src="~assets/quasar.jpg" style="width: 200px">
<img v-scroll-fire="computedBounceImage" src="~assets/quasar.jpg" style="width: 200px">
</p>

<p v-for="n in 15" :key="'b_' + n">
@@ -26,9 +27,17 @@
export default {
data () {
return {
disable: false,
loremipsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
},
computed: {
computedBounceImage () {
return this.disable === true ? void 0 : this.bounceImage
}
},
methods: {
bounceImage (el) {
el.classList.add('animate-bounce')
@@ -9,8 +9,9 @@
Notice that on touch capable devices the scrolling is not blocked.
</p>

<q-toggle v-model="disable" label="Directive disabled" />
<div
v-touch-hold.mouse="handleHold"
v-touch-hold.mouse="computedHandler"
@click="onEvt('click')"
@mousedown="onEvt('mousedown')"
@mousemove="onEvt('mousemove')"
@@ -136,13 +137,21 @@ export default {
info: null,
infoExtended: null,
infoCustom: null,
disable: false,
infoTest: null,
holdTestStopPropagation: true,
infoTestCapture: null
}
},
computed: {
computedHandler () {
return this.disable === true ? void 0 : this.handleHold
}
},
methods: {
handleHold ({ evt, ...info }) {
this.info = info
@@ -9,10 +9,11 @@
Page scrolling is prevented, but you can opt out if you wish.
</p>
<div>
<q-toggle v-model="disable" label="Directive disabled" />
Click status: {{ clickStatus }}
</div>
<div
v-touch-pan.prevent.mouse="handlePan"
v-touch-pan.prevent.mouse="computedHandlePan"
@click="e => onEvt('click', e)"
@mousedown="e => onEvt('mousedown', e)"
@mousemove="e => onEvt('mousemove', e)"
@@ -248,6 +249,7 @@ export default {
info: null,
panning: false,
clickStatus: null,
disable: false,
infoRight: null,
panningRight: false,
@@ -269,6 +271,13 @@ export default {
panningTestCapture: false
}
},
computed: {
computedHandlePan () {
return this.disable === true ? void 0 : this.handlePan
}
},
methods: {
handlePan ({ evt, ...info }) {
this.info = info
@@ -11,8 +11,9 @@
Notice that on touch capable devices the scrolling is not blocked if first timer is > 0.
</p>

<q-toggle v-model="disable" label="Directive disabled" />
<div
v-touch-repeat.mouse="handleHold1"
v-touch-repeat.mouse="computedHandleHold1"
@click="onClick"
class="custom-area row flex-center"
>
@@ -128,6 +129,7 @@ export default {
info1: null,
info2: null,
info3: null,
disable: false,
repeatTestStopPropagation: true,
infoTest: null,
@@ -137,6 +139,13 @@ export default {
testN: 0
}
},
computed: {
computedHandleHold1 () {
return this.disable === true ? void 0 : this.handleHold1
}
},
methods: {
handleHold1 ({ evt, ...info }) {
this.info1 = info
@@ -6,8 +6,10 @@
<span class="mobile-only">Swipe</span>
on the area below to see it in action.
</p>

<q-toggle v-model="disable" label="Directive disabled" />
<div
v-touch-swipe.mouse="handleSwipe"
v-touch-swipe.mouse="computedHandleSwipe"
@click="onClick"
class="custom-area row flex-center relative-position"
>
@@ -135,9 +137,17 @@ export default {
infoCustom: null,
infoTest: null,
infoTestCapture: null,
swipeTestStopPropagation: true
swipeTestStopPropagation: true,
disable: false
}
},
computed: {
computedHandleSwipe () {
return this.disable === true ? void 0 : this.handleSwipe
}
},
methods: {
handleSwipe ({ evt, ...info }) {
this.info = info
@@ -5,7 +5,7 @@

"value": {
"type": "Function",
"desc": "Function to call when scrolling occurs",
"desc": "Function to call when scrolling occurs (use a non-function to disable)",
"params": {
"verticalScrollPosition": {
"type": "Number",
@@ -18,6 +18,7 @@
"examples": [ 350 ]
}
},
"returns": null
"returns": null,
"examples": [ "v-scroll=\"fnToCall\"", "v-scroll=\"void 0\"" ]
}
}
@@ -5,7 +5,7 @@

"value": {
"type": "Function",
"desc": "Function to call when scrolling and element comes into the viewport",
"desc": "Function to call when scrolling and element comes into the viewport (use a non-function to disable)",
"params": {
"el": {
"type": "Object",
@@ -14,6 +14,6 @@
}
},
"returns": null,
"examples": [ "v-scroll-fire=\"fnToCall\"" ]
"examples": [ "v-scroll-fire=\"fnToCall\"", "v-scroll-fire=\"void 0\"" ]
}
}
@@ -5,7 +5,7 @@

"value": {
"type": "Function",
"desc": "Function to call after user has hold touch/click for the specified amount of time",
"desc": "Function to call after user has hold touch/click for the specified amount of time (use a non-function to disable)",
"params": {
"details": {
"type": "Object",
@@ -49,7 +49,7 @@
}
},
"returns": null,
"examples": [ "v-touch-hold=\"fnToCall\"" ]
"examples": [ "v-touch-hold=\"fnToCall\"", "v-touch-hold=\"void 0\"" ]
},

"arg": {
@@ -5,7 +5,7 @@

"value": {
"type": "Function",
"desc": "Handler for panning",
"desc": "Handler for panning (use a non-function to disable)",
"params": {
"details": {
"type": "Object",
@@ -110,7 +110,7 @@
}
},
"returns": null,
"examples": [ "v-touch-pan=\"fnToCall\"" ]
"examples": [ "v-touch-pan=\"fnToCall\"", "v-touch-pan=\"void 0\"" ]
},

"modifiers": {
@@ -5,7 +5,7 @@

"value": {
"type": "Function",
"desc": "Handler for touch-repeat",
"desc": "Handler for touch-repeat (use a non-function to disable)",
"params": {
"details": {
"type": "Object",
@@ -68,7 +68,7 @@
}
},
"returns": null,
"examples": [ "v-touch-repeat=\"fnToCall\"" ]
"examples": [ "v-touch-repeat=\"fnToCall\"", "v-touch-repeat=\"void 0\"" ]
},

"arg": {
@@ -5,7 +5,7 @@

"value": {
"type": "Function",
"desc": "Handler for swipe",
"desc": "Handler for swipe (use a non-function to disable)",
"params": {
"details": {
"type": "Object",
@@ -54,7 +54,7 @@
}
},
"returns": null,
"examples": [ "v-touch-swipe=\"fnToCall\"" ]
"examples": [ "v-touch-swipe=\"fnToCall\"", "v-touch-swipe=\"void 0\"" ]
},

"arg": {

0 comments on commit 4de2531

Please sign in to comment.
You can’t perform that action at this time.