Event information

[kvanlavieren]

Gabriel,

Is it possible to get the event information directly through the evenEmitter (in isIdle() / isActive())? Currently, I am trying to switch to the active state on keyup (which works) however because IdleVue also listens for this event I get double events every time I keyup is emitted.

[gabrielstuff]

Hey, sorry for missing out the question. Could you give an example usage ?here : https://codesandbox.io/s/vue

[gabrielstuff]

@hugohil any thoughts on this ?

[gabrielstuff]

No example and no more news. closing for now.

[Tzahile]

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! 👍

[gabrielstuff]

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

[Tzahile]

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).