Comments (6)
Hey, sorry for missing out the question. Could you give an example usage ?here : https://codesandbox.io/s/vue
from idle-vue.
@hugohil any thoughts on this ?
from idle-vue.
No example and no more news. closing for now.
from idle-vue.
Hi gabriel,
I have this need as well, and I could use some help.
In my case, I have a form.
I use idle-vue in order to lazy tabs in the form (I use a bootstrap-collapse).
Nevertheless, I use idle-vue in order to autosave the form.
Currently, the autosave is initiated every time the user is idle.
If I can use event (as in hook onIdle(event) for instance), I can inspect the event and check if it is a typing event, etc.
That way, I could differentiate when the user changes anything in the form (and initiate autosave only then).
I thought of using a variable that changes when @keypress event is fired, but some of my forms are recursive and it's impossible to track all changes..
Thanks in advance!
from idle-vue.
hello !
Could you share part of your code ? A simple example. I understand the use case but I do not get how idle-vue could help. thanks
from idle-vue.
Trying to make it briefly, here it comes:
HTML:
<div>
<template v-for="tab in form">
<template v-if="tab.fields !== undefined">
<b-card>
<b-card-header>
{{ tab.title }}
</b-card-header>
<b-collapse>
<b-card-body>
<recursive-tabs :props="props" /> <!-- Recursive call to myself -->
</b-card-body>
</b-collapse>
</b-card>
</template>
<template v-else>
<b-row>
<b-col>
{{ tab.Name }}
</b-col>
<b-col>
<input type="text" :value="tab.value">
</b-col>
</b-row>
</template>
</template>
</div>
JS:
export default {
name: "recursive-tabs",
// requested help here! I did it with hooks but can work great with computed too;
// see comment under computed
onIdle() {
if (this.mouseWasActive === true) { this.DoSomeWorkWhileIdle(); }
if (this.formdataWasChanged === true) { this.Autosave(); }
}
onActive(event) {
if (event.type === "mousemove") {
this.mouseWasActive = true;
}
if (event.type === "keypress") {
this.formdataWasChanged = true;
}
}
props: [...],
data(){
return {
mouseWasActive: false,
formdataWasChanged : false,
...
}
},
computed: {
// example of using event in computed idle
// DoAutoSaveIfIdle() {
// if (this.isAppIdle !== undefined) {
// if (this.isAppIdle.type === "keypress") {
// this.formdataWasChanged = true;
// }
// }
// }
}
}
Please notice that in the optional commented computed-property (isAppIdle
), I gave an alternative to its value - so that it's undefined if not idle (or if options object has no store field of course), or equals to the event.type if idle (instead of just true or false or undefined).
from idle-vue.
Related Issues (20)
- Error: 'idleVue_onIdle' of undefined HOT 2
- How to pause or stop idle and start again HOT 2
- isAppIdle returns true the moment the app loads/Route refreshes HOT 2
- what is the actual timer in this? I don't understand HOT 2
- This project still maintained? HOT 2
- Difficulty dynamically setting idleTime HOT 3
- reference error: "window is not defined" when using in Nuxt.js HOT 2
- onActive() Hook works only on first tab
- Can the idleTime be set after initialisation? HOT 3
- isIdle for All Tabs HOT 5
- nuxt with idle-view ? HOT 2
- idle-vue seems to prevent reload nuxt app
- Vue 3 support HOT 9
- Tracking idle timeout when the user navigate away to a different domain and return back
- Inquiry about tracking the idle users HOT 1
- Not working when deployed to server. Anyone has this issue? HOT 4
- Update the value of the isIdle in vuex by calling a mutation.
- Does idle-vue support TypeScript?
- Is idle vue supports foe multiple tabs ? HOT 1
- vue3 compatible? Vue.extend is not a function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from idle-vue.