How should repeat-timeout on button make replaced in V1?

paul

I noticed that the repeat-timeout prop on a QBtn is no longer working.
How should this be handled in V1?
thanks a lot
paul.

s.molinari

Looks like multiple clicks aren’t supported. If you need them, please create a feature request (issue) on Github.

Scott

paul

@s-molinari could the v-touch-repeat directive be an alternative?

rstoenescu

https://v1.quasar-framework.org/vue-directives/touch-repeat

s.molinari

@paul - Looks like it is!

Scott

paul

@rstoenescu @s-molinari
Thanks for the help
In pre V1, it was possible to provide a function for calculating the timeout.
Is something similar still possible?

<template>
  <!-- Click and hold to trigger every second -->
  <q-btn @click="clickHandler" :repeat-timeout="1000" label="Click Me" />

  <!-- Click and hold to trigger faster over time -->
  <q-btn @click="clickHandler" :repeat-timeout="repeatFunction" label="Click Me" />
</template>
<script>
  export default {
    methods: {
      clickHandler () {
        console.log('Handler Triggered')
      },
      repeatFunction (timesTriggered) {
        // first time timesTriggered is 0, so we add 1
        // to be sure we don't divide by 0
        return 1000 / (timesTriggered + 1)
      }
    }
  }
</script>

s.molinari

The docs say the input value for the directive should be a function.

<div v-touch-repeat.mouse="myHandler">...</div>

so with the second QBtn from your example above

<q-btn @click="clickHandler" v-touch-repeat.mouse="repeatFunction" label="Click Me" />

Scott

paul

@s-molinari Hi Scott. Thanks a lot.
Maybe we are in the right direction.
The missing piece is now what to do inside the repeatFunction ?
So, basically the repeatFunction should set now the arguments of the directive I think. No sure how that can be done.

s.molinari

What is it you want it to do?

Scott

paul

@s-molinari Well, the same logic as the V17 repeat function example: the ‘longer’ your press the button the ‘faster’ the timeout becomes.
So in fact I would like to generate, in the V1 spirit something like:
v-touch-repeat.mouse:0:500:499:498:497:496:495… 1, So every press increases the speed.

s.molinari

Ah. Hmm… not sure how to get that same effect. Maybe have a look at the directive’s source code. That might get you further?

https://github.com/quasarframework/quasar/blob/dev/quasar/src/directives/TouchRepeat.jss

Scott

paul

@s-molinari good suggestion.
const durations = typeof binding.arg === ‘string’ && binding.arg.length
? binding.arg.split(’:’).map(val => parseInt(val, 10))
: [0, 600, 300]

At first glance, a javascript generator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) could be a good candidate for providing a custom sequence like [500, 499, 498, …] but I can perfectly imagine/understand that the ‘quasar framework board’ has other priorities than looking into that

No More Posting New Topics!

How should repeat-timeout on button make replaced in V1?