How to track a focus change in Meteor.js

Michael Hoeller

I have in my app a page which is a kind of collaborative workspace. On this page I like to show the list of logged-in users and if they currently have a focus on this collaborative workspace or not.

In short: I want to track the focus on a certain page.

Has someone done this before? Or is there a package around? I have found BenjaminRH/meteor-event-hooks but this seem have stopped to be supported for 2 years. I have tried it and run in quite bit of problems.

Michael Hoeller

Here is a complete working solution

I added the package, and set up an extra field on the client

UserPresence.data = function() {
    return {
         focus: Iron.Location.get().path
    };
 }

I read from Meteor.users the users which are relevant and pass them to the view

Template.userstatus.helpers({
    'users':function(){
        var project    = Projects.findOne({_id:Session.get('active_project')});
        var userList   = Meteor.users.find( { $or: [ {_id:{$in:project.invited}},
        {_id:project.userId} ] } );
        return userList;
    }
});

<template name="userstatus">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Teilnehmer Status</h3>
    </div>
    <div class="panel-body">
          {{#each users}}
              {{ >useronline }}
          {{/each}}
    </div>
  </div>
</template>


<template name="useronline">
        <span style="margin-right: 2px;" class="label {{labelClass}}">{{profile.name }} </span>
 </template>

The second template is needed since I need the "this" context in the helper to "implicit join" the data.

The actual display of the users in the states online/offline/idle/focussed) is done in the useronline helper (the classes are plain bootstrap):

Template.useronline.helpers({
     labelClass: function() {
        var UP = UserPresences.findOne( {userId:this._id});

        if (UP === undefined)
            return "label-default";

        if (UP.data.focus === Iron.Location.get().path)
             return "label-warning";

        if (UP.state === 'idle')
            return "label-primary";
        else if (UP.state === 'online')
            return "label-success";
        else
            return "label-default";
    }
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related