Blinking text on database changes

Question

I'm working on a small application that has a message window. The messages are stored in a db and updated by fetching 5 of the latest messages:

scienceTeamMessages = new Meteor.Collection('scienceTeamMessages');

Meteor.methods({
    'sendMessageFromMS': function(message, destination) {

        if (destination === "scienceTeam") {
            scienceTeamMessages.insert({
                message: message,
                createdAt: new Date()
            });
        }
    }
});

These messages are then iterated over in an html template:

{{#each messages}}
    <li><h6>{{message}}</h6></li>
{{/each}}

What I would like, and I can't figure out how to do, is for the latest message to blink a few times, so as to draw attention from the user when a new message arrives. Like, fading in and out from black to red 3 times.

Any suggestions? I know how to do the css, but I am unsure about how to do it on changes to the database. That is why the other solutions on SO won't work in this specific question.

this isn't a duplicate since it's a meteor specific question — Eliezer Steinbock, Jul 09 '15 at 14:24

score 1 · Accepted Answer · edited May 23 '17 at 12:14

For the animations have a look at the link posted in the comments: Imitating a blink tag with CSS3 animations

If you'd like to add animations for a specific time limit use Meteor.setTimeout().

To do animations in Meteor see this Microscope demo example: https://github.com/DiscoverMeteor/Microscope/blob/master/client/templates/application/layout.js

And lastly, if you'd like to perform a certain action when an element is added to a collection, consider using cursor.observe or cursor.observeChanges which is documented here: http://docs.meteor.com/#/full/observe

A lot of links, but hopefully with all that together you can put together the solution you're looking for.

Seems like enough information here for me to figure out something! — Arash Saidi, Jul 10 '15 at 08:59

score 0 · Answer 2 · answered Jul 09 '15 at 15:26

You need to set this logic on your helper :

Template.foo.helpers({
    messages: function() {
      var elements = scienceTeamMessages.find({},{sort: {created_at: -1}}).fetch();
      for (var i = elements.length - 1; i >= 0; i--) {
        elements[i].drawAttention = (i == 0);
      };
      return elements;
    },
})

<template name="foo">
  {{#each messages}}
    <li><h6 {{#if drawAttention}}class="burn-yours-eyes"{{/if}}>{{message}}</h6></li>
  {{/each}}
</template>

I did not tested this code, hope it will help you.

Blinking text on database changes

2 Answers2