Pulse the template every time it is rendered in Meteor

Question

I would like to have every template pulse every time it is rendered. To have a visual debugging tool to see what is being rendered. So I imagine something like that when a template (a small segment) is rendered, its background color is set to red and then this red color slowly fades into original background color or whatever the background was (even if it was transparent). So if I see that something is all the time red, I know that it is being redrawn all the time.

score 2 · Accepted Answer · answered Jul 18 '13 at 02:01

Based on the code from @Hubert OG and an idea from this blog post, I made the following debugging code for Meteor rendering:

pulseNode = (i, node) ->
  return unless node.style

  $node = $(node)
  prePulseCss = $node.data('prePulseCss') ? node.style.cssText
  prePulseBackgroundColor = $node.data('prePulseBackgroundColor') ? $node.css('backgroundColor')
  $node.data(
    'prePulseCss': prePulseCss
    'prePulseBackgroundColor': prePulseBackgroundColor
  ).css('backgroundColor', 'rgba(255,0,0,0.5)').stop('pulseQueue', true).animate(
    backgroundColor: prePulseBackgroundColor
  ,
    duration: 'slow'
    queue: 'pulseQueue'
    done: (animation, jumpedToEnd) ->
      node.style.cssText = prePulseCss
  ).dequeue 'pulseQueue'

pulse = (template) ->
  $(template.firstNode).nextUntil(template.lastNode).addBack().add(template.lastNode).each pulseNode

_.each Template, (template, name) ->
  oldRendered = template.rendered
  counter = 0

  template.rendered = (args...) ->
    console.debug name, "render count: #{ ++counter }"
    oldRendered.apply @, args if oldRendered
    pulse @

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

Here's a simple blink. Animating background color requires additional libraries, see jQuery animate backgroundColor .

var pulseNode = function(node) {
    if(!node.style) return;
    var prev = node.style['background-color'] || 'rgba(255,0,0,0)';
    $(node).css('background-color', 'red');
    setTimeout(function() {
      $(node).css('background-color', prev);
    }, 1000);            
};

pulse = function(template) {
    for(var node = template.firstNode; true; node = node.nextSibling) {
        pulseNode(node);
        if(node === template.lastNode) return;
    }
}

Now, for each template you want to use this, do

Template.asdf.rendered = function() {
    pulse(this);
}

edited May 23 '17 at 12:11

Community

1
1

answered Jul 17 '13 at 11:04

Hubert OG

19,314
7
45
73

If you are using jQuery for setting static CSS, you can use `animate` as well, without additional libraries, no? – Mitar Jul 17 '13 at 23:45
The issue I am having is that it does not restore the background to original state. – Mitar Jul 17 '13 at 23:46

Pulse the template every time it is rendered in Meteor

2 Answers2